/* ============================================================
   Python 学习台 · 界面样式
   配色：靛蓝主色 + 琥珀（待复习）+ 绿（已完成）+ 紫（已掌握）
   浅色为默认，[data-theme="dark"] 覆盖为暗色
   ============================================================ */

:root {
  --bg:#f3f5f9; --panel:#fff; --panel2:#fafbfd; --line:#e3e7ef; --line2:#eef0f6;
  --ink:#131720; --ink2:#555f70; --ink3:#8a93a5;
  --brand:#3b5bdb; --brand-d:#2f49b0; --brand-l:#eef2ff;
  --amber:#c2740b; --amber-l:#fff6e6;
  --ok:#0f9d58; --ok-l:#e8f7ef;
  --pur:#7c3aed; --pur-l:#f3edff;
  --red:#d8342c; --red-l:#fdeceb;
  --sh:0 1px 2px rgba(19,23,32,.05), 0 6px 20px -8px rgba(19,23,32,.10);
  --sh2:0 2px 6px rgba(19,23,32,.07), 0 18px 40px -18px rgba(19,23,32,.20);
  --r:13px; --r2:9px;
  --side:250px; --top:58px;
}
[data-theme="dark"] {
  --bg:#0e1116; --panel:#161a22; --panel2:#1b202a; --line:#262c37; --line2:#20262f;
  --ink:#e8ecf3; --ink2:#a3adbd; --ink3:#6f7987;
  --brand:#7b93ff; --brand-d:#9aabff; --brand-l:#1c2233;
  --amber:#e5a94a; --amber-l:#2a2113;
  --ok:#3fbb7a; --ok-l:#12291f;
  --pur:#a78bfa; --pur-l:#221c33;
  --red:#f0776e; --red-l:#2d1717;
  --sh:0 1px 2px rgba(0,0,0,.3), 0 6px 20px -10px rgba(0,0,0,.5);
  --sh2:0 2px 6px rgba(0,0,0,.35), 0 18px 40px -18px rgba(0,0,0,.6);
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  background:var(--bg); color:var(--ink);
  font:15px/1.7 "PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--brand); text-decoration:none; }
a:hover { text-decoration:underline; }
button { font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,h4,h5 { margin:0; font-weight:700; letter-spacing:-.01em; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--line); border-radius:6px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:var(--ink3); }

/* ---------------------------------------------------- 骨架 */
.app { display:grid; grid-template-columns:var(--side) 1fr; min-height:100vh; }

.side {
  position:sticky; top:0; height:100vh; overflow-y:auto;
  background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:2px; padding:14px 12px 18px;
}
.brand { display:flex; align-items:center; gap:9px; padding:4px 8px 14px; }
.brand i {
  width:30px; height:30px; border-radius:8px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--brand),#7c3aed); color:#fff;
  display:grid; place-items:center; font-style:normal; font-weight:800; font-size:14px;
}
.brand b { font-size:15px; line-height:1.3; display:block; }
.brand s { display:block; text-decoration:none; font-size:11px; color:var(--ink3); font-weight:400; }

.nav-l { font-size:11px; font-weight:700; color:var(--ink3); letter-spacing:.06em;
         padding:14px 9px 5px; text-transform:uppercase; }
.nv {
  display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--r2);
  color:var(--ink2); font-size:13.5px; font-weight:500; border:none; background:none;
  width:100%; text-align:left; text-decoration:none;
}
.nv:hover { background:var(--panel2); text-decoration:none; color:var(--ink); }
.nv.on { background:var(--brand-l); color:var(--brand-d); font-weight:700; }
[data-theme="dark"] .nv.on { color:var(--brand); }
.nv em { margin-left:auto; font-style:normal; font-size:11.5px; font-weight:700;
         padding:1px 6px; border-radius:20px; background:var(--amber-l); color:var(--amber); }
.nv.on em { background:var(--brand); color:#fff; }
.nv { position:relative; }
.nv .ic { font-style:normal; font-size:13px; width:17px; text-align:center; flex:0 0 auto;
          filter:grayscale(.35); }
.nv.on .ic { filter:none; }
.nv-g { flex:1 1 auto; }
.side-foot { border-top:1px solid var(--line); margin-top:10px; padding:10px 9px 0; }
.sync {
  display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink3); line-height:1.5;
}
.dot { width:7px; height:7px; border-radius:50%; background:var(--ink3); flex:0 0 auto; }
.dot.ok { background:var(--ok); } .dot.bad { background:var(--red); }
.dot.wait { background:var(--amber); animation:pp 1s infinite; }
@keyframes pp { 50% { opacity:.3; } }

.main { min-width:0; display:flex; flex-direction:column; }
.top {
  position:sticky; top:0; z-index:20; height:var(--top);
  display:flex; align-items:center; gap:12px; padding:0 22px;
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.top h1 { font-size:16px; }
.top .sub { font-size:12px; color:var(--ink3); font-weight:400; margin-left:2px; }
.top-sp { flex:1; }
.page { padding:22px 22px 90px; max-width:1120px; width:100%; }
.page.wide { max-width:none; }
.hide { display:none !important; }

/* ---------------------------------------------------- 元件 */
.btn {
  display:inline-flex; align-items:center; gap:6px; height:33px; padding:0 13px;
  border:1px solid var(--line); background:var(--panel); border-radius:var(--r2);
  font-size:13px; font-weight:600; color:var(--ink2); white-space:nowrap;
}
.btn:hover { border-color:var(--ink3); color:var(--ink); }
.btn.pri { background:var(--brand); border-color:var(--brand); color:#fff; }
.btn.pri:hover { background:var(--brand-d); border-color:var(--brand-d); }
.btn.sm { height:27px; padding:0 9px; font-size:12px; }
.btn.gh { border-color:transparent; background:transparent; }
.btn.gh:hover { background:var(--panel2); }
.btn[disabled] { opacity:.45; cursor:not-allowed; }

.chip {
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  padding:2px 8px; border-radius:20px; background:var(--panel2); color:var(--ink2);
  border:1px solid var(--line); white-space:nowrap;
}
.chip.b { background:var(--brand-l); color:var(--brand-d); border-color:transparent; }
.chip.a { background:var(--amber-l); color:var(--amber); border-color:transparent; }
.chip.g { background:var(--ok-l); color:var(--ok); border-color:transparent; }
.chip.p { background:var(--pur-l); color:var(--pur); border-color:transparent; }
.chip.r { background:var(--red-l); color:var(--red); border-color:transparent; }

.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
        box-shadow:var(--sh); }
.card-h { display:flex; align-items:center; gap:10px; padding:14px 17px; border-bottom:1px solid var(--line2); }
.card-h h3 { font-size:14px; }
.card-b { padding:16px 17px; }
.card-b.tight { padding:9px; }
.muted { color:var(--ink3); }
.small { font-size:12.5px; }
.grid { display:grid; gap:14px; }
.g2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sp { flex:1; }
.bar { height:6px; border-radius:6px; background:var(--line2); overflow:hidden; }
.bar > i { display:block; height:100%; border-radius:6px; background:var(--brand); transition:width .35s; }
.bar > i.g { background:var(--ok); } .bar > i.a { background:var(--amber); }
.bar > i.p { background:var(--pur); }

/* ---------------------------------------------------- 仪表盘 */
.hero-dash {
  position:relative; overflow:hidden; border-radius:var(--r); padding:22px 24px;
  background:linear-gradient(120deg,#3b5bdb,#5b46d6 55%,#7c3aed); color:#fff;
  display:flex; align-items:center; gap:26px; box-shadow:var(--sh2);
}
.hero-dash:after {
  content:""; position:absolute; right:-70px; top:-90px; width:280px; height:280px;
  border-radius:50%; background:rgba(255,255,255,.10);
}
.hero-dash:before {
  content:""; position:absolute; right:60px; bottom:-120px; width:200px; height:200px;
  border-radius:50%; background:rgba(255,255,255,.07);
}
.hero-txt { position:relative; z-index:1; flex:1; min-width:0; }
.hero-txt .d { font-size:12px; opacity:.82; letter-spacing:.04em; }
.hero-txt h2 { font-size:23px; margin:5px 0 8px; letter-spacing:-.02em; }
.hero-txt p { margin:0; font-size:13px; opacity:.9; line-height:1.65; }
.hero-txt .k {
  display:inline-block; background:rgba(255,255,255,.16); border-radius:7px;
  padding:3px 9px; font-size:12px; font-weight:600; margin:9px 7px 0 0;
}
.ring { position:relative; z-index:1; width:128px; height:128px; flex:0 0 auto; }
.ring svg { transform:rotate(-90deg); }
.ring .mid {
  position:absolute; inset:0; display:grid; place-content:center; text-align:center; line-height:1.2;
}
.ring .mid b { font-size:27px; font-weight:800; }
.ring .mid s { display:block; font-size:10.5px; opacity:.85; text-decoration:none; }

.stat { padding:13px 15px; }
.stat .n { font-size:22px; font-weight:800; letter-spacing:-.02em; }
.stat .n s { text-decoration:none; font-size:13px; font-weight:700; color:var(--ink3); }
.stat .l { font-size:11.5px; color:var(--ink3); margin-top:1px; }
.stat .l em { font-style:normal; opacity:.75; }

/* ---------------------------------------------------- 复习卡 */
.rv { border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
      padding:15px 17px; box-shadow:var(--sh); }
.rv.due { border-left:3px solid var(--amber); }
.rv.late { border-left:3px solid var(--red); }
.rv-h { display:flex; align-items:flex-start; gap:10px; }
.rv-h .t { font-size:14.5px; font-weight:700; flex:1; }
.rv p { margin:7px 0 0; font-size:12.5px; color:var(--ink2); }
.rv-a { display:flex; gap:7px; margin-top:12px; }
.grade {
  flex:1; height:34px; border-radius:var(--r2); border:1px solid var(--line);
  background:var(--panel); font-size:13px; font-weight:700; color:var(--ink2);
}
.grade:hover { border-color:currentColor; }
.grade.g1:hover,.grade.g1.on { background:var(--red-l); color:var(--red); border-color:var(--red); }
.grade.g2:hover,.grade.g2.on { background:var(--amber-l); color:var(--amber); border-color:var(--amber); }
.grade.g3:hover,.grade.g3.on { background:var(--ok-l); color:var(--ok); border-color:var(--ok); }
.grade small { display:block; font-size:10.5px; font-weight:600; opacity:.7; }

/* ---------------------------------------------------- 今日任务 */
.todo { display:flex; align-items:flex-start; gap:11px; padding:11px 12px; border-radius:var(--r2); }
.todo:hover { background:var(--panel2); }
.todo + .todo { border-top:1px solid var(--line2); }
.todo .bd { flex:1; min-width:0; }
.todo .bd b { font-size:14px; font-weight:600; }
.todo.done .bd b { color:var(--ink3); text-decoration:line-through; }
.todo .bd p { margin:3px 0 0; font-size:12.5px; color:var(--ink2); }
.todo .idx {
  width:24px; height:24px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  font-size:11.5px; font-weight:800; background:var(--brand-l); color:var(--brand-d);
}
.todo.done .idx { background:var(--ok-l); color:var(--ok); }

/* ---------------------------------------------------- 勾选圆点 */
.chk {
  width:21px; height:21px; border-radius:50%; flex:0 0 auto; padding:0;
  border:2px solid var(--line); background:var(--panel);
  display:grid; place-items:center; transition:.15s;
}
.chk:hover { border-color:var(--brand); }
.chk svg { width:11px; height:11px; opacity:0; stroke:#fff; }
.chk.on { background:var(--ok); border-color:var(--ok); }
.chk.on svg { opacity:1; }
.chk.st1 { background:var(--amber); border-color:var(--amber); }
.chk.st1 svg { opacity:1; }
.chk.st2 { background:var(--pur); border-color:var(--pur); }
.chk.st2 svg { opacity:1; }
.chk.big { width:24px; height:24px; }

/* ---------------------------------------------------- 课程树 */
.tree { font-size:13px; }
.tnode { display:flex; align-items:center; gap:7px; padding:6px 8px; border-radius:7px;
         cursor:pointer; color:var(--ink2); }
.tnode:hover { background:var(--panel2); }
.tnode.on { background:var(--brand-l); color:var(--brand-d); font-weight:700; }
.tnode .lb { font-size:10.5px; font-weight:800; color:var(--ink3); width:30px; flex:0 0 auto; }
.tnode .tt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tnode .pg { width:34px; height:4px; border-radius:4px; background:var(--line2); flex:0 0 auto; }
.tnode .pg > i { display:block; height:100%; border-radius:4px; background:var(--ok); }
.tkids { padding-left:9px; border-left:1px solid var(--line); margin-left:14px; }
.tvol { font-size:11.5px; font-weight:800; color:var(--ink3); padding:12px 8px 5px; letter-spacing:.03em; }

/* ---------------------------------------------------- 计划网格 */
.wgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.wcell { border:1px solid var(--line); border-radius:var(--r2); padding:11px 12px;
         background:var(--panel); text-align:left; position:relative; overflow:hidden; }
.wcell:hover { border-color:var(--brand); box-shadow:var(--sh); }
.wcell.on { border-color:var(--brand); background:var(--brand-l); }
.wcell .wt { font-size:11px; font-weight:800; color:var(--ink3); }
.wcell .wn { font-size:13px; font-weight:700; margin:2px 0 7px; line-height:1.4;
             display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wcell .wp { font-size:11px; color:var(--ink3); }
.wcell .stage { position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--brand); opacity:.5; }

/* ---------------------------------------------------- 热力图 */
.heat { display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,11px); gap:3px; }
.heat i { width:11px; height:11px; border-radius:3px; background:var(--line2); display:block; }
.heat i.l1 { background:color-mix(in srgb,var(--ok) 26%,var(--line2)); }
.heat i.l2 { background:color-mix(in srgb,var(--ok) 48%,var(--line2)); }
.heat i.l3 { background:color-mix(in srgb,var(--ok) 72%,var(--line2)); }
.heat i.l4 { background:var(--ok); }

/* ---------------------------------------------------- 讲义阅读 */
.reader { display:grid; grid-template-columns:250px minmax(0,1fr); gap:18px; }
.reader .side { position:sticky; top:var(--top); height:calc(100vh - var(--top)); border:1px solid var(--line);
                border-radius:var(--r); padding:10px; background:var(--panel); }
.note-scope { background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
              padding:20px 24px 30px; box-shadow:var(--sh); font-size:15px; }
.note-scope .hero, .note-scope .nav, .note-scope .foot, .note-scope .wrap > .sec-sub:first-child { display:none; }
.note-scope .wk { margin-bottom:0; }
.note-scope .wk-hd { position:relative; padding-right:80px; }
.note-scope .dy { scroll-margin-top:calc(var(--top) + 14px); }

/* 讲义正文里注入的追踪元件 */
.mark { position:absolute; right:0; top:0; display:flex; align-items:center; gap:6px; }
.note-scope .dy-hd { position:relative; padding-right:118px; }
.note-scope .kp > h5 { padding-right:42px; }
.note-scope .q > b { display:inline-block; padding-right:42px; }
.note-scope .pj > h5 { padding-right:42px; }
.kp, .q, .pj { position:relative; }
.kp > .kpb, .q > .kpb, .pj > .kpb {
  position:absolute; right:10px; top:8px; z-index:3;
}
.kp:hover > .kpb, .q:hover > .kpb, .pj:hover > .kpb { opacity:1; }
.kpb { opacity:.32; transition:opacity .15s; }
.kp.done, .q.done { background:linear-gradient(90deg,var(--ok-l),transparent 55%); }
.note-scope .kp.done { border-radius:8px; }
.note-scope .kp { scroll-margin-top:calc(var(--top) + 14px); }
.note-scope .q { border-radius:9px; }
.dy-hd .dyc { position:absolute; right:0; top:50%; transform:translateY(-50%); }
.kpin { font-size:11.5px; font-weight:700; color:var(--ink3); cursor:pointer;
        padding:2px 7px; border-radius:6px; border:1px solid var(--line); background:var(--panel);
        margin:2px 0; }
.kpin:hover { color:var(--brand); border-color:var(--brand); }
.kpin.a { color:var(--amber); border-color:var(--amber); }
.kpin.p { color:var(--pur); border-color:var(--pur); }
.kpin.g { color:var(--ok); border-color:var(--ok); }
mark.hit { background:var(--amber-l); color:inherit; border-radius:3px; padding:0 2px; }

/* 暗色下也要把讲义正文的配色一起换掉（讲义样式里只有几处硬编码颜色） */
[data-theme="dark"] .note-scope {
  --bg:#0f1319; --card:#171c24; --line:#2a3140; --line2:#222834;
  --tx:#e7ebf2; --tx2:#a4aebe; --tx3:#71798a;
  --pri:#7b93ff; --pri-l:#1c2233; --pri-d:#9aabff;
  --ok:#3fbb7a; --ok-l:#12291f;
  --warn:#e5a94a; --warn-l:#2a2113;
  --dan:#f0776e; --dan-l:#2d1717;
  --pur:#a78bfa; --pur-l:#221c33;
  background:var(--panel); color:var(--tx);
}
[data-theme="dark"] .note-scope pre { background:#0d1117; }
[data-theme="dark"] .note-scope code,
[data-theme="dark"] .note-scope pre code { color:#dde4ef; }
[data-theme="dark"] .note-scope .wk-hd,
[data-theme="dark"] .note-scope .dy-hd { border-color:var(--line); }
@media (max-width:900px) {
  .note-scope { padding:16px 15px 24px; }
  .note-scope .dy-hd { padding-right:42px; }
  .note-scope .kp > h5, .note-scope .q > b, .note-scope .pj > h5 { padding-right:38px; }
}

/* ---------------------------------------------------- 表格 */
table.tb { width:100%; border-collapse:collapse; font-size:13px; }
.tb th, .tb td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line2); }
.tb th { font-size:11.5px; color:var(--ink3); font-weight:700; }
.tb tr:last-child td { border-bottom:none; }

/* ---------------------------------------------------- 输入 */
.inp {
  height:33px; padding:0 11px; border:1px solid var(--line); border-radius:var(--r2);
  background:var(--panel); color:var(--ink); font-size:13px; width:100%;
}
.inp:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-l); }
textarea.inp { height:auto; padding:9px 11px; line-height:1.6; resize:vertical; min-height:70px; }
label.f { display:block; font-size:12px; font-weight:700; color:var(--ink2); margin:0 0 5px; }
.fld { margin-bottom:14px; }
.searchbox { position:relative; flex:1; max-width:330px; }
.searchbox .inp { padding-left:30px; }
.searchbox:before { content:"🔍"; position:absolute; left:9px; top:7px; font-size:12px; opacity:.5; }
.res { position:absolute; left:0; right:0; top:38px; z-index:40; background:var(--panel);
       border:1px solid var(--line); border-radius:var(--r2); box-shadow:var(--sh2);
       max-height:60vh; overflow:auto; }
.res div { padding:8px 11px; font-size:12.5px; cursor:pointer; border-bottom:1px solid var(--line2); }
.res div:hover { background:var(--panel2); }
.res div b { color:var(--brand); font-size:11px; margin-right:6px; }

/* ---------------------------------------------------- 折叠 */
details.acc { border:1px solid var(--line); border-radius:var(--r2); background:var(--panel); }
details.acc + details.acc { margin-top:8px; }
details.acc > summary { padding:11px 14px; font-size:13.5px; font-weight:600; cursor:pointer; list-style:none;
                        display:flex; align-items:center; gap:9px; }
details.acc > summary::-webkit-details-marker { display:none; }
details.acc > summary:before { content:"▸"; color:var(--ink3); font-size:11px; }
details.acc[open] > summary:before { content:"▾"; }
details.acc > .acc-b { padding:2px 14px 14px; font-size:13px; color:var(--ink2); }

/* ---------------------------------------------------- 其他 */
.toast {
  position:fixed; right:20px; bottom:20px; z-index:99; display:flex; flex-direction:column; gap:8px;
}
.toast div {
  background:var(--ink); color:var(--bg); padding:9px 15px; border-radius:9px; font-size:13px;
  box-shadow:var(--sh2); animation:up .25s;
}
[data-theme="dark"] .toast div { background:var(--panel2); color:var(--ink); border:1px solid var(--line); }
.toast div.err { background:var(--red); color:#fff; }
@keyframes up { from { transform:translateY(8px); opacity:0; } }

.skel { background:linear-gradient(90deg,var(--line2),var(--line),var(--line2));
        background-size:200% 100%; animation:sk 1.2s infinite; border-radius:7px; height:14px; }
@keyframes sk { to { background-position:-200% 0; } }

.empty { text-align:center; padding:44px 20px; color:var(--ink3); font-size:13px; }
.empty b { display:block; font-size:15px; color:var(--ink2); margin-bottom:5px; }

.tabs { display:flex; gap:3px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.tab { padding:8px 13px; font-size:13px; font-weight:600; color:var(--ink3);
       border:none; background:none; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab.on { color:var(--brand-d); border-bottom-color:var(--brand); }
[data-theme="dark"] .tab.on { color:var(--brand); }

.mob { display:none; }
@media (max-width:900px) {
  .app { grid-template-columns:1fr; }
  .side { position:fixed; left:0; top:0; z-index:60; width:260px; transform:translateX(-102%);
          transition:transform .22s; box-shadow:var(--sh2); }
  .side.open { transform:none; }
  .mob { display:inline-flex; }
  .reader { grid-template-columns:1fr; }
  .reader .side { position:static; height:auto; }
  .g2,.g3,.g4 { grid-template-columns:1fr; }
  .hero-dash { flex-direction:column; align-items:flex-start; gap:14px; }
  .page { padding:16px 14px 80px; }
  .top { padding:0 14px; }
}