/* ============================================================
   Qwen-Image-Edit 求职学习指南 —— 整站样式
   视觉对齐参考站（songshunlp.com/app）：暖白画布 / 单线卡片 /
   水平 Tab(底部下划线) / 大留白 / 明暗双主题（html[data-theme]）。

   令牌双轨：
   - 新语义名（--page/--surface-1/--surface-2/--text-primary/--border/--baseline…）
     供本文件 chrome 使用；
   - 旧名（--bg/--panel/--panel-2/--ink/--ink-2/--ink-3/--line/--line-2/
     --brand/--accent/--ok/--warn/--bad/--soft/--line…）作为别名指回新名，
     使 app.js 模板内联 var() 零改动即随主题翻转。
   ============================================================ */
:root{
  color-scheme: light;
  /* 新语义令牌（亮） */
  --page:#faf9f6;            /* 画布 */
  --surface-1:#f4f2ed;       /* 次级填充 / hover / 折叠答案区 */
  --surface-2:#ffffff;       /* 卡片 */
  --text-primary:#1a1915;
  --text-secondary:#56534b;
  --text-muted:#8b877d;
  --grid:rgba(26,25,21,.09);        /* 发丝边框 */
  --border:rgba(26,25,21,.12);
  --baseline:rgba(26,25,21,.20);    /* 轴线 / 强边框 / select */
  --border-strong:rgba(26,25,21,.26);

  /* 强调色（沿用靛蓝品牌），供按钮 / 高亮 / 进度条 */
  --accent:#4f46e5;
  --accent-strong:#4338ca;
  --accent-soft:#eef1fd;
  --accent-line:#d9defa;

  /* 状态色 */
  --ok:#137a5a;   --ok-soft:#e6f3ec;   --ok-line:#c6e2d3;
  --warn:#9c5b09; --warn-soft:#faf0df; --warn-line:#ecd4a8;
  --bad:#b4232b;  --bad-soft:#fbecec;  --bad-line:#f0c4c6;

  --shadow:0 1px 3px rgba(24,22,16,.06),0 2px 10px -6px rgba(24,22,16,.08);
  --r:12px;
  --r-sm:8px;
  --topbar-h:60px;
  --page-w:1160px;

  /* 代码 / 引用等深色底（亮主题下代码块即深底，与浅卡片对比） */
  --pre-bg:#262a3c; --pre-ink:#e8eaf6; --pre-line:rgba(255,255,255,.06);
  --quote-bg:#f6f1e2; --quote-line:#e3cf92; --quote-ink:#6a5f41;
  --mark-bg:#ffe9ad;
  --code-ink:#4b4f9e; --code-bg:#f4f2ed;

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
         "PingFang SC","Hiragino Sans GB","Microsoft YaHei",
         "Noto Sans CJK SC",sans-serif;
  --mono:"SF Mono","JetBrains Mono","Menlo",Consolas,"Courier New",monospace;

  /* 旧名别名 → 新语义令牌（app.js 内联 var() 使用） */
  --bg:var(--page);
  --panel:var(--surface-2);
  --panel-2:var(--surface-1);
  --ink:var(--text-primary);
  --ink-2:var(--text-secondary);
  --ink-3:var(--text-muted);
  --line:var(--grid);
  --line-2:var(--border-strong);
  --brand:var(--accent);
  --brand-2:var(--accent-strong);
  --muted:var(--text-muted);      /* 修复 app.js 曾引用未定义的 --muted */
}

/* ---------- 深色令牌：显式 data-theme + 系统偏好（未显式浅色时） ---------- */
:root[data-theme="dark"]{ color-scheme:dark; }
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){ color-scheme:dark; }
}
:root[data-theme="dark"]{
  --page:#0f0e0c;
  --surface-1:#181613;
  --surface-2:#1e1c18;
  --text-primary:#f3f1ea;
  --text-secondary:#c6c2b6;
  --text-muted:#918c80;
  --grid:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.11);
  --baseline:rgba(255,255,255,.20);
  --border-strong:rgba(255,255,255,.30);

  --accent:#8f8cff;
  --accent-strong:#b0adff;
  --accent-soft:rgba(121,120,255,.16);
  --accent-line:rgba(143,140,255,.40);

  --ok:#2eb584;   --ok-soft:rgba(46,181,132,.16);   --ok-line:rgba(46,181,132,.42);
  --warn:#e0a33c; --warn-soft:rgba(224,163,60,.16); --warn-line:rgba(224,163,60,.42);
  --bad:#e4686c;  --bad-soft:rgba(228,104,108,.16); --bad-line:rgba(228,104,108,.42);

  --shadow:0 1px 3px rgba(0,0,0,.35),0 2px 12px -6px rgba(0,0,0,.4);
  --pre-bg:#0b0c13; --pre-ink:#d7daf2; --pre-line:rgba(255,255,255,.07);
  --quote-bg:rgba(224,180,92,.10); --quote-line:rgba(224,180,92,.45); --quote-ink:#d8c69a;
  --mark-bg:#6a5515;
  --code-ink:#b9b6ff; --code-bg:var(--surface-1);
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    --page:#0f0e0c;
    --surface-1:#181613;
    --surface-2:#1e1c18;
    --text-primary:#f3f1ea;
    --text-secondary:#c6c2b6;
    --text-muted:#918c80;
    --grid:rgba(255,255,255,.08);
    --border:rgba(255,255,255,.11);
    --baseline:rgba(255,255,255,.20);
    --border-strong:rgba(255,255,255,.30);

    --accent:#8f8cff;
    --accent-strong:#b0adff;
    --accent-soft:rgba(121,120,255,.16);
    --accent-line:rgba(143,140,255,.40);

    --ok:#2eb584;   --ok-soft:rgba(46,181,132,.16);   --ok-line:rgba(46,181,132,.42);
    --warn:#e0a33c; --warn-soft:rgba(224,163,60,.16); --warn-line:rgba(224,163,60,.42);
    --bad:#e4686c;  --bad-soft:rgba(228,104,108,.16); --bad-line:rgba(228,104,108,.42);

    --shadow:0 1px 3px rgba(0,0,0,.35),0 2px 12px -6px rgba(0,0,0,.4);
    --pre-bg:#0b0c13; --pre-ink:#d7daf2; --pre-line:rgba(255,255,255,.07);
    --quote-bg:rgba(224,180,92,.10); --quote-line:rgba(224,180,92,.45); --quote-ink:#d8c69a;
    --mark-bg:#6a5515;
    --code-ink:#b9b6ff; --code-bg:var(--surface-1);
  }
}

/* ---------- 基础 ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text-primary);background:var(--page);
  font:15px/1.75 var(--font);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
button{font-family:inherit;cursor:pointer}
select{font-family:inherit}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--accent-soft)}

/* ---------------- 应用框架：顶栏 / 横幅 / Tab / 内容滚动 ---------------- */
.app{height:100vh;display:flex;flex-direction:column;background:var(--page)}

/* 顶栏 */
.topbar{
  flex:none;background:var(--surface-2);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:var(--page-w);margin:0 auto;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  min-height:var(--topbar-h);padding:8px 24px;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex-shrink:0}
.brand-logo{
  width:30px;height:30px;border-radius:9px;flex:none;
  display:grid;place-items:center;font-weight:800;font-size:17px;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
}
.brand-text h1{margin:0;font-size:15.5px;line-height:1.3;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.brand-text h1 span{font-weight:500;color:var(--text-muted)}
.brand-text p{margin:1px 0 0;font-size:11px;color:var(--text-muted);line-height:1.3;white-space:nowrap}

.topbar-search{
  flex:1;min-width:160px;max-width:560px;
  display:flex;align-items:center;gap:8px;height:36px;padding:0 6px 0 12px;
  background:var(--surface-1);border:1px solid var(--baseline);
  border-radius:10px;transition:border-color .15s, box-shadow .15s;
}
.topbar-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.topbar-search svg{width:15px;height:15px;flex:none;color:var(--text-muted)}
.topbar-search input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text-primary);font-size:13.5px;
}
.topbar-search input::placeholder{color:var(--text-muted)}
.topbar-search kbd{
  font:11px var(--mono);color:var(--text-muted);background:var(--surface-2);
  padding:1px 6px;border-radius:6px;flex:none;border:1px solid var(--border);
}
.topbar-actions{margin-left:auto;flex:none;display:flex;align-items:center;gap:8px}
.topbar-stats{display:flex;gap:6px}
.stat-pill{
  background:var(--surface-1);border:1px solid var(--border);
  padding:4px 10px;border-radius:999px;white-space:nowrap;
  font-size:12px;color:var(--text-muted);
}
.stat-pill b{font-size:13px;color:var(--text-secondary);margin-right:2px;font-weight:700}

/* 主题切换 */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border-radius:10px;
}
.theme-toggle .tt-ico{font-size:15px;line-height:1}

/* 自测拨杆 */
.st-toggle{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;
  border:1px solid var(--baseline);border-radius:999px;background:var(--surface-2);
  color:var(--text-secondary);font-size:13px;font-weight:600;transition:.15s;
}
.st-toggle:hover{border-color:var(--accent);color:var(--accent)}
.st-toggle .st-dot{width:8px;height:8px;border-radius:50%;background:#c6c2b6;transition:background .15s}
.st-toggle.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-strong)}
.st-toggle.on .st-dot{background:var(--accent)}
.st-toggle .st-txt{display:inline}

/* 自测横幅 */
.st-banner{
  flex:none;display:flex;align-items:center;gap:10px;
  margin:10px 14px 0;padding:8px 14px;
  background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:10px;
  font-size:13px;color:var(--accent-strong);line-height:1.5;
}
.st-banner[hidden]{display:none}
.st-banner .st-mark{flex:none;font-size:11px;font-weight:700;background:var(--accent);color:#fff;
  padding:1px 8px;border-radius:999px;letter-spacing:.04em}
.st-banner .st-x{margin-left:auto;flex:none;border:0;background:transparent;color:var(--accent-strong);
  font-size:17px;line-height:1;padding:2px 6px;border-radius:6px}
.st-banner .st-x:hover{background:var(--accent-soft)}

/* 水平 Tab */
.tabbar{flex:none;border-bottom:1px solid var(--baseline)}
.tabbar-inner{
  max-width:var(--page-w);margin:0 auto;
  display:flex;gap:2px;padding:0 14px;overflow-x:auto;
}
.tab{
  position:relative;flex:none;border:0;background:transparent;
  color:var(--text-secondary);font-size:14px;font-weight:550;
  padding:10px 16px;cursor:pointer;transition:color .12s;
}
.tab:hover{color:var(--text-primary)}
.tab.is-active{color:var(--text-primary)}
.tab.is-active::after{
  content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;
  border-radius:2px;background:var(--accent);
}

/* 主内容（独立滚动区，宽度与顶栏内容同宽居中对齐） */
.main{
  --main-pt:22px;   /* 滚动区上内边距：架构页吸顶章头要用它把自己顶到顶栏下方，故提成 token 复用 */
  flex:1 1 auto;min-height:0;width:100%;
  max-width:var(--page-w);margin:0 auto;
  padding:var(--main-pt) 26px 90px;overflow-y:auto;
}

/* ---------------- 通用卡片 / 胶囊 ---------------- */
.card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r)}
.pillbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---------------- 页头 ---------------- */
.page-head{margin-bottom:16px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--accent);
  font-weight:600;letter-spacing:.05em;margin-bottom:8px;
}
.page-title{font-size:25px;line-height:1.35;margin:0;font-weight:800;letter-spacing:.2px;color:var(--text-primary)}
.page-sub{color:var(--text-secondary);font-size:14px;margin-top:6px;max-width:860px}
.ch-lede{color:var(--text-muted);font-size:13px;margin:4px 0 0;max-width:860px}
.toolbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:0 0 16px}
.toolbar .spacer{flex:1}
.toolbar select{
  background:var(--surface-2);color:var(--text-primary);
  border:1px solid var(--baseline);border-radius:var(--r-sm);
  padding:5px 9px;font-size:12.5px;max-width:230px;
}
.toolbar select:focus{outline:none;border-color:var(--accent)}

/* ---------------- 讲解页 / 方法区块（对齐参考站语法） ---------------- */
.method-section{margin-bottom:30px}
.method-section > h2{font-size:18px;font-weight:700;margin:0 0 4px;color:var(--text-primary)}
.method-section > p.lead{color:var(--text-secondary);font-size:13.5px;margin:0 0 14px;max-width:860px}
.method-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.m-card{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:14px 15px}
.m-card .m-title{font-size:14px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.m-card .m-title .m-num{
  flex:none;width:22px;height:22px;border-radius:7px;display:inline-grid;place-items:center;
  font-size:12px;font-weight:700;color:var(--accent-strong);background:var(--accent-soft);
}
.m-card .m-title .m-num em{font-style:normal;color:var(--accent)}
.m-card .m-body{font-size:13px;color:var(--text-secondary);line-height:1.7}

.hero{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
  padding:22px 24px 20px;margin-bottom:20px;
  border-left:3px solid var(--accent);
}
.hero .hero-badge{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:3px 10px;border-radius:999px;background:var(--accent-soft);
  color:var(--accent-strong);margin-bottom:12px;
}
.hero h2{margin:0 0 10px;font-size:20px;font-weight:800;color:var(--text-primary);line-height:1.5}
.hero p{margin:0;max-width:760px;font-size:14px;line-height:1.85;color:var(--text-secondary)}
.hero .hero-line{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.hero .h-chip{
  display:inline-flex;align-items:baseline;gap:4px;font-size:12.5px;
  background:var(--surface-1);border:1px solid var(--border);
  padding:4px 11px;border-radius:999px;line-height:1.7;color:var(--text-secondary);
}
.hero .h-chip b{color:var(--accent-strong);font-weight:700}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.stat-card{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
  padding:16px 18px;
}
.stat-card .num{font-size:26px;font-weight:800;line-height:1.2;color:var(--text-primary)}
.stat-card .num em{font-style:normal;color:var(--accent)}
.stat-card .lbl{font-size:12.5px;color:var(--text-muted);margin-top:2px}

.map-card{padding:16px 18px;margin-bottom:14px}
.path-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.path-grid .map-card{margin-bottom:0}
.map-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.map-head h3{margin:0;font-size:15px;color:var(--text-primary)}
.map-num{
  flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-size:13px;font-weight:700;color:var(--accent-strong);background:var(--accent-soft);
}
.map-sub{color:var(--text-secondary);font-size:13px;margin:0 0 10px;line-height:1.7}

/* 讲解页主线：主题 × 章节胶囊 */
.quick-nav{display:flex;flex-direction:column;gap:14px}
.quick-row{display:flex;gap:12px;align-items:flex-start}
.quick-name{flex:none;width:108px;font-size:13px;font-weight:600;color:var(--text-secondary);
  padding-top:6px;line-height:1.4}
.quick-chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:7px}
.chip-num{flex:none;min-width:24px;height:20px;padding:0 6px;border-radius:6px;
  display:inline-grid;place-items:center;font-size:10.5px;font-weight:700;
  color:var(--accent-strong);background:var(--accent-soft)}

/* ---------------- 章节卡片（总览 / 讲解主线） ---------------- */
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.ch-card{
  display:flex;gap:12px;text-align:left;width:100%;padding:14px 15px;
  border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2);
  transition:border-color .15s, box-shadow .15s;
}
.ch-card:hover{border-color:var(--accent-line);box-shadow:var(--shadow)}
.ch-badge-lg{
  flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  font-size:14px;font-weight:800;color:var(--accent-strong);background:var(--accent-soft);
}
.ch-card .t{font-size:14px;font-weight:700;line-height:1.45;color:var(--text-primary)}
.ch-card .d{font-size:12px;color:var(--text-muted);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap}
.ch-card .d span{white-space:nowrap}
.dot{width:6px;height:6px;border-radius:50%;background:var(--baseline);display:inline-block;margin-right:5px;vertical-align:1px}

/* 章节页头小徽标（ch-badge 亦用于原侧栏，现仅页头用） */
.ch-badge-md{height:26px;min-width:34px;font-size:13px;padding:0 8px}
.ch-badge{
  flex:none;border-radius:7px;display:inline-grid;place-items:center;
  font-weight:700;letter-spacing:.3px;color:var(--accent-strong);background:var(--accent-soft);
}

.chap-grp{margin-bottom:30px;scroll-margin-top:8px}
.chap-grp-head{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;
  padding-bottom:8px;border-bottom:1px solid var(--border)}
.chap-grp-head h2{margin:0;font-size:17px;font-weight:700;color:var(--text-primary)}
.chap-grp-head span{font-size:12px;color:var(--text-muted)}

/* ---------------- 练习配置 ---------------- */
.setup-card{padding:22px 24px}
.setup-sec{margin-bottom:22px}
.setup-sec:last-child{margin-bottom:0}
.setup-label{font-size:12.5px;color:var(--text-secondary);font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.setup-label::before{content:"";width:4px;height:13px;border-radius:2px;background:var(--accent)}
.chip-btn{
  border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text-secondary);
  padding:6px 13px;border-radius:999px;font-size:13px;transition:.12s;
}
.chip-btn:hover{border-color:var(--accent);color:var(--accent)}
.chip-btn.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.chip-btn.off{opacity:.45}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;
  border-radius:10px;padding:9px 17px;font-size:14px;font-weight:600;transition:.13s;line-height:1.4;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-strong)}
.btn-ghost{background:var(--surface-2);border-color:var(--baseline);color:var(--text-secondary)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-soft{background:var(--accent-soft);color:var(--accent-strong)}
.btn-soft:hover{background:var(--accent-line)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-lg{padding:12px 26px;font-size:15px}
.btn.ghost{border-color:var(--baseline);color:var(--text-primary)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}

/* 练习评估按钮（原行内 hex → 语义类） */
.eval-btn.btn{padding:8px 14px;font-size:13px}
.eval-btn.btn.eval-review{color:var(--warn);background:var(--warn-soft);border:1px solid var(--warn-line)}
.eval-btn.btn.eval-skip{color:var(--bad);background:var(--bad-soft);border:1px solid var(--bad-line)}
.eval-btn.btn.eval-master{color:var(--ok);background:var(--ok-soft);border:1px solid var(--ok-line)}

/* ---------------- 知识卡（核心） ---------------- */
.q-list{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.q-card{
  border-radius:var(--r);background:var(--surface-2);
  border:1px solid var(--border);overflow:hidden;transition:border-color .15s;
}
.q-card:hover{border-color:var(--border-strong)}
.q-top{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;cursor:pointer}
.q-idx{
  flex:none;margin-top:2px;min-width:30px;padding:1px 7px;height:21px;border-radius:7px;
  display:inline-grid;place-items:center;font-size:11.5px;font-weight:700;letter-spacing:.2px;
  color:var(--accent-strong);background:var(--accent-soft);
}
.q-top .qs{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-top:1px}
.q-qtext{font-size:15.5px;font-weight:600;line-height:1.65;color:var(--text-primary)}
.q-lede{font-size:13px;color:var(--text-muted);line-height:1.7;margin-top:2px}
.q-chev{flex:none;margin-top:10px;color:var(--text-muted);transition:transform .16s,color .16s}
.q-card.open .q-chev{transform:rotate(90deg);color:var(--accent)}

/* 正文：默认隐藏，.open 显示；自测态由渲染控制不带 .open */
.q-ans{display:none;border-top:1px solid var(--border);background:var(--surface-1);
  padding:15px 18px 19px 16px}
.q-card.open .q-ans{display:block;animation:reveal .16s ease}
@keyframes reveal{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
.q-ans-inner{border-left:3px solid var(--accent-line);padding-left:14px}
.q-overline{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;
  color:var(--accent-strong);margin-bottom:6px;
}
.q-hint{font-size:12px;color:var(--text-muted);margin-top:1px}

/* 题库正文（md.js 产物） */
.md-body{font-size:14.5px;color:var(--text-primary);line-height:1.8}
.md-body ul{margin:6px 0;padding-left:0;list-style:none}
.md-body li{position:relative;padding-left:17px;margin:3px 0}
.md-body li::before{content:"";position:absolute;left:1px;top:11px;width:5px;height:5px;
  border-radius:50%;background:var(--accent-line)}
.md-body li.sub{padding-left:28px;color:var(--text-secondary);font-size:14px}
.md-body li.sub::before{left:16px;background:var(--border-strong)}
.md-body ol{margin:6px 0;padding-left:22px}
.md-body ol li{padding-left:4px}
.md-body ol li::before{content:none}
.md-body p{margin:6px 0}
.md-body b{color:var(--text-primary);font-weight:650}
.md-body code{
  font-family:var(--mono);font-size:.9em;background:var(--code-bg);
  border:1px solid var(--border);padding:1px 5px;border-radius:5px;color:var(--code-ink);
}
.md-body pre{
  background:var(--pre-bg);color:var(--pre-ink);padding:13px 15px;border-radius:10px;overflow:auto;
  font-family:var(--mono);font-size:12.5px;line-height:1.65;margin:9px 0;border:1px solid var(--pre-line);
}
.md-body pre code{background:transparent;border:0;padding:0;color:inherit;font-size:12.5px}
.md-body blockquote{
  margin:9px 0;padding:7px 12px;background:var(--quote-bg);border-left:3px solid var(--quote-line);
  border-radius:0 8px 8px 0;color:var(--quote-ink);font-size:13.5px;
}
.md-body hr{border:0;border-top:1px solid var(--border);margin:12px 0}
.md-body .math{font-family:var(--mono);font-size:.92em;color:var(--accent-strong)}

/* 位置标签（搜索 / 练习内使用） */
.tag{font-size:11px;border-radius:6px;padding:1px 7px;line-height:17px;color:var(--text-muted);background:var(--surface-1);border:1px solid var(--border)}
.tag.meta{color:var(--accent-strong);background:var(--accent-soft);border-color:var(--accent-line)}

/* 小型按钮 */
.mini-btn{
  border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text-secondary);
  font-size:12.5px;padding:5px 11px;border-radius:8px;font-weight:500;transition:.12s;
}
.mini-btn:hover{border-color:var(--accent);color:var(--accent)}
.mini-btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------------- 练习会话 ---------------- */
.quiz-panel{max-width:860px;margin:0 auto}
.quiz-topbar{
  display:flex;align-items:center;gap:14px;padding:12px 16px;margin-bottom:14px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
}
.qz-progress{flex:1;min-width:120px}
.qz-bar{height:7px;border-radius:99px;background:var(--surface-1);overflow:hidden;margin-top:6px;border:1px solid var(--border)}
.qz-bar i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .25s}
.qz-meta{flex:none;font-size:12px;color:var(--text-muted);text-align:right;line-height:1.7}
.qz-meta b{font-size:15px}
.quiz-card{padding:22px 24px 8px}
.quiz-card .tagrow{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.qz-qtext{font-size:19px;line-height:1.7;font-weight:700;margin:4px 0 8px;color:var(--text-primary)}
.qz-inst{color:var(--text-muted);font-size:13.5px;margin:0 0 4px}
#quizAnswer{margin-top:16px;border-top:1px dashed var(--border-strong);padding-top:16px}
.quiz-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:16px 0 10px;flex-wrap:wrap}
.quiz-actions .right{display:flex;gap:9px;flex-wrap:wrap}
.result-card{padding:28px}
.result-card h3{margin:0 0 6px;font-size:20px;color:var(--text-primary)}
.big-score{font-size:46px;font-weight:800;line-height:1;color:var(--accent)}
.review-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.rev-chip{font-size:12.5px;background:var(--surface-1);border:1px solid var(--border);
  border-radius:999px;padding:3px 12px;color:var(--text-secondary)}
.rev-chip.bad{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad)}
.rev-grp{margin:8px 0}
.rev-grp:first-child{margin-top:0}
.rev-grp-h{font-size:12px;color:var(--text-secondary);font-weight:600;margin:0 0 4px}

/* ---------------- 速查表 ---------------- */
.cheat-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.cheat-note{padding:12px 16px;margin:12px 0 4px;border-radius:var(--r-sm);
  background:var(--surface-1);color:var(--text-secondary);font-size:13px;border:1px solid var(--border)}
table.data{width:100%;border-collapse:collapse;font-size:13.5px;margin:6px 0}
table.data th,table.data td{
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.6;
}
table.data thead th{
  font-size:12px;letter-spacing:.03em;color:var(--text-muted);font-weight:600;
  background:var(--surface-1);position:sticky;top:0;z-index:2;
}
table.data tbody tr:nth-child(even){background:var(--surface-2)}
table.data tbody tr:hover{background:var(--accent-soft)}
table.data td code{font-family:var(--mono);background:var(--code-bg);border:1px solid var(--border);
  border-radius:4px;padding:0 4px;font-size:12px}
.table-scroll{overflow:auto;border-radius:var(--r);border:1px solid var(--border);margin:8px 0 4px;background:var(--surface-2)}
.table-scroll table.data{margin:0}
.cheat-card-title{font-size:16px;font-weight:700;padding:16px 18px 4px;margin:0;color:var(--text-primary)}
.cheat-card-title small{display:block;font-weight:400;color:var(--text-muted);font-size:12.5px;margin-top:3px}

/* ---------------- 搜索 / 空态 ---------------- */
mark{background:var(--mark-bg);border-radius:3px;padding:0 1px;color:inherit}
.empty{text-align:center;color:var(--text-muted);padding:46px 10px;font-size:14px}
.empty .big{font-size:40px;display:block;margin-bottom:10px;opacity:.45}

/* ---------------- 搜索结果项 ---------------- */
.s-row{display:flex;align-items:flex-start;gap:12px;padding:11px 16px;
  border-bottom:1px dashed var(--border)}
.s-row .qs{flex:1;min-width:0}
.s-title-row{display:flex;align-items:center;gap:9px;min-width:0}
.s-title-row .q-qtext{font-size:15px;font-weight:600}
.s-body{padding:11px 16px 13px 16px;font-size:13.5px;color:var(--text-secondary)}
.s-row .mini-btn{flex:none;margin-top:2px}

/* ---------------- 章节页头 / 标签行 ---------------- */
.ph-top{display:flex;align-items:center;gap:10px;min-width:0}
.ph-top .page-title{font-size:22px}
.tagrow{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}

/* ---------------- 学习资源（①~⑤ 五级口径） ---------------- */
/* 级别令牌：内部变量 --lvc/--lvb/--lvbg 由 .lvN 注入，供子元素取色；深色下另配 */
:root{
  --lv1c:#137a5a; --lv1b:#c6e2d3; --lv1bg:#e6f3ec;
  --lv2c:#4f46e5; --lv2b:#d9defa; --lv2bg:#eef1fd;
  --lv3c:#9c5b09; --lv3b:#ecd4a8; --lv3bg:#faf0df;
  --lv4c:#b4232b; --lv4b:#f0c4c6; --lv4bg:#fbecec;
  --lv5c:#8b877d; --lv5b:#d9d5cb; --lv5bg:#f0eee9;
}
:root[data-theme="dark"]{
  --lv1c:#2eb584; --lv1b:rgba(46,181,132,.45); --lv1bg:rgba(46,181,132,.16);
  --lv2c:#8f8cff; --lv2b:rgba(143,140,255,.45); --lv2bg:rgba(121,120,255,.16);
  --lv3c:#e0a33c; --lv3b:rgba(224,163,60,.45); --lv3bg:rgba(224,163,60,.16);
  --lv4c:#e4686c; --lv4b:rgba(228,104,108,.45); --lv4bg:rgba(228,104,108,.16);
  --lv5c:#918c80; --lv5b:rgba(145,140,128,.5); --lv5bg:rgba(145,140,128,.16);
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    --lv1c:#2eb584; --lv1b:rgba(46,181,132,.45); --lv1bg:rgba(46,181,132,.16);
    --lv2c:#8f8cff; --lv2b:rgba(143,140,255,.45); --lv2bg:rgba(121,120,255,.16);
    --lv3c:#e0a33c; --lv3b:rgba(224,163,60,.45); --lv3bg:rgba(224,163,60,.16);
    --lv4c:#e4686c; --lv4b:rgba(228,104,108,.45); --lv4bg:rgba(228,104,108,.16);
    --lv5c:#918c80; --lv5b:rgba(145,140,128,.5); --lv5bg:rgba(145,140,128,.16);
  }
}
.lv1{--lvc:var(--lv1c);--lvb:var(--lv1b);--lvbg:var(--lv1bg)}
.lv2{--lvc:var(--lv2c);--lvb:var(--lv2b);--lvbg:var(--lv2bg)}
.lv3{--lvc:var(--lv3c);--lvb:var(--lv3b);--lvbg:var(--lv3bg)}
.lv4{--lvc:var(--lv4c);--lvb:var(--lv4b);--lvbg:var(--lv4bg)}
.lv5{--lvc:var(--lv5c);--lvb:var(--lv5b);--lvbg:var(--lv5bg)}

.res-grp{margin-bottom:30px}
.res-grp-head{display:flex;align-items:baseline;gap:9px;margin:0 0 8px;
  padding-bottom:8px;border-bottom:1px solid var(--border)}
.res-grp-head h2{margin:0;font-size:17px;font-weight:700;color:var(--text-primary);white-space:nowrap}
.res-grp-head .res-grp-sub{color:var(--text-muted);font-size:12.5px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-grp-head .res-grp-n{margin-left:auto;flex:none;font-size:12px;color:var(--text-muted);white-space:nowrap}
.res-grp-note{padding:9px 14px;margin:0 0 12px;border-radius:var(--r-sm);
  background:var(--surface-1);border:1px solid var(--border);font-size:13px;color:var(--text-secondary)}
.res-list{display:flex;flex-direction:column;gap:12px}
.res-grp-head .res-tierdot{display:none}

.res-card{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
  border-left:3px solid var(--lvc,var(--border-strong));
  padding:14px 16px 13px;transition:border-color .15s, box-shadow .15s;
}
.res-card:hover{border-color:var(--lvb,var(--border-strong));box-shadow:var(--shadow)}
.res-head{display:flex;align-items:flex-start;gap:11px;min-width:0}
.res-flag{flex:none;width:22px;height:22px;margin-top:1px;border-radius:7px;
  display:grid;place-items:center;font-size:12.5px;font-weight:800;
  color:#fff;background:var(--lvc,var(--text-muted))}
.res-title{flex:1;min-width:0;margin:0;font-size:15px;line-height:1.55;color:var(--text-primary);font-weight:650}
.res-link{
  flex:none;margin-top:1px;white-space:nowrap;font-size:12px;font-weight:600;
  border:1px solid var(--lvb,var(--border-strong));background:var(--lvbg,var(--surface-1));
  color:var(--lvc,var(--text-secondary));padding:3px 10px;border-radius:999px;transition:.12s;
}
.res-link:hover{border-color:var(--lvc,var(--accent));text-decoration:none}
.res-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:9px 0 0 33px}
.res-lvtag{color:var(--lvc,var(--text-muted));background:var(--lvbg,var(--surface-1));
  border-color:var(--lvb,var(--border));font-weight:600}
.res-src,.res-date{font-size:12px;color:var(--text-muted)}
.res-src::before{content:"来源 · "}
.res-date::before{content:"发布于 "}
.res-rel{display:flex;gap:6px;margin:8px 0 0 33px;font-size:12.5px;color:var(--text-secondary);line-height:1.7}
.res-rel b{flex:none;color:var(--lvc,var(--accent-strong));font-weight:600}
.res-summary{margin:9px 0 0 33px;font-size:13px;color:var(--text-secondary)}
.res-summary p{margin:4px 0}

/* ---------------- 刷题 Tab：复习安排 / 白板推导 / 模拟面试 ---------------- */
.plan-sum{max-width:760px;margin-bottom:16px;padding:16px 18px}
.plan-prog{height:8px;border-radius:99px;background:var(--surface-1);overflow:hidden;margin:10px 0;border:1px solid var(--border)}
.plan-prog i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .25s}

.plan-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.plan-feature{
  text-align:left;width:100%;color:inherit;font:inherit;padding:16px 18px;
  cursor:pointer;transition:border-color .15s, box-shadow .15s;
}
.plan-feature:hover{border-color:var(--accent-line);box-shadow:var(--shadow)}
.plan-feature-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.plan-feature-title{margin:0;font-size:15px;font-weight:700;color:var(--text-primary)}
.plan-go{display:block;margin-top:8px;color:var(--accent);font-weight:600}

.plan-day{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;margin:0 0 10px}
.plan-day.today{border-color:var(--accent-line)}
.plan-day-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.plan-day-n{font-size:13px;font-weight:700;color:var(--text-primary)}
.plan-day-date{font-size:12px;color:var(--text-muted);font-family:var(--mono)}
.plan-buffer{color:var(--text-muted);font-size:12.5px;padding:4px 2px}
.unit-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px dashed var(--border);padding:7px 2px}
.unit-row.done .unit-name,.unit-row.done .unit-name b{color:var(--text-muted)}
.unit-name{display:flex;align-items:baseline;gap:8px;flex:1;min-width:170px;font-size:13.5px;color:var(--text-secondary)}
.unit-name b{color:var(--accent-strong);font-weight:700;font-size:12px;min-width:36px}
.unit-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.plan-date{font:13px var(--font);padding:7px 10px;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface-2);color:var(--text-primary)}
.plan-date:focus{outline:none;border-color:var(--accent)}

.mock-clock{
  flex:none;font:700 12px var(--mono);letter-spacing:.02em;color:#fff;background:var(--accent);
  padding:3px 9px;border-radius:99px;white-space:nowrap;
}
.mock-clock.low{background:var(--bad);animation:mockpulse 1s ease-in-out infinite}
@keyframes mockpulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ---------------- 响应式 ---------------- */
@media (max-width:900px){
  .topbar-inner{gap:10px;padding:8px 14px}
  .brand-text p{display:none}
  .brand-text h1{font-size:14px}
  .topbar-stats{display:none}
  .main{padding:18px 16px 70px}
  .page-title{font-size:22px}
}
@media (max-width:640px){
  .st-toggle{padding:0 10px}
  .st-toggle .st-txt{display:none}
  .tab{padding:9px 13px;font-size:13.5px}
  .hero{padding:18px 16px}
  .q-top{padding:12px 13px}
  .q-ans{padding:13px 14px 16px 12px}
  .quiz-card{padding:18px 16px 4px}
  .result-card{padding:20px 16px}
}

/* ============================================================
 * 项目 Tab（第 7 个）：研究自述 · 整篇照排阅读
 * 全部作用域在 .proj-sec 内，不影响题库/速查/资源的既有渲染
 * ============================================================ */
.proj-sec{margin:26px 0;scroll-margin-top:10px}
.proj-sec:first-of-type{margin-top:20px}
.proj-sec-title{font-size:18px;font-weight:800;color:var(--text-primary);
  margin:0 0 8px;padding-bottom:7px;border-bottom:1px solid var(--border-strong)}
.proj-sec .md-body{color:var(--text-secondary)}
/* 标题分级只在项目包裹层内生效（md.js 输出的级别类；题库正文没有标题，视觉不变） */
.proj-sec .md-body .md-h{margin:16px 0 6px;color:var(--text-primary)}
.proj-sec .md-body .md-h.md-h2{font-size:17px;font-weight:800}
.proj-sec .md-body .md-h.md-h3{font-size:15.5px;font-weight:750}
.proj-sec .md-body .md-h.md-h4{font-size:14.5px;font-weight:650}
/* 站外引用链接（全局 .md-body：题库正文内嵌的论文/报告链接也用同款样式） */
.md-body a{color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--accent-line);word-break:break-all}
.md-body a:hover{color:var(--accent-strong);border-bottom-color:var(--accent-strong)}
/* 表格：容器内横向滚动，细线 + thead 底色 + 斑马 */
.proj-sec .md-tbl{overflow-x:auto;margin:12px 0;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-sm)}
.proj-sec .md-tbl table{width:100%;border-collapse:collapse;font-size:13.5px;
  line-height:1.65;min-width:560px}
.proj-sec .md-tbl th,.proj-sec .md-tbl td{text-align:left;padding:8px 11px;
  border-bottom:1px solid var(--border);vertical-align:top}
.proj-sec .md-tbl thead th{background:var(--surface-1);font-size:12px;
  font-weight:600;color:var(--text-muted);white-space:nowrap}
.proj-sec .md-tbl tbody tr:nth-child(even){background:var(--surface-1)}
.proj-sec .md-tbl tr:last-child td{border-bottom:0}
.proj-sec .md-tbl td code{font-family:var(--mono);font-size:12px;
  background:transparent;border:0;padding:0;color:var(--text-primary)}
/* mermaid：抵消通用 pre 样式、居中自适应；失败时回到可读等宽源码块 */
.proj-sec .md-body pre.mermaid{background:transparent;border:0;padding:6px 0;margin:12px 0;
  overflow-x:auto;text-align:center;color:inherit;font-size:13px;line-height:1.6}
.proj-sec .md-body pre.mermaid svg{max-width:100%;height:auto}
.proj-sec .md-body pre.mermaid.mermaid-fallback{background:var(--pre-bg);
  color:var(--pre-ink);border:1px solid var(--pre-line);border-radius:10px;padding:13px 15px;
  font-family:var(--mono);font-size:12.5px;white-space:pre;text-align:left;overflow:auto}
@media (max-width:640px){
  .proj-sec-title{font-size:16.5px}
}

/* ---------------- 平铺页（章节 / 架构原理）：主题 > 章 两级标题 ---------------- */
.chap-theme{margin:0 0 26px;scroll-margin-top:10px}
.chap-theme > .chap-grp-head h2{font-size:18px;font-weight:800}
.chap-theme > .chap-grp-head{margin-bottom:14px}
.ch-sec{margin:0 0 20px;scroll-margin-top:10px}
.ch-sec > .chap-grp-head h2{font-size:15px;font-weight:700}
.ch-sec > .chap-grp-head span{font-size:11.5px}

/* ---------------- 架构原理页：页内目录 + 章头强化吸顶（2026-09-11） ----------------
   这一页是 23 题 + 4 节补充的超长滚动页，两个问题是同源的：没有导航、滚动中没有定位感。
   ① .arch-toc：与项目页同款 chip-btn 做的页内目录（含补充块），点击滚到锚点并同步 #/arch/Ln 深链。
   ② .arch-sec > .chap-grp-head：左侧色条 + 底色带，并 sticky 吸顶——长章滚到一半也知道自己在哪一章。
      刻意用 .arch-sec 限定作用域，章节 Tab 的章头不受影响（那边章头多、且章短，吸顶反而碍事）。 */
.arch-toc,.ch-toc{margin:0;gap:8px}   /* 与「全部收起/展开」同处一行 toolbar，自身不再留外边距 */
.arch-toc-label{font-size:12px;color:var(--text-muted)}
/* top 取 -(--main-pt)：粘住时把栏自身顶到滚动区最上沿，用 bars 自己的底色盖住那一条 padding，
   否则卡片会从栏上方 22px 的缝隙里"穿"出来（实测过：给 #main 加底色没用，滚动内容画在底色之上）。 */
.arch-sec > .chap-grp-head{
  position:sticky;top:calc(-1 * var(--main-pt));z-index:5;
  align-items:center;gap:12px;margin:0 0 14px;
  padding:calc(var(--main-pt) + 10px) 14px 10px;
  background:var(--page);border-bottom:1px solid var(--border);border-radius:0;
  box-shadow:inset 3px 0 0 var(--accent);
}
.arch-sec > .chap-grp-head h2{font-size:17px;font-weight:800;letter-spacing:.2px}
.arch-sec > .chap-grp-head span{font-size:11.5px;color:var(--text-muted)}
/* 吸顶后章头会盖住卡片顶边，给紧随其后的第一张卡补一点间距，避免视觉挤压 */
.arch-sec > .chap-grp-head + .q-list{margin-top:2px}

/* ---------------- 站内补充（架构原理页末的「算法架构」） ---------------- */
/* suppSectionHtml() 刻意用 .proj-sec 包裹正文，直接复用项目页那套排版
   （md-h 分级 / .md-tbl 表格 / 链接 / 代码块），故这里只补三件事：
   与上方题库的视觉分隔、正文节间距、锚点在顶栏下不被吃掉的 scroll-margin。 */
#arch-supp{margin-top:34px;padding-top:24px;border-top:1px solid var(--border)}
#arch-supp > .chap-grp-head{margin-bottom:14px}
#arch-supp .proj-sec > .md-body{margin-bottom:20px;scroll-margin-top:10px}
#arch-supp .proj-sec > .md-body:last-child{margin-bottom:0}

/* ---------------- 章节总览页：页内目录 + 主题头吸顶（2026-09-11） ----------------
   这一页 92 题、即使默认收起也有约 11 屏，滚到中段同样没有定位感。做法与架构页同源：
   ① .ch-toc 复用 .arch-toc 的 chip 样式（6 个主题各一枚）；
   ② 只让**主题头**吸顶（7 个主题），章头保持不吸顶——章有 18 个、多数只占 2–4 屏，
      逐个吸顶会把滚动区切得七零八落；而"我现在在哪个主题里"才是这一页真正会丢的信息。
   top / padding 的取值理由与 .arch-sec 完全一致（见上方那段注释，含"给 #main 加底色无效"的实测结论）。 */
.chap-theme > .chap-grp-head{
  position:sticky;top:calc(-1 * var(--main-pt));z-index:4;
  align-items:center;gap:12px;margin:0 0 14px;
  padding:calc(var(--main-pt) + 10px) 14px 10px;
  background:var(--page);border-bottom:1px solid var(--border);border-radius:0;
  box-shadow:inset 3px 0 0 var(--accent);
}
.chap-theme > .chap-grp-head h2{font-size:18px;font-weight:800;letter-spacing:.2px}
.chap-theme > .chap-grp-head + .ch-sec{margin-top:2px}

/* ---------------- 页脚：品牌回链 + 常见问题（2026-09-14 加） ----------------
   @media (max-width:768px) 之外 .main 的 padding-bottom 是 90px（本就为底部小红书横幅留的），
   页脚被 MutationObserver 常驻在 #main 内容末尾，所以它天然落在那 90px 之上，不需要额外留白。
   配色一律取语义令牌：底色用 --surface-1（次级填充）而不是 --surface-2（卡片白），
   否则在亮主题下页脚会比卡片还白、盖住页面层次。 */
.qep-foot{
  margin:34px 0 0;padding:18px 0 0;
  border-top:1px solid var(--border);
  font-size:13px;color:var(--text-secondary);
}
.qep-foot-brand{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:8px 18px;margin-bottom:12px;
}
.qep-foot-brand a{color:var(--accent);text-decoration:none;font-weight:700}
.qep-foot-brand a:hover{text-decoration:underline}
.qep-foot-note{color:var(--text-muted);font-size:12px}

.qep-faq{
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r);
  padding:0 16px;
}
.qep-faq > summary{
  cursor:pointer;list-style:none;padding:11px 0;
  font-weight:700;color:var(--text-primary);
}
.qep-faq > summary::-webkit-details-marker{display:none}
.qep-faq > summary::after{content:" ▾";color:var(--text-muted);font-weight:400}
.qep-faq[open] > summary::after{content:" ▴"}
.qep-faq[open] > summary{border-bottom:1px solid var(--border);margin-bottom:14px}
.qep-faq-inner{padding-bottom:6px}
.qep-faq-inner h3{
  margin:0 0 4px;font-size:14px;font-weight:700;color:var(--text-primary);
  line-height:1.6;
}
.qep-faq-inner p{margin:0 0 14px;line-height:1.85;color:var(--text-secondary)}
.qep-faq-inner p:last-child{margin-bottom:0}
.qep-faq-inner b{color:var(--text-primary)}
.qep-foot-more{
  margin:16px 0 0;padding-top:12px;border-top:1px dashed var(--border);
  font-size:12.5px;color:var(--text-muted);
}
.qep-foot-more a{color:var(--accent);text-decoration:none}
.qep-foot-more a:hover{text-decoration:underline}
@media (max-width:768px){
  .qep-foot{margin-top:26px}
  .qep-foot-brand{flex-direction:column;gap:2px}
  .qep-faq{padding:0 13px}
}

/* ---------------- 笔记（notes）Tab：靠右的入口 + 左列表 / 右编辑器 ----------------
   数据全在浏览器 localStorage（见 app.js 的 loadNotes/saveNotes），所以这页没有任何网络请求，
   样式只需照顾三件事：① 把 Tab 推到导航条最右；② 左列表 / 右编辑器两栏；
   ③ 编辑态与预览态在同一块区域里切换（.notes-editor.is-preview）。 */
.tabbar-inner .tab-notes{
  margin-left:auto;                 /* tabbar 是 flex：把「我的笔记」和左边四个主导航分开 */
  border-left:1px solid var(--border);
}

.notes-h{margin:6px 0 6px;font-size:21px;font-weight:800;letter-spacing:.2px}
.notes-sub{
  margin:0;font-size:13.5px;line-height:1.8;color:var(--text-secondary);max-width:760px;
}
.notes-sub b{color:var(--text-primary)}

.notes-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 14px}
.notes-bar .btn{padding:7px 14px;font-size:13.5px}
.notes-bar .btn.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-strong)}
.notes-status{
  margin-left:auto;font-size:12.5px;color:var(--ok);white-space:nowrap;
}
.notes-status.is-warn{color:var(--bad)}

.notes-body{display:grid;grid-template-columns:246px minmax(0,1fr);gap:16px;align-items:start}

/* 左侧：笔记列表 */
.notes-side{position:sticky;top:8px;min-width:0}
.notes-side-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-size:12px;color:var(--text-muted);padding:0 2px 8px;
}
.notes-list{display:flex;flex-direction:column;gap:7px;max-height:min(62vh,560px);overflow-y:auto;padding-right:2px}
.note-item{
  position:relative;border:1px solid var(--border);background:var(--surface-2);
  border-radius:10px;transition:border-color .12s, background .12s;
}
.note-item:hover{border-color:var(--accent-line);background:var(--surface-1)}
.note-item.on{border-color:var(--accent);background:var(--accent-soft)}
/* 内边距放在按钮上：整张卡（除右上角删除键）都可点，且键盘 Enter 能选中 */
.note-item-pick{
  display:block;width:100%;border:0;background:transparent;border-radius:10px;
  padding:9px 26px 9px 11px;text-align:left;font-family:inherit;cursor:pointer;
}
.note-item-t{
  display:block;font-size:13.5px;font-weight:650;color:var(--text-primary);line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.note-item-m{display:flex;gap:9px;margin-top:3px;font-size:11.5px;color:var(--text-muted)}
.note-item-pick:focus-visible,.note-item-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
/* 删除键常显半透明（触屏没有 hover），悬停/选中时再点亮 */
.note-item-x{
  position:absolute;top:5px;right:5px;width:22px;height:22px;
  display:grid;place-items:center;border:0;border-radius:6px;
  background:transparent;color:var(--text-muted);font-size:15px;line-height:1;opacity:.4;
  transition:opacity .12s, background .12s, color .12s;
}
.note-item:hover .note-item-x,.note-item.on .note-item-x{opacity:1}
.note-item-x:hover{background:var(--bad-soft);color:var(--bad)}

/* 右侧：编辑器（标题行 + 正文/预览共用一块区域 + 状态行） */
.notes-editor{display:flex;flex-direction:column;padding:10px 14px 6px;min-height:440px}
.note-title{
  border:0;border-bottom:1px solid var(--border);background:transparent;
  color:var(--text-primary);font-family:inherit;font-size:17px;font-weight:700;
  padding:7px 2px 11px;outline:none;transition:border-color .12s;
}
.note-title::placeholder{color:var(--text-muted);font-weight:500}
.note-title:focus{border-bottom-color:var(--accent)}

.note-text{
  flex:1;min-height:380px;width:100%;
  border:0;outline:none;background:transparent;resize:vertical;
  color:var(--text-primary);font:400 14.5px/1.9 var(--font);
  padding:12px 2px;
}
.note-text::placeholder{color:var(--text-muted);line-height:1.9}
.note-preview{display:none;flex:1;min-height:380px;padding:10px 2px;margin:0;overflow-wrap:anywhere}
.notes-editor.is-preview .note-text{display:none}
.notes-editor.is-preview .note-preview{display:block}
.note-empty{margin:0;color:var(--text-muted);font-size:14px}
/* 预览容器挂的是 .proj-sec.md-body（见 app.js 的 renderNotes）：小标题 / 表格 / 代码块
   直接复用项目页那套排版。只补一条 —— .md-h1 在 .proj-sec 里没有字号（项目页只用到 ##~####）。 */
.note-preview .md-h1{font-size:18px;font-weight:800}

.note-foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;
  border-top:1px solid var(--border);padding:7px 2px 3px;
  font-size:11.5px;color:var(--text-muted);
}

@media (max-width:900px){
  /* 单栏：列表压成横向滚动条，先选笔记再往下写 */
  .notes-body{grid-template-columns:1fr}
  .notes-side{position:static}
  .notes-list{flex-direction:row;max-height:none;overflow-x:auto;padding-bottom:4px}
  .note-item{flex:none;width:186px}
  .notes-editor{min-height:360px}
  .note-text,.note-preview{min-height:300px}
}
@media (max-width:640px){
  .notes-status{margin-left:0;width:100%}
  .notes-bar .btn{flex:1 1 auto;justify-content:center}
}