/* ============================================================
   十二年知识长卷 · 样式
   Ethereal Glass · 暗色星图 (#060912 + 靛紫辉光 + 颗粒)
   ============================================================ */
:root {
  --bg: #060912;
  --bg2: #0a0e1a;
  --ink: #e8ecf6;
  --ink-dim: #aab3c9;
  --ink-faint: #94a0b8;
  --glass: rgba(20, 26, 42, 0.55);
  --glass-2: rgba(28, 35, 56, 0.62);
  --glass-brd: rgba(150, 170, 220, 0.14);
  --glass-brd-2: rgba(150, 170, 220, 0.22);
  --accent: #8b7cff;
  --accent-2: #5b9dff;
  --gold: #e8b53d;
  --cool: #5b9dff;
  --warm: #e8b53d;
  --shadow: 0 24px 70px -24px rgba(0, 0, 0, 0.82);
  --grain-op: 0.06;
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;
  --serif: "Noto Serif SC", "Fraunces", serif;
  --display: "Fraunces", "Noto Serif SC", serif;
  --sans: "Noto Sans SC", "Space Grotesk", system-ui, sans-serif;
  --mono: "Space Grotesk", ui-monospace, monospace;
}
[data-theme="light"] {
  --bg: #eef1f7;
  --bg2: #e3e8f2;
  --ink: #1a2030;
  --ink-dim: #4a5168;
  --ink-faint: #5e6678;
  --glass: rgba(255, 255, 255, 0.62);
  --glass-2: rgba(255, 255, 255, 0.74);
  --glass-brd: rgba(40, 60, 110, 0.12);
  --glass-brd-2: rgba(40, 60, 110, 0.2);
  --accent: #6a5cf0;
  --accent-2: #3b7bff;
  --gold: #b8860b;
  --cool: #3b7bff;
  --warm: #b8860b;
  --shadow: 0 24px 60px -28px rgba(60, 50, 95, 0.42);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; color: inherit; cursor: pointer; }
b.fraunces, .fraunces { font-family: var(--display); font-weight: 600; }

/* ---------- 背景氛围 ---------- */
.aurora, .grain, .vignette { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.aurora { overflow: hidden; filter: blur(60px); opacity: 0.9; will-change: transform; }
.aurora-blob { position: absolute; width: 60vw; height: 60vw; border-radius: 50%; mix-blend-mode: screen; }
[data-theme="light"] .aurora { opacity: 0.5; mix-blend-mode: multiply; }
.aurora .a { background: radial-gradient(circle, rgba(120, 90, 255, 0.55), transparent 60%); top: -18vw; left: -10vw; animation: drift1 26s ease-in-out infinite; }
.aurora .b { background: radial-gradient(circle, rgba(60, 130, 255, 0.45), transparent 60%); bottom: -22vw; right: -8vw; animation: drift2 32s ease-in-out infinite; }
.aurora .c { background: radial-gradient(circle, rgba(40, 200, 190, 0.32), transparent 60%); top: 30vh; left: 40vw; animation: drift3 38s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vw, 4vh) scale(1.12); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5vw, -3vh) scale(1.1); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-4vw, 5vh) scale(1.15); } }
.grain { opacity: var(--grain-op); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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"); }
.vignette { background: radial-gradient(120% 120% at 50% 42%, transparent 52%, rgba(0,0,0,0.55) 100%); }
[data-theme="light"] .vignette { background: radial-gradient(120% 120% at 50% 42%, transparent 55%, rgba(20,30,60,0.18) 100%); }

#graph-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; touch-action: none; }
body[data-loading="true"] #graph-canvas { opacity: 0; }

/* ---------- 加载层 ---------- */
.loader { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: var(--bg); transition: opacity .6s ease; }
.loader.hidden { opacity: 0; pointer-events: none; }
.loader-ring { position: relative; width: 64px; height: 64px; }
.loader-ring span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent); animation: spin 1.1s linear infinite; }
.loader-ring span:nth-child(2) { inset: 8px; border-top-color: var(--accent-2); animation-duration: 1.5s; animation-direction: reverse; }
.loader-ring span:nth-child(3) { inset: 16px; border-top-color: var(--gold); animation-duration: 0.9s; }
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text { font-family: var(--serif); font-size: 19px; letter-spacing: .04em; margin: 0; }
.loader-sub { color: var(--ink-faint); font-size: 13px; margin: 0; }

/* ---------- 玻璃通用（os-taxonomy 双内描边 + 深阴影 + 强模糊）---------- */
.glass { background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--r-md); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.08); position: relative; }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 38%); }
[data-theme="light"] .glass::before { background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent 40%); }

/* ---------- 开场 Hero ---------- */
.intro { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 24px; transition: opacity .7s ease, transform .7s ease; background: radial-gradient(125% 125% at 50% 44%, rgba(6,9,18,0.30) 0%, rgba(6,9,18,0.74) 62%, rgba(6,9,18,0.92) 100%); }
[data-theme="light"] .intro { background: radial-gradient(125% 125% at 50% 44%, rgba(238,241,247,0.30) 0%, rgba(238,241,247,0.74) 62%, rgba(238,241,247,0.94) 100%); }
.intro.hidden { opacity: 0; pointer-events: none; transform: scale(1.04); }
.intro-inner { max-width: 720px; text-align: center; padding: 40px 36px; }
.eyebrow { display: inline-block; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--accent); padding: 6px 14px; border: 1px solid var(--glass-brd-2); border-radius: 999px; background: var(--glass); }
.intro-title { font-family: var(--serif); font-weight: 900; font-size: clamp(40px, 8vw, 78px); line-height: 1.02; margin: 22px 0 18px; letter-spacing: .02em; background: linear-gradient(120deg, #fff, #c3b9ff 55%, #9fd0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="light"] .intro-title { background: linear-gradient(120deg, #1a2030, #6a5cf0 60%, #3b7bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro-sub { font-size: clamp(14px, 1.6vw, 16.5px); line-height: 1.85; color: var(--ink-dim); margin: 0 auto 26px; max-width: 600px; }
.intro-sub strong { color: var(--ink); font-weight: 700; }
.intro-sub .hl { color: var(--accent); }
.intro-stats { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.intro-stats .stat { min-width: 96px; padding: 16px 18px; border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--glass-brd); }
.intro-stats .stat b { display: block; font-size: 34px; line-height: 1; color: #fff; }
[data-theme="light"] .intro-stats .stat b { color: var(--ink); }
.intro-stats .stat span { font-size: 12.5px; color: var(--ink-faint); letter-spacing: .08em; }
.btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border: none; border-radius: 999px; font-size: 15.5px; font-weight: 600; color: #fff; background: linear-gradient(120deg, var(--accent), var(--accent-2)); box-shadow: 0 12px 34px rgba(110, 90, 240, 0.45); transition: transform .25s ease, box-shadow .25s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(110, 90, 240, 0.6); }
.btn-ico { transition: transform .25s ease; }
.btn-primary:hover .btn-ico { transform: translate(3px, -3px); }
.intro-foot { margin-top: 22px; font-size: 12px; color: var(--ink-faint); letter-spacing: .03em; }
/* 开场逐项浮现 */
.intro-inner > * { animation: rise .85s cubic-bezier(.16,.84,.3,1) both; }
.intro-inner > *:nth-child(1) { animation-delay: .06s; }
.intro-inner > *:nth-child(2) { animation-delay: .16s; }
.intro-inner > *:nth-child(3) { animation-delay: .28s; }
.intro-inner > *:nth-child(4) { animation-delay: .40s; }
.intro-inner > *:nth-child(5) { animation-delay: .54s; }
.intro-inner > *:nth-child(6) { animation-delay: .66s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.intro-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to top, var(--bg), transparent); pointer-events: none; }

/* ---------- 顶栏 ---------- */
.topbar { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 14px; padding: 9px 12px 9px 16px; max-width: calc(100vw - 28px); }
.brand { display: flex; align-items: center; gap: 10px; padding-right: 8px; }
.brand-mark { width: 13px; height: 13px; border-radius: 4px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 14px rgba(120,100,255,.7); }
.brand-name { font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: .02em; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.layout-switch { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,.18); }
[data-theme="light"] .layout-switch { background: rgba(40,60,110,.08); }
.ls-btn { border: none; background: transparent; color: var(--ink-dim); font-size: 13px; padding: 7px 13px; border-radius: 999px; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .2s ease; white-space: nowrap; }
.ls-btn:hover { color: var(--ink); }
.ls-btn.is-active { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 4px 14px rgba(110,90,240,.4); }
.search { position: relative; display: flex; align-items: center; }
.search-ico { position: absolute; left: 11px; width: 16px; height: 16px; fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round; }
.search input { width: 220px; padding: 9px 12px 9px 34px; border-radius: 999px; border: 1px solid var(--glass-brd); background: rgba(0,0,0,.2); color: var(--ink); font-size: 13.5px; outline: none; transition: width .25s ease, border-color .2s ease; }
[data-theme="light"] .search input { background: rgba(255,255,255,.6); }
.search input:focus { width: 260px; border-color: var(--accent); }
.search-results { position: absolute; top: 46px; left: 0; right: 0; max-height: 320px; overflow-y: auto; background: var(--glass-2); border: 1px solid var(--glass-brd-2); border-radius: var(--r-md); padding: 6px; backdrop-filter: blur(20px); box-shadow: var(--shadow); z-index: 50; }
.search-results .sr-item { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; }
.search-results .sr-item:hover, .search-results .sr-item.active { background: rgba(120,100,255,.16); }
.search-results .sr-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.search-results .sr-meta { color: var(--ink-faint); font-size: 12px; margin-left: auto; }
.search-results .sr-empty { padding: 12px; color: var(--ink-faint); font-size: 12.5px; text-align: center; }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--glass-brd); background: rgba(0,0,0,.16); color: var(--ink-dim); transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
[data-theme="light"] .icon-btn { background: rgba(255,255,255,.5); }
.icon-btn:hover { color: var(--ink); border-color: var(--glass-brd-2); background: rgba(120,100,255,.16); }
.icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn[aria-pressed="true"] { color: #fff; background: linear-gradient(120deg, var(--accent), var(--accent-2)); border-color: transparent; }
.menu-btn { display: none; flex-direction: column; gap: 4px; }
.menu-btn span { width: 17px; height: 2px; background: currentColor; border-radius: 2px; }

/* ---------- 学段筛选条 ---------- */
.stagebar { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 25; display: flex; align-items: center; gap: 6px; padding: 7px 10px; }
.sb-cap { font-size: 12px; color: var(--ink-faint); letter-spacing: .12em; padding: 0 6px 0 4px; }
.stage-btn { border: none; background: transparent; color: var(--ink-dim); font-size: 13px; padding: 7px 15px; border-radius: 999px; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.stage-btn:hover { color: var(--ink); }
.stage-btn.is-active { background: rgba(120,100,255,.2); color: #fff; box-shadow: inset 0 0 0 1px var(--glass-brd-2); }

/* ---------- 学科筛选条 ---------- */
.subjectbar { position: fixed; top: 116px; left: 50%; transform: translateX(-50%); z-index: 24; display: flex; align-items: center; gap: 4px; padding: 7px 8px; max-width: calc(100vw - 28px); }
.sb-scroll { width: 30px; height: 30px; flex: none; border-radius: 9px; border: 1px solid var(--glass-brd); background: rgba(0,0,0,.16); color: var(--ink-dim); font-size: 16px; line-height: 1; }
.sb-scroll:hover { color: var(--ink); }
.filters { display: flex; gap: 6px; overflow-x: auto; scroll-behavior: smooth; padding: 2px; max-width: 78vw; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--glass-brd); background: rgba(0,0,0,.16); color: var(--ink-dim); font-size: 12.5px; padding: 6px 12px; border-radius: 999px; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .16s ease; white-space: nowrap; }
.chip:hover { color: var(--ink); }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.chip.is-active { color: #fff; background: rgba(120,100,255,.18); border-color: var(--glass-brd-2); }

/* ---------- 左侧控制台 ---------- */
.sidebar { position: fixed; left: 14px; top: 164px; z-index: 22; width: 252px; padding: 16px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 184px); overflow-y: auto; }
.sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-thumb { background: var(--glass-brd-2); border-radius: 3px; }
.sb-label { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.age-hint { color: var(--ink-faint); text-transform: none; letter-spacing: 0; font-size: 12px; opacity: .8; }
.legend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.legend-list li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-dim); cursor: pointer; padding: 3px 5px; border-radius: 8px; transition: background .15s ease; }
.legend-list li:hover { background: rgba(120,100,255,.12); color: var(--ink); }
.legend-list .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; }
.legend-list .lg-count { margin-left: auto; font-size: 12px; color: var(--ink-faint); }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sg-item { padding: 11px 12px; border-radius: var(--r-sm); background: rgba(0,0,0,.18); border: 1px solid var(--glass-brd); }
.sg-item b { display: block; font-size: 24px; line-height: 1; color: #fff; }
[data-theme="light"] .sg-item b { color: var(--ink); }
.sg-item span { font-size: 12px; color: var(--ink-faint); letter-spacing: .05em; }
.subject-bars { display: flex; flex-direction: column; gap: 6px; }
.sb-row { display: grid; grid-template-columns: 76px 1fr 38px; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-dim); }
.sb-track { height: 7px; border-radius: 4px; background: rgba(0,0,0,.22); overflow: hidden; }
.sb-fill { height: 100%; border-radius: 4px; }
.sb-num { text-align: right; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.year-quick { display: flex; gap: 5px; flex-wrap: wrap; }
.age-q { border: 1px solid var(--glass-brd); background: rgba(0,0,0,.16); color: var(--ink-dim); font-size: 12px; padding: 6px 11px; border-radius: 999px; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .16s ease; }
.age-q:hover { color: var(--ink); }
.age-q.is-active { background: rgba(232,181,61,.18); color: #fff; border-color: rgba(232,181,61,.4); }

/* ---------- 学段时间轴 ---------- */
.year-axis { position: fixed; left: 0; right: 0; bottom: 0; height: 34px; z-index: 20; display: none; align-items: center; justify-content: center; gap: 0; pointer-events: none; font-size: 12px; color: var(--ink-faint); }
body[data-layout="scroll"] .year-axis { display: flex; }
.year-axis .ya-item { position: relative; padding: 0 4px; opacity: .8; }
.year-axis .ya-stage { font-weight: 700; color: var(--ink-dim); letter-spacing: .12em; }

/* ---------- 操作提示 ---------- */
.hint { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 21; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-faint); padding: 7px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-brd); backdrop-filter: blur(14px); }
.hint i { opacity: .5; }

/* ---------- Tooltip ---------- */
.tooltip { position: fixed; z-index: 45; pointer-events: none; padding: 6px 11px; border-radius: 9px; background: var(--glass-2); border: 1px solid var(--glass-brd-2); font-size: 12.5px; color: var(--ink); backdrop-filter: blur(14px); box-shadow: var(--shadow); max-width: 280px; transform: translate(-50%, -140%); white-space: nowrap; }
.tooltip .tt-kind { color: var(--ink-faint); font-size: 12px; margin-right: 6px; letter-spacing: .08em; }

/* ---------- 详情面板 ---------- */
.panel { position: fixed; right: 14px; top: 14px; bottom: 14px; z-index: 35; width: 372px; max-width: calc(100vw - 28px); padding: 0; display: flex; flex-direction: column; transform: translateX(calc(100% + 24px)); transition: transform .42s cubic-bezier(.16,.84,.3,1); }
.panel.open { transform: none; }
.panel-scroll { overflow-y: auto; padding: 22px 22px 18px; }
.panel-scroll::-webkit-scrollbar { width: 7px; } .panel-scroll::-webkit-scrollbar-thumb { background: var(--glass-brd-2); border-radius: 4px; }
.panel-head { margin-bottom: 16px; }
.panel-kind { display: inline-block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); padding: 4px 10px; border: 1px solid var(--glass-brd-2); border-radius: 999px; margin-bottom: 12px; }
.panel-title { font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.28; margin: 0 0 12px; word-break: break-word; }
.panel-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.pmeta { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.2); border: 1px solid var(--glass-brd); color: var(--ink-dim); }
.pmeta .pm-k { color: var(--ink-faint); }
.pmeta .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.panel-block { margin-bottom: 18px; }
.block-label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 9px; }
.panel-desc { font-size: 13.5px; line-height: 1.75; color: var(--ink-dim); margin: 0; }
.panel-breadcrumb { font-size: 12.5px; line-height: 1.7; color: var(--ink-dim); background: rgba(0,0,0,.18); border: 1px solid var(--glass-brd); border-radius: var(--r-sm); padding: 10px 12px; word-break: break-all; }
.panel-breadcrumb .bc-sep { color: var(--ink-faint); margin: 0 5px; }
.panel-breadcrumb .bc-stage { color: var(--accent-2); }
.panel-list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.panel-list li { font-size: 12.5px; padding: 9px 11px; border-radius: var(--r-sm); background: rgba(0,0,0,.14); border: 1px solid var(--glass-brd); cursor: pointer; transition: background .15s ease; display: flex; align-items: center; gap: 8px; }
.panel-list li:hover { background: rgba(120,100,255,.14); }
.panel-list .pl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.panel-list .pl-grp { margin-left: auto; color: var(--ink-faint); font-size: 12px; }
.panel-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border-radius: var(--r-sm); border: 1px solid var(--glass-brd-2); background: rgba(120,100,255,.12); color: var(--ink); font-size: 13px; font-weight: 500; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; text-decoration: none; }
.btn-ghost:hover { background: rgba(120,100,255,.24); transform: translateY(-1px); }
.btn-ico-sm { opacity: .7; }
.panel-close { position: absolute; top: 12px; right: 12px; }

/* ---------- 遮罩层通用 ---------- */
.overlay { position: fixed; inset: 0; z-index: 55; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(3,5,10,.55); backdrop-filter: blur(6px); }
.overlay.open { display: flex; }
.overlay-card { position: relative; width: min(560px, 100%); max-height: 86vh; overflow-y: auto; padding: 30px 30px 26px; background: var(--glass-2); border: 1px solid var(--glass-brd-2); border-radius: var(--r-lg); backdrop-filter: blur(24px) saturate(1.2); box-shadow: var(--shadow); }
.overlay-card.wide { width: min(880px, 100%); }
.overlay-card::-webkit-scrollbar { width: 8px; } .overlay-card::-webkit-scrollbar-thumb { background: var(--glass-brd-2); border-radius: 4px; }
.overlay-close { position: absolute; top: 14px; right: 14px; }
.ov-head { margin-bottom: 20px; }
.ov-head .eyebrow { margin-bottom: 10px; }
.ov-title { font-family: var(--serif); font-weight: 700; font-size: 24px; margin: 0 0 8px; }
.ov-sub { font-size: 13px; color: var(--ink-dim); line-height: 1.6; margin: 0; }
.pub-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 9px; }
.pub-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 13px; border-radius: var(--r-sm); background: rgba(0,0,0,.16); border: 1px solid var(--glass-brd); font-size: 12.5px; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .16s ease; }
.pub-chip:hover { border-color: var(--glass-brd-2); background: rgba(120,100,255,.14); }
.pub-chip.is-active { background: rgba(120,100,255,.22); border-color: var(--accent); color: #fff; }
.pub-chip .pc-count { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ---------- 使用说明 ---------- */
.help-title { font-family: var(--serif); font-weight: 700; font-size: 23px; margin: 0 0 12px; }
.help-lead { font-size: 13.5px; line-height: 1.7; color: var(--ink-dim); margin: 0 0 18px; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.help-item { display: flex; gap: 11px; padding: 11px 13px; border-radius: var(--r-sm); background: rgba(0,0,0,.14); border: 1px solid var(--glass-brd); }
.help-item .hi-ico { font-size: 16px; color: var(--accent); flex: none; }
.help-item b { display: block; font-size: 13px; margin-bottom: 2px; }
.help-item span { font-size: 12px; color: var(--ink-faint); line-height: 1.5; }
.help-dep { border-top: 1px solid var(--glass-brd); padding-top: 14px; margin-bottom: 12px; }
.help-dep p { font-size: 12.5px; line-height: 1.7; color: var(--ink-dim); margin: 0 0 10px; }
.help-dep .warm { color: var(--warm); font-weight: 700; }
.help-dep .cool { color: var(--cool); font-weight: 700; }
.help-cite { font-size: 12px; color: var(--ink-faint); line-height: 1.6; margin: 0; border-top: 1px solid var(--glass-brd); padding-top: 12px; }

/* ---------- 移动端抽屉 ---------- */
.mobile-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 58; background: var(--glass-2); border-top: 1px solid var(--glass-brd-2); border-radius: 22px 22px 0 0; padding: 18px 18px 28px; transform: translateY(110%); transition: transform .35s cubic-bezier(.16,.84,.3,1); backdrop-filter: blur(22px); }
.mobile-sheet.open { transform: none; }
.mobile-sheet-inner { display: flex; flex-direction: column; gap: 16px; }
.mobile-search { display: flex; align-items: center; gap: 8px; }
.mobile-search input { flex: 1; padding: 10px 12px 10px 34px; border-radius: 999px; border: 1px solid var(--glass-brd); background: rgba(0,0,0,.2); color: var(--ink); font-size: 14px; outline: none; }
.ms-block .ms-label { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.mobile-filters, .mobile-stage, .mobile-layout { display: flex; flex-wrap: wrap; gap: 7px; }
.sheet-scrim { position: fixed; inset: 0; z-index: 57; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.sheet-scrim.open { opacity: 1; pointer-events: auto; }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 56px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 65; padding: 11px 18px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-brd-2); font-size: 13px; color: var(--ink); backdrop-filter: blur(16px); box-shadow: var(--shadow); opacity: 0; transition: opacity .25s ease, transform .25s ease; max-width: 90vw; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast b { color: var(--accent); }
.toast .toast-action { color: var(--accent-2); margin-left: 8px; cursor: pointer; font-weight: 600; text-decoration: underline; }

/* ---------- 响应式 ---------- */
@media (max-width: 880px) {
  .sidebar { display: none; }
  .brand-name { display: none; }
  .layout-switch .ls-btn { padding: 7px 9px; font-size: 12px; }
  .search input { width: 130px; } .search input:focus { width: 150px; }
  .menu-btn { display: flex; }
  .topbar { gap: 8px; padding: 8px 10px; }
  .stagebar { top: 64px; }
  .subjectbar { top: 106px; }
  .filters { max-width: 88vw; }
}
@media (max-width: 560px) {
  .intro-stats .stat { min-width: 76px; padding: 12px; }
  .intro-stats .stat b { font-size: 27px; }
  .panel { width: calc(100vw - 20px); right: 10px; top: 10px; bottom: 10px; }
  .layout-switch { display: none; }
}

/* ---------- 无障碍：可见焦点环 ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.search input:focus-visible, .icon-btn:focus-visible, .ls-btn:focus-visible, .chip:focus-visible, .stage-btn:focus-visible, .age-q:focus-visible, .pub-chip:focus-visible { outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- 尊重减弱动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .aurora-blob { animation: none !important; }
  .intro-inner > * { animation: none !important; }
  .loader-ring span { animation-duration: 2.4s !important; }
  * { transition-duration: .001ms !important; }
}

/* ============================================================
   新增：知识点图谱专用组件
   ============================================================ */

/* 教材资源暗层开关（激活态） */
.icon-btn.is-active { color: #fff; background: linear-gradient(120deg, var(--accent), var(--accent-2)); border-color: transparent; }
#resource-btn[aria-pressed="true"] { color: #fff; background: linear-gradient(120deg, var(--accent), var(--accent-2)); border-color: transparent; box-shadow: 0 4px 14px rgba(110,90,240,.4); }

/* 学科 chip：精修学科高亮描边 */
.chip.core { border-color: var(--glass-brd-2); }
.chip.core .dot { box-shadow: 0 0 8px currentColor; }
.chip.core.is-active { background: rgba(120,100,255,.24); }

/* 依赖脉络提示框 */
.sb-hint-box .sb-hint { font-size: 12px; line-height: 1.7; color: var(--ink-dim); margin: 0; }
.sb-hint-box .sb-hint .warm { color: var(--warm); font-weight: 700; }
.sb-hint-box .sb-hint .cool { color: var(--cool); font-weight: 700; }

/* 依赖切换按钮（面板内） */
.panel-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.panel-list-head .block-label { margin: 0; }
.dep-toggle { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--glass-brd-2); background: rgba(120,100,255,.14); color: var(--ink-dim); cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .16s ease; }
.dep-toggle:hover { color: var(--ink); background: rgba(120,100,255,.26); }

/* 面板资源区 */
.res-head { font-size: 12px; letter-spacing: .06em; color: var(--ink-faint); margin: 12px 0 6px; padding-top: 10px; border-top: 1px solid var(--glass-brd); }
.panel-list .pl-more { justify-content: center; color: var(--ink-faint); font-size: 12px; cursor: default; }

/* ============================================================
   学科×年级 热力矩阵
   ============================================================ */
.heatmap { position: fixed; inset: 0; z-index: 42; display: none; align-items: center; justify-content: center; padding: 84px 18px 22px; }
.heatmap.open { display: flex; }
.heatmap-card { position: relative; width: min(1180px, 100%); max-height: calc(100vh - 96px); overflow: auto; padding: 26px 26px 22px; background: var(--glass-2); border: 1px solid var(--glass-brd-2); border-radius: var(--r-lg); backdrop-filter: blur(24px) saturate(1.2); box-shadow: var(--shadow); }
.heatmap-card::-webkit-scrollbar { width: 8px; } .heatmap-card::-webkit-scrollbar-thumb { background: var(--glass-brd-2); border-radius: 4px; }
.hm-head-bar { margin-bottom: 18px; }
.hm-title { font-family: var(--serif); font-weight: 700; font-size: 23px; margin: 8px 0 6px; }
.hm-sub { font-size: 12.5px; color: var(--ink-faint); margin: 0; letter-spacing: .03em; }
.heat-grid { display: grid; gap: 3px; min-width: 760px; }
.hm-corner { display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-size: 12px; color: var(--ink-faint); letter-spacing: .04em; }
.hm-col-h { display: flex; align-items: center; justify-content: center; padding: 7px 0; font-size: 12px; font-weight: 600; color: var(--ink-dim); border-radius: 6px 6px 0 0; }
.hm-col-h.hm-e { background: rgba(91,157,255,.10); }
.hm-col-h.hm-m { background: rgba(46,204,113,.10); }
.hm-col-h.hm-h { background: rgba(232,181,61,.12); }
.hm-col-h.hm-u { background: rgba(197,122,232,.14); }
.hm-row-h { display: flex; align-items: center; padding: 5px 10px 5px 8px; font-size: 12.5px; color: var(--ink-dim); border-radius: 6px 0 0 6px; background: rgba(255,255,255,.03); cursor: pointer; transition: background .15s ease; white-space: nowrap; }
.hm-row-h:hover { background: rgba(120,100,255,.16); color: var(--ink); }
.hm-row-h.core { font-weight: 600; color: var(--ink); }
.hm-cell { display: flex; align-items: center; justify-content: center; min-height: 30px; border-radius: 5px; font-size: 12px; font-variant-numeric: tabular-nums; color: #fff; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.hm-cell:hover { transform: scale(1.12); box-shadow: 0 0 0 1.5px var(--accent), var(--shadow); z-index: 2; }
.hm-legend { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 12px; color: var(--ink-faint); }
.hm-legend-bar { width: 160px; height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.05), var(--accent), #fff); }
.hm-legend-note { margin-left: auto; opacity: .85; }
[data-theme="light"] .hm-cell { color: #15131f; }

/* 名思本地九科迁移：保留上游玻璃星图和七种布局。 */
button,a,input {-webkit-tap-highlight-color:transparent; touch-action:manipulation;}
button,a {overflow-wrap:anywhere;}
button:disabled {cursor:default;}
.brand-logo {width:32px;height:32px;object-fit:contain;}
.brand-name {display:flex;flex-direction:column;gap:2px;font-family:var(--sans);font-size:15px;}
.brand-name>span {font-size:12px;color:var(--ink-dim);font-weight:400;}
.topbar {width:max-content;max-width:calc(100vw - 28px);}
.subjectbar {top:86px;}
.sidebar {top:142px;max-height:calc(100dvh - 160px);overflow-y:auto;}
.text-btn {display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 10px;font-size:12px;border:1px solid var(--glass-brd-2);border-radius:10px;background:var(--glass);color:var(--ink);text-decoration:none;cursor:pointer;}
.learning-section {display:flex;flex-direction:column;gap:8px;}
.learning-section .sb-label {margin:0;}
.learning-links,.mobile-learning,.mobile-tools {display:flex;gap:8px;flex-wrap:wrap;}
.learning-links>* {flex:1;white-space:nowrap;}
.entry-identity {display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin:0 auto 20px;}
.entry-identity fieldset {border:0;margin:0;padding:0;display:flex;gap:14px;font-size:14px;}
.entry-identity label {display:inline-flex;align-items:center;gap:5px;min-height:36px;}
.entry-identity input[type=radio] {accent-color:var(--accent);}
#k12-nickname {width:260px;max-width:100%;padding:12px;border:1px solid var(--glass-brd-2);border-radius:10px;background:var(--glass);color:var(--ink);font:16px var(--sans);}
.intro {z-index:59;overflow:auto;}
.intro-inner {padding:20px;}
.intro-title {font-size:clamp(32px,5vw,58px);}
.panel {z-index:46;background:var(--glass-2);}
.panel-head {padding-right:28px;}
.search-results {max-height:min(52dvh,440px);overflow:auto;}
.search-results .sr-item {width:100%;border:0;text-align:left;background:transparent;color:var(--ink);}
.search-results .sr-meta {max-width:46%;text-align:right;overflow-wrap:anywhere;}
.saved-dialog {position:fixed;color:var(--ink);background:var(--bg2);width:min(540px,calc(100vw - 28px));max-height:80dvh;padding:22px;overflow:auto;}
.saved-dialog::backdrop {background:rgba(3,5,10,.7);backdrop-filter:blur(5px);}
.saved-head {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.saved-head h2 {font-size:22px;margin:0;}
#saved-note {font-size:13px;line-height:1.8;color:var(--ink-dim);}
#saved-list {display:flex;flex-direction:column;gap:8px;}
.saved-item {text-align:left;background:var(--glass);border:1px solid var(--glass-brd);border-radius:10px;color:var(--ink);padding:12px;font:14px var(--sans);}
body.reading .aurora-blob {animation-play-state:paused;}
.mobile-search {position:relative;}
.mobile-results {position:relative;top:auto;left:auto;right:auto;width:100%;max-height:32dvh;flex-shrink:0;}
.mobile-search input {font-size:16px;}
.mobile-sheet {max-height:85dvh;overflow:auto;padding-bottom:max(20px,env(safe-area-inset-bottom));}
.hm-head-bar {padding-right:28px;}
.heat-grid {min-width:720px;}
.hm-legend {flex-wrap:wrap;}
@media (min-width:881px) and (max-width:1250px) {
 .topbar {gap:8px;}.topbar-actions {gap:6px;}.search input {width:150px;}.search input:focus {width:170px;}.ls-btn {padding:7px 10px;}.brand-name {display:none;}
}
@media (max-width:880px) {
 .topbar {left:14px;right:14px;transform:none;width:auto;justify-content:space-between;}
 .brand-name {display:flex;}.topbar-actions {gap:6px;}
 .topbar .search,.topbar .layout-switch,#resource-btn,#rotate-btn,#theme-btn {display:none;}
 .subjectbar {top:84px;left:14px;right:14px;transform:none;max-width:none;}
 .filters {max-width:none;flex:1;min-width:0;}
 .panel {width:min(400px,calc(100vw - 20px));}
 .hint {display:none;}.intro-stats {flex-wrap:wrap;gap:8px;}.intro-sub {font-size:14px;}
 .icon-btn,.age-q,.chip,.text-btn {min-height:44px;}.icon-btn {width:44px;}
 .heatmap {padding:144px 10px 14px;}.heatmap-card {max-height:calc(100dvh - 158px);padding:20px 16px;}
 .intro-inner {padding:10px 0;}.intro-foot {line-height:1.7;}.intro {align-items:safe center;}
}
@media (prefers-reduced-motion:reduce) {.loader-ring span {animation:none!important;}}

.intro-stats .stat b {color:var(--ink);}

/* 共用星图编号的九科学习诊断 */
.diagnostic-hub {position:fixed;inset:0;width:min(1050px,calc(100vw - 32px));height:min(900px,calc(100dvh - 32px));max-width:none;max-height:none;margin:auto;padding:0;color:var(--ink);background:var(--bg2);border:1px solid var(--glass-brd-2);border-radius:22px;overflow:hidden;}
.diagnostic-hub::backdrop {background:rgba(2,5,13,.78);backdrop-filter:blur(8px);}
.dh-shell-head {display:flex;align-items:center;justify-content:space-between;padding:12px 22px;border-bottom:1px solid var(--glass-brd);font-size:12px;letter-spacing:.08em;color:var(--ink-dim);}
.dh-content {height:calc(100% - 65px);overflow-y:auto;overscroll-behavior:contain;padding:24px 30px 32px;}
.dh-page-head {display:flex;align-items:flex-start;gap:18px;margin-bottom:24px;}
.dh-page-head .text-btn {flex:none;}
.dh-page-head h2 {font-size:26px;line-height:1.3;margin:0 0 8px;}
.dh-page-head p {font-size:14px;line-height:1.7;color:var(--ink-dim);margin:0;}
.dh-content h3 {font-size:16px;margin:24px 0 14px;}
.dh-galaxies {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.dh-galaxy {position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;gap:18px;min-height:192px;padding:20px;text-align:left;border:1px solid var(--glass-brd-2);border-radius:18px;color:var(--ink);background:radial-gradient(ellipse at 100% 5%,color-mix(in srgb,var(--subject-color) 18%,transparent),transparent 65%),var(--glass);transition:border-color .15s ease,background-color .15s ease;}
.dh-galaxy:focus-visible {border-color:var(--subject-color);}
@media(hover:hover) and (pointer:fine){.dh-galaxy:hover{border-color:var(--subject-color);}}
.dh-orbit {position:absolute;right:-20px;top:0;width:130px;height:95px;border:1px solid color-mix(in srgb,var(--subject-color) 35%,transparent);border-radius:50%;transform:rotate(-25deg);pointer-events:none;}
.dh-orbit:after {content:"";position:absolute;inset:15px;border:1px solid color-mix(in srgb,var(--subject-color) 30%,transparent);border-radius:50%;}
.dh-orbit i {position:absolute;top:30px;left:20px;width:4px;height:4px;border-radius:50%;background:var(--subject-color);box-shadow:0 0 12px var(--subject-color);}
.dh-orbit i:nth-child(2){top:12px;left:85px;}.dh-orbit i:nth-child(3){top:65px;left:100px;}
.dh-card-title {position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:18px;font-weight:600;}
.dh-card-title>span {font-size:12px;font-weight:400;color:var(--ink-dim);}
.dh-galaxy strong {font-size:26px;font-weight:500;font-variant-numeric:tabular-nums;}
.dh-galaxy strong small {display:block;margin-top:4px;font-size:12px;font-weight:400;color:var(--ink-dim);}
.dh-card-meta {font-size:12px;color:var(--ink-dim);display:flex;justify-content:space-between;gap:6px;}
.dh-card-meta b {color:var(--subject-color);}
.dh-note,.dh-question-path {font-size:13px;line-height:1.8;color:var(--ink-dim);}
.dh-footer {display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--ink-dim);margin-top:20px;}
.dh-footer a {color:var(--accent-2);}
.dh-subject-actions {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px;font-size:13px;}
.dh-content select,.dh-content input[type=search] {font:14px var(--sans);padding:10px 12px;border:1px solid var(--glass-brd-2);border-radius:10px;background:var(--bg2);color:var(--ink);}
.dh-resume {display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--glass);padding:16px;border:1px solid var(--glass-brd-2);border-radius:14px;}
.dh-resume b {font-size:14px;}.dh-resume span {display:block;color:var(--ink-dim);font-size:13px;margin-top:6px;}
.dh-routes {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.dh-route {text-align:left;border:1px solid var(--glass-brd-2);background:var(--glass);border-radius:12px;padding:16px;color:var(--ink);}
.dh-route b {font-size:16px;}.dh-route span {display:block;margin-top:8px;font-size:12px;color:var(--ink-dim);}
.dh-catalogue-head {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.dh-catalogue-head span {font-size:12px;color:var(--ink-dim);}
.dh-catalogue-tools {display:flex;align-items:center;flex-wrap:wrap;gap:10px;}
.dh-catalogue-tools input[type=search] {flex:1;min-width:180px;}.dh-catalogue-tools label {display:flex;align-items:center;gap:6px;font-size:12px;}
.dh-knowledge-list {display:flex;flex-direction:column;gap:8px;}
.dh-knowledge {display:flex;justify-content:space-between;align-items:center;gap:14px;border:1px solid var(--glass-brd);border-radius:12px;padding:12px;}
.dh-knowledge>div {min-width:0;}.dh-knowledge>button {flex:none;}.dh-knowledge span {display:block;font-size:12px;color:var(--ink-dim);line-height:1.7;margin:4px 0;}
.dh-node-title {text-align:left;padding:0;border:0;background:transparent;color:var(--ink);font-size:14px;line-height:1.65;cursor:pointer;}
.dh-node-title:hover {color:var(--accent-2);}
.dh-state {font-size:12px;color:var(--ink-dim);font-weight:400;}
.dh-state[data-status=correct],.dh-node-evidence[data-status=correct] {color:#69d6a1;}
.dh-state[data-status=weak],.dh-node-evidence[data-status=weak] {color:#f08096;}
.dh-state[data-status=shaky],.dh-node-evidence[data-status=shaky] {color:#e8bd62;}
[data-theme=light] .dh-state[data-status=correct],[data-theme=light] .dh-node-evidence[data-status=correct] {color:#137b4e;}
[data-theme=light] .dh-state[data-status=weak],[data-theme=light] .dh-node-evidence[data-status=weak] {color:#ad2544;}
[data-theme=light] .dh-state[data-status=shaky],[data-theme=light] .dh-node-evidence[data-status=shaky] {color:#805e10;}
.dh-node-evidence {font-size:12px;color:var(--ink-dim);margin:6px 0;}
.dh-content button:disabled {opacity:.55;cursor:default;}
.dh-pagination {display:flex;align-items:center;justify-content:center;gap:16px;font-size:12px;margin:20px 0;}
.dh-history {margin-top:24px;}.dh-history summary,.dh-answer-record summary {font-size:14px;cursor:pointer;margin-bottom:12px;}.dh-history button {display:block;margin:8px 0;}
.dh-progress {height:4px;border-radius:3px;background:var(--glass);margin-bottom:24px;}.dh-progress>span {display:block;height:100%;background:var(--accent);border-radius:3px;}
.dh-question-tag {display:inline-block;margin-top:16px;font-size:12px;padding:7px 10px;border-radius:20px;background:var(--glass);color:var(--accent-2);}
.dh-content .dh-question {font-size:24px;line-height:1.6;margin:18px 0 14px;}
.dh-choices {display:flex;flex-direction:column;gap:10px;margin-top:22px;}
.dh-choice {display:flex;align-items:center;gap:14px;min-height:56px;text-align:left;padding:12px 16px;border:1px solid var(--glass-brd-2);border-radius:12px;background:var(--glass);color:var(--ink);font-size:16px;line-height:1.6;}
.dh-choice>span {flex:none;color:var(--ink-dim);font-size:12px;}.dh-choice.is-correct {border-color:#69d6a1;background:rgba(105,214,161,.10);}.dh-choice.is-wrong {border-color:#f08096;background:rgba(240,128,150,.10);}
.dh-choice:disabled {opacity:1;}.dh-answer-actions {display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
.dh-feedback {margin-top:22px;padding:16px;border-radius:12px;background:var(--glass);border:1px solid var(--glass-brd-2);font-size:14px;line-height:1.8;}.dh-feedback p {margin:8px 0 0;}
.dh-result-stats {display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}.dh-result-stats>div {padding:16px;border:1px solid var(--glass-brd);border-radius:12px;}.dh-result-stats b {display:block;font-size:26px;}.dh-result-stats span {display:block;font-size:12px;color:var(--ink-dim);margin-top:8px;}
.dh-review {padding-left:22px;}.dh-review li {padding:12px 4px;border-bottom:1px solid var(--glass-brd);}.dh-review li span {margin-left:12px;}
.dh-answer-record {margin-top:24px;}.dh-answer-record>div {padding:16px 0;border-top:1px solid var(--glass-brd);font-size:14px;line-height:1.7;}.dh-answer-record p {margin:6px 0;color:var(--ink-dim);}
.dh-warning {color:#e8bd62;font-size:14px;line-height:1.7;}
@media(max-width:700px){
 .diagnostic-hub {width:calc(100vw - 16px);height:calc(100dvh - 16px);border-radius:18px;}.dh-shell-head {padding:10px 14px;}.dh-content {height:calc(100% - 65px);padding:20px 16px 30px;}.dh-page-head {gap:12px;flex-wrap:wrap;}.dh-page-head h2 {font-size:24px;}.dh-galaxies {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.dh-galaxy {padding:14px;gap:16px;min-height:180px;}.dh-card-title {font-size:16px;flex-wrap:wrap;gap:6px;}.dh-galaxy strong {font-size:24px;}.dh-card-meta {font-size:12px;flex-wrap:wrap;}.dh-orbit {opacity:.5;}.dh-routes {grid-template-columns:1fr;}.dh-catalogue-tools input[type=search],.dh-content select {font-size:16px;}.dh-knowledge {align-items:flex-start;flex-direction:column;gap:8px;}.dh-knowledge>button {align-self:flex-end;}.dh-content .text-btn,.dh-content .btn-ghost {min-height:44px;}.dh-result-stats {grid-template-columns:repeat(2,1fr);}.dh-content .dh-question {font-size:22px;}.dh-footer {line-height:1.8;}
}

[hidden] {display:none!important;}

/* The knowledge overview is level one; subject selection has its own visible entry. */
.galaxy-entry{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 12px;border:.5px solid #a3baff66;border-radius:10px;background:#6377dc30;color:var(--text);font-size:12px;white-space:nowrap;text-decoration:none;flex-shrink:0}
.galaxy-entry:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(hover:hover){.galaxy-entry:hover{background:#6377dc50}}
@media(max-width:560px){.galaxy-entry{padding:0 10px;min-height:44px}.topbar .brand-name>span{display:none}.topbar .brand{gap:7px}.topbar-actions{gap:4px}}

.home-view-btn{width:auto;min-width:40px;padding:0 9px;font-size:12px;white-space:nowrap}
/* Keep decorative backdrop still so idle pages do not continuously composite it. */
.aurora-blob{animation-play-state:paused!important}
/* Moving stars behind large blur surfaces are expensive on integrated GPUs. */
body[data-render-quality="economy"] :is(.glass,.hint,.tooltip){backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(20,26,42,.9)}
body[data-theme="light"][data-render-quality="economy"] :is(.glass,.hint,.tooltip){background:rgba(245,247,252,.94)}
@media(max-width:380px){#help-btn-top{display:none}}
@media(max-width:340px){.topbar .brand-name{display:none}}
/* Keep toolbar hit targets still when the search field gains or loses focus. */
.search input{transition:border-color .2s ease}
.search input:focus{width:220px}
@media(min-width:881px) and (max-width:1250px){.search input:focus{width:150px}}