/* ==========================================================================
   site.css —— 格物 · 真站点统一样式表（由 site/tools/build_site.py 的迁移脚本从
   site/design/ds.css 与 9 张设计稿的 <style> 块抽取而来，单一文件、零内联样式）
   规则：色板/字号/间距/圆角/阴影只在 :root 定义；每页样式挂在 body 的 .p-<page> 作用域下。
   严格 CSP：本文件是唯一的 style 来源，页面里不允许出现 style="..." 或 <style>。
   ========================================================================== */

/* ==========================================================================
   ds.css —— 格物 · 设计系统（设计稿与将来真站点共用同一份）
   规则：色板、字号、间距、圆角、阴影只在这里定义，页面里禁止写死颜色。
   字体只用系统字体，不加载 webfont（首屏快 > 字好看）。
   ========================================================================== */

:root {
  /* ---- 纸与墨 ---- */
  --bg: #FAF8F4;          /* 纸底 */
  --surface: #FFFFFF;     /* 卡片 */
  --surface-2: #FCFBF8;   /* 次级卡片 */
  --surface-3: #F3F1EC;   /* 内嵌块 */
  --ink: #1F2430;         /* 正文 */
  --ink-2: #5A6270;       /* 次要 */
  --ink-3: #8B93A1;       /* 辅助 */
  --line: #E7E2D9;        /* 分隔线 */
  --line-2: #F0ECE5;      /* 浅分隔 */

  /* ---- 语义色 ---- */
  --accent: #2A3040;      /* 主按钮/选中态（近墨色，比纯黑温和） */
  --mark: #FFF0C2;        /* 命中高亮 */
  --star: #E0A93B;        /* 星级 */
  --warn-bg: #FDF6EB;     /* 难点卡底 */
  --warn-line: #EEDBBD;
  --warn-ink: #B07628;
  --ok: #4C9A63;

  /* ---- 学科色：只用于 3px 竖条 / 标签字 / 统计数字，不铺大面积 ---- */
  --math: #5B6FD6;
  --math-bg: #EEF0FB;
  --bio: #4C9A63;
  --bio-bg: #ECF5EF;
  --geo: #3E93A6;
  --geo-bg: #EAF4F6;
  --gold: #C8902F;
  --gold-bg: #FBF3E3;

  /* ---- 字号：只开 7 档，够用且不失控 ---- */
  --f-40: 40px;   /* 首屏主标 */
  --f-28: 28px;   /* 页面标题 */
  --f-20: 20px;   /* 区块标题 */
  --f-16: 16px;   /* 卡片标题 */
  --f-14: 14px;   /* 正文 */
  --f-12: 12px;   /* 辅助 */
  --f-11: 11px;   /* 标签 */

  /* ---- 间距：8 的倍数 ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* ---- 形 ---- */
  --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-4: 20px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(120, 112, 100, .05), 0 2px 8px rgba(120, 112, 100, .05);
  --shadow-2: 0 2px 6px rgba(120, 112, 100, .07), 0 10px 30px rgba(120, 112, 100, .08);
  --shadow-3: 0 18px 60px rgba(60, 52, 40, .18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--bg); }

body {
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC",
               "Hiragino Sans GB", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  font-size: var(--f-14);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

/* ---- 布局 ---- */
.wrap { width: 1360px; margin: 0 auto; }        /* 1440 屏 → 两侧 40 */
.row { display: flex; gap: var(--s-5); }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.center { align-items: center; }

/* ---- 卡片 ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
}
.card-flat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); }

/* ---- 文字 ---- */
.t-40 { font-size: var(--f-40); font-weight: 700; letter-spacing: -.5px; line-height: 1.25; }
.t-28 { font-size: var(--f-28); font-weight: 700; letter-spacing: -.3px; line-height: 1.3; }
.t-20 { font-size: var(--f-20); font-weight: 700; line-height: 1.4; }
.t-16 { font-size: var(--f-16); font-weight: 700; line-height: 1.45; }
.t-14 { font-size: var(--f-14); }
.t-12 { font-size: var(--f-12); }
.t-11 { font-size: var(--f-11); }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.b { font-weight: 700; }

/* ---- 药丸 / 徽章 ---- */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: var(--f-11); font-weight: 700;
  background: var(--surface-3); color: var(--ink-2);
  white-space: nowrap;
}
.pill-line { background: transparent; border: 1px solid var(--line); }
.pill-math { background: var(--math-bg); color: var(--math); }
.pill-bio  { background: var(--bio-bg);  color: var(--bio); }
.pill-geo  { background: var(--geo-bg);  color: var(--geo); }
.pill-gold { background: var(--gold-bg); color: var(--gold); }
.pill-warn { background: var(--warn-bg); color: var(--warn-ink); }

/* ---- 按钮 ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 18px;
  border-radius: var(--r-2);
  font-size: var(--f-14); font-weight: 700;
  background: var(--accent); color: #fff;
  white-space: nowrap;
}
.btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn-sm { height: 30px; padding: 0 12px; font-size: var(--f-12); border-radius: var(--r-1); }

/* ---- 顶部导航 ---- */
.topbar {
  position: relative;
  height: 64px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
  padding: 0 40px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-size: var(--f-14); font-weight: 700;
}
.brand-name { font-size: 18px; font-weight: 700; letter-spacing: -.2px; }
.brand-sub { font-size: var(--f-11); color: var(--ink-3); margin-left: 2px; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: 56px; }
.nav a {
  padding: 7px 14px; border-radius: 10px;
  font-size: var(--f-14); color: var(--ink-2);
}
.nav a.on { background: var(--surface-3); color: var(--ink); font-weight: 700; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.search-mini {
  display: flex; align-items: center; gap: 8px;
  width: 260px; height: 36px; padding: 0 12px;
  border-radius: var(--r-2);
  background: var(--surface-3);
  border: 1px solid transparent;
  color: var(--ink-3); font-size: var(--f-12);
}

/* ---- 输入 ---- */
.input {
  width: 100%; height: 42px; padding: 0 14px;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--surface);
  font: inherit; font-size: var(--f-14); color: var(--ink);
}
.input::placeholder { color: var(--ink-3); }
.input:focus { outline: none; border-color: var(--accent); }
textarea.input { height: auto; padding: 12px 14px; resize: none; line-height: 1.7; }

/* ---- 分节标题 ---- */
.section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: var(--s-4); }
.section-note { font-size: var(--f-12); color: var(--ink-3); }

/* ---- 页脚 ---- */
.footer {
  border-top: 1px solid var(--line);
  padding: 22px 40px;
  display: flex; align-items: center; gap: 24px;
  font-size: var(--f-12); color: var(--ink-3);
}

/* ---------- home.html ---------- */
.p-home .hero { padding: 54px 40px 0; display: flex; gap: 44px; }
.p-home .hero-left { width: 620px; flex: none; }
.p-home .hero-kicker { display: inline-flex; align-items: center; gap: 8px;
    height: 28px; padding: 0 12px; border-radius: 999px;
    background: var(--mark); color: #8A6A12;
    font-size: var(--f-11); font-weight: 700; letter-spacing: .2px; }
.p-home .hero h1 { margin-top: 20px; }
.p-home .hero h1 em { font-style: normal; color: var(--math); }
.p-home .hero-desc { margin-top: 18px; font-size: var(--f-16); color: var(--ink-2); line-height: 1.85; }
.p-home .hero-desc b { color: var(--ink); }
.p-home .hero-search { margin-top: 28px; display: flex; gap: 10px; }
.p-home .hero-search .input { height: 52px; font-size: var(--f-14); flex: 1; padding-left: 16px; }
.p-home .hero-search .btn { height: 52px; padding: 0 26px; font-size: var(--f-16); }
.p-home .hero-tags { margin-top: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p-home .hero-tags .lab { font-size: var(--f-12); color: var(--ink-3); margin-right: 2px; }
.p-home .chip { height: 28px; padding: 0 12px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line);
    font-size: var(--f-12); color: var(--ink-2);
    display: inline-flex; align-items: center; }
.p-home .hero-right { flex: 1; position: relative; }
.p-home .hero-shot { border-radius: var(--r-4); overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-3);
    background: #0B0D12; }
.p-home .hero-shot img { width: 100%; aspect-ratio: 14 / 9; object-fit: cover; }
.p-home .hero-float { position: absolute; left: -28px; bottom: 26px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-3); box-shadow: var(--shadow-2);
    padding: 12px 16px; width: 254px; }
.p-home .hero-float .k { font-size: var(--f-11); color: var(--ink-3); }
.p-home .hero-float .v { font-size: var(--f-16); font-weight: 700; margin-top: 2px; }
.p-home .hero-float .bar { height: 5px; border-radius: 999px; background: var(--surface-3); margin-top: 10px; overflow: hidden; }
.p-home .hero-float .bar i { display: block; height: 100%; width: 46%; background: var(--math); border-radius: 999px; }
.p-home .stats { margin: 46px 40px 0; display: grid; grid-template-columns: repeat(4, 1fr);
           background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
           box-shadow: var(--shadow-1); overflow: hidden; }
.p-home .stat { padding: 20px 24px; border-right: 1px solid var(--line-2); }
.p-home .stat:last-child { border-right: 0; }
.p-home .stat .v { font-size: var(--f-28); font-weight: 700; letter-spacing: -.5px; }
.p-home .stat .k { font-size: var(--f-12); color: var(--ink-3); margin-top: 2px; }
.p-home .sec { padding: 44px 40px 0; }
.p-home .subj-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.p-home .subj { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
    padding: 22px 22px 20px; box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
.p-home .subj::before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%;
    background: var(--c); }
.p-home .subj.math { --c: var(--math); --cb: var(--math-bg); }
.p-home .subj.bio { --c: var(--bio);  --cb: var(--bio-bg); }
.p-home .subj.geo { --c: var(--geo);  --cb: var(--geo-bg); }
.p-home .subj-head { display: flex; align-items: center; gap: 10px; }
.p-home .subj-badge { width: 34px; height: 34px; border-radius: 10px; background: var(--cb); color: var(--c);
    display: grid; place-items: center; font-size: var(--f-14); font-weight: 700; }
.p-home .subj-name { font-size: var(--f-20); font-weight: 700; }
.p-home .subj-tag { font-size: var(--f-12); color: var(--ink-2); margin-top: 10px; line-height: 1.7; min-height: 40px; }
.p-home .subj-nums { display: flex; gap: 22px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.p-home .subj-nums .n { font-size: var(--f-20); font-weight: 700; color: var(--c); }
.p-home .subj-nums .l { font-size: var(--f-11); color: var(--ink-3); }
.p-home .subj-go { margin-top: 16px; display: flex; align-items: center; gap: 6px;
             font-size: var(--f-12); color: var(--c); font-weight: 700; }
.p-home .scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.p-home .scene { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
    overflow: hidden; box-shadow: var(--shadow-1); }
.p-home .scene-shot { position: relative; background: #0B0D12; aspect-ratio: 16 / 9; }
.p-home .scene-shot img { width: 100%; height: 100%; object-fit: cover; }
.p-home .scene-play { position: absolute; inset: 0; display: grid; place-items: center; }
.p-home .scene-play i { width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,255,255,.92); color: #1F2430;
    display: grid; place-items: center;
    box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.p-home .scene-dur { position: absolute; right: 10px; bottom: 10px;
    height: 22px; padding: 0 8px; border-radius: 6px;
    background: rgba(12,14,20,.72); color: #E8EAEF;
    font-size: var(--f-11); font-weight: 700;
    display: grid; place-items: center; }
.p-home .scene-body { padding: 14px 16px 16px; }
.p-home .scene-meta { display: flex; align-items: center; gap: 7px; }
.p-home .scene-title { font-size: var(--f-16); font-weight: 700; margin-top: 9px; }
.p-home .scene-sub { font-size: var(--f-12); color: var(--ink-3); margin-top: 4px; }
.p-home .scene-hard { margin-top: 11px; padding: 9px 11px; border-radius: var(--r-1);
    background: var(--warn-bg); border: 1px solid var(--warn-line);
    font-size: var(--f-11); color: var(--warn-ink); line-height: 1.65; }
.p-home .beats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.p-home .beat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2);
    padding: 16px 16px 14px; position: relative; }
.p-home .beat .no { width: 22px; height: 22px; border-radius: 7px; background: var(--math-bg); color: var(--math);
    font-size: var(--f-11); font-weight: 700; display: grid; place-items: center; }
.p-home .beat h6 { font-size: var(--f-14); font-weight: 700; margin-top: 10px; }
.p-home .beat p { font-size: var(--f-12); color: var(--ink-2); margin-top: 5px; line-height: 1.7; }
.p-home .beat.hl { background: #F7F8FE; border-color: #D9DEF7; }
.p-home .beat.hl .no { background: var(--math); color: #fff; }
.p-home .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.p-home .promo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
    padding: 22px 24px; box-shadow: var(--shadow-1); }
.p-home .promo h5 { font-size: var(--f-16); font-weight: 700; display: flex; align-items: center; gap: 9px; }
.p-home .promo p { font-size: var(--f-12); color: var(--ink-2); margin-top: 9px; line-height: 1.8; }
.p-home .promo .acts { margin-top: 14px; display: flex; gap: 10px; align-items: center; }
.p-home .promo .fine { font-size: var(--f-11); color: var(--ink-3); }
.p-home .wish-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.p-home .wish { display: flex; align-items: center; gap: 10px; font-size: var(--f-12); color: var(--ink-2); }
.p-home .wish .nm { flex: 1; }
.p-home .wish .bar { width: 96px; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.p-home .wish .bar i { display: block; height: 100%; background: var(--gold); border-radius: 999px; }
.p-home .wish .vc { font-size: var(--f-11); color: var(--ink-3); width: 46px; text-align: right; }

/* ---------- catalog.html ---------- */
.p-catalog .phead { padding: 30px 40px 0; }
.p-catalog .phead h1 { font-size: var(--f-28); font-weight: 700; letter-spacing: -.3px; }
.p-catalog .phead p { margin-top: 10px; font-size: var(--f-14); color: var(--ink-2);
             line-height: 1.85; max-width: 820px; }
.p-catalog .phead .legend { margin-top: 18px; display: flex; align-items: center; gap: 18px;
                   flex-wrap: wrap; }
.p-catalog .lg { display: flex; align-items: center; gap: 7px; font-size: var(--f-12);
        color: var(--ink-2); }
.p-catalog .lg .dt { width: 13px; height: 13px; border-radius: 4px; flex: none; }
.p-catalog .glance { display: flex; gap: 10px; padding: 20px 40px 0; }
.p-catalog .gl { flex: 1; background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--r-2); padding: 13px 16px; display: flex;
        align-items: center; gap: 12px; box-shadow: var(--shadow-1); }
.p-catalog .gl .ic { width: 30px; height: 30px; border-radius: 9px; flex: none;
            display: grid; place-items: center; }
.p-catalog .gl .n { font-size: var(--f-20); font-weight: 700; font-variant-numeric: tabular-nums;
           letter-spacing: -.5px; }
.p-catalog .gl .t { font-size: var(--f-11); color: var(--ink-3); margin-top: 1px; }
.p-catalog .gl .bd { min-width: 0; }
.p-catalog .gl .wk { margin-left: auto; font-size: var(--f-11); color: var(--ink-3);
            text-align: right; line-height: 1.6; }
.p-catalog .subj { margin: 16px 40px 0; background: var(--surface); border: 1px solid var(--line);
          border-radius: var(--r-3); box-shadow: var(--shadow-1); overflow: hidden; }
.p-catalog .subj > header { display: flex; align-items: center; gap: 12px;
                   padding: 15px 20px 14px; border-bottom: 1px solid var(--line-2);
                   background: var(--surface-2); }
.p-catalog .subj .bar { width: 4px; height: 22px; border-radius: 3px; flex: none; }
.p-catalog .subj .nm { font-size: var(--f-16); font-weight: 700; }
.p-catalog .subj .meta { font-size: var(--f-11); color: var(--ink-3); }
.p-catalog .subj .kpi { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.p-catalog .subj .kv { font-size: var(--f-11); color: var(--ink-3); text-align: right; }
.p-catalog .subj .kv b { display: block; font-size: var(--f-14); color: var(--ink);
                font-variant-numeric: tabular-nums; }
.p-catalog .subj .prog { width: 116px; }
.p-catalog .subj .prog .track { height: 5px; border-radius: 999px; background: var(--surface-3);
                       overflow: hidden; }
.p-catalog .subj .prog .track i { display: block; height: 100%; border-radius: 999px; }
.p-catalog .subj .prog .tx { font-size: 10.5px; color: var(--ink-3); margin-top: 4px;
                    display: flex; justify-content: space-between; }
.p-catalog .vols { display: flex; }
.p-catalog .vol { flex: 1; min-width: 0; padding: 12px 20px 16px; }
.p-catalog .vol + .vol { border-left: 1px solid var(--line-2); }
.p-catalog .vol-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.p-catalog .vol-h .vn { font-size: var(--f-12); font-weight: 700; color: var(--ink-2); }
.p-catalog .vol-h .vt { font-size: var(--f-11); color: var(--ink-3); }
.p-catalog .ch { display: flex; align-items: center; gap: 10px; height: 38px;
        border-radius: 7px; padding: 0 8px; }
.p-catalog .ch:hover { background: var(--surface-2); }
.p-catalog .ch .no { width: 52px; flex: none; font-size: var(--f-11); color: var(--ink-3);
            letter-spacing: .2px; }
.p-catalog .ch .tt { width: 154px; flex: none; font-size: var(--f-12); color: var(--ink);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-catalog .ch .dots { display: flex; gap: 3px; flex: 1; align-items: center; }
.p-catalog .ch .ct { width: 46px; flex: none; text-align: right; font-size: var(--f-11);
            color: var(--ink-3); font-variant-numeric: tabular-nums; }
.p-catalog .ch .ct b { color: var(--ink-2); }
.p-catalog .ch.zero .tt { color: var(--ink-2); }
.p-catalog .ch.zero .ct { color: var(--warn-ink); }
.p-catalog .unit { margin: 10px 0 3px; padding: 0 8px; font-size: 10.5px; font-weight: 700;
          color: var(--ink-3); letter-spacing: .4px; }
.p-catalog .unit:first-child { margin-top: 2px; }
.p-catalog .dt { width: 13px; height: 13px; border-radius: 4px; flex: none; cursor: default; }
.p-catalog .dt.none { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }
.p-catalog .dt.has { box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.p-catalog .dt.live { position: relative; }
.p-catalog .note { margin: 18px 40px 0; padding: 14px 18px; background: var(--surface-2);
          border: 1px dashed var(--line); border-radius: var(--r-2);
          display: flex; gap: 10px; align-items: flex-start;
          font-size: var(--f-12); color: var(--ink-2); line-height: 1.85; }
.p-catalog .note b { color: var(--ink); }
.p-catalog .note .ic { width: 24px; height: 24px; border-radius: 7px; flex: none;
              background: var(--surface-3); color: var(--ink-2);
              display: grid; place-items: center; }

/* ---------- detail.html ---------- */
.p-detail .crumb { padding: 18px 40px 0; display: flex; align-items: center; gap: 6px;
           font-size: var(--f-12); color: var(--ink-3); }
.p-detail .crumb a { color: var(--ink-3); }
.p-detail .crumb .sep { opacity: .5; }
.p-detail .crumb .cur { color: var(--ink-2); }
.p-detail .head { padding: 14px 40px 0; }
.p-detail .head-top { display: flex; align-items: flex-end; gap: 14px; }
.p-detail .head h1 { font-size: var(--f-28); font-weight: 700; letter-spacing: -.3px; }
.p-detail .head-meta { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.p-detail .head-lead { margin-top: 14px; font-size: var(--f-14); color: var(--ink-2); line-height: 1.8;
               max-width: 880px; }
.p-detail .layout { display: flex; gap: 24px; padding: 22px 40px 0; align-items: flex-start; }
.p-detail .main { flex: 1; min-width: 0; }
.p-detail .side { width: 352px; flex: none; }
.p-detail .player { border-radius: var(--r-3); overflow: hidden; border: 1px solid var(--line);
            background: #0B0D12; box-shadow: var(--shadow-2); }
.p-detail .player-view { position: relative; aspect-ratio: 16 / 9; }
.p-detail .player-view img { width: 100%; height: 100%; object-fit: cover; }
.p-detail .player-view .cap { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    max-width: 620px; padding: 8px 14px; border-radius: var(--r-2);
    background: rgba(14, 16, 22, .84); border: 1px solid rgba(255,255,255,.10);
    color: #E9EBF1; font-size: var(--f-12); line-height: 1.7;
    display: flex; gap: 8px; align-items: baseline; }
.p-detail .player-view .cap .beat-tag { flex: none; height: 20px; padding: 0 7px; border-radius: 6px;
    background: var(--gold-bg); color: var(--gold);
    font-size: var(--f-11); font-weight: 700; display: grid; place-items: center; }
.p-detail .player-bigplay { position: absolute; inset: 0; display: grid; place-items: center; }
.p-detail .player-bigplay i { width: 62px; height: 62px; border-radius: 50%;
    background: rgba(255,255,255,.93); color: #1F2430;
    display: grid; place-items: center; box-shadow: 0 8px 26px rgba(0,0,0,.34); }
.p-detail .player-view .hint { position: absolute; left: 14px; top: 14px;
    height: 24px; padding: 0 9px; border-radius: 6px;
    background: rgba(14,16,22,.7); border: 1px solid rgba(255,255,255,.1);
    color: #B9BFCC; font-size: var(--f-11);
    display: flex; align-items: center; gap: 6px; }
.p-detail .timeline { padding: 0 14px 12px; background: #0E1016; }
.p-detail .tl-bar { display: flex; gap: 3px; height: 6px; margin-top: 12px; }
.p-detail .tl-bar i { display: block; border-radius: 999px; background: #2A2F3C; }
.p-detail .tl-bar i.done { background: var(--math); }
.p-detail .tl-bar i.now { background: var(--math); opacity: .55; }
.p-detail .tl-labels { display: flex; gap: 3px; margin-top: 7px; }
.p-detail .tl-labels span { font-size: var(--f-11); color: #6C7385; text-align: center; }
.p-detail .tl-labels span.on { color: #E9EBF1; font-weight: 700; }
.p-detail .player-ctrl { display: flex; align-items: center; gap: 10px;
    padding: 0 14px 12px; background: #0E1016; }
.p-detail .pbtn { width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.08); color: #E9EBF1;
    display: grid; place-items: center; }
.p-detail .pbtn.solid { background: var(--math); color: #fff; }
.p-detail .ptime { font-size: var(--f-12); color: #9AA2B2; font-variant-numeric: tabular-nums; }
.p-detail .player-ctrl .sp { margin-left: auto; font-size: var(--f-11); color: #6C7385;
                      display: flex; align-items: center; gap: 6px; }
.p-detail .blk { margin-top: 22px; }
.p-detail .blk-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.p-detail .blk-head .t { font-size: var(--f-16); font-weight: 700; }
.p-detail .blk-head .n { font-size: var(--f-12); color: var(--ink-3); }
.p-detail .pt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2);
        padding: 14px 16px; margin-bottom: 10px; position: relative; }
.p-detail .pt:last-child { margin-bottom: 0; }
.p-detail .pt-top { display: flex; align-items: center; gap: 8px; }
.p-detail .pt-idx { width: 20px; height: 20px; border-radius: 6px; background: var(--surface-3);
            color: var(--ink-2); font-size: var(--f-11); font-weight: 700;
            display: grid; place-items: center; flex: none; }
.p-detail .stars { display: flex; gap: 1px; color: var(--star); font-size: 11px; letter-spacing: -1px; }
.p-detail .stars .off { color: var(--line); }
.p-detail .pt-body { margin-top: 8px; font-size: var(--f-14); color: var(--ink); line-height: 1.85; }
.p-detail .pt-body b { background: var(--mark); font-weight: 700; padding: 0 2px; border-radius: 3px; }
.p-detail .pt-formula { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
    padding: 5px 10px; border-radius: 7px;
    background: var(--math-bg); color: var(--math);
    font-size: var(--f-14); font-weight: 700; font-family: "Cambria Math", Georgia, serif; }
.p-detail .pt-formula .lb { font-family: inherit; font-size: var(--f-11); font-weight: 700; opacity: .75; }
.p-detail .kv { display: flex; flex-direction: column; gap: 10px; }
.p-detail .kv-row { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--line);
            border-radius: var(--r-2); padding: 13px 15px; }
.p-detail .kv-row .ic { width: 26px; height: 26px; border-radius: 8px; flex: none;
                display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.p-detail .kv-row .bd { min-width: 0; }
.p-detail .kv-row .lb { font-size: var(--f-11); font-weight: 700; letter-spacing: .3px; }
.p-detail .kv-row .tx { font-size: var(--f-14); line-height: 1.8; margin-top: 4px; color: var(--ink); }
.p-detail .kv-key .ic { background: var(--gold-bg);  color: var(--gold); }
.p-detail .kv-key .lb { color: var(--gold); }
.p-detail .kv-hard .ic { background: var(--warn-bg);  color: var(--warn-ink); }
.p-detail .kv-hard .lb { color: var(--warn-ink); }
.p-detail .kv-hard { background: var(--warn-bg); border-color: var(--warn-line); }
.p-detail .kv-3d .ic { background: var(--math-bg);  color: var(--math); }
.p-detail .kv-3d .lb { color: var(--math); }
.p-detail .kv-3d { border-color: #DDE1F7; }
.p-detail .rel { display: flex; flex-direction: column; gap: 8px; }
.p-detail .rel a { display: flex; align-items: center; gap: 10px; padding: 11px 14px;
           background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); }
.p-detail .rel .no { font-size: var(--f-11); color: var(--ink-3); font-variant-numeric: tabular-nums;
             flex: none; width: 42px; }
.p-detail .rel .nm { font-size: var(--f-14); color: var(--ink); flex: 1; }
.p-detail .rel .ar { color: var(--ink-3); flex: none; }
.p-detail .side-blk { background: var(--surface); border: 1px solid var(--line);
              border-radius: var(--r-3); box-shadow: var(--shadow-1);
              padding: 16px 18px; margin-bottom: 14px; }
.p-detail .side-blk h4 { font-size: var(--f-14); font-weight: 700; display: flex; align-items: center;
                 gap: 7px; }
.p-detail .side-blk .sub { font-size: var(--f-11); color: var(--ink-3); margin-top: 3px; }
.p-detail .stat-row { display: flex; align-items: center; gap: 10px; margin-top: 12px;
              font-size: var(--f-12); color: var(--ink-2); }
.p-detail .stat-row .box { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--line);
                   flex: none; display: grid; place-items: center; }
.p-detail .stat-row .box.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.p-detail .progress-mini { margin-top: 14px; }
.p-detail .progress-mini .bar { height: 6px; border-radius: 999px; background: var(--surface-3);
                        overflow: hidden; margin-top: 7px; }
.p-detail .progress-mini .bar i { display: block; height: 100%; width: 27%; background: var(--math);
                          border-radius: 999px; }
.p-detail .progress-mini .kv2 { display: flex; justify-content: space-between; font-size: var(--f-11);
                        color: var(--ink-3); }
.p-detail .beat-list { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.p-detail .bl { display: flex; align-items: center; gap: 10px; padding: 7px 0;
        border-bottom: 1px solid var(--line-2); font-size: var(--f-12); }
.p-detail .bl:last-child { border-bottom: 0; }
.p-detail .bl .no { width: 20px; height: 20px; border-radius: 50%; flex: none;
            background: var(--surface-3); color: var(--ink-3);
            font-size: var(--f-11); font-weight: 700; display: grid; place-items: center; }
.p-detail .bl.on .no { background: var(--math); color: #fff; }
.p-detail .bl .nm { flex: 1; color: var(--ink-2); }
.p-detail .bl.on .nm { color: var(--ink); font-weight: 700; }
.p-detail .bl .sec { font-size: var(--f-11); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.p-detail .navsec { display: flex; flex-direction: column; gap: 8px; }
.p-detail .navsec a { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
              border-radius: var(--r-2); background: var(--surface-2);
              border: 1px solid var(--line-2); }
.p-detail .navsec .d { font-size: var(--f-11); color: var(--ink-3); flex: none; }
.p-detail .navsec .nm { font-size: var(--f-12); color: var(--ink); flex: 1;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-detail .fb-card { background: var(--warn-bg); border: 1px solid var(--warn-line); }
.p-detail .fb-card h4 { color: var(--warn-ink); }
.p-detail .fb-card .sub { color: var(--warn-ink); opacity: .8; }
.p-detail .fb-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.p-detail .fb-opt { height: 26px; padding: 0 10px; border-radius: 7px;
            background: rgba(255,255,255,.72); border: 1px solid var(--warn-line);
            color: var(--warn-ink); font-size: var(--f-11); display: flex; align-items: center; }
.p-detail .fb-card .btn { margin-top: 12px; width: 100%; background: var(--warn-ink); }
.p-detail .tip { font-size: var(--f-12); color: var(--ink-2); line-height: 1.85; margin-top: 10px; }
.p-detail .tip b { color: var(--ink); }
.p-detail .seo-note { margin: 22px 40px 40px; padding: 14px 18px;
    background: var(--surface-2); border: 1px dashed var(--line);
    border-radius: var(--r-2); display: flex; gap: 14px; align-items: flex-start; }
.p-detail .seo-note .ic { width: 24px; height: 24px; border-radius: 7px; background: var(--surface-3);
                  color: var(--ink-2); display: grid; place-items: center; flex: none; }
.p-detail .seo-note .tx { font-size: var(--f-12); color: var(--ink-2); line-height: 1.85; }
.p-detail .seo-note .tx b { color: var(--ink); }
.p-detail .seo-note code { font-family: Consolas, "Courier New", monospace; font-size: var(--f-11);
                   background: var(--surface-3); padding: 1px 5px; border-radius: 4px; color: var(--ink-2); }

/* ---------- search.html ---------- */
.p-search .shead { padding: 26px 40px 0; }
.p-search .shead .row1 { display: flex; align-items: center; gap: 14px; }
.p-search .shead .kw { font-size: var(--f-28); font-weight: 700; letter-spacing: -.3px; }
.p-search .shead .cnt { font-size: var(--f-14); color: var(--ink-2); }
.p-search .shead .cnt b { color: var(--ink); }
.p-search .shead .row2 { margin-top: 14px; display: flex; align-items: center; gap: 8px; }
.p-search .shead .row2 .lbl { font-size: var(--f-12); color: var(--ink-3); }
.p-search .tabs { display: flex; gap: 4px; }
.p-search .tabs .tb { height: 30px; padding: 0 14px; border-radius: 999px; font-size: var(--f-12);
              color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.p-search .tabs .tb.on { background: var(--accent); color: #fff; font-weight: 700; }
.p-search .tabs .tb .n { font-size: var(--f-11); opacity: .72; font-variant-numeric: tabular-nums; }
.p-search .shead .row2 .more { margin-left: auto; font-size: var(--f-12); color: var(--ink-3); }
.p-search .layout { display: flex; gap: 24px; padding: 20px 40px 0; align-items: flex-start; }
.p-search .filters { width: 232px; flex: none; }
.p-search .results { flex: 1; min-width: 0; }
.p-search .fbox { background: var(--surface); border: 1px solid var(--line);
          border-radius: var(--r-3); box-shadow: var(--shadow-1); padding: 16px 18px; }
.p-search .fbox .fh { display: flex; align-items: center; font-size: var(--f-14); font-weight: 700; }
.p-search .fbox .fh .clr { margin-left: auto; font-size: var(--f-11); font-weight: 400; color: var(--ink-3); }
.p-search .fgrp { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.p-search .fgrp:first-of-type { border-top: 0; padding-top: 12px; }
.p-search .fgrp .gt { font-size: var(--f-11); color: var(--ink-3); margin-bottom: 9px;
              letter-spacing: .2px; }
.p-search .opt { display: flex; align-items: center; gap: 9px; height: 27px; font-size: var(--f-12);
         color: var(--ink-2); }
.p-search .opt .cb { width: 15px; height: 15px; border-radius: 4px; border: 1.4px solid var(--line);
             flex: none; display: grid; place-items: center; background: var(--surface); }
.p-search .opt.on { color: var(--ink); font-weight: 700; }
.p-search .opt.on .cb { background: var(--accent); border-color: var(--accent); }
.p-search .opt .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-search .opt .n { font-size: var(--f-11); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.p-search .opt.on .n { color: var(--ink-2); }
.p-search .opt.dim .nm { color: var(--ink-3); }
.p-search .colorbar { width: 3px; height: 13px; border-radius: 2px; flex: none; }
.p-search .res { background: var(--surface); border: 1px solid var(--line);
         border-radius: var(--r-3); box-shadow: var(--shadow-1);
         padding: 16px 20px 15px; margin-bottom: 10px; display: flex; gap: 18px; }
.p-search .res .bd { flex: 1; min-width: 0; }
.p-search .res .top { display: flex; align-items: center; gap: 7px; }
.p-search .res .h { font-size: var(--f-16); font-weight: 700; margin-top: 9px; letter-spacing: -.1px; }
.p-search .res .path { font-size: var(--f-12); color: var(--ink-3); margin-top: 5px; }
.p-search .res .path span { color: var(--ink-2); }
.p-search .res .snip { font-size: var(--f-14); color: var(--ink-2); line-height: 1.85; margin-top: 8px; }
.p-search .res mark { background: var(--mark); color: inherit; border-radius: 3px;
              padding: 0 2px; font-weight: 700; }
.p-search .res .foot { margin-top: 11px; display: flex; align-items: center; gap: 8px; }
.p-search .res .foot .meta { font-size: var(--f-11); color: var(--ink-3); }
.p-search .res .stars { display: flex; gap: 2px; margin-left: auto; }
.p-search .res .star { color: var(--line); }
.p-search .res .star.on { color: var(--star); }
.p-search .res.scene { align-items: stretch; }
.p-search .res .thumb { width: 208px; flex: none; border-radius: var(--r-2); overflow: hidden;
                position: relative; background: #10131A; }
.p-search .res .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-search .res .thumb .play { position: absolute; inset: 0; display: grid; place-items: center; }
.p-search .res .thumb .play i { width: 40px; height: 40px; border-radius: 50%;
        background: rgba(255,255,255,.92); display: grid; place-items: center;
        box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.p-search .res .thumb .dur { position: absolute; right: 7px; bottom: 7px; height: 20px;
        padding: 0 7px; border-radius: 5px; background: rgba(12,15,20,.78);
        color: #fff; font-size: var(--f-11); display: flex; align-items: center;
        font-variant-numeric: tabular-nums; }
.p-search .res .thumb .beat { position: absolute; left: 7px; top: 7px; height: 20px;
        padding: 0 7px; border-radius: 5px; background: rgba(12,15,20,.78);
        color: #fff; font-size: var(--f-11); display: flex; align-items: center; }
.p-search .nores { margin-top: 12px; padding: 14px 18px; background: var(--surface-2);
           border: 1px dashed var(--line); border-radius: var(--r-2);
           font-size: var(--f-12); color: var(--ink-3); display: flex; align-items: center; gap: 10px; }
.p-search .nores b { color: var(--ink-2); }
.p-search .pager { display: flex; align-items: center; gap: 6px; padding: 6px 0 0; }
.p-search .pager .pg { min-width: 30px; height: 30px; padding: 0 9px; border-radius: 8px;
       border: 1px solid var(--line); background: var(--surface);
       font-size: var(--f-12); color: var(--ink-2); display: flex; align-items: center;
       justify-content: center; font-variant-numeric: tabular-nums; }
.p-search .pager .pg.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.p-search .pager .gap { color: var(--ink-3); font-size: var(--f-12); padding: 0 2px; }
.p-search .pager .tip { margin-left: auto; font-size: var(--f-11); color: var(--ink-3); }

/* ---------- theater.html ---------- */
.p-theater .head { padding: 34px 40px 0; display: flex; align-items: flex-end; gap: 30px; }
.p-theater .head-l { flex: 1; }
.p-theater .head h1 { margin-top: 4px; }
.p-theater .head-lead { margin-top: 12px; font-size: var(--f-14); color: var(--ink-2);
               line-height: 1.8; max-width: 760px; }
.p-theater .head-r { display: flex; gap: 10px; padding-bottom: 4px; }
.p-theater .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2);
         padding: 12px 18px; text-align: center; box-shadow: var(--shadow-1); }
.p-theater .kpi .v { font-size: var(--f-20); font-weight: 700; }
.p-theater .kpi .k { font-size: var(--f-11); color: var(--ink-3); margin-top: 1px; white-space: nowrap; }
.p-theater .bar { margin: 22px 40px 0; padding: 12px 16px; background: var(--surface);
         border: 1px solid var(--line); border-radius: var(--r-2);
         display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p-theater .bar .lb { font-size: var(--f-11); color: var(--ink-3); font-weight: 700;
             margin-right: 2px; letter-spacing: .3px; }
.p-theater .bar .div { width: 1px; height: 18px; background: var(--line); margin: 0 6px; }
.p-theater .fchip { height: 28px; padding: 0 12px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface);
    font-size: var(--f-12); color: var(--ink-2);
    display: inline-flex; align-items: center; gap: 5px; }
.p-theater .fchip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.p-theater .fchip .n { font-size: var(--f-11); opacity: .62; font-variant-numeric: tabular-nums; }
.p-theater .fchip.on .n { opacity: .8; }
.p-theater .sec { padding: 28px 40px 0; }
.p-theater .sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.p-theater .sec-head .t { font-size: var(--f-20); font-weight: 700; }
.p-theater .sec-head .n { font-size: var(--f-12); color: var(--ink-3); }
.p-theater .sec-head .rt { margin-left: auto; font-size: var(--f-12); color: var(--ink-3); }
.p-theater .live-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.p-theater .live { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
          overflow: hidden; box-shadow: var(--shadow-1); }
.p-theater .live-shot { position: relative; background: #0B0D12; aspect-ratio: 16 / 9; }
.p-theater .live-shot img { width: 100%; height: 100%; object-fit: cover; }
.p-theater .live-play { position: absolute; inset: 0; display: grid; place-items: center; }
.p-theater .live-play i { width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.93);
                 color: #1F2430; display: grid; place-items: center;
                 box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.p-theater .live-live { position: absolute; left: 10px; top: 10px; height: 22px; padding: 0 8px;
    border-radius: 6px; background: rgba(12,14,20,.74); color: #7BE0A0;
    border: 1px solid rgba(123,224,160,.34);
    font-size: var(--f-11); font-weight: 700; letter-spacing: .3px;
    display: flex; align-items: center; gap: 5px; }
.p-theater .live-live .dot { width: 5px; height: 5px; border-radius: 50%; background: #7BE0A0; }
.p-theater .live-dur { position: absolute; right: 10px; bottom: 10px; height: 22px; padding: 0 8px;
              border-radius: 6px; background: rgba(12,14,20,.74); color: #E8EAEF;
              font-size: var(--f-11); font-weight: 700; display: grid; place-items: center; }
.p-theater .live-body { padding: 14px 16px 16px; }
.p-theater .live-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.p-theater .live-title { font-size: var(--f-16); font-weight: 700; margin-top: 9px; }
.p-theater .live-one { font-size: var(--f-12); color: var(--ink-2); margin-top: 6px; line-height: 1.75; }
.p-theater .live-foot { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line-2);
               display: flex; align-items: center; gap: 8px;
               font-size: var(--f-11); color: var(--ink-3); }
.p-theater .live-foot .sp { margin-left: auto; }
.p-theater .grp { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
         overflow: hidden; box-shadow: var(--shadow-1); }
.p-theater .grp + .grp { margin-top: 16px; }
.p-theater .grp-head { display: flex; align-items: center; gap: 10px; padding: 13px 18px;
              background: var(--surface-2); border-bottom: 1px solid var(--line); }
.p-theater .grp-head .t { font-size: var(--f-14); font-weight: 700; }
.p-theater .grp-head .n { font-size: var(--f-11); color: var(--ink-3); }
.p-theater .grp-head .st { margin-left: auto; }
.p-theater .row-t { display: flex; align-items: center; gap: 12px; padding: 11px 18px;
           border-bottom: 1px solid var(--line-2); }
.p-theater .row-t:last-child { border-bottom: 0; }
.p-theater .row-t .id { font-size: var(--f-11); color: var(--ink-3); font-variant-numeric: tabular-nums;
               width: 92px; flex: none; letter-spacing: -.2px; }
.p-theater .row-t .loc { width: 216px; flex: none; font-size: var(--f-11); color: var(--ink-3);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-theater .row-t .tt { width: 132px; flex: none; font-size: var(--f-12); font-weight: 700; }
.p-theater .row-t .hard { flex: 1; min-width: 0; font-size: var(--f-11); color: var(--warn-ink);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-theater .row-t .tag { font-size: var(--f-11); color: var(--ink-3); width: 34px; flex: none;
                font-variant-numeric: tabular-nums; }
.p-theater .row-t .hrs { font-size: var(--f-11); color: var(--ink-2); width: 46px; flex: none;
                text-align: right; font-variant-numeric: tabular-nums; }
.p-theater .row-t .diff { width: 30px; flex: none; font-size: var(--f-11); }
.p-theater .diff.h { color: var(--warn-ink); font-weight: 700; }
.p-theater .diff.m { color: var(--ink-2); }
.p-theater .diff.l { color: var(--ink-3); }
.p-theater .note { margin: 24px 40px 0; padding: 14px 18px; border-radius: var(--r-2);
          background: var(--warn-bg); border: 1px solid var(--warn-line);
          font-size: var(--f-12); color: var(--warn-ink); line-height: 1.8;
          display: flex; gap: 10px; }
.p-theater .note .ic { flex: none; margin-top: 1px; }

/* ---------- cheatsheet.html ---------- */
.p-cheatsheet .head { padding: 34px 40px 0; display: flex; align-items: flex-end; gap: 30px; }
.p-cheatsheet .head-l { flex: 1; }
.p-cheatsheet .head-lead { margin-top: 12px; font-size: var(--f-14); color: var(--ink-2);
               line-height: 1.8; max-width: 800px; }
.p-cheatsheet .head-r { display: flex; gap: 10px; }
.p-cheatsheet .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2);
         padding: 12px 18px; text-align: center; box-shadow: var(--shadow-1); }
.p-cheatsheet .kpi .v { font-size: var(--f-20); font-weight: 700; }
.p-cheatsheet .kpi .k { font-size: var(--f-11); color: var(--ink-3); margin-top: 1px; white-space: nowrap; }
.p-cheatsheet .bar { margin: 22px 40px 0; padding: 12px 16px; background: var(--surface);
         border: 1px solid var(--line); border-radius: var(--r-2);
         display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p-cheatsheet .bar .lb { font-size: var(--f-11); color: var(--ink-3); font-weight: 700; letter-spacing: .3px; }
.p-cheatsheet .bar .div { width: 1px; height: 18px; background: var(--line); margin: 0 6px; }
.p-cheatsheet .fchip { height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line);
           background: var(--surface); font-size: var(--f-12); color: var(--ink-2);
           display: inline-flex; align-items: center; gap: 5px; }
.p-cheatsheet .fchip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.p-cheatsheet .fchip .n { font-size: var(--f-11); opacity: .62; font-variant-numeric: tabular-nums; }
.p-cheatsheet .bar .srch { margin-left: auto; display: flex; align-items: center; gap: 8px;
               width: 260px; height: 30px; padding: 0 11px; border-radius: 999px;
               background: var(--surface-3); color: var(--ink-3); font-size: var(--f-12); }
.p-cheatsheet .sec { padding: 28px 40px 0; }
.p-cheatsheet .sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.p-cheatsheet .sec-head .t { font-size: var(--f-20); font-weight: 700; }
.p-cheatsheet .sec-head .n { font-size: var(--f-12); color: var(--ink-3); }
.p-cheatsheet .sec-head .rt { margin-left: auto; font-size: var(--f-11); color: var(--ink-3); }
.p-cheatsheet .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.p-cheatsheet .sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
           overflow: hidden; box-shadow: var(--shadow-1); }
.p-cheatsheet .sheet-head { display: flex; align-items: center; gap: 9px; padding: 12px 16px;
                background: var(--surface-2); border-bottom: 1px solid var(--line); }
.p-cheatsheet .sheet-head .cbar { width: 3px; height: 16px; border-radius: 2px; background: var(--c); }
.p-cheatsheet .sheet-head .t { font-size: var(--f-14); font-weight: 700; }
.p-cheatsheet .sheet-head .n { font-size: var(--f-11); color: var(--ink-3); }
.p-cheatsheet .sheet-head .tag { margin-left: auto; font-size: var(--f-11); color: var(--ink-3); }
.p-cheatsheet .math .cbar, .p-cheatsheet .math .fm { --c: var(--math); }
.p-cheatsheet .bio .cbar, .p-cheatsheet .bio .fm { --c: var(--bio); }
.p-cheatsheet .geo .cbar, .p-cheatsheet .geo .fm { --c: var(--geo); }
.p-cheatsheet .item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.p-cheatsheet .item:last-child { border-bottom: 0; }
.p-cheatsheet .fm { flex: none; width: 106px; padding: 6px 9px; border-radius: var(--r-1);
        background: var(--surface-3); align-self: flex-start;
        font-family: "Cambria Math", Georgia, "Times New Roman", serif;
        font-size: 13px; font-weight: 700; color: var(--c); line-height: 1.45;
        text-align: center; word-break: break-word; }
.p-cheatsheet .fm.law { font-family: inherit; font-size: var(--f-11); font-weight: 700;
            background: transparent; border: 1px solid var(--line); color: var(--ink-3); }
.p-cheatsheet .bd { flex: 1; min-width: 0; }
.p-cheatsheet .bd .tx { font-size: var(--f-12); color: var(--ink); line-height: 1.75; }
.p-cheatsheet .bd .tx b { background: var(--mark); font-weight: 700; padding: 0 2px; border-radius: 3px; }
.p-cheatsheet .bd .src { margin-top: 5px; font-size: var(--f-11); color: var(--ink-3);
             display: flex; align-items: center; gap: 6px; }
.p-cheatsheet .bd .src .st { color: var(--star); letter-spacing: -1px; }
.p-cheatsheet .sub-head { padding: 11px 16px 3px; font-size: var(--f-11); font-weight: 700;
              color: var(--ink-3); letter-spacing: .3px; }
.p-cheatsheet .note { margin: 24px 40px 0; padding: 14px 18px; border-radius: var(--r-2);
          background: var(--warn-bg); border: 1px solid var(--warn-border, var(--warn-line));
          font-size: var(--f-12); color: var(--warn-ink); line-height: 1.8;
          display: flex; gap: 10px; }
.p-cheatsheet .note code { font-family: Consolas, monospace; font-size: var(--f-11);
               background: rgba(176,118,40,.10); padding: 1px 5px; border-radius: 4px; }

/* ---------- account.html ---------- */
.p-account .head { padding: 34px 40px 0; }
.p-account .head-lead { margin-top: 12px; font-size: var(--f-14); color: var(--ink-2);
               line-height: 1.85; max-width: 860px; }
.p-account .states { margin: 24px 40px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.p-account .st { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
        padding: 18px 20px; box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
.p-account .st::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
                background: var(--c, var(--ink-3)); }
.p-account .st.now { --c: var(--ok); box-shadow: var(--shadow-2); border-color: #CFE6D6; background: #FCFDFB; }
.p-account .st .ln1 { display: flex; align-items: center; gap: 8px; }
.p-account .st .t { font-size: var(--f-16); font-weight: 700; }
.p-account .st .badge { margin-left: auto; font-size: var(--f-11); font-weight: 700; padding: 2px 8px;
               border-radius: 999px; background: var(--surface-3); color: var(--ink-3); }
.p-account .st.now .badge { background: #E4F2E8; color: var(--ok); }
.p-account .st .d { margin-top: 9px; font-size: var(--f-12); color: var(--ink-2); line-height: 1.8; }
.p-account .st .cap { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line-2);
             font-size: var(--f-11); color: var(--ink-3); line-height: 1.7; }
.p-account .st .cap b { color: var(--ink); }
.p-account .body { padding: 26px 40px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
          align-items: start; }
.p-account .blk { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
         overflow: hidden; box-shadow: var(--shadow-1); }
.p-account .blk-head { display: flex; align-items: center; gap: 9px; padding: 13px 18px;
              border-bottom: 1px solid var(--line); background: var(--surface-2); }
.p-account .blk-head .t { font-size: var(--f-14); font-weight: 700; }
.p-account .blk-head .n { font-size: var(--f-11); color: var(--ink-3); }
.p-account .blk-head .rt { margin-left: auto; font-size: var(--f-11); color: var(--ink-3); }
.p-account .fav { display: flex; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line-2);
         align-items: flex-start; }
.p-account .fav:last-child { border-bottom: 0; }
.p-account .fav .star { flex: none; width: 26px; height: 26px; border-radius: 8px;
               display: flex; align-items: center; justify-content: center;
               background: var(--gold-bg); color: var(--gold); }
.p-account .fav .bd { flex: 1; min-width: 0; }
.p-account .fav .tt { font-size: var(--f-13, 13px); font-weight: 700; }
.p-account .fav .meta { margin-top: 3px; font-size: var(--f-11); color: var(--ink-3);
               display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.p-account .fav .tl { margin-top: 7px; display: flex; align-items: center; gap: 7px;
             font-size: var(--f-11); color: var(--ink-3); }
.p-account .mini-bar { flex: 1; height: 4px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.p-account .mini-bar i { display: block; height: 100%; border-radius: 99px; background: var(--c, var(--math)); }
.p-account .hist { display: flex; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line-2); }
.p-account .hist:last-child { border-bottom: 0; }
.p-account .hist .thumb { flex: none; width: 108px; height: 61px; border-radius: var(--r-1);
                 overflow: hidden; background: #1b2130; }
.p-account .hist .thumb img { width: 100%; height: 100%; object-fit: cover; }
.p-account .hist .bd { flex: 1; min-width: 0; }
.p-account .hist .tt { font-size: 13px; font-weight: 700; }
.p-account .hist .meta { margin-top: 3px; font-size: var(--f-11); color: var(--ink-3); }
.p-account .hist .prog { margin-top: 8px; display: flex; align-items: center; gap: 8px;
                font-size: var(--f-11); color: var(--ink-3); }
.p-account .hist .prog .bar { flex: 1; height: 4px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.p-account .hist .prog .bar i { display: block; height: 100%; border-radius: 99px; background: var(--c, var(--math)); }
.p-account .login { margin: 16px 40px 0; background: var(--surface); border: 1px solid var(--line);
           border-radius: var(--r-3); padding: 22px 24px; box-shadow: var(--shadow-1);
           display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; }
.p-account .login-l .t { font-size: var(--f-16); font-weight: 700; }
.p-account .login-l .d { margin-top: 8px; font-size: var(--f-12); color: var(--ink-2); line-height: 1.85; }
.p-account .field { margin-top: 14px; }
.p-account .field .lb { font-size: var(--f-11); color: var(--ink-3); font-weight: 700; margin-bottom: 6px; }
.p-account .inp { height: 40px; border: 1px solid var(--line); border-radius: var(--r-1);
         display: flex; align-items: center; padding: 0 13px; font-size: var(--f-13, 13px);
         color: var(--ink-3); gap: 9px; background: var(--surface); }
.p-account .inp.code { letter-spacing: 7px; font-weight: 700; color: var(--ink);
              font-family: "Courier New", monospace; }
.p-account .inp-row { display: flex; gap: 10px; }
.p-account .inp-row .inp { flex: 1; }
.p-account .btn-wide { margin-top: 14px; height: 40px; border-radius: var(--r-1); background: var(--accent);
              color: #fff; font-size: var(--f-14); font-weight: 700;
              display: flex; align-items: center; justify-content: center; gap: 8px; }
.p-account .fine { margin-top: 9px; font-size: var(--f-11); color: var(--ink-3); line-height: 1.7; }
.p-account .login-r { border-left: 1px solid var(--line); padding-left: 26px; }
.p-account .merge { display: flex; flex-direction: column; gap: 0; }
.p-account .merge .step { display: flex; gap: 11px; padding: 10px 0; }
.p-account .merge .step + .step { border-top: 1px dashed var(--line); }
.p-account .merge .dot { flex: none; width: 20px; height: 20px; border-radius: 50%;
                background: var(--surface-3); color: var(--ink-3);
                font-size: 10.5px; font-weight: 700;
                display: flex; align-items: center; justify-content: center; }
.p-account .merge .step.on .dot { background: var(--accent); color: #fff; }
.p-account .merge .tx { font-size: var(--f-12); color: var(--ink-2); line-height: 1.7; }
.p-account .merge .tx b { color: var(--ink); }
.p-account .privacy { margin: 16px 40px 0; padding: 14px 18px; border-radius: var(--r-2);
             background: var(--surface-2); border: 1px solid var(--line);
             display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.p-account .privacy .it { display: flex; gap: 9px; align-items: flex-start; }
.p-account .privacy .k { font-size: var(--f-11); font-weight: 700; color: var(--ink); }
.p-account .privacy .v { font-size: var(--f-11); color: var(--ink-3); line-height: 1.7; margin-top: 2px; }

/* ---------- feedback.html ---------- */
.p-feedback .phead { padding: 34px 40px 0; }
.p-feedback .phead h1 { font-size: var(--f-28); font-weight: 700; letter-spacing: -.3px; }
.p-feedback .phead p { margin-top: 10px; font-size: var(--f-14); color: var(--ink-2);
             line-height: 1.8; max-width: 760px; }
.p-feedback .phead .badges { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.p-feedback .layout { display: flex; gap: 24px; padding: 24px 40px 0; align-items: flex-start; }
.p-feedback .main { flex: 1; min-width: 0; }
.p-feedback .side { width: 340px; flex: none; }
.p-feedback .panel { background: var(--surface); border: 1px solid var(--line);
           border-radius: var(--r-3); box-shadow: var(--shadow-1); overflow: hidden; }
.p-feedback .panel-head { padding: 16px 20px 14px; border-bottom: 1px solid var(--line-2);
                display: flex; align-items: center; gap: 10px; }
.p-feedback .panel-head .t { font-size: var(--f-16); font-weight: 700; }
.p-feedback .panel-head .n { font-size: var(--f-11); color: var(--ink-3); }
.p-feedback .panel-body { padding: 18px 20px 20px; }
.p-feedback .seg { display: flex; gap: 8px; }
.p-feedback .seg button { flex: 1; height: 62px; border-radius: var(--r-2);
    border: 1px solid var(--line); background: var(--surface-2);
    display: flex; flex-direction: column; align-items: flex-start;
    justify-content: center; gap: 3px; padding: 0 14px; }
.p-feedback .seg button .nm { font-size: var(--f-14); font-weight: 700; color: var(--ink); }
.p-feedback .seg button .ds { font-size: var(--f-11); color: var(--ink-3); }
.p-feedback .seg button.on { border-color: var(--accent); background: var(--surface);
                   box-shadow: inset 0 0 0 1px var(--accent); }
.p-feedback .seg button.on .nm { color: var(--accent); }
.p-feedback .field { margin-top: 18px; }
.p-feedback .field > label { display: flex; align-items: baseline; gap: 8px;
                   font-size: var(--f-12); font-weight: 700; color: var(--ink-2);
                   margin-bottom: 8px; }
.p-feedback .field > label .req { color: #C0503F; }
.p-feedback .field > label .opt { font-weight: 400; color: var(--ink-3); }
.p-feedback .field textarea.input { height: 104px; }
.p-feedback .field .hintline { margin-top: 7px; font-size: var(--f-11); color: var(--ink-3);
                     display: flex; align-items: center; gap: 6px; }
.p-feedback .field .hintline .cnt { margin-left: auto; font-variant-numeric: tabular-nums; }
.p-feedback .locate { display: flex; align-items: center; gap: 10px; padding: 11px 14px;
            background: var(--surface-2); border: 1px solid var(--line);
            border-radius: var(--r-2); }
.p-feedback .locate .ic { width: 26px; height: 26px; border-radius: 8px; flex: none;
                background: var(--math-bg); color: var(--math);
                display: grid; place-items: center; }
.p-feedback .locate .nm { font-size: var(--f-14); font-weight: 700; flex: 1; }
.p-feedback .locate .nm span { font-weight: 400; color: var(--ink-3); font-size: var(--f-12);
                     margin-left: 6px; }
.p-feedback .locate .chg { font-size: var(--f-12); color: var(--ink-2); }
.p-feedback .two { display: flex; gap: 12px; }
.p-feedback .two > * { flex: 1; }
.p-feedback .submit-row { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-2);
                display: flex; align-items: center; gap: 14px; }
.p-feedback .submit-row .btn { height: 42px; padding: 0 26px; }
.p-feedback .submit-row .fine { font-size: var(--f-11); color: var(--ink-3); line-height: 1.7; }
.p-feedback .turnstile { display: flex; align-items: center; gap: 10px;
    height: 56px; padding: 0 16px; border-radius: var(--r-2);
    background: var(--surface-2); border: 1px solid var(--line); }
.p-feedback .turnstile .box { width: 20px; height: 20px; border-radius: 4px;
                    border: 1.6px solid var(--line); flex: none; }
.p-feedback .turnstile .tx { font-size: var(--f-12); color: var(--ink-2); }
.p-feedback .turnstile .tx span { display: block; font-size: var(--f-11); color: var(--ink-3); }
.p-feedback .turnstile .logo { margin-left: auto; font-size: var(--f-11); color: var(--ink-3); }
.p-feedback .wish-head { display: flex; align-items: center; gap: 12px; padding: 24px 40px 0; }
.p-feedback .wish-head .t { font-size: var(--f-20); font-weight: 700; }
.p-feedback .wish-head .n { font-size: var(--f-12); color: var(--ink-3); }
.p-feedback .wish-head .filters { margin-left: auto; display: flex; gap: 6px; }
.p-feedback .wish-head .filters .chip { height: 28px; padding: 0 12px; border-radius: 999px;
      background: var(--surface); border: 1px solid var(--line);
      font-size: var(--f-12); color: var(--ink-2); display: flex; align-items: center; }
.p-feedback .wish-head .filters .chip.on { background: var(--accent); border-color: var(--accent);
      color: #fff; font-weight: 700; }
.p-feedback .wish-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
               padding: 14px 40px 0; }
.p-feedback .wish-card { background: var(--surface); border: 1px solid var(--line);
               border-radius: var(--r-2); padding: 14px 16px;
               display: flex; align-items: center; gap: 14px; }
.p-feedback .wish-card .bd { flex: 1; min-width: 0; }
.p-feedback .wish-card .tags { display: flex; align-items: center; gap: 6px; }
.p-feedback .wish-card .nm { font-size: var(--f-14); font-weight: 700; margin-top: 8px;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-feedback .wish-card .loc { font-size: var(--f-11); color: var(--ink-3); margin-top: 4px; }
.p-feedback .wish-card .votes { flex: none; display: flex; flex-direction: column;
                      align-items: center; gap: 4px; width: 74px; }
.p-feedback .vote-btn { width: 74px; height: 46px; border-radius: var(--r-2);
              border: 1px solid var(--line); background: var(--surface-2);
              display: flex; flex-direction: column; align-items: center;
              justify-content: center; gap: 1px; }
.p-feedback .vote-btn .up { color: var(--ink-2); }
.p-feedback .vote-btn .ct { font-size: var(--f-14); font-weight: 700;
                  font-variant-numeric: tabular-nums; color: var(--ink); }
.p-feedback .vote-btn.on { border-color: var(--gold); background: var(--gold-bg); }
.p-feedback .vote-btn.on .up, .p-feedback .vote-btn.on .ct { color: var(--gold); }
.p-feedback .wish-card .rank { font-size: var(--f-11); color: var(--ink-3); }
.p-feedback .empty-note { margin: 20px 40px 0; padding: 14px 18px;
                background: var(--warn-bg); border: 1px solid var(--warn-line);
                border-radius: var(--r-2); display: flex; gap: 12px; align-items: flex-start; }
.p-feedback .empty-note .ic { width: 24px; height: 24px; border-radius: 7px; flex: none;
                    background: rgba(255,255,255,.75); color: var(--warn-ink);
                    display: grid; place-items: center; }
.p-feedback .empty-note .tx { font-size: var(--f-12); color: var(--warn-ink); line-height: 1.85; }
.p-feedback .empty-note .tx b { color: #8A5A18; }
.p-feedback .side-blk { background: var(--surface); border: 1px solid var(--line);
              border-radius: var(--r-3); box-shadow: var(--shadow-1);
              padding: 16px 18px; margin-bottom: 14px; }
.p-feedback .side-blk h4 { font-size: var(--f-14); font-weight: 700; display: flex;
                 align-items: center; gap: 7px; }
.p-feedback .side-blk .sub { font-size: var(--f-11); color: var(--ink-3); margin-top: 4px; }
.p-feedback .flow { margin-top: 14px; display: flex; flex-direction: column; gap: 0; }
.p-feedback .flow .st { display: flex; gap: 10px; padding-bottom: 14px; position: relative; }
.p-feedback .flow .st:last-child { padding-bottom: 0; }
.p-feedback .flow .st::before { content: ''; position: absolute; left: 9px; top: 22px; bottom: 0;
                      width: 1px; background: var(--line-2); }
.p-feedback .flow .st:last-child::before { display: none; }
.p-feedback .flow .dot { width: 19px; height: 19px; border-radius: 50%; flex: none;
               background: var(--surface-3); color: var(--ink-3);
               font-size: 10px; font-weight: 700; display: grid; place-items: center;
               position: relative; z-index: 1; }
.p-feedback .flow .st.done .dot { background: var(--ok); color: #fff; }
.p-feedback .flow .st.now .dot { background: var(--accent); color: #fff; }
.p-feedback .flow .tt { font-size: var(--f-12); font-weight: 700; color: var(--ink); }
.p-feedback .flow .dd { font-size: var(--f-11); color: var(--ink-3); margin-top: 2px; line-height: 1.7; }
.p-feedback .guard { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.p-feedback .guard .g { display: flex; gap: 9px; font-size: var(--f-12); color: var(--ink-2);
              line-height: 1.7; }
.p-feedback .guard .g .k { flex: none; color: var(--ok); }
.p-feedback .rank-list { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.p-feedback .rk { display: flex; align-items: center; gap: 10px; }
.p-feedback .rk .no { width: 18px; font-size: var(--f-11); color: var(--ink-3); flex: none;
            font-variant-numeric: tabular-nums; }
.p-feedback .rk .bd { flex: 1; min-width: 0; }
.p-feedback .rk .nm { font-size: var(--f-12); color: var(--ink); overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; }
.p-feedback .rk .bar { height: 4px; border-radius: 999px; background: var(--surface-3);
             margin-top: 5px; overflow: hidden; }
.p-feedback .rk .bar i { display: block; height: 100%; border-radius: 999px; background: var(--gold); }
.p-feedback .rk .ct { font-size: var(--f-11); color: var(--ink-3); flex: none;
            font-variant-numeric: tabular-nums; }
.p-feedback .privacy { font-size: var(--f-12); color: var(--ink-2); line-height: 1.9; margin-top: 10px; }
.p-feedback .privacy b { color: var(--ink); }
.p-feedback .mine { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.p-feedback .mine:last-child { border-bottom: 0; }
.p-feedback .mine .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
               flex: none; margin-top: 7px; }
.p-feedback .mine .bd { min-width: 0; }
.p-feedback .mine .tx { font-size: var(--f-12); color: var(--ink); line-height: 1.7; }
.p-feedback .mine .mt { font-size: var(--f-11); color: var(--ink-3); margin-top: 3px; }

/* ---------- arch.html ---------- */
.p-arch .page-head { padding: 40px 48px 0; }
.p-arch .page-title { display: flex; align-items: baseline; gap: 14px; }
.p-arch .ver { font-size: 12px; font-weight: 700; color: var(--gold); background: var(--gold-bg);
         padding: 3px 10px; border-radius: 999px; }
.p-arch .page-sub { font-size: 13px; color: var(--ink-2); margin-top: 10px; line-height: 1.8; max-width: 1240px; }
.p-arch .page-sub b { color: var(--ink); }
.p-arch .entries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
             padding: 26px 48px 0; }
.p-arch .entry { border-radius: 16px; padding: 18px 20px; border: 1px solid var(--line); background: var(--surface); }
.p-arch .entry h4 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.p-arch .entry p { font-size: 12px; color: var(--ink-2); margin-top: 6px; line-height: 1.7; }
.p-arch .entry .kv { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.p-arch .entry.guest { border-color: #DDE3F5; background: linear-gradient(180deg,#FBFCFE,#fff); }
.p-arch .entry.member { border-color: #DCEBE1; background: linear-gradient(180deg,#FBFDFB,#fff); }
.p-arch .entry.bot { border-color: #EDE3CE; background: linear-gradient(180deg,#FDFBF6,#fff); }
.p-arch .stack { padding: 8px 48px 0; }
.p-arch .layer { position: relative; margin-top: 26px; }
.p-arch .layer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.p-arch .layer-no { width: 22px; height: 22px; border-radius: 7px; background: var(--accent); color: #fff;
              font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.p-arch .layer-name { font-size: 16px; font-weight: 700; }
.p-arch .layer-tag { font-size: 11px; color: var(--ink-3); margin-left: 2px; }
.p-arch .layer-body { display: flex; gap: 12px; align-items: stretch; }
.p-arch .box { flex: 1; background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-1);
    border-top: 3px solid var(--line); }
.p-arch .box h5 { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.p-arch .box .d { font-size: 11.5px; color: var(--ink-2); line-height: 1.75; margin-top: 6px; }
.p-arch .box .d code { font-family: "Cascadia Mono", Consolas, monospace; font-size: 10.5px;
                 background: var(--surface-3); padding: 1px 5px; border-radius: 4px; color: var(--ink); }
.p-arch .box.m { border-top-color: var(--math); }
.p-arch .box.b { border-top-color: var(--bio); }
.p-arch .box.g { border-top-color: var(--geo); }
.p-arch .box.o { border-top-color: var(--gold); }
.p-arch .box.k { border-top-color: var(--accent); }
.p-arch .arrow-down { display: flex; justify-content: center; margin: 6px 0 -12px; color: #C9C2B4; }
.p-arch .pipe { margin: 0 48px; background: var(--surface); border: 1px solid var(--line);
          border-radius: 18px; padding: 20px 24px; box-shadow: var(--shadow-1); }
.p-arch .pipe-flow { display: flex; align-items: stretch; gap: 0; margin-top: 14px; }
.p-arch .pipe-step { flex: 1; padding: 12px 14px; border-radius: 12px; background: var(--surface-3); }
.p-arch .pipe-step h6 { font-size: 12.5px; font-weight: 700; }
.p-arch .pipe-step p { font-size: 11px; color: var(--ink-2); margin-top: 5px; line-height: 1.7; }
.p-arch .pipe-arrow { display: grid; place-items: center; width: 34px; color: #C9C2B4; flex: none; }
.p-arch .req { padding: 0 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.p-arch .req-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
              padding: 14px 16px; box-shadow: var(--shadow-1); }
.p-arch .req-card .n { font-size: 10.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .5px; }
.p-arch .req-card h6 { font-size: 13px; font-weight: 700; margin-top: 3px; }
.p-arch .req-card p { font-size: 11.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.75; }
.p-arch .inv { margin: 0 48px; background: #2A3040; border-radius: 18px; padding: 22px 26px; color: #E8EAEF; }
.p-arch .inv h4 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.p-arch .inv .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 26px; margin-top: 14px; }
.p-arch .inv .it { font-size: 11.5px; color: #B9BFCC; line-height: 1.7; display: flex; gap: 7px; }
.p-arch .inv .it b { color: #fff; font-weight: 700; flex: none; }
.p-arch .page-foot { padding: 26px 48px 34px; display: flex; justify-content: space-between;
               font-size: 11.5px; color: var(--ink-3); }

/* ---------- 响应式（设计稿是固定宽度桌面图，真站点必须自适应） ---------- */
.wrap, .site-wrap { width: auto; max-width: 1360px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 1120px) {
  .site-nav { display: none; }
}
@media (max-width: 760px) {
  .site-topbar { padding: 0 16px; }
  .site-search-mini { display: none; }
}

/* ---------- 由设计稿 style 属性机械迁移的工具类（一次性，后续新页面请直接写类） ---------- */
.p-home .u1 { gap:6px; margin-top:8px }
.p-home .u2 { margin-top:6px }
.p-home .u3 { font-size:var(--f-14); color:var(--ink-3); font-weight:400 }
.p-home .u4 { margin-left:auto; height:28px }
.p-home .u5 { padding-bottom:56px }
.p-home .u6 { width:78% }
.p-home .u7 { width:52% }
.p-home .u8 { width:34% }
.p-home .u9 { margin-top:16px }
.p-catalog .u1 { background:rgba(91,111,214,.16);box-shadow:inset 0 0 0 1px var(--math) }
.p-catalog .u2 { background:var(--ink) }
.p-catalog .u3 { color:var(--ink-3) }
.p-catalog .u4 { background:var(--ok);color:#fff }
.p-catalog .u5 { background:var(--math-bg);color:var(--math) }
.p-catalog .u6 { background:var(--warn-bg);color:var(--warn-ink) }
.p-catalog .u7 { margin-top:30px }
.p-detail .u1 { padding-top:12px }
.p-detail .u2 { width:20% }
.p-detail .u3 { width:27% }
.p-detail .u4 { width:27% }
.p-detail .u5 { width:26% }
.p-detail .u6 { width:20% }
.p-detail .u7 { width:27% }
.p-detail .u8 { width:27% }
.p-detail .u9 { width:26% }
.p-detail .u10 { margin-left:auto }
.p-detail .u11 { margin-left:auto }
.p-detail .u12 { margin-left:auto }
.p-detail .u13 { margin-left:auto }
.p-detail .u14 { margin-left:auto }
.p-detail .u15 { margin-top:12px }
.p-search .u1 { background:var(--math) }
.p-search .u2 { background:var(--bio) }
.p-search .u3 { background:var(--geo) }
.p-search .u4 { padding-bottom:2px }
.p-search .u5 { margin-top:34px }
.p-theater .u1 { height:26px }
.p-theater .u2 { color:var(--ok) }
.p-theater .u3 { padding-bottom:8px }
.p-theater .u4 { padding:16px 18px }
.p-theater .u5 { color:var(--ink-2) }
.p-theater .u6 { color:var(--ink-2) }
.p-cheatsheet .u1 { height:26px }
.p-cheatsheet .u2 { font-weight:400;font-size:11px }
.p-cheatsheet .u3 { padding-bottom:8px }
.p-cheatsheet .u4 { flex:none;margin-top:1px }
.p-account .u1 { height:26px }
.p-account .u2 { margin-top:12px }
.p-account .u3 { color:var(--ok) }
.p-account .u4 { color:var(--ink-3) }
.p-account .u5 { color:var(--math) }
.p-account .u6 { color:var(--gold) }
.p-account .u7 { height:19px;font-size:10.5px }
.p-account .u8 { color:var(--line) }
.p-account .u9 { --c:var(--math) }
.p-account .u10 { width:41% }
.p-account .u11 { height:19px;font-size:10.5px }
.p-account .u12 { color:var(--line) }
.p-account .u13 { --c:var(--bio) }
.p-account .u14 { width:52% }
.p-account .u15 { height:19px;font-size:10.5px }
.p-account .u16 { color:var(--line) }
.p-account .u17 { --c:var(--geo) }
.p-account .u18 { width:0% }
.p-account .u19 { background:var(--surface-2) }
.p-account .u20 { background:var(--surface-3);color:var(--ink-3) }
.p-account .u21 { font-weight:400;color:var(--ink-2) }
.p-account .u22 { color:var(--gold);text-decoration:none;font-weight:700 }
.p-account .u23 { color:var(--ink-2) }
.p-account .u24 { --c:var(--math) }
.p-account .u25 { width:57% }
.p-account .u26 { --c:var(--bio) }
.p-account .u27 { width:93% }
.p-account .u28 { --c:var(--geo) }
.p-account .u29 { width:34% }
.p-account .u30 { background:var(--surface-2) }
.p-account .u31 { background:var(--surface-3);display:flex;align-items:center;justify-content:center;color:var(--ink-3) }
.p-account .u32 { font-weight:400;color:var(--ink-2) }
.p-account .u33 { margin-top:12px }
.p-account .u34 { font-size:var(--f-11);color:var(--ink-3);font-weight:700;margin-bottom:6px }
.p-account .u35 { flex:none;width:120px;display:flex;align-items:flex-end }
.p-account .u36 { justify-content:center;color:var(--ink-3);font-size:var(--f-11) }
.p-account .u37 { font-size:var(--f-14);font-weight:700 }
.p-account .u38 { margin-top:6px }
.p-account .u39 { margin-top:4px;padding-top:11px;border-top:1px dashed var(--line) }
.p-account .u40 { color:var(--ok);flex:none }
.p-account .u41 { color:#C0392B;flex:none }
.p-account .u42 { color:var(--ink-2);flex:none }
.p-account .u43 { color:var(--math);flex:none }
.p-feedback .u1 { margin-top:16px }
.p-feedback .u2 { margin-left:auto }
.p-feedback .u3 { padding-top:12px }
.p-feedback .u4 { background:var(--ink-3) }
.p-feedback .u5 { background:var(--ink-3) }
.p-feedback .u6 { width:100% }
.p-feedback .u7 { width:80% }
.p-feedback .u8 { width:80% }
.p-feedback .u9 { width:60% }
.p-feedback .u10 { margin-top:8px }
.p-feedback .u11 { padding:24px 40px 0 }
.p-feedback .u12 { height:34px; padding:0 16px }
.p-feedback .u13 { margin-top:34px }
.p-arch .u1 { color:var(--math) }
.p-arch .u2 { color:var(--bio) }
.p-arch .u3 { color:var(--gold) }
.p-arch .u4 { margin-top:34px }
.p-arch .u5 { padding:34px 48px 0 }
.p-arch .u6 { background:#F7F5EF; border-style:dashed }
.p-arch .u7 { height:34px }

/* ---------- 目录页地图学科样式（无内联 style） ---------- */
.p-catalog .s-math .bar { background: var(--math); }
.p-catalog .s-math .track i { background: var(--math); }
.p-catalog .s-math .dt.has { background: var(--math-bg); box-shadow: inset 0 0 0 1px var(--math); }
.p-catalog .s-math .dt.live { background: var(--math); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 0 0 2px var(--math-bg); }

.p-catalog .s-bio .bar { background: var(--bio); }
.p-catalog .s-bio .track i { background: var(--bio); }
.p-catalog .s-bio .dt.has { background: var(--bio-bg); box-shadow: inset 0 0 0 1px var(--bio); }
.p-catalog .s-bio .dt.live { background: var(--bio); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 0 0 2px var(--bio-bg); }

.p-catalog .s-geo .bar { background: var(--geo); }
.p-catalog .s-geo .track i { background: var(--geo); }
.p-catalog .s-geo .dt.has { background: var(--geo-bg); box-shadow: inset 0 0 0 1px var(--geo); }
.p-catalog .s-geo .dt.live { background: var(--geo); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 0 0 2px var(--geo-bg); }

.p-catalog .w-pct-28 { width: 28%; }
.p-catalog .w-pct-33 { width: 33%; }
.p-catalog .w-pct-41 { width: 41%; }
.p-catalog .w-pct-44 { width: 44%; }
.p-catalog .w-pct-50 { width: 50%; }
.p-catalog .w-pct-56 { width: 56%; }
.p-catalog .w-pct-62 { width: 62%; }
.p-catalog .w-pct-70 { width: 70%; }
.p-catalog .w-pct-80 { width: 80%; }
.p-catalog .w-pct-100 { width: 100%; }

/* ==========================================================================
   移动端（<=760px）—— 真站点自适应
   --------------------------------------------------------------------------
   设计稿是 1360px 固定桌面图，上面的 @media 只写了 .site-* 类名，
   与真站点实际使用的 .topbar / .nav / .p-<page> 对不上，等于没生效。
   这一层只做"把固定宽度拆开、把多列改单列"，不改桌面端任何规则。
   ========================================================================== */
@media (max-width: 760px) {
  body { overflow-x: hidden; }

  /* ---- 顶栏：品牌一行，导航第二行横向滚动 ---- */
  .topbar { height: auto; min-height: 56px; padding: 8px 14px; flex-wrap: wrap; gap: 6px; }
  .brand { gap: 8px; }
  .brand-mark { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
  .brand-name { font-size: 16px; }
  .brand-sub { display: none; }
  .nav { order: 3; width: 100%; margin-left: 0; gap: 2px; overflow-x: auto; padding: 2px 0; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 6px 10px; font-size: 12.5px; white-space: nowrap; }
  .topbar-right { margin-left: auto; gap: 6px; }
  .topbar-right .search-mini,
  .topbar-right .pill-warn { display: none; }
  .topbar-right .pill { height: 28px; padding: 0 10px; font-size: 11px; white-space: nowrap; }
  .footer { padding: 18px 14px; flex-wrap: wrap; gap: 8px 14px; font-size: 11px; }
  .footer .f-links { display: flex; flex-wrap: wrap; gap: 8px 12px; }

  /* ---- 首页 ---- */
  .p-home .hero { padding: 26px 14px 0; display: block; }
  .p-home .hero-left { width: auto; min-width: 0; }
  .p-home .hero h1 { font-size: 28px; line-height: 1.32; margin-top: 16px; }
  .p-home .hero-desc { font-size: 14px; line-height: 1.75; margin-top: 14px; }
  .p-home .hero-search { margin-top: 20px; gap: 8px; }
  .p-home .hero-search .input { height: 46px; font-size: 13px; padding-left: 12px; }
  .p-home .hero-search .btn { height: 46px; padding: 0 16px; font-size: 14px; }
  .p-home .hero-tags { margin-top: 12px; }
  .p-home .hero-right { margin-top: 22px; }
  .p-home .hero-float { left: 10px; bottom: 10px; width: 210px; padding: 10px 12px; }
  .p-home .hero-float .v { font-size: 14px; }
  .p-home .stats { margin: 26px 14px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-home .stat { padding: 14px 12px; border-right: 0; border-bottom: 1px solid var(--line-2); min-width: 0; }
  .p-home .stat:nth-child(odd) { border-right: 1px solid var(--line-2); }
  .p-home .stat:nth-last-child(-n+2) { border-bottom: 0; }
  .p-home .stat .v { font-size: 22px; }
  .p-home .stat .k { font-size: 11px; line-height: 1.55; white-space: normal; overflow-wrap: anywhere; }
  .p-home .sec { padding: 30px 14px 0; }
  .p-home .section-head { flex-wrap: wrap; gap: 4px; }
  .p-home .subj-row, .p-home .scene-grid { grid-template-columns: 1fr; gap: 12px; }
  .p-home .subj { padding: 16px; }
  .p-home .subj-tag { min-height: 0; }
  .p-home .beats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .p-home .duo { grid-template-columns: 1fr; gap: 12px; }
  .p-home .promo { padding: 16px; }

  /* ---- 目录 / 课程地图 ---- */
  .p-catalog .phead { padding: 24px 14px 0; }
  .p-catalog .phead h1 { font-size: 24px; }
  .p-catalog .glance { display: block; padding: 16px 14px 0; }
  .p-catalog .gl { margin-bottom: 8px; padding: 12px 14px; }
  .p-catalog .subj { margin: 14px 14px 0; }
  .p-catalog .subj > header { flex-wrap: wrap; padding: 13px 14px; gap: 8px; }
  .p-catalog .subj .kpi { width: 100%; margin-left: 0; justify-content: flex-start; gap: 14px; }
  .p-catalog .subj .prog { width: 100%; }
  .p-catalog .vols { display: block; }
  .p-catalog .vol { padding: 10px 14px 14px; }
  .p-catalog .vol + .vol { border-left: 0; border-top: 1px solid var(--line-2); }
  .p-catalog .ch { height: auto; flex-wrap: wrap; padding: 6px 8px 8px; gap: 4px 8px; }
  .p-catalog .ch .no { width: 44px; }
  .p-catalog .ch .tt { width: auto; flex: 1; white-space: normal; }
  .p-catalog .ch .dots { order: 3; flex: 1 1 100%; }
  .p-catalog .ch .ct { width: auto; margin-left: auto; }
  .p-catalog .note { margin: 14px 14px 0; }

  /* ---- 知识点详情 ---- */
  .p-detail .crumb { padding: 14px 14px 0; flex-wrap: wrap; }
  .p-detail .head { padding: 12px 14px 0; }
  .p-detail .head-top { flex-wrap: wrap; gap: 8px; }
  .p-detail .head h1 { font-size: 26px; }
  .p-detail .layout { display: block; padding: 18px 14px 0; }
  .p-detail .side { width: auto; margin-top: 18px; }
  .p-detail .player-view .cap { max-width: calc(100% - 20px); font-size: 11px; }
  .p-detail .pt-body { font-size: 13px; }

  /* ---- 搜索 ---- */
  .p-search .shead { padding: 20px 14px 0; }
  .p-search .shead .row1 { flex-wrap: wrap; gap: 4px 10px; }
  .p-search .shead .kw { font-size: 24px; }
  .p-search .shead .row2 { flex-wrap: wrap; gap: 6px; }
  .p-search .tabs { width: 100%; overflow-x: auto; }
  .p-search .tabs .tb { padding: 0 10px; white-space: nowrap; }
  .p-search .shead .row2 .more { width: 100%; margin-left: 0; }
  .p-search .layout { display: flex; flex-direction: column; padding: 16px 14px 0; }
  .p-search .filters { order: 2; width: auto; margin-top: 16px; }
  .p-search .results { order: 1; margin-top: 0; }
  .p-search .res { flex-direction: column; gap: 12px; padding: 14px; }
  .p-search .res .thumb { width: 100%; height: 160px; }
  .p-search .res .foot { flex-wrap: wrap; }

  /* ---- 3D 剧场 ---- */
  .p-theater .head { padding: 24px 14px 0; flex-wrap: wrap; gap: 16px; }
  .p-theater .head h1 { font-size: 30px; }
  .p-theater .head-r { width: 100%; padding-bottom: 0; }
  .p-theater .kpi { flex: 1; padding: 10px 8px; }
  .p-theater .bar { margin: 16px 14px 0; padding: 10px 12px; }
  .p-theater .sec { padding: 24px 14px 0; }
  .p-theater .sec-head { flex-wrap: wrap; gap: 4px 12px; }
  .p-theater .sec-head .t { white-space: nowrap; }
  .p-theater .live-grid { grid-template-columns: 1fr; gap: 12px; }
  .p-theater .grp-head { flex-wrap: wrap; }
  .p-theater .row-t { flex-wrap: wrap; gap: 4px 8px; padding: 10px 12px; }
  .p-theater .row-t .id { width: auto; }
  .p-theater .row-t .loc,
  .p-theater .row-t .hrs,
  .p-theater .row-t .diff { display: none; }
  .p-theater .row-t .tt { width: auto; flex: 1; }
  .p-theater .row-t .hard { flex: 1 1 100%; order: 5; white-space: normal; }
  .p-theater .note { margin: 20px 14px 0; }

  /* ---- 速查表 ---- */
  .p-cheatsheet .head { padding: 24px 14px 0; flex-wrap: wrap; gap: 14px; }
  .p-cheatsheet .head h1 { font-size: 30px; }
  .p-cheatsheet .head-r { width: 100%; }
  .p-cheatsheet .kpi { flex: 1; padding: 10px 8px; }
  .p-cheatsheet .bar { margin: 16px 14px 0; }
  .p-cheatsheet .bar .srch { width: 100%; margin-left: 0; }
  .p-cheatsheet .sec { padding: 24px 14px 0; }
  .p-cheatsheet .cols { grid-template-columns: 1fr; }

  /* ---- 账号 ---- */
  .p-account .head { padding: 24px 14px 0; }
  .p-account .states { margin: 16px 14px 0; grid-template-columns: 1fr; }
  .p-account .body { padding: 18px 14px 0; grid-template-columns: 1fr; }
  .p-account .login { margin: 14px 14px 0; grid-template-columns: 1fr; padding: 18px; gap: 16px; }
  .p-account .login-r { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; }
  .p-account .privacy { margin: 14px 14px 0; grid-template-columns: 1fr; }
  .p-account .hist .thumb { width: 86px; height: 48px; }

  /* ---- 反馈 / 愿望单 ---- */
  .p-feedback .phead { padding: 24px 14px 0; }
  .p-feedback .phead h1 { font-size: 24px; }
  .p-feedback .layout { display: block; padding: 18px 14px 0; }
  .p-feedback .side { width: auto; margin-top: 18px; }
  .p-feedback .u11 { padding: 20px 14px 0; }
  .p-feedback .wish-head { padding: 20px 14px 0; flex-wrap: wrap; gap: 8px; }
  .p-feedback .wish-head .filters { margin-left: 0; width: 100%; overflow-x: auto; }
  .p-feedback .wish-grid { grid-template-columns: 1fr; padding: 12px 14px 0; }
  .p-feedback .two { flex-wrap: wrap; }
  .p-feedback .submit-row { flex-wrap: wrap; }

  /* ---- 架构 ---- */
  .p-arch .page-head { padding: 24px 14px 0; }
  .p-arch .u5 { padding: 24px 14px 0; }
  .p-arch .entries { grid-template-columns: 1fr; padding: 18px 14px 0; }
  .p-arch .stack { padding: 8px 14px 0; }
  .p-arch .layer-body { display: block; }
  .p-arch .layer-body .box { margin-bottom: 8px; }
  .p-arch .pipe { margin: 0 14px; padding: 16px; }
  .p-arch .pipe-flow { display: block; }
  .p-arch .pipe-arrow { display: none; }
  .p-arch .req { padding: 0 14px; grid-template-columns: 1fr; }
  .p-arch .inv { margin: 0 14px; padding: 18px; }
  .p-arch .inv .grid { grid-template-columns: 1fr; }
  .p-arch .page-foot { padding: 20px 14px 28px; flex-wrap: wrap; gap: 8px; }
}