/* 大屏重构 P0 — 三栏固定框 + 轮播详情舱（empty shell）
   设计见 design.md。流式自适应任意全屏，无固定画布缩放。 */
:root {
  --bg: #06101e;
  --bg-2: #0a1626;
  --panel: rgba(17, 29, 51, 0.72);
  --panel-2: #16243d;
  --panel-border: rgba(120, 180, 230, 0.18);
  --panel-border-strong: rgba(251, 191, 36, 0.45);
  --grid-line: rgba(120, 180, 230, 0.08);
  --text: #eaf2ff;
  --text-dim: #9fb3d1;
  --text-mute: #6b819f;
  --accent: #fbbf24;
  --accent-2: #fde68a;
  --accent-glow: rgba(251, 191, 36, 0.4);
  --accent-soft: rgba(251, 191, 36, 0.12);
  --good: #34d399;
  --bad: #f87171;
  --neutral: #60a5fa;
  --font-sans: 'Inter', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --font-serif: 'Noto Serif SC', 'Songti SC', serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
body {
  background:
    radial-gradient(ellipse 1800px 900px at 50% 0%, rgba(40, 80, 130, 0.18), transparent 60%),
    linear-gradient(180deg, #06101e 0%, #03070f 100%);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
#root { height: 100%; }

/* 分题型语言指标面板（题型≠全部） */
.qt-panel { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; padding: 3vh 4vw; gap: 4vh; min-height: 0; }
.qt-head { border-bottom: 1px solid var(--panel-border); padding-bottom: 2.4vh; }
.qt-name { font-family: var(--font-serif); font-size: clamp(28px, 3.2vw, 56px); font-weight: 700; color: var(--text); }
.qt-sub { font-family: var(--font-mono); font-size: clamp(14px, 1.1vw, 22px); color: var(--text-dim); margin-top: 1vh; letter-spacing: 1px; }
.qt-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2vw; }
.qt-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 18px; padding: 4vh 2vw; text-align: center; }
.qt-card-en { font-family: var(--font-mono); font-size: clamp(11px, 0.9vw, 15px); letter-spacing: 3px; color: var(--text-mute); }
.qt-card-v { font-family: var(--font-mono); font-size: clamp(40px, 5vw, 84px); font-weight: 700; color: var(--accent); margin: 2vh 0; line-height: 1; }
.qt-card-v small { font-size: clamp(14px, 1.3vw, 24px); color: var(--text-dim); font-weight: 500; }
.qt-card-l { font-family: var(--font-serif); font-size: clamp(16px, 1.4vw, 26px); color: var(--text); }
.qt-empty { color: var(--text-mute); font-size: clamp(16px, 1.6vw, 26px); text-align: center; padding: 8vh; }

/* grid backdrop */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ---- shell ---- */
.screen { position: relative; z-index: 1; height: 100vh; display: flex; flex-direction: column; }

.s-header {
  flex: 0 0 auto; height: clamp(54px, 6vh, 84px);
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center;
  gap: clamp(8px, 1vw, 28px); padding: 0 clamp(16px, 1.8vw, 44px);
  border-bottom: 1px solid var(--panel-border);
  background: linear-gradient(180deg, rgba(8,18,34,0.9), rgba(8,18,34,0.35));
}
.s-header::after {
  content: ''; position: absolute; top: calc(clamp(54px,6vh,84px) - 1px); left: 25%; right: 25%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 18px var(--accent-glow);
}
.hd-brand { display: flex; align-items: center; gap: clamp(8px,0.9vw,16px); min-width: 0; }
.hd-mark { width: clamp(30px,2.6vw,48px); height: clamp(30px,2.6vw,48px); flex: 0 0 auto; }
.hd-title { font-family: var(--font-serif); font-size: clamp(14px,1.15vw,24px); font-weight: 600; letter-spacing: 2px; white-space: nowrap; }
.hd-sub { font-family: var(--font-mono); font-size: clamp(8px,0.6vw,12px); letter-spacing: 3px; color: var(--text-dim); text-transform: uppercase; }
.page-toggle { display: inline-flex; background: var(--panel-2); border: 1px solid var(--panel-border); border-radius: 9px; padding: 3px; flex: 0 0 auto; }
.page-toggle a, .page-toggle span { font-size: clamp(11px,0.9vw,16px); font-weight: 600; letter-spacing: 1px; padding: clamp(4px,0.4vw,8px) clamp(8px,0.9vw,18px); border-radius: 6px; text-decoration: none; color: var(--text-dim); white-space: nowrap; cursor: pointer; }
.page-toggle .active { background: var(--accent); color: #06101e; box-shadow: 0 0 12px var(--accent-glow); }
.page-toggle a:hover { color: var(--text); }
.hd-center { display: flex; align-items: center; gap: clamp(10px,1.2vw,24px); justify-content: center; }
.hd-exam { font-family: var(--font-serif); font-size: clamp(14px,1.2vw,26px); letter-spacing: 2px; color: var(--accent-2); white-space: nowrap; }
.hd-selects { display: flex; align-items: center; gap: clamp(8px,1vw,18px); flex-wrap: wrap; }
.hd-sel-grp { display: inline-flex; align-items: center; gap: 6px; }
.hd-sel-grp > span { font-family: var(--font-mono); font-size: clamp(9px,0.7vw,12px); letter-spacing: 1px; color: var(--text-mute); text-transform: uppercase; white-space: nowrap; }
.hd-sel {
  appearance: none; background: var(--panel-2); color: var(--accent-2);
  border: 1px solid var(--panel-border); border-radius: 8px;
  padding: clamp(5px,0.5vw,9px) clamp(26px,2vw,34px) clamp(5px,0.5vw,9px) clamp(8px,0.9vw,14px);
  font-family: var(--font-serif); font-size: clamp(12px,1vw,20px); letter-spacing: 1px; cursor: pointer; max-width: 24vw;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path fill='%23fde68a' d='M0 0h10L5 6z'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
.hd-sel:hover { border-color: var(--accent); }
.mode-toggle { display: inline-flex; background: var(--panel-2); border: 1px solid var(--panel-border); border-radius: 8px; padding: 3px; }
.mode-toggle button {
  appearance: none; border: 0; background: transparent; color: var(--text-dim);
  font: inherit; font-size: clamp(12px,0.95vw,17px); font-weight: 600; padding: 6px clamp(10px,1vw,20px);
  border-radius: 6px; cursor: pointer; letter-spacing: 1px;
}
.mode-toggle button.active { background: var(--accent); color: #06101e; box-shadow: 0 0 14px var(--accent-glow); }
.hd-tools { display: flex; align-items: center; justify-content: flex-end; gap: clamp(8px,0.8vw,18px); min-width: 0; }
.hd-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.hd-clock { font-family: var(--font-mono); font-size: clamp(16px,1.5vw,32px); font-weight: 300; letter-spacing: 2px; }
.hd-date { font-family: var(--font-mono); font-size: clamp(9px,0.7vw,14px); color: var(--text-mute); letter-spacing: 2px; }

/* ---- body: three zones ---- */
.s-body {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  /* 左：蜘蛛图 · 中：指标列举 · 右：详细展开（分项历年大图，最宽） */
  grid-template-columns: minmax(0, 24fr) minmax(0, 30fr) minmax(0, 46fr);
  gap: clamp(10px, 0.9vw, 22px);
  padding: clamp(10px, 0.9vw, 22px);
}
@media (max-aspect-ratio: 16/10) { /* taller screens → 给右栏稍少 */
  .s-body { grid-template-columns: minmax(0,26fr) minmax(0,32fr) minmax(0,42fr); }
}

/* panel base */
.z-panel {
  position: relative; min-height: 0; min-width: 0;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px;
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column; overflow: hidden;
}
.z-panel.feature { border-color: var(--panel-border-strong); }
.corner { position: absolute; width: 14px; height: 14px; border: 2px solid var(--accent); opacity: 0.5; }
.corner.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.corner.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.corner.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.corner.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

.z-head { flex: 0 0 auto; display: flex; align-items: baseline; justify-content: space-between; padding: clamp(10px,0.8vw,18px) clamp(12px,1vw,22px) clamp(8px,0.6vw,12px); border-bottom: 1px solid var(--panel-border); }
.z-title { font-family: var(--font-serif); font-size: clamp(14px,1.05vw,22px); font-weight: 600; letter-spacing: 2px; }
.z-sub { font-family: var(--font-mono); font-size: clamp(8px,0.56vw,11px); color: var(--text-mute); letter-spacing: 2px; text-transform: uppercase; }
.z-pad { padding: clamp(10px,0.9vw,20px); display: flex; flex-direction: column; min-height: 0; }

/* ---------- ZONE A · 决策栏 ---------- */
.zoneA { gap: 0; }
.zoneA .z-pad { gap: clamp(10px,1vw,18px); flex: 1; }
.hero-label { display: flex; flex-direction: column; gap: 4px; }
.hero-score { display: flex; align-items: baseline; gap: 10px; }
.hero-num { font-family: var(--font-mono); font-weight: 300; font-size: clamp(48px, 6.5vw, 120px); line-height: 0.9; color: var(--accent); text-shadow: 0 0 28px var(--accent-glow); }
.hero-scale { font-family: var(--font-mono); font-size: clamp(12px,1vw,20px); color: var(--text-dim); }
.hero-pct { font-family: var(--font-mono); font-size: clamp(10px,0.85vw,16px); color: var(--accent); letter-spacing: 1px; }
.hero-band { display: inline-flex; align-self: flex-start; font-family: var(--font-serif); font-weight: 700; font-size: clamp(18px,1.7vw,34px); letter-spacing: 6px; background: var(--accent); color: #06101e; padding: 4px clamp(14px,1.3vw,26px); border-radius: 8px; }
.hero-headline { font-size: clamp(12px,0.95vw,17px); color: var(--text-dim); line-height: 1.6; }

/* position bar */
.pos-bar { margin-top: 4px; }
.pos-track { position: relative; height: 12px; border-radius: 7px; background: linear-gradient(90deg, var(--good), var(--accent), var(--bad)); opacity: 0.85; }
.pos-mark { position: absolute; top: -5px; width: 3px; height: 22px; transform: translateX(-50%); }
.pos-mark.cur { background: #fff; box-shadow: 0 0 8px #fff; }
.pos-mark.avg { background: var(--neutral); }
.pos-mark span { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; white-space: nowrap; color: var(--text-dim); }
.pos-labels { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--font-mono); font-size: clamp(9px,0.7vw,13px); color: var(--text-mute); }

.section-label { font-family: var(--font-mono); font-size: clamp(9px,0.72vw,13px); letter-spacing: 2px; color: var(--text-mute); text-transform: uppercase; margin-bottom: 6px; }

/* alerts */
.alerts { display: flex; flex-direction: column; gap: 6px; }
.alert-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(248,113,113,0.10); border: 1px solid rgba(248,113,113,0.3); font-size: clamp(11px,0.85vw,15px); }
.alert-item .a-name { color: var(--text); }
.alert-item .a-val { margin-left: auto; font-family: var(--font-mono); color: var(--bad); }
.alert-none { font-size: clamp(11px,0.85vw,15px); color: var(--text-mute); padding: 8px 10px; border: 1px dashed var(--panel-border); border-radius: 8px; }

/* counts */
.counts { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: clamp(8px,0.8vw,14px); border-top: 1px solid var(--panel-border); }
.count-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.count-num { font-family: var(--font-mono); font-size: clamp(18px,1.6vw,34px); font-weight: 300; }
.count-num.accent { color: var(--accent); }
.count-lbl { font-size: clamp(9px,0.7vw,13px); color: var(--text-mute); }

/* ---------- ZONE B · 全景 ---------- */
.zoneB .z-pad { gap: clamp(8px,0.7vw,14px); flex: 1; }
.radar-box { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.radar-box svg { width: 100%; height: 100%; max-height: 100%; }
.radar-legend { display: flex; gap: clamp(10px,1.2vw,24px); justify-content: center; flex-wrap: wrap; font-size: clamp(10px,0.8vw,14px); color: var(--text-dim); }
.lg-row { display: flex; align-items: center; gap: 6px; }
.lg-swatch { width: 14px; height: 4px; border-radius: 2px; }

/* scoreboard — 维度计分板 (single numeric home) */
.scoreboard { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px clamp(10px,1vw,20px); padding-top: clamp(8px,0.7vw,12px); border-top: 1px solid var(--panel-border); }
.sb-row { display: flex; align-items: baseline; gap: 8px; padding: 4px 2px; }
.sb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-mute); flex: 0 0 auto; }
.sb-row.sig .sb-dot { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.sb-name { font-size: clamp(11px,0.85vw,16px); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-val { margin-left: auto; font-family: var(--font-mono); font-size: clamp(13px,1.05vw,20px); color: var(--text); display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 7px; flex-wrap: wrap; text-align: right; }
.sb-unit { font-size: 0.6em; color: var(--text-mute); margin-left: 2px; }
.sb-delta { font-family: var(--font-mono); font-size: clamp(9px,0.7vw,13px); flex: 0 0 auto; min-width: 44px; text-align: right; }
.sb-delta.up { color: var(--bad); } .sb-delta.down { color: var(--good); }
.sb-delta.up-good { color: var(--good); } .sb-delta.down-bad { color: var(--bad); } .sb-delta.flat { color: var(--text-dim); }

/* ---------- ZONE C · 详情仓（中栏 指标列举 + 右栏 详细展开，同步） ---------- */
.zoneC, .zoneList, .zoneExpand { overflow: hidden; }
/* 右栏：详细展开（可滚动的分项大图区） */
.expand-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: clamp(10px,0.9vw,18px); display: flex; flex-direction: column; }
.expand-scroll::-webkit-scrollbar { width: 8px; }
.expand-scroll::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 4px; }
.expand-single { flex: 1 1 auto; min-height: clamp(180px,30vh,360px); display: flex; flex-direction: column; }
.carousel { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.carousel-progress { position: absolute; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); z-index: 4; animation-name: cprog; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes cprog { from { width: 0; } to { width: 100%; } }
.carousel-track { display: flex; height: 100%; transition: transform 0.5s cubic-bezier(.4,0,.2,1); }
.carousel.no-anim .carousel-track { transition: none; }
.c-card { flex: 0 0 100%; height: 100%; min-width: 0; padding: clamp(14px,1.4vw,30px); display: flex; flex-direction: column; }
.c-card-ph {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  border: 1.5px dashed var(--panel-border); border-radius: 12px; color: var(--text-mute);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0 12px, transparent 12px 24px);
}
.c-card-idx { font-family: var(--font-mono); font-size: clamp(28px,3vw,56px); color: var(--panel-border-strong); opacity: 0.6; }
.c-card-title { font-family: var(--font-serif); font-size: clamp(18px,1.6vw,32px); letter-spacing: 3px; color: var(--text); }
.c-card-note { font-size: clamp(11px,0.85vw,15px); color: var(--text-mute); }
.c-card-scrolltag { font-family: var(--font-mono); font-size: clamp(9px,0.7vw,12px); color: var(--accent); border: 1px solid var(--accent); border-radius: 5px; padding: 2px 10px; }

/* ---- 详情舱卡片内容 (P2) ---- */
.c-card-head { flex: 0 0 auto; display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--panel-border); }
.c-card-name { font-family: var(--font-serif); font-size: clamp(15px,1.25vw,26px); font-weight: 600; letter-spacing: 2px; color: var(--text); }
.c-card-no { font-family: var(--font-mono); color: var(--accent); margin-right: 8px; }
.c-card-main { flex: 0 0 auto; min-height: 0; }
.c-card.scroll .c-card-main, .c-card.no-trend .c-card-main { flex: 1 1 auto; overflow-y: auto; }
.c-card.scroll .c-card-main { padding-right: 8px; }
.c-card-main::-webkit-scrollbar { width: 6px; }
.c-card-main::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 3px; }

/* 历年趋势：短卡时放大占满剩余空间，长卡(可滚动)时固定在底部 */
.card-trend { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--panel-border); }
.c-card.scroll .card-trend { flex: 0 0 auto; }
.mini-trend { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.card-trend-h { font-family: var(--font-mono); font-size: clamp(9px,0.72vw,12px); letter-spacing: 1px; color: var(--text-mute); text-transform: uppercase; margin-bottom: 6px; }
.mini-legend { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 16px; font-size: clamp(10px,0.78vw,13px); color: var(--text-dim); margin-bottom: 4px; }
.ml-item { display: inline-flex; align-items: center; gap: 5px; }
.ml-item i { width: 13px; height: 3px; border-radius: 2px; display: inline-block; }
.ml-item b { font-family: var(--font-mono); color: var(--text); }
.ml-span { margin-left: auto; color: var(--text-mute); font-family: var(--font-mono); }
.mini-svg { flex: 1 1 auto; width: 100%; min-height: clamp(120px,20vh,260px); display: block; }
.mini-empty { font-size: clamp(10px,0.8vw,13px); color: var(--text-mute); padding: 8px 0; }

/* 历年趋势大图卡 */
.trend-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.trend-tabs { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.trend-tab { appearance: none; border: 1px solid var(--panel-border); background: var(--panel-2); color: var(--text-dim); font: inherit; font-weight: 600; font-size: clamp(12px,0.95vw,16px); padding: 6px 16px; border-radius: 8px; cursor: pointer; }
.trend-tab.active { background: var(--accent); color: #06101e; border-color: var(--accent); }
.trend-note { margin-left: auto; font-size: clamp(9px,0.72vw,12px); color: var(--text-mute); }
.trend-chart-box { flex: 1 1 auto; min-height: 0; }
.trend-chart-box svg { width: 100%; height: 100%; display: block; }
.card-empty { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 120px; color: var(--text-mute); font-size: clamp(12px,1vw,16px); text-align: center; padding: 20px; line-height: 1.8; }

.card-cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(12px,1.4vw,30px); }
.card-col-h { font-family: var(--font-mono); font-size: clamp(10px,0.78vw,13px); letter-spacing: 1px; color: var(--text-mute); text-transform: uppercase; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--panel-border); }

.st-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--grid-line); font-size: clamp(12px,0.95vw,17px); }
.st-label { color: var(--text-dim); }
.st-val { font-family: var(--font-mono); color: var(--text); display: inline-flex; align-items: baseline; gap: 8px; justify-content: flex-end; flex-wrap: wrap; text-align: right; }
.st-unit { color: var(--text-mute); font-size: 0.8em; }
.trend-up { background: rgba(248, 113, 113, 0.18); border-color: rgba(248, 113, 113, 0.42); }
.trend-down { background: rgba(52, 211, 153, 0.18); border-color: rgba(52, 211, 153, 0.42); }
.sb-row.trend-up, .sb-row.trend-down,
.st-row.trend-up, .st-row.trend-down {
  border: 1px solid; border-radius: 8px; padding-left: 10px; padding-right: 10px;
}
.metric-hero.trend-up, .metric-hero.trend-down,
.cov-hero.trend-up, .cov-hero.trend-down {
  align-self: flex-start; border: 1px solid; border-radius: 10px; padding: 6px 10px;
}
.bar-row2.trend-up, .bar-row2.trend-down {
  border: 1px solid; border-radius: 8px; padding: 8px 10px;
}

/* 指标卡 hero（顶部焦点试卷数值）+ 细分两列 */
.metric-hero { display: flex; align-items: baseline; gap: clamp(8px,1vw,16px); flex-wrap: wrap; }
.metric-hero-num { font-family: var(--font-mono); font-weight: 300; font-size: clamp(34px,3.8vw,72px); line-height: 1; color: var(--accent); text-shadow: 0 0 24px var(--accent-glow); }
.metric-hero-unit { color: var(--text-dim); font-size: clamp(12px,1vw,18px); }
.metric-hero-sig { font-size: clamp(10px,0.8vw,13px); color: var(--accent); border: 1px solid var(--accent); border-radius: 5px; padding: 2px 8px; }
.metric-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px clamp(16px,2vw,40px); }

.bar-row2 { margin-bottom: clamp(8px,0.8vw,14px); }
.bar-row2-head { display: flex; justify-content: space-between; font-size: clamp(12px,0.95vw,16px); margin-bottom: 5px; color: var(--text-dim); }
.bar-row2-val { font-family: var(--font-mono); color: var(--text); display: inline-flex; align-items: baseline; gap: 8px; justify-content: flex-end; flex-wrap: wrap; text-align: right; }
.bar-track2 { height: 10px; background: rgba(255,255,255,0.06); border-radius: 6px; overflow: hidden; }
.bar-fill2 { height: 100%; border-radius: 6px; transition: width .8s ease-out; }

.syn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px,1fr)); gap: 8px; }
.syn-cell { display: grid; grid-template-columns: minmax(44px,1fr) auto auto; align-items: baseline; gap: 8px; padding: 8px 12px; background: var(--panel-2); border: 1px solid var(--panel-border); border-radius: 8px; }
.syn-cell.trend-up { background: rgba(248, 113, 113, 0.18); border-color: rgba(248, 113, 113, 0.42); }
.syn-cell.trend-down { background: rgba(52, 211, 153, 0.18); border-color: rgba(52, 211, 153, 0.42); }
.syn-code { font-family: var(--font-mono); font-size: clamp(11px,0.85vw,15px); color: var(--text-dim); }
.syn-star { color: var(--accent); }
.syn-v { font-family: var(--font-mono); font-size: clamp(13px,1vw,18px); color: var(--text); }
.syn-note { margin-top: 12px; font-size: clamp(10px,0.78vw,13px); color: var(--text-mute); }

.cov-hero { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cov-num { font-family: var(--font-mono); font-size: clamp(30px,3.2vw,60px); font-weight: 300; color: var(--accent); text-shadow: 0 0 24px var(--accent-glow); }
.cov-unit { color: var(--text-dim); font-size: clamp(12px,1vw,18px); }
.cov-list { margin-bottom: 11px; }
.cov-list-head { display: flex; justify-content: space-between; font-size: clamp(11px,0.9vw,15px); margin-bottom: 5px; color: var(--text-dim); }
.cov-list-val { font-family: var(--font-mono); color: var(--text); }
.cov-ph { color: var(--text-mute); font-size: 0.85em; }

.tb-place { font-size: clamp(12px,0.95vw,16px); color: var(--text-dim); margin-bottom: 14px; line-height: 1.6; }
.tb-place b { color: var(--accent); font-family: var(--font-mono); }
.tb-row { display: grid; grid-template-columns: clamp(64px,7vw,120px) 1fr clamp(34px,3vw,54px); align-items: center; gap: 10px; margin-bottom: 9px; }
.tb-label { font-size: clamp(11px,0.9vw,15px); color: var(--text-dim); white-space: nowrap; }
.tb-v { font-family: var(--font-mono); font-size: clamp(12px,0.95vw,16px); text-align: right; color: var(--text); }

.histo2 { display: flex; align-items: flex-end; gap: 5px; height: clamp(110px,14vh,180px); }
.histo2-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; }
.histo2-bar { width: 72%; min-height: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); border-radius: 3px 3px 0 0; }
.histo2-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--text-mute); transform: rotate(-45deg); white-space: nowrap; }

.trend-row { margin-bottom: 14px; }
.trend-row-head { display: flex; justify-content: space-between; font-size: clamp(12px,0.95vw,16px); color: var(--text-dim); margin-bottom: 4px; }
.trend-row svg { width: 100%; height: auto; }

/* pager */
.carousel-pager { position: absolute; top: clamp(10px,1vw,18px); right: clamp(12px,1.2vw,24px); display: flex; gap: 8px; z-index: 4; }
.pg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--panel-border); border: 0; cursor: pointer; padding: 0; transition: all .25s; }
.pg-dot.active { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); transform: scale(1.25); }
.carousel-tag { position: absolute; bottom: clamp(8px,0.8vw,14px); left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: clamp(9px,0.7vw,12px); color: var(--text-mute); letter-spacing: 1px; z-index: 4; }
.carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 64px; border: 0; background: rgba(8,18,34,0.5); color: var(--text-dim); font-size: 22px; cursor: pointer; z-index: 4; border-radius: 8px; opacity: 0; transition: opacity .2s; }
.carousel:hover .carousel-arrow { opacity: 0.8; }
.carousel-arrow.left { left: 8px; } .carousel-arrow.right { right: 8px; }

/* ---- footer ticker ---- */
.s-footer {
  flex: 0 0 auto; height: clamp(38px, 4.4vh, 56px);
  display: flex; align-items: center; gap: clamp(12px,1.4vw,28px); padding: 0 clamp(16px,1.8vw,44px);
  border-top: 1px solid var(--panel-border); background: linear-gradient(0deg, rgba(8,18,34,0.9), rgba(8,18,34,0.35));
  overflow: hidden;
}
.ft-tag { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: clamp(11px,0.85vw,15px); color: var(--accent); letter-spacing: 2px; flex: 0 0 auto; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
.ft-ticker { flex: 1 1 auto; overflow: hidden; min-width: 0; }
.ft-track { display: inline-flex; gap: 40px; white-space: nowrap; animation: marquee 40s linear infinite; font-size: clamp(11px,0.85vw,15px); color: var(--text-dim); }
.ft-track .sep { color: var(--accent); margin-right: 6px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ft-meta { display: flex; gap: clamp(10px,1.2vw,22px); font-family: var(--font-mono); font-size: clamp(10px,0.78vw,14px); color: var(--text-mute); flex: 0 0 auto; }
.ft-meta .val { color: var(--text); }

/* ---- boot ---- */
.boot { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.boot-title { font-family: var(--font-serif); font-size: clamp(22px,2.4vw,48px); letter-spacing: 8px; }
.boot-msg { font-family: var(--font-mono); color: var(--text-dim); }
.boot-err { color: var(--bad); font-family: var(--font-mono); max-width: 70ch; text-align: center; }
.boot-btn { appearance: none; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); font: inherit; padding: 8px 26px; border-radius: 8px; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .carousel-track { transition: opacity .3s; }
  .ft-track { animation: none; }
}

/* ---- 详情仓卡片「展开」按钮 ---- */
.c-card-head-r { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.c-card-expand { appearance: none; border: 1px solid var(--panel-border); background: var(--panel-2); color: var(--accent-2); font: inherit; font-size: clamp(10px,0.8vw,13px); padding: 3px 12px; border-radius: 6px; cursor: pointer; letter-spacing: 1px; white-space: nowrap; }
.c-card-expand:hover { border-color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }

/* ---- 弹窗（移植自 admin.css，套大屏 token）---- */
.modal-scrim { position: fixed; inset: 0; background: rgba(3,8,18,0.72); backdrop-filter: blur(4px); z-index: 100; display: grid; place-items: center; }
.modal { width: 92vw; max-width: 1500px; max-height: 88vh; background: var(--panel-2); border: 1px solid var(--panel-border-strong); border-radius: 16px; box-shadow: 0 30px 90px rgba(0,0,0,0.6); display: flex; flex-direction: column; }
.modal-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--panel-border); }
.modal-title { font-family: var(--font-serif); font-size: clamp(16px,1.4vw,26px); font-weight: 600; letter-spacing: 2px; color: var(--text); }
.modal-x { appearance: none; border: 0; background: transparent; color: var(--text-dim); font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px; }
.modal-x:hover { color: var(--accent); }
.modal-body { flex: 1 1 auto; padding: 18px 22px; overflow-y: auto; min-height: 0; }
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 4px; }

/* ---- 展开筛选条 + 分项大图网格 ---- */
.expand-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.expand-filter > button { appearance: none; border: 1px solid var(--panel-border); background: var(--panel); color: var(--text-dim); font: inherit; font-size: 13px; padding: 4px 12px; border-radius: 6px; cursor: pointer; }
.expand-filter > button:hover { border-color: var(--accent); color: var(--accent-2); }
.expand-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); margin-right: 4px; }
.exp-chip { display: inline-flex; align-items: center; gap: 5px; font-size: clamp(11px,0.85vw,14px); color: var(--text-dim); border: 1px solid var(--panel-border); border-radius: 7px; padding: 3px 10px; cursor: pointer; user-select: none; }
.exp-chip.on { border-color: var(--accent); color: var(--accent-2); background: var(--accent-soft); }
.exp-chip input { accent-color: var(--accent); margin: 0; }
.exp-chip-n { font-family: var(--font-mono); font-size: 0.82em; color: var(--text-mute); }
.exp-chip.on .exp-chip-n { color: var(--accent-2); }
.expand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px,1fr)); gap: 18px; }
.expand-cell { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; padding: 12px 14px; }
.expand-cell-h { font-family: var(--font-mono); font-size: clamp(11px,0.85vw,14px); color: var(--text-dim); margin-bottom: 6px; letter-spacing: 1px; word-break: break-all; }
.expand-cell .mini-svg { min-height: 200px; }

/* ---- 例句证据（功能二） ---- */
.ev-modeswitch-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ev-modeswitch { display: inline-flex; gap: 0; background: var(--panel-2); border: 1px solid var(--accent); border-radius: 8px; padding: 3px; flex: 0 0 auto; }
.ev-modeswitch button { appearance: none; border: 0; background: transparent; color: var(--text-dim); font: inherit; font-weight: 600; font-size: clamp(12px,0.95vw,16px); padding: 5px 16px; border-radius: 6px; cursor: pointer; letter-spacing: 1px; white-space: nowrap; }
.ev-modeswitch button.on { background: var(--accent); color: #06101e; box-shadow: 0 0 12px var(--accent-glow); }
.ev-hint { font-size: clamp(11px,0.85vw,14px); color: var(--accent-2); }
/* 指标列举卡：标签（可看例句 / 可滚动） */
.c-card-tags { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.c-card-evtag { font-family: var(--font-mono); font-size: clamp(9px,0.7vw,12px); color: #06101e; background: var(--accent); border-radius: 5px; padding: 2px 9px; font-weight: 600; box-shadow: 0 0 10px var(--accent-glow); }
.evidence-head { font-family: var(--font-mono); font-size: clamp(11px,0.85vw,14px); color: var(--text-mute); margin-bottom: 10px; }
.evidence-list { display: flex; flex-direction: column; gap: 10px; }
.evidence-item { font-size: clamp(13px,1.05vw,18px); line-height: 1.75; color: var(--text-dim); background: var(--panel); border: 1px solid var(--panel-border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 14px; }
.ev-mark { background: var(--accent-soft); color: var(--accent-2); border-bottom: 2px solid var(--accent); border-radius: 3px; padding: 0 2px; font-weight: 600; }
.ev-meta { font-family: var(--font-mono); font-size: clamp(10px,0.78vw,13px); color: var(--text-mute); white-space: nowrap; }
/* 词证据：命中词网格（点词看原句） */
.wordev { display: flex; flex-direction: column; gap: 12px; }
.wordev-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.wordchip { display: inline-flex; align-items: baseline; gap: 5px; font-size: clamp(12px,0.95vw,16px); color: var(--text-dim); background: var(--panel); border: 1px solid var(--panel-border); border-radius: 7px; padding: 4px 10px; cursor: pointer; user-select: none; transition: border-color .15s, color .15s; }
.wordchip:hover { border-color: var(--accent); color: var(--text); }
.wordchip.on { border-color: var(--accent); color: var(--accent-2); background: var(--accent-soft); box-shadow: 0 0 10px var(--accent-glow); }
.wordchip-n { font-family: var(--font-mono); font-size: 0.72em; color: var(--text-mute); }
.wordchip.on .wordchip-n { color: var(--accent-2); }
.wordev-sents { margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--panel-border); }
/* 例句·题目来源标注 */
.ev-source { display: inline-block; font-family: var(--font-mono); font-size: clamp(10px,0.78vw,13px); color: var(--accent-2); background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 5px; padding: 1px 8px; margin-right: 9px; white-space: nowrap; }
/* 词性筛选（仅词表词汇模式，贴在「词表词汇」按钮右侧） */
.pos-filter { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pos-chip { appearance: none; font: inherit; font-size: clamp(11px,0.82vw,14px); color: var(--text-dim); background: var(--panel); border: 1px solid var(--panel-border); border-radius: 6px; padding: 3px 11px; cursor: pointer; user-select: none; }
.pos-chip:hover { border-color: var(--accent); color: var(--text); }
.pos-chip.on { border-color: var(--accent); color: #06101e; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
/* 例句·左侧抽屉：宽=中间指标区，右缘贴详情面板左沿，露出最左雷达；右栏词条/分项不被遮，仍可点切换。无遮罩。 */
.word-drawer {
  position: fixed; z-index: 90;
  top: clamp(54px, 6vh, 84px);        /* 贴 header 下沿 */
  bottom: clamp(38px, 4.4vh, 56px);   /* 贴 footer 上沿 */
  left: 24vw; right: 46vw;            /* 占中间指标区(雷达 0~24vw 露出，详情 54~100vw 不遮) */
  display: flex; flex-direction: column;
  background: var(--panel-2); border: 1px solid var(--panel-border-strong);
  border-radius: 14px; box-shadow: 0 24px 90px rgba(0,0,0,0.62);
  animation: drawerIn .26s cubic-bezier(.22,.61,.36,1);
}
@keyframes drawerIn { from { transform: translateX(-12%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.ev-reopen { margin-left: 10px; appearance: none; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-2); font: inherit; font-size: clamp(11px,0.85vw,14px); padding: 3px 12px; border-radius: 7px; cursor: pointer; }
.ev-reopen:hover { background: var(--accent); color: #06101e; }
.word-drawer-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--panel-border); }
.word-drawer-title { font-family: var(--font-serif); font-size: clamp(15px,1.3vw,24px); font-weight: 600; letter-spacing: 1px; color: var(--text); }
.word-drawer-x { appearance: none; flex: 0 0 auto; border: 1px solid var(--panel-border); background: var(--panel); color: var(--text-dim); font: inherit; font-size: clamp(12px,0.92vw,15px); padding: 5px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.word-drawer-x:hover { border-color: var(--accent); color: var(--accent); }
.word-drawer-body { flex: 1 1 auto; padding: 16px 20px; overflow-y: auto; min-height: 0; }
.word-drawer-body::-webkit-scrollbar { width: 8px; }
.word-drawer-body::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 4px; }

/* ========== 「查看原题」按钮 + 原题弹层（纸面浅色，叠在暗色大屏上）========== */
.zoneB .z-head { display: flex; align-items: center; justify-content: space-between; gap: 1vw; }
.view-source-btn {
  flex: 0 0 auto; cursor: pointer; white-space: nowrap;
  font-family: var(--font-sans); font-size: clamp(12px, 1vw, 16px); font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--panel-border-strong); border-radius: 10px;
  padding: 0.7vh 1.1vw; transition: background .15s, transform .1s;
}
.view-source-btn:hover { background: rgba(251, 191, 36, 0.22); }
.view-source-btn:active { transform: scale(0.96); }
.boot-view-source { margin-top: 3vh; font-size: clamp(14px, 1.2vw, 18px); padding: 1vh 1.6vw; }

.src-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(3, 7, 15, 0.74); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 4vh 3vw;
  animation: srcFade .18s ease;
}
@keyframes srcFade { from { opacity: 0; } to { opacity: 1; } }
.src-modal {
  width: min(1100px, 92vw); max-height: 92vh; display: flex; flex-direction: column;
  background: #f6f4ec; color: #23201a; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); border: 1px solid rgba(0, 0, 0, 0.12);
}
.src-modal-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; background: #efe9da; border-bottom: 1px solid #ddd4be;
}
.src-modal-title { font-family: var(--font-serif); font-size: clamp(18px, 1.6vw, 26px); font-weight: 700; color: #3a3326; }
.src-modal-sub { font-family: var(--font-mono); font-size: 0.7em; color: #8a7f63; margin-left: 10px; }
.src-modal-x {
  cursor: pointer; border: 1px solid #c9bfa3; background: #fff; color: #6b5f44;
  border-radius: 8px; padding: 6px 14px; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.src-modal-x:hover { background: #f0ebdd; }
.src-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 22px 28px; }
.src-modal-body::-webkit-scrollbar { width: 9px; }
.src-modal-body::-webkit-scrollbar-thumb { background: #d8cfb6; border-radius: 4px; }

.src-msg { text-align: center; color: #8a7f63; padding: 8vh 0; font-size: 16px; }
.src-msg.err { color: #cf222e; }

.src-sec { margin-bottom: 26px; }
.src-sec + .src-sec { padding-top: 22px; border-top: 1px dashed #d8cfb6; }
.src-sec-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.src-sec-t { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: #b45309; }
.src-sec-n { font-family: var(--font-mono); font-size: 13px; color: #8a7f63; }

.src-passage {
  font-family: var(--font-serif); font-size: 16.5px; line-height: 2.0; color: #2b2820;
  background: #fffdf7; border: 1px solid #e7dec5; border-radius: 10px; padding: 16px 18px; margin-bottom: 16px;
}
.src-blank { display: inline; white-space: nowrap; }
.src-blank-n {
  display: inline-block; min-width: 18px; text-align: center; line-height: 1.5;
  font-family: var(--font-mono); font-size: 12px; color: #fff; background: #b45309;
  border-radius: 5px; padding: 0 5px; margin: 0 3px; vertical-align: middle;
}
.src-blank-a { color: #1a7f37; font-weight: 700; margin: 0 2px; }
.src-hint { color: #8a7f63; font-style: italic; font-size: 0.9em; margin-left: 2px; }

.src-qlist { display: flex; flex-direction: column; gap: 14px; }
.src-q { background: #fffdf7; border: 1px solid #ece3cc; border-radius: 10px; padding: 12px 16px; }
.src-q-stem { font-size: 15.5px; line-height: 1.7; color: #2b2820; }
.src-q-num { font-family: var(--font-mono); font-weight: 700; color: #b45309; margin-right: 8px; }
.src-ans-letter { color: #1a7f37; font-size: 1.05em; }
.src-ans-txt { color: #4a4636; }
.src-ans { margin-top: 6px; font-size: 14.5px; color: #1a7f37; }

.src-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-top: 10px; }
.src-opt {
  display: flex; align-items: flex-start; gap: 6px; font-size: 14.5px; line-height: 1.5;
  padding: 7px 11px; border: 1px solid #e2d8bd; border-radius: 8px; background: #fff; color: #3a3630;
}
.src-opt b { color: #8a7f63; flex: 0 0 auto; }
.src-opt.correct { background: #e8f6ec; border-color: #95d3a6; color: #14532d; font-weight: 600; }
.src-opt.correct b { color: #1a7f37; }
.src-tick { margin-left: auto; color: #1a7f37; font-weight: 700; }

.src-cands { background: #fbf7ec; border: 1px solid #e7dec5; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; }
.src-cands-h { font-size: 13px; font-weight: 700; color: #8a7f63; margin-bottom: 8px; }
.src-cand { display: flex; gap: 7px; font-size: 14.5px; line-height: 1.7; color: #4a4636; }
.src-cand b { color: #8a7f63; flex: 0 0 auto; }
.src-cand.used { color: #14532d; font-weight: 600; }
.src-cand.used b { color: #1a7f37; }

.src-prompt {
  font-size: 15.5px; line-height: 1.8; color: #2b2820; white-space: pre-wrap;
  background: #fffdf7; border: 1px solid #e7dec5; border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
}
.src-cont { margin: 12px 0; }
.src-cont-p { font-size: 15px; line-height: 1.7; color: #2b2820; margin: 4px 0; }
.src-meta { font-size: 13.5px; color: #8a7f63; margin-top: 8px; }

.src-annot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.src-chip { font-family: var(--font-mono); font-size: 12px; color: #6b5f44; background: #f0ead9; border: 1px solid #e0d5b8; border-radius: 6px; padding: 2px 8px; }
.src-chip b { color: #b45309; font-weight: 700; margin-right: 4px; }