/* ============ 设计 token（唯一来源，组件不得硬编码色值）§12.1.1 ============ */
:root {
  /* 颜色：前 6 个逐字取自展示页，其余派生 */
  --paper:#fafaf8; --graphite:#eeeeeb; --carbon:#111212; --ink:#202220;
  --cobalt:#2152e7; --cobalt-press:#1a41bd; --pale-blue:#c2dcff;
  --signal:#ec353e; --detect:#267dff; --muted:#6b6f6e;
  --line:rgba(17,18,18,.12); --line-strong:rgba(17,18,18,.28);
  --tint-cobalt:rgba(33,82,231,.08); --tint-signal:rgba(236,53,62,.08);

  /* 排版 */
  --font-display:Georgia,"Times New Roman","Songti SC",serif;
  --font-ui:Arial,"Helvetica Neue",Helvetica,"PingFang SC","Microsoft YaHei",sans-serif;
  --fs-display:clamp(38px,4.6vw,57px); --fs-h1:28px; --fs-h2:21px;
  --fs-lead:clamp(27px,3.2vw,37px); --fs-body:16px; --fs-meta:13px; --fs-micro:11px;
  --lh-h1:1.18; --lh-body:1.6; --ls-h1:-.02em; --ls-micro:.06em;

  /* 尺寸 */
  --maxw:1200px; --gutter:19px; --radius-card:17px; --radius-btn:10px; --radius-pill:999px;
  --row-h:60px; --statusbar-h:56px;
  --s1:6px; --s2:10px; --s3:14px; --s4:19px; --s5:28px; --s6:40px; --s7:56px;

  /* 动效 */
  --dur-spring:480ms; --ease-spring:cubic-bezier(.2,.9,.3,1.05);
  --dur-box:420ms;    --ease-box:cubic-bezier(.16,.84,.32,1);
  --dur-fade:180ms;   --ease-fade:cubic-bezier(.4,0,.2,1);
  --dur-press:120ms;  --dur-scan:100ms; --dur-drift:6s;
}
@media (prefers-color-scheme: dark) {
  :root { --paper:#111212; --graphite:#1b1c1c; --ink:#eceeeb; --muted:#9ba1a0;
          --cobalt:#6e93ff; --cobalt-press:#8aa8ff; --line:rgba(236,238,235,.14);
          --line-strong:rgba(236,238,235,.30); --tint-cobalt:rgba(110,147,255,.14);
          --tint-signal:rgba(236,53,62,.16); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-spring:1ms; --dur-box:1ms; --dur-fade:1ms; --dur-drift:0s; }
  .live-dot { animation:none !important; }
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  background:var(--paper); color:var(--ink);
  font:var(--fs-body)/var(--lh-body) var(--font-ui);
  -webkit-text-size-adjust:100%;
  word-break:break-word;
}
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
[hidden] { display:none !important; }
::selection { background:var(--pale-blue); color:var(--carbon); }
:focus-visible { outline:2px solid var(--cobalt); outline-offset:2px; }

/* ============ 布局 ============ */
.shell { max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter) calc(76px + env(safe-area-inset-bottom)); }
.main { padding-top:var(--s5); min-height:60vh; }
.main:focus { outline:none; }

/* 顶部状态条 */
.statusbar {
  position:sticky; top:0; z-index:30; height:var(--statusbar-h);
  display:flex; align-items:center; gap:var(--s3);
  padding:0 var(--gutter); max-width:var(--maxw); margin:0 auto;
  background:var(--paper); border-bottom:1px solid var(--line);
  font-size:var(--fs-meta); color:var(--muted);
}
.statusbar__inner { display:flex; align-items:center; gap:var(--s2); flex:1; min-width:0; overflow:hidden; white-space:nowrap; }
.statusbar__dot { width:8px; height:8px; flex:0 0 8px; }
.statusbar__sep { color:var(--line-strong); }
.statusbar__warn { color:var(--signal); }
.statusbar__exit { margin-left:auto; }
.statusbar__text { overflow:hidden; text-overflow:ellipsis; }

/* 导航：移动端底部 Tab，桌面左侧栏 */
.nav {
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:grid; grid-template-columns:repeat(5, 1fr);
  background:var(--paper); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav__item {
  min-height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:8px 0; color:var(--muted); font-size:var(--fs-micro);
  letter-spacing:var(--ls-micro); transition:color var(--dur-fade) var(--ease-fade);
}
.nav__item svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:square; }
.nav__item[aria-current="page"] { color:var(--cobalt); background:var(--tint-cobalt); }
@media (min-width:900px) {
  .nav { position:sticky; top:calc(var(--statusbar-h) + var(--s5)); left:auto; right:auto; bottom:auto;
         display:flex; flex-direction:column; float:left; width:168px;
         background:transparent; border-top:0; border-right:1px solid var(--line); padding-bottom:0; }
  .nav__item { flex-direction:row; justify-content:flex-start; gap:var(--s3); padding:0 var(--s4); min-height:44px;
               border-right:2px solid transparent; font-size:var(--fs-meta); letter-spacing:0; }
  .nav__item[aria-current="page"] { background:transparent; border-right-color:var(--cobalt); }
  .main { margin-left:calc(168px + var(--s5)); }
  .shell { padding-bottom:var(--s7); }
}

/* ============ 通用组件 ============ */
.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-card); padding:var(--s5); }
.card + .card { margin-top:var(--gutter); }
.card--graphite { background:var(--graphite); }
.card--tight { padding:var(--s4); }
.card__title { font:var(--fs-h2)/1.3 var(--font-display); letter-spacing:var(--ls-h1); margin:0 0 var(--s3); }
.card__sub { color:var(--muted); font-size:var(--fs-meta); margin:0; }
.card__foot { margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line);
              color:var(--muted); font-size:var(--fs-micro); letter-spacing:.02em; }
.card__head { display:flex; align-items:flex-start; gap:var(--s3); }
.card__head > :first-child { flex:1; min-width:0; }

.display { font:var(--fs-display)/var(--lh-h1) var(--font-display); letter-spacing:var(--ls-h1); margin:0; }
.h1 { font:var(--fs-h1)/var(--lh-h1) var(--font-display); letter-spacing:var(--ls-h1); margin:0; }
.lead { font:var(--fs-lead)/1.32 var(--font-display); letter-spacing:var(--ls-h1); margin:0; }
.meta { font-size:var(--fs-meta); color:var(--muted); }
.micro { font-size:var(--fs-micro); color:var(--muted); letter-spacing:var(--ls-micro); text-transform:uppercase; }
.num { font-variant-numeric:tabular-nums; }
.error-text { color:var(--signal); font-size:var(--fs-meta); }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }

.btn {
  height:40px; padding:0 18px; border-radius:var(--radius-btn);
  font:var(--fs-body)/1 var(--font-ui); border:1px solid var(--line-strong);
  background:transparent; color:var(--ink); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background var(--dur-fade) var(--ease-fade), transform var(--dur-press) var(--ease-fade);
}
.btn:hover { background:var(--graphite); }
.btn:active { transform:scale(.98); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn--primary { background:var(--cobalt); border-color:var(--cobalt); color:#fff; }
.btn--primary:hover { background:var(--cobalt-press); }
.btn--danger { color:var(--signal); border-color:var(--signal); }
.btn--ghost { border-color:transparent; }
.btn--sm { height:32px; padding:0 12px; font-size:var(--fs-meta); border-radius:8px; }
.btn--block { width:100%; }

.input, .select {
  height:40px; width:100%; padding:0 12px; border-radius:var(--radius-btn);
  border:1px solid var(--line-strong); background:var(--paper); color:var(--ink);
  font:16px/1.2 var(--font-ui);
}
.input:focus, .select:focus { outline:2px solid var(--cobalt); outline-offset:1px; border-color:transparent; }
.field { display:flex; flex-direction:column; gap:var(--s1); }
.field > label { font-size:var(--fs-micro); color:var(--muted); letter-spacing:var(--ls-micro); text-transform:uppercase; }
.row { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.grow { flex:1; min-width:0; }
.stack > * + * { margin-top:var(--s3); }

.badge { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 10px;
         border-radius:var(--radius-pill); border:1px solid var(--line-strong);
         font-size:var(--fs-micro); letter-spacing:var(--ls-micro); color:var(--ink); white-space:nowrap; }
.badge--ok { border-color:var(--cobalt); color:var(--cobalt); }
.badge--graphite { background:var(--graphite); border-color:transparent; }
.badge--signal { border-color:var(--signal); color:var(--signal); }
.badge--muted { color:var(--muted); }
.badge--running { border-color:var(--detect); color:var(--detect); }

.chip { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px;
        border:1px solid var(--line); border-radius:var(--radius-pill); font-size:var(--fs-meta);
        background:transparent; color:var(--ink); cursor:pointer; transition:background var(--dur-fade) var(--ease-fade); }
.chip[aria-pressed="true"] { background:var(--graphite); border-color:var(--line-strong); }

.sq { width:8px; height:8px; flex:0 0 8px; display:inline-block; }
.live-dot { width:8px; height:8px; background:var(--detect); display:inline-block; flex:0 0 8px;
            animation:breathe 2.4s ease-in-out infinite; }
.live-dot--off { background:var(--muted); animation:none; }
@keyframes breathe { 0%,100%{opacity:.35} 50%{opacity:1} }

.divider { height:1px; background:var(--line); border:0; margin:var(--s4) 0; }

/* ============ 登录 ============ */
.login { min-height:100vh; display:grid; place-items:center; padding:var(--s5) var(--gutter); }
.login__card { width:100%; max-width:420px; }
.login__title { font:var(--fs-display)/1.05 var(--font-display); letter-spacing:var(--ls-h1); margin:0 0 var(--s2); }
.login__sub { color:var(--muted); margin:0 0 var(--s5); font-size:var(--fs-meta); }
.login__form { display:flex; flex-direction:column; gap:var(--s3); }
.login__btn { position:sticky; bottom:var(--s3); }

/* ============ 实时流 ============ */
.msg { display:grid; grid-template-columns:8px 1fr; gap:var(--s3); padding:var(--s2) 0; border-bottom:1px solid var(--line); cursor:pointer; }
.msg:hover { background:var(--tint-cobalt); }
.msg__bar { width:2px; align-self:stretch; background:var(--cobalt); opacity:.15; }
.msg--l2 .msg__bar { width:4px; opacity:.64; }
.msg--l3 .msg__bar { width:7px; opacity:.93; }
.msg--l4 .msg__bar { width:10px; opacity:1; }
.msg--enter { animation:enter var(--dur-fade) var(--ease-fade) both; }
@keyframes enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.msg__head { display:flex; align-items:center; gap:var(--s2); font-size:var(--fs-meta); color:var(--muted); }
.msg__name { color:var(--ink); }
.msg__text { margin:4px 0 0; font-size:var(--fs-body); line-height:var(--lh-body); }
.msg__flag { color:var(--muted); font-size:var(--fs-micro); border:1px solid var(--line); border-radius:var(--radius-pill); padding:0 8px; }
.msg__time { font-variant-numeric:tabular-nums; }
.grouphd { display:flex; justify-content:center; margin:var(--s4) 0 var(--s2); }
.grouphd span { font-size:var(--fs-micro); color:var(--muted); letter-spacing:var(--ls-micro); }
.jump-latest { position:fixed; right:var(--gutter); bottom:calc(72px + env(safe-area-inset-bottom)); z-index:25;
               border-radius:var(--radius-pill); background:var(--carbon); color:var(--paper);
               border:1px solid var(--carbon); padding:0 14px; height:36px; font-size:var(--fs-meta); cursor:pointer; }
@media (min-width:900px){ .jump-latest { bottom:var(--s5); right:var(--s5); } }
.empty { text-align:center; color:var(--muted); padding:var(--s7) var(--s4); }
.empty__title { font:var(--fs-h2)/1.3 var(--font-display); color:var(--ink); margin:0 0 var(--s2); }

/* ============ 历史 ============ */
.filters { display:grid; gap:var(--s3); }
@media (min-width:720px){ .filters { grid-template-columns:repeat(3, 1fr); } .filters .span2 { grid-column:span 2; } }
.dayhd { margin:var(--s5) 0 var(--s2); font:var(--fs-h2)/1.3 var(--font-display); letter-spacing:var(--ls-h1); }
.hit { background:var(--pale-blue); color:var(--carbon); }
.list { border-top:1px solid var(--line); }
.list__item { display:grid; grid-template-columns:1fr auto; gap:var(--s2); padding:var(--s3) 0; border-bottom:1px solid var(--line); cursor:pointer; min-height:var(--row-h); }
.list__item:hover { background:var(--tint-cobalt); }
.ctx-nav { display:flex; justify-content:space-between; gap:var(--s2); margin-top:var(--s4); }

/* ============ 日报 ============ */
.daily-list { display:grid; gap:var(--s3); }
.daily-item { display:grid; grid-template-columns:auto 1fr; gap:var(--s4); padding:var(--s4) 0; border-bottom:1px solid var(--line); cursor:pointer; }
.daily-item__date { font:var(--fs-h2)/1.2 var(--font-display); min-width:96px; }
.daily-item__txt { color:var(--ink); }
.topic { display:grid; grid-template-columns:1fr auto; gap:var(--s3); padding:var(--s3) 0; border-bottom:1px solid var(--line); }
.topic__bars { display:grid; grid-template-columns:repeat(20, 1fr); gap:2px; align-items:end; height:14px; margin-top:var(--s2); }
.topic__bars i { height:14px; background:var(--cobalt); opacity:.12; }
.topic__bars i.on1 { opacity:.15 } .topic__bars i.on2 { opacity:.64 }
.topic__bars i.on3 { opacity:.93 } .topic__bars i.on4 { opacity:1 }
.check { display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s2) 0; border-bottom:1px solid var(--line); }
.check input { width:18px; height:18px; margin-top:2px; accent-color:var(--cobalt); }
.quote { border-left:2px solid var(--line-strong); padding-left:var(--s3); color:var(--ink); }
.kv { display:grid; grid-template-columns:auto 1fr; gap:var(--s2) var(--s4); font-size:var(--fs-meta); }
.kv dt { color:var(--muted); }
.kv dd { margin:0; font-variant-numeric:tabular-nums; }

/* ============ 状态 ============ */
.grid2 { display:grid; gap:var(--gutter); }
@media (min-width:720px){ .grid2 { grid-template-columns:1fr 1fr; } }
.metric { font:var(--fs-h1)/1.1 var(--font-display); font-variant-numeric:tabular-nums; letter-spacing:var(--ls-h1); margin:var(--s1) 0 0; }
.metric--sm { font:var(--fs-h2)/1.2 var(--font-display); }
.chan { display:flex; align-items:center; gap:var(--s2); padding:var(--s2) 0; border-bottom:1px solid var(--line); font-size:var(--fs-meta); }
.chan:last-child { border-bottom:0; }

/* ============ 说话人 ============ */
.sp { display:grid; grid-template-columns:8px 1fr auto; gap:var(--s3); align-items:center; padding:var(--s3) 0; border-bottom:1px solid var(--line); }
.sp__name { border:0; background:transparent; font:var(--fs-body)/1.4 var(--font-ui); color:var(--ink); padding:4px 0; width:100%; }
.sp__name:focus { outline:2px solid var(--cobalt); outline-offset:2px; }

/* ============ 抽屉 / toast ============ */
.drawer { position:fixed; inset:0; z-index:60; background:rgba(17,18,18,.28); display:flex; align-items:flex-end; justify-content:center; }
.drawer__panel { width:100%; max-width:640px; background:var(--paper); border:1px solid var(--line);
                 border-radius:var(--radius-card) var(--radius-card) 0 0; padding:var(--s5);
                 max-height:82vh; overflow:auto; animation:sheet var(--dur-box) var(--ease-box); }
@media (min-width:900px){ .drawer { align-items:center; } .drawer__panel { border-radius:var(--radius-card); } }
@keyframes sheet { from { transform:translateY(24px); opacity:.6 } to { transform:none; opacity:1 } }
.drawer__close { margin-left:auto; }
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(88px + env(safe-area-inset-bottom));
         z-index:70; background:var(--carbon); color:var(--paper); border-radius:var(--radius-pill);
         padding:8px 18px; font-size:var(--fs-meta); max-width:80vw; }
.toast--err { background:var(--signal); color:#fff; }

/* 量化竖条（回听进度） */
.wave { display:flex; gap:2px; align-items:flex-end; height:24px; }
.wave i { width:3px; height:6px; background:var(--line-strong); }
.wave i.played { background:var(--cobalt); }
.wave i.h2 { height:10px } .wave i.h3 { height:16px } .wave i.h4 { height:24px }
.wave.playing i.played { animation:wv var(--dur-drift) linear infinite alternate; }
@keyframes wv { from { transform:scaleY(.86) } to { transform:scaleY(1) } }

.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }