/* ============================================================
   孩子所学的一切 · 知识星图（中国化优化版）
   设计范式：Ethereal Glass 星图 + Editorial Luxury 浅色
   双主题 · 双布局 · 玻璃知识窗
   ============================================================ */

:root {
  --bg-0: #060912; --bg-1: #0a0f1e; --bg-2: #0e1528;
  --ink: #EAEEFB; --ink-soft: rgba(234,238,251,0.66); --ink-faint: rgba(234,238,251,0.40); --ink-ghost: rgba(234,238,251,0.22);
  --glass: rgba(16,22,40,0.55); --glass-strong: rgba(14,19,36,0.78);
  --hair: rgba(255,255,255,0.08); --hair-strong: rgba(255,255,255,0.15);
  --accent: #8B9CFF; --accent-soft: rgba(139,156,255,0.16);
  --ok: #34D399; --warn: #FBBF24;
  --f-serif: "Noto Serif SC","Songti SC",serif;
  --f-sans: "Noto Sans SC",system-ui,-apple-system,sans-serif;
  --f-mono: "Space Grotesk","Noto Sans SC",ui-monospace,sans-serif;
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px;
  --shadow-soft: 0 18px 60px -20px rgba(0,0,0,0.7); --shadow-deep: 0 30px 90px -30px rgba(0,0,0,0.85);
  --ease: cubic-bezier(0.32,0.72,0,1); --ease-out: cubic-bezier(0.16,1,0.3,1);
  --z-canvas:0; --z-grain:1; --z-minimap:10; --z-sidebar:12; --z-hint:12; --z-topbar:30;
  --z-sheet:35; --z-panel:40; --z-tooltip:50; --z-help:60; --z-loader:80; --z-intro:90;
  --canvas-bg: #060912; --node-core: #fff;
}

:root[data-theme="light"] {
  --bg-0: #F8F6F1; --bg-1: #F2EFEA; --bg-2: #EDE9E3;
  --ink: #1C1917; --ink-soft: rgba(28,25,23,0.68); --ink-faint: rgba(28,25,23,0.42); --ink-ghost: rgba(28,25,23,0.22);
  --glass: rgba(255,255,255,0.62); --glass-strong: rgba(255,255,253,0.85);
  --hair: rgba(28,25,23,0.09); --hair-strong: rgba(28,25,23,0.16);
  --accent: #6366F1; --accent-soft: rgba(99,102,241,0.14);
  --ok: #059669; --warn: #D97706;
  --shadow-soft: 0 18px 60px -20px rgba(0,0,0,0.12); --shadow-deep: 0 30px 90px -30px rgba(0,0,0,0.18);
  --canvas-bg: #F8F6F1; --node-core: #1C1917;
}

* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; background:var(--bg-0); color:var(--ink); font-family:var(--f-sans); -webkit-font-smoothing:antialiased; overflow:hidden; }
body { position:fixed; inset:0; min-height:100dvh; }

.aurora { position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;
  background:radial-gradient(60vw 60vw at 18% 12%,rgba(91,141,239,0.16),transparent 60%),radial-gradient(55vw 55vw at 85% 22%,rgba(192,132,252,0.14),transparent 60%),radial-gradient(70vw 70vw at 60% 95%,rgba(45,212,191,0.10),transparent 62%); }
:root[data-theme="light"] .aurora { background:radial-gradient(60vw 60vw at 18% 12%,rgba(139,156,255,0.08),transparent 60%),radial-gradient(55vw 55vw at 85% 22%,rgba(192,132,252,0.06),transparent 60%),radial-gradient(70vw 70vw at 60% 95%,rgba(45,212,191,0.05),transparent 62%); }
.grain { position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

#graph-canvas { position:fixed;inset:0;width:100vw;height:100dvh;z-index:var(--z-canvas);cursor:grab;touch-action:none;display:block; }
#graph-canvas:active { cursor:grabbing; }

.glass { background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);border:1px solid var(--hair);box-shadow:var(--shadow-soft),inset 0 1px 0 rgba(255,255,255,0.06); }
:root[data-theme="light"] .glass { box-shadow:var(--shadow-soft),inset 0 1px 0 rgba(255,255,255,0.5); }

/* ===== Loader ===== */
.loader { position:fixed;inset:0;z-index:var(--z-loader);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--bg-0);transition:opacity .7s var(--ease),visibility .7s; }
.loader.hide { opacity:0;visibility:hidden;pointer-events:none; }
.loader-orb { width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--accent) 55%,transparent 72%);box-shadow:0 0 40px 6px rgba(139,156,255,0.5);animation:pulse 1.6s var(--ease) infinite; }
@keyframes pulse { 0%,100%{transform:scale(0.9);opacity:0.8} 50%{transform:scale(1.08);opacity:1} }
.loader-text { font-family:var(--f-serif);font-size:18px;letter-spacing:.04em; }
.loader-sub { font-size:13px;color:var(--ink-faint);font-family:var(--f-mono); }

/* ===== Intro ===== */
.intro { position:fixed;inset:0;z-index:var(--z-intro);display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto;
  background:radial-gradient(80vw 80vw at 50% 38%,rgba(12,17,34,0.55),rgba(6,9,18,0.92));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:opacity .9s var(--ease),visibility .9s,transform .9s var(--ease); }
:root[data-theme="light"] .intro { background:radial-gradient(80vw 80vw at 50% 38%,rgba(248,246,241,0.7),rgba(248,246,241,0.95)); }
.intro.hide { opacity:0;visibility:hidden;transform:scale(1.04);pointer-events:none; }
.intro-inner { max-width:760px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px;margin:auto;padding:40px 0; }
.eyebrow { font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;padding:7px 16px;border-radius:999px;border:1px solid var(--hair-strong);color:var(--ink-soft);background:rgba(255,255,255,0.03); }
.intro-title { font-family:var(--f-serif);font-weight:900;font-size:clamp(44px,9vw,92px);line-height:1.02;letter-spacing:.02em;background:linear-gradient(180deg,#fff 0%,#C7D0F5 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 60px rgba(139,156,255,0.25); }
:root[data-theme="light"] .intro-title { background:linear-gradient(180deg,#1C1917 0%,#6366F1 100%);-webkit-background-clip:text;background-clip:text; }
.intro-sub { font-size:clamp(15px,2.2vw,17px);line-height:1.9;color:var(--ink-soft);max-width:640px; }
.intro-sub strong { color:var(--ink);font-family:var(--f-mono);font-weight:600; }
.intro-stats { display:flex;gap:14px;flex-wrap:wrap;justify-content:center; }
.stat { display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 26px;border-radius:var(--r-md);background:rgba(255,255,255,0.03);border:1px solid var(--hair); }
.stat b { font-family:var(--f-mono);font-size:28px;font-weight:600;color:var(--ink); }
.stat span { font-size:12px;color:var(--ink-faint);letter-spacing:.06em; }
.intro-actions { display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center; }
.intro-foot { font-size:12px;color:var(--ink-ghost);margin-top:4px;line-height:1.85;max-width:620px; }
.intro-foot b { color:var(--ink-faint);font-weight:600; }

.btn-primary { display:inline-flex;align-items:center;gap:14px;padding:15px 22px 15px 30px;border-radius:999px;border:1px solid rgba(255,255,255,0.14);background:linear-gradient(180deg,rgba(139,156,255,0.22),rgba(139,156,255,0.08));color:#fff;font-family:var(--f-sans);font-size:16px;font-weight:500;cursor:pointer;transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .4s;box-shadow:0 12px 40px -12px rgba(139,156,255,0.6); }
:root[data-theme="light"] .btn-primary { background:linear-gradient(180deg,rgba(99,102,241,0.18),rgba(99,102,241,0.06));color:var(--ink);border-color:rgba(99,102,241,0.3);box-shadow:0 12px 40px -12px rgba(99,102,241,0.3); }
.btn-primary:hover { background:linear-gradient(180deg,rgba(139,156,255,0.34),rgba(139,156,255,0.14)); }
.btn-primary:active { transform:scale(0.97); }
.btn-icon { width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,0.12);font-size:15px;transition:transform .4s var(--ease); }
.btn-primary:hover .btn-icon { transform:translate(3px,-3px) scale(1.06); }
.btn-ghost { padding:14px 22px;border-radius:999px;border:1px solid var(--hair-strong);background:transparent;color:var(--ink-soft);font-family:var(--f-sans);font-size:14.5px;cursor:pointer;transition:color .3s,background .3s,border-color .3s; }
.btn-ghost:hover { color:var(--ink);background:rgba(128,128,128,0.08); }

/* ===== Topbar ===== */
.topbar { position:fixed;top:16px;left:16px;right:16px;z-index:var(--z-topbar);height:60px;padding:0 14px 0 18px;border-radius:999px;display:flex;align-items:center;gap:14px; }
.brand { display:flex;align-items:center;gap:9px;flex-shrink:0; }
.brand-dot { width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--accent) 60%,transparent 75%);box-shadow:0 0 14px 2px rgba(139,156,255,0.7); }
.brand-name { font-family:var(--f-serif);font-weight:700;font-size:17px;letter-spacing:.02em; }
.brand-badge { font-size:10px;font-family:var(--f-mono);letter-spacing:.08em;padding:3px 7px;border-radius:6px;color:var(--accent);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); }
.filters { flex:1;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px;mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent); }
.filters::-webkit-scrollbar { display:none; }
.chip { flex-shrink:0;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;cursor:pointer;font-size:13px;font-weight:500;white-space:nowrap;color:var(--ink-soft);background:rgba(255,255,255,0.04);border:1px solid var(--hair);transition:color .3s var(--ease),background .3s var(--ease),border-color .3s,transform .25s var(--ease); }
.chip:hover { color:var(--ink);transform:translateY(-1px); }
.chip .dot { width:8px;height:8px;border-radius:50%;background:var(--chip-c);box-shadow:0 0 8px 1px var(--chip-c); }
.chip.dim { opacity:0.4; }
.topbar-actions { display:flex;align-items:center;gap:10px;flex-shrink:0; }

/* 布局分段控件 */
.seg { display:flex;padding:3px;border-radius:999px;background:rgba(128,128,128,0.08);border:1px solid var(--hair); }
.seg-btn { padding:6px 13px;border:none;border-radius:999px;background:transparent;color:var(--ink-faint);font-family:var(--f-sans);font-size:12.5px;cursor:pointer;transition:background .3s var(--ease),color .3s; }
.seg-btn:hover { color:var(--ink); }
.seg-btn.active { background:var(--accent-soft);color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent); }

.search { position:relative;display:flex;align-items:center; }
.search-ico { position:absolute;left:12px;width:16px;height:16px;pointer-events:none;fill:none;stroke:var(--ink-faint);stroke-width:2;stroke-linecap:round; }
#search-input { width:200px;height:40px;padding:0 14px 0 36px;border-radius:999px;background:rgba(255,255,255,0.05);border:1px solid var(--hair);color:var(--ink);font-family:var(--f-sans);font-size:13.5px;outline:none;transition:border-color .3s,background .3s,width .35s var(--ease); }
#search-input::placeholder { color:var(--ink-ghost); }
#search-input:focus { border-color:var(--hair-strong);background:rgba(255,255,255,0.08);width:240px; }
.search-results { position:absolute;top:48px;right:0;width:330px;max-height:380px;overflow-y:auto;border-radius:var(--r-md);padding:6px;background:var(--glass-strong);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--hair-strong);box-shadow:var(--shadow-deep);z-index:60; }
.search-results.inline { position:static;width:100%;max-height:260px;margin-bottom:14px; }
.search-results .sr-item { padding:10px 12px;border-radius:var(--r-sm);cursor:pointer;display:flex;flex-direction:column;gap:2px;transition:background .2s; }
.search-results .sr-item:hover,.search-results .sr-item[aria-selected="true"] { background:rgba(128,128,128,0.14); }
.search-results .sr-name { font-size:13.5px;color:var(--ink); }
.search-results .sr-name em { font-style:normal;color:var(--accent);font-weight:600; }
.search-results .sr-meta { font-size:11px;color:var(--ink-faint);display:flex;gap:8px;align-items:center; }
.search-results .sr-empty { padding:16px;text-align:center;color:var(--ink-faint);font-size:13px; }
.search-results .sr-hint { padding:8px 12px 4px;font-size:10.5px;color:var(--ink-ghost);font-family:var(--f-mono);letter-spacing:.06em; }

.zoom-ctl { display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(128,128,128,0.06);border:1px solid var(--hair); }
.icon-btn { width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;background:transparent;color:var(--ink-soft);font-size:17px;line-height:1;display:grid;place-items:center;transition:background .25s,color .25s,transform .2s var(--ease); }
.icon-btn:hover { background:rgba(128,128,128,0.12);color:var(--ink); }
.icon-btn:active { transform:scale(0.92); }
.icon-btn:focus-visible { outline:2px solid var(--accent);outline-offset:2px; }
.menu-btn { display:none; }

/* ===== 左侧边栏 ===== */
.sidebar { position:fixed;left:16px;top:84px;bottom:16px;width:238px;z-index:var(--z-sidebar);border-radius:var(--r-lg);padding:16px 14px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--hair-strong) transparent;display:flex;flex-direction:column;gap:18px; }
.sidebar::-webkit-scrollbar { width:6px; }
.sidebar::-webkit-scrollbar-thumb { background:var(--hair-strong);border-radius:6px; }
.sb-label { font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:10px; }
.age-hint { font-size:10px;letter-spacing:.04em;text-transform:none;color:var(--ink-ghost);font-weight:400;margin-left:6px; }

.legend-list { list-style:none;display:flex;flex-direction:column;gap:5px; }
.legend-list li { display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-soft);cursor:pointer;transition:color .25s,opacity .25s;padding:4px 6px;border-radius:var(--r-sm); }
.legend-list li:hover { color:var(--ink);background:rgba(128,128,128,0.06); }
.legend-list li.dim { opacity:0.35; }
.legend-list .dot { width:9px;height:9px;border-radius:50%;flex-shrink:0; }
.legend-list .legend-cnt { margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--ink-faint); }

.age-quick { display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px; }
.age-q { padding:5px 10px;border-radius:999px;border:1px solid var(--hair);background:rgba(128,128,128,0.04);color:var(--ink-soft);font-size:11px;font-family:var(--f-mono);cursor:pointer;transition:background .25s,color .25s,border-color .25s; }
.age-q:hover { background:rgba(128,128,128,0.1);color:var(--ink); }
.age-q.active { background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:color-mix(in srgb,var(--accent) 50%,transparent);color:var(--ink); }
.age-dial { display:flex;gap:3px;justify-content:center;flex-wrap:wrap; }
.age-dial .ad-circle { width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-family:var(--f-mono);color:var(--ink-faint);border:1px solid var(--hair);background:rgba(128,128,128,0.03);cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .2s var(--ease); }
.age-dial .ad-circle:hover { background:rgba(128,128,128,0.1);color:var(--ink);transform:scale(1.08); }
.age-dial .ad-circle.active { background:color-mix(in srgb,var(--accent) 22%,transparent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--ink); }

/* 掌握进度卡 */
.progress-card { display:flex;gap:14px;align-items:center;padding:12px;border-radius:var(--r-md);background:rgba(128,128,128,0.045);border:1px solid var(--hair); }
.ring-wrap { position:relative;width:66px;height:66px;flex-shrink:0; }
.ring { width:66px;height:66px;transform:rotate(-90deg); }
.ring-bg { fill:none;stroke:rgba(128,128,128,0.18);stroke-width:4; }
.ring-fg { fill:none;stroke:var(--ok);stroke-width:4;stroke-linecap:round;stroke-dasharray:119.38;stroke-dashoffset:119.38;transition:stroke-dashoffset .7s var(--ease); }
.ring-txt { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px; }
.ring-txt b { font-family:var(--f-mono);font-size:14px;color:var(--ink); }
.ring-txt span { font-size:8.5px;font-family:var(--f-mono);color:var(--ink-faint); }
.prog-meta { display:flex;flex-direction:column;gap:5px;flex:1;min-width:0; }
.prog-line { font-size:11px;color:var(--ink-faint); }
.prog-line b { color:var(--ink);font-family:var(--f-mono); }
.mini-btn { padding:6px 9px;border-radius:var(--r-sm);border:1px solid var(--hair);background:rgba(128,128,128,0.06);color:var(--ink-soft);font-family:var(--f-sans);font-size:11px;cursor:pointer;transition:background .25s,color .25s;text-align:center; }
.mini-btn:hover { background:rgba(128,128,128,0.14);color:var(--ink); }
.mini-btn.ghost { background:transparent; }
.mini-btn.ghost:hover { background:rgba(128,128,128,0.1); }

.stats-grid { display:grid;grid-template-columns:1fr 1fr;gap:6px; }
.sg-item { display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 6px;border-radius:var(--r-sm);background:rgba(128,128,128,0.04);border:1px solid var(--hair); }
.sg-item b { font-family:var(--f-mono);font-size:18px;font-weight:600;color:var(--ink); }
.sg-item span { font-size:10px;color:var(--ink-faint);letter-spacing:.04em; }

.subject-bars { display:flex;flex-direction:column;gap:7px; }
.sb-row { display:flex;align-items:center;gap:7px; }
.sb-row .sb-name { font-size:11px;color:var(--ink-soft);width:62px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.sb-row .sb-track { flex:1;height:7px;border-radius:4px;background:rgba(128,128,128,0.08);overflow:hidden; }
.sb-row .sb-fill { height:100%;border-radius:4px;transition:width .6s var(--ease); }
.sb-row .sb-pct { font-family:var(--f-mono);font-size:10px;color:var(--ink-faint);width:30px;text-align:right; }

.help-btn { width:100%;padding:9px;border-radius:var(--r-sm);border:1px solid var(--hair);background:rgba(128,128,128,0.04);color:var(--ink-soft);font-size:12px;font-family:var(--f-sans);cursor:pointer;transition:background .25s,color .25s;margin-top:auto; }
.help-btn:hover { background:rgba(128,128,128,0.1);color:var(--ink); }

/* ===== 使用说明弹窗 ===== */
.help-overlay { position:fixed;inset:0;z-index:var(--z-help);display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,0.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s; }
:root[data-theme="light"] .help-overlay { background:rgba(0,0,0,0.25); }
.help-overlay.open { opacity:1;visibility:visible; }
.help-card { position:relative;max-width:660px;width:100%;border-radius:var(--r-xl);padding:32px 36px;max-height:85vh;overflow-y:auto; }
.help-close { position:absolute;top:16px;right:16px; }
.help-title { font-family:var(--f-serif);font-weight:700;font-size:28px;margin-bottom:12px; }
.help-lead { font-size:14px;line-height:1.7;color:var(--ink-soft);margin-bottom:22px; }
.help-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px; }
.help-item { display:flex;gap:10px;align-items:flex-start; }
.hi-icon { width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;background:rgba(128,128,128,0.06);font-size:16px;flex-shrink:0; }
.help-item b { display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px; }
.help-item span { font-size:12px;color:var(--ink-faint);line-height:1.5; }
.help-dep { padding:16px 18px;border-radius:var(--r-md);background:rgba(128,128,128,0.04);border:1px solid var(--hair); }
.help-dep p { font-size:13px;line-height:1.7;color:var(--ink-soft); }
.help-dep strong { color:var(--accent); }
.help-credit { margin-top:14px;padding:14px 16px;border-radius:var(--r-md);background:rgba(128,128,128,0.035);border:1px solid var(--hair); }
.help-credit .hc-title { font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px; }
.help-credit p { font-size:11.5px;line-height:1.75;color:var(--ink-faint);margin-bottom:6px; }
.help-credit p:last-child { margin-bottom:0; }
.help-credit b { color:var(--ink-soft);font-weight:600; }
.help-credit a { color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent); }

/* ===== Mobile drawer ===== */
.mobile-sheet { position:fixed;top:0;right:0;bottom:0;width:min(88vw,380px);z-index:var(--z-sheet);background:var(--glass-strong);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);border-left:1px solid var(--hair-strong);box-shadow:var(--shadow-deep);transform:translateX(100%);transition:transform .5s var(--ease);padding:76px 18px 24px;overflow-y:auto; }
.mobile-sheet.open { transform:translateX(0); }
.mobile-sheet .sb-label { margin-top:16px; }
.sheet-scrim { position:fixed;inset:0;z-index:calc(var(--z-sheet) - 1);background:rgba(3,5,12,0.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s; }
.sheet-scrim.open { opacity:1;visibility:visible; }
:root[data-theme="light"] .sheet-scrim { background:rgba(0,0,0,0.18); }
.mobile-search { display:flex;align-items:center;position:relative;margin-bottom:6px; }
.mobile-search .search-ico { left:14px; }
#mobile-search-input { width:100%;height:46px;padding:0 16px 0 42px;border-radius:999px;background:rgba(128,128,128,0.06);border:1px solid var(--hair);color:var(--ink);font-family:var(--f-sans);font-size:15px;outline:none; }
.mobile-filters,.mobile-age { display:flex;flex-direction:column;gap:8px; }
.mobile-filters .chip { width:100%;justify-content:flex-start; }
.mobile-filters .seg { width:100%; }
.mobile-filters .seg-btn { flex:1; }

/* ===== Hint / Tooltip ===== */
.hint { position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:var(--z-hint);display:flex;align-items:center;gap:10px;padding:9px 18px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--hair);font-size:12.5px;color:var(--ink-faint);transition:opacity .5s var(--ease);white-space:nowrap; }
.hint span { white-space:nowrap; }
.hint i { color:var(--ink-ghost);font-style:normal; }
.hint.hide { opacity:0;pointer-events:none; }
.tooltip { position:fixed;z-index:var(--z-tooltip);padding:7px 12px;border-radius:var(--r-sm);background:var(--glass-strong);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--hair-strong);font-size:13px;color:var(--ink);pointer-events:none;max-width:280px;box-shadow:var(--shadow-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.tooltip small { display:block;font-size:10.5px;color:var(--ink-faint);font-family:var(--f-mono); }

/* ===== Minimap ===== */
.minimap { position:fixed;right:16px;bottom:16px;z-index:var(--z-minimap);width:172px;height:172px;border-radius:var(--r-md);overflow:hidden;padding:6px;transition:opacity .3s,transform .3s var(--ease); }
.minimap.hide { opacity:0;transform:scale(.9);pointer-events:none; }
/* 详情面板展开时，小地图左移让位，避免被面板覆盖 */
body.panel-open .minimap { right:484px; }
@media (max-width:1180px) { body.panel-open .minimap { opacity:0;pointer-events:none; } }
#minimap { width:100%;height:100%;display:block;border-radius:8px; }
.minimap-view { position:absolute;border:1.5px solid var(--accent);border-radius:5px;background:var(--accent-soft);pointer-events:none;box-shadow:0 0 0 9999px rgba(6,9,18,0.16); }

/* ===== Panel ===== */
/* 注意：面板从 topbar 下方开始（top:88px），避免遮挡右上角的主题/搜索/缩放控件
   —— 参考实现把面板放在 top:16px，会盖住这些控件，本版修正。 */
.panel { position:fixed;top:88px;right:16px;bottom:16px;z-index:var(--z-panel);width:452px;max-width:calc(100vw - 32px);border-radius:var(--r-lg);display:flex;flex-direction:column;overflow:hidden;transform:translateX(calc(100% + 24px));opacity:0;transition:transform .6s var(--ease),opacity .5s var(--ease); }
.panel.open { transform:translateX(0);opacity:1; }
.panel-close { position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:50%;font-size:15px;background:rgba(128,128,128,0.06);border:1px solid var(--hair); }
.panel-scroll { overflow-y:auto;padding:26px 26px 40px;scrollbar-width:thin;scrollbar-color:var(--hair-strong) transparent; }
.panel-scroll::-webkit-scrollbar { width:8px; }
.panel-scroll::-webkit-scrollbar-thumb { background:var(--hair-strong);border-radius:8px; }
.panel-head { padding-right:40px;border-bottom:1px solid var(--hair);padding-bottom:6px;margin-bottom:18px; }
.panel-subject { display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;padding:5px 12px;border-radius:999px;color:var(--ink);background:color-mix(in srgb,var(--subj-c) 18%,transparent);border:1px solid color-mix(in srgb,var(--subj-c) 45%,transparent); }
.panel-subject::before { content:"";width:7px;height:7px;border-radius:50%;background:var(--subj-c); }
.panel-title { font-family:var(--f-serif);font-weight:700;font-size:26px;line-height:1.28;margin-top:14px;letter-spacing:.01em; }
.panel-meta { display:flex;flex-wrap:wrap;gap:8px;margin-top:14px; }
.meta-pill { font-size:12px;color:var(--ink-soft);padding:5px 11px;border-radius:999px;background:rgba(128,128,128,0.04);border:1px solid var(--hair); }
.meta-pill b { color:var(--ink);font-weight:500; }
.meta-pill.done { color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:color-mix(in srgb,var(--ok) 12%,transparent); }

.panel-tabs { display:flex;gap:4px;margin-top:18px;padding:3px;border-radius:999px;background:rgba(128,128,128,0.07);border:1px solid var(--hair); }
.panel-tabs .tab { flex:1;padding:8px 6px;border:none;border-radius:999px;background:transparent;color:var(--ink-faint);font-family:var(--f-sans);font-size:12.5px;cursor:pointer;transition:background .3s var(--ease),color .3s; }
.panel-tabs .tab:hover { color:var(--ink); }
.panel-tabs .tab.active { background:var(--accent-soft);color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent); }

.panel-block { margin-bottom:22px; }
.block-label { font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px;display:flex;align-items:center;gap:8px; }
.block-label .cnt { color:var(--accent);font-weight:600; }
.panel-desc { font-size:14.5px;line-height:1.85;color:var(--ink-soft); }
.panel-assess { font-size:14px;line-height:1.8;color:var(--ink-soft);font-style:italic; }
.panel-evidence { list-style:none;display:flex;flex-direction:column;gap:9px; }
.panel-evidence li { position:relative;padding-left:22px;font-size:13.5px;line-height:1.7;color:var(--ink-soft); }
.panel-evidence li::before { content:"";position:absolute;left:4px;top:9px;width:7px;height:7px;border-radius:2px;background:var(--accent);transform:rotate(45deg); }
.panel-standards { list-style:none;display:flex;flex-direction:column;gap:8px; }
.panel-standards li { font-size:12.5px;padding:9px 12px;border-radius:var(--r-sm);background:rgba(128,128,128,0.04);border:1px solid var(--hair);display:flex;flex-direction:column;gap:2px; }
.panel-standards .std-label { color:var(--ink-soft);font-weight:500; }
.panel-standards .std-code { font-family:var(--f-mono);color:var(--ink-faint);font-size:11.5px; }
.panel-cols { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.panel-links { list-style:none;display:flex;flex-direction:column;gap:6px;max-height:230px;overflow-y:auto;scrollbar-width:thin; }
.panel-links li { font-size:12.5px;line-height:1.5;color:var(--ink-soft);cursor:pointer;padding:7px 10px;border-radius:var(--r-sm);background:rgba(128,128,128,0.04);border:1px solid var(--hair);transition:background .25s,color .25s,transform .2s var(--ease);display:flex;gap:6px;align-items:flex-start; }
.panel-links li:hover { background:rgba(128,128,128,0.1);color:var(--ink);transform:translateX(2px); }
.panel-links li.empty { cursor:default;color:var(--ink-ghost);background:transparent;border-style:dashed; }
.panel-links li.empty:hover { transform:none; }
.panel-links li .lk-dot { width:6px;height:6px;border-radius:50%;margin-top:6px;flex-shrink:0; }
.panel-links li .lk-txt { flex:1;min-width:0; }
.panel-links li .lk-sub { display:block;font-size:10.5px;color:var(--ink-ghost);margin-top:1px; }

/* ===== 学习路径 ===== */
.path-head { margin-bottom:18px; }
.path-lead { font-size:13px;line-height:1.75;color:var(--ink-faint);margin-bottom:12px; }
.path-actions { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px; }
.path-stat { display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--r-md);background:rgba(128,128,128,0.05);border:1px solid var(--hair);font-size:12px;color:var(--ink-soft); }
.path-stat b { font-family:var(--f-mono);color:var(--ink);font-size:15px; }
.path-stat .pbar { flex:1;height:6px;border-radius:3px;background:rgba(128,128,128,0.14);overflow:hidden; }
.path-stat .pbar i { display:block;height:100%;background:var(--ok);border-radius:3px;transition:width .6s var(--ease); }
.path-list { display:flex;flex-direction:column;gap:4px; }
.path-level { margin-top:14px; }
.path-level:first-child { margin-top:0; }
.path-level-head { display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-faint);margin-bottom:7px;text-transform:uppercase; }
.path-level-head::after { content:"";flex:1;height:1px;background:var(--hair); }
.path-level-head b { color:var(--accent);font-weight:600; }
.path-item { display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:var(--r-sm);background:rgba(128,128,128,0.035);border:1px solid var(--hair);cursor:pointer;transition:background .25s,border-color .25s,transform .2s var(--ease); }
.path-item:hover { background:rgba(128,128,128,0.09);transform:translateX(2px); }
.path-item.done { border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 8%,transparent); }
.path-item.target { border-color:color-mix(in srgb,var(--subj-c,var(--accent)) 55%,transparent);background:color-mix(in srgb,var(--subj-c,var(--accent)) 12%,transparent); }
.path-check { width:18px;height:18px;border-radius:5px;border:1.5px solid var(--hair-strong);flex-shrink:0;margin-top:1px;display:grid;place-items:center;font-size:11px;color:transparent;transition:background .2s,border-color .2s,color .2s; }
.path-item.done .path-check { background:var(--ok);border-color:var(--ok);color:#fff; }
.path-body { flex:1;min-width:0; }
.path-name { font-size:13px;color:var(--ink);line-height:1.45; }
.path-sub { font-size:10.5px;color:var(--ink-ghost);margin-top:3px;display:flex;gap:7px;flex-wrap:wrap; }
.path-sub i { font-style:normal; }
.path-empty { padding:26px;text-align:center;color:var(--ink-faint);font-size:13px;line-height:1.7; }

/* ===== 课标对照 ===== */
.cn-map { display:flex;flex-direction:column;gap:9px;margin-bottom:14px; }
.cn-row { display:flex;gap:11px;padding:11px 13px;border-radius:var(--r-sm);background:rgba(128,128,128,0.04);border:1px solid var(--hair); }
.cn-row .cn-k { font-size:11px;font-family:var(--f-mono);letter-spacing:.08em;color:var(--ink-faint);width:64px;flex-shrink:0;padding-top:2px; }
.cn-row .cn-v { font-size:13px;color:var(--ink);line-height:1.6;flex:1; }
.cn-row .cn-v small { display:block;font-size:11.5px;color:var(--ink-faint);margin-top:4px;line-height:1.65; }
.cn-row.hl { background:color-mix(in srgb,var(--accent) 9%,transparent);border-color:color-mix(in srgb,var(--accent) 28%,transparent); }
.cn-disclaimer { font-size:11.5px;line-height:1.75;color:var(--ink-ghost);padding:11px 13px;border-radius:var(--r-sm);border:1px dashed var(--hair-strong); }

/* ===== Responsive ===== */
@media (max-width:1100px) {
  .seg { display:none; }
  .brand-badge { display:none; }
}
@media (max-width:860px) {
  .topbar { gap:10px;padding:0 12px; }
  .filters { display:none; }
  .search { display:none; }
  .menu-btn { display:grid; }
  .zoom-ctl { margin-left:auto; }
  .sidebar { display:none; }
  .minimap { display:none; }
  /* 移动端提示条：换行居中，避免竖排断字 */
  .hint { font-size:10.5px;padding:7px 12px;gap:5px;flex-wrap:wrap;justify-content:center;white-space:normal;max-width:92vw;border-radius:var(--r-md);line-height:1.5; }
  .hint i { display:none; }
  .panel { top:auto;left:10px;right:10px;bottom:10px;width:auto;max-width:none;max-height:84dvh;border-radius:var(--r-lg);transform:translateY(calc(100% + 24px)); }
  .panel.open { transform:translateY(0); }
  .panel-cols { grid-template-columns:1fr; }
  .intro-title { font-size:clamp(40px,13vw,64px); }
  .intro-stats { gap:8px; }
  .stat { padding:10px 18px; }
  .stat b { font-size:22px; }
  .help-grid { grid-template-columns:1fr; }
  .help-card { padding:26px 22px; }
}
@media (max-width:420px) {
  .brand-name { font-size:15px; }
  .zoom-ctl .icon-btn { width:34px;height:34px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms!important;transition-duration:.001ms!important; }
  .loader-orb { animation:none; }
}