/* ==== app.css ==== */
/* ==========================================================================
   壁纸与毛玻璃面板样式
   ========================================================================== */
.wp-panel{
  position:fixed; top:64px; right:16px; z-index:200; width:326px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(22px) saturate(1.7);
  -webkit-backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid rgba(0,0,0,.07); border-radius:14px;
  box-shadow:0 4px 10px rgba(0,0,0,.07), 0 18px 44px rgba(0,0,0,.14);
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98);
  transition:.2s cubic-bezier(.4,0,.2,1);
}
.wp-panel.open{opacity:1;visibility:visible;transform:none}
.wp-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:13px 16px 10px;border-bottom:1px solid rgba(0,0,0,.06);
}
.wp-head b{font-size:13.5px;font-weight:700}
.wp-close{
  cursor:pointer;font-size:20px;line-height:1;color:var(--text-3);
  padding:0 4px;border-radius:6px;transition:.15s;
}
.wp-close:hover{background:rgba(0,0,0,.06);color:var(--text-1)}
.wp-body{padding:14px 16px 16px}
.wp-label{font-size:12px;color:var(--text-3);font-weight:600;margin-bottom:8px}
.wp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.wp-thumb{
  aspect-ratio:1/1;border-radius:8px;border:1.5px solid var(--border);
  background-size:cover;background-position:center;cursor:pointer;padding:0;
  transition:.15s;background-color:#f4f6f9;
}
.wp-thumb:hover{border-color:var(--border-2);transform:translateY(-1px)}
.wp-thumb.on{border-color:var(--blue);box-shadow:0 0 0 2.5px var(--blue-bg)}
.wp-thumb-none{
  background-image:linear-gradient(135deg,#fff 25%,#e8e8ec 25%,#e8e8ec 50%,#fff 50%,#fff 75%,#e8e8ec 75%);
  background-size:10px 10px;
}
.wp-row{display:flex;gap:7px}
.wp-row input[type=text]{
  flex:1;font-size:12.5px;padding:7px 10px;border:1px solid var(--border-2);
  border-radius:8px;font-family:inherit;min-width:0;
}
.wp-row input[type=text]:focus{outline:2px solid var(--blue-bg);border-color:var(--blue)}
.wp-btn{
  font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:8px;cursor:pointer;
  border:1px solid var(--blue);background:var(--blue);color:#fff;font-family:inherit;
  white-space:nowrap;transition:.15s;
}
.wp-btn:hover{filter:brightness(1.08)}
.wp-btn-ghost{background:#fff;color:var(--text-2);border-color:var(--border-2)}
.wp-btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.wp-file{
  flex:1;font-size:12.5px;padding:7px 12px;border:1px dashed var(--border-2);
  border-radius:8px;cursor:pointer;text-align:center;color:var(--text-2);
  transition:.15s;display:flex;align-items:center;justify-content:center;
}
.wp-file:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}
.wp-note{font-size:11.5px;color:var(--text-3);line-height:1.65;margin-top:11px}

@media (max-width:640px){
  .wp-panel{right:8px;left:8px;width:auto;top:58px}
}

/* ==========================================================================
   粉笔登录态提示条（#fenbiNotice）
   需求：用户要求「Cookie 更新提示放在网页，我看到提示自然会去更新」。
   设计：平时 hidden；仅在未配置/临近过期时由 app.js 显示。
        两种强度——warn（琥珀，提示更新）与 danger（红，已失效/缺失）。
   ========================================================================== */
.fenbi-notice{
  display:flex; align-items:flex-start; gap:11px;
  margin:0 0 14px; padding:12px 14px;
  border-radius:var(--radius-s); border:1px solid var(--amber);
  background:var(--amber-bg); color:#6b4310;
  font-size:13px; line-height:1.6; position:relative;
}
.fenbi-notice[hidden]{display:none}
.fenbi-notice.is-danger{border-color:var(--red);background:var(--red-bg);color:#8a2b2a}
.fenbi-notice-icon{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  background:var(--amber); color:#fff; font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.fenbi-notice.is-danger .fenbi-notice-icon{background:var(--red)}
.fenbi-notice-body{flex:1; min-width:0}
.fenbi-notice-title{font-weight:700; margin-bottom:2px}
.fenbi-notice-text{opacity:.92}
.fenbi-notice-path{
  margin-top:7px; padding:6px 9px; border-radius:6px;
  background:rgba(255,255,255,.72); border:1px solid rgba(0,0,0,.07);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px; word-break:break-all; color:var(--text-1);
}
.fenbi-notice-path[hidden]{display:none}
.fenbi-notice-close{
  flex:0 0 auto; background:none; border:none; cursor:pointer;
  font-size:17px; line-height:1; color:inherit; opacity:.5;
  padding:0 2px; font-family:inherit;
}
.fenbi-notice-close:hover{opacity:1}

/* ==== base.css ==== */
/* ============================================================
   设计令牌（Design Tokens）—— 全站唯一的视觉常量出处
   ------------------------------------------------------------
   两条主题：
     · 深空（默认）—— 暗底 + 紫蓝玻璃，长时间盯屏不刺眼，
       且玻璃卡片有「可透的背景」才成立（浅底 + 白玻璃会互相抵消）。
     · 浅云 —— 白底 + 白玻璃，适合白天强光环境与打印/截图场景。
   切换方式：<html data-theme="dark|light">，由 app.js 从 localStorage 恢复。
   ⚠️ 变量名保持不变 —— 原有 34KB 组件样式因此自动适配，无需逐条改写。
   ============================================================ */
:root,
html[data-theme="dark"]{
  color-scheme:dark;
  --bg-page:#0c1024;
  --bg-card:#151a33;
  --bg-sub:rgba(255,255,255,.045);
  --text-1:#eef1ff;
  --text-2:rgba(226,231,255,.86);
  --text-3:rgba(204,212,248,.66);
  --text-inverse:#0c1024;
  --border:rgba(255,255,255,.10);
  --border-2:rgba(255,255,255,.19);
  --blue:#7cb0ff; --green:#4ade80; --amber:#fbbf24; --red:#fb7185; --gray:#94a3b8;
  --green-bg:rgba(74,222,128,.15); --amber-bg:rgba(251,191,36,.15);
  --gray-bg:rgba(148,163,184,.15); --red-bg:rgba(251,113,133,.15);
  --blue-bg:rgba(124,176,255,.15);
  --radius:18px; --radius-s:11px;
  /* 壁纸与玻璃 */
  --wallpaper:none;
  --glass-bg:rgba(255,255,255,.085);
  --glass-border:rgba(255,255,255,.155);
  --glass-blur:22px;
  /* 实心元件底（原 22 处 background:#fff 统一走这个变量） */
  --surface:rgba(255,255,255,.09);
  --surface-hi:rgba(255,255,255,.11);
  /* 强调色（渐变） */
  --brand:#8b7cf6;
  --brand-2:#c084fc;
  --brand-grad:linear-gradient(135deg,#7c6cf0 0%,#a78bfa 55%,#c084fc 100%);
--shadow-card:0 2px 6px rgba(0,0,0,.22), 0 12px 32px rgba(0,0,0,.26);
  --shadow-hero:0 6px 16px rgba(0,0,0,.26), 0 24px 64px rgba(0,0,0,.34),
                inset 0 1px 0 rgba(255,255,255,.10);
  /* 壁纸遮罩：深色主题要压暗，否则浅色壁纸会让白字看不清 */
  --wallpaper-mask:rgba(8,11,28,.58);
  --wallpaper-veil:3px;
  --hero-grad:linear-gradient(160deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.045) 55%,rgba(255,255,255,.02) 100%);
}

html[data-theme="light"]{
  color-scheme:light;
  --bg-page:#eef1f9;
  --bg-card:#ffffff;
  --bg-sub:rgba(20,30,70,.035);
  --text-1:#151a30;
  --text-2:rgba(32,40,72,.72);
  --text-3:rgba(56,66,104,.52);
  --text-inverse:#ffffff;
  --border:rgba(20,30,70,.10);
  --border-2:rgba(20,30,70,.18);
  --blue:#2f6fd0; --green:#1a8a4a; --amber:#a9700f; --red:#d2453f; --gray:#6b7280;
  --green-bg:#e6f6ec; --amber-bg:#fdf3e0;
  --gray-bg:#f0f1f5; --red-bg:#fdeceb;
  --blue-bg:#e8f1fd;
  --radius:18px; --radius-s:11px;
  --wallpaper:none;
  --glass-bg:rgba(255,255,255,.76);
  --glass-border:rgba(255,255,255,.92);
  --glass-blur:20px;
  --surface:#ffffff;
  --surface-hi:#fbfcff;
  --brand:#6d5ce0;
  --brand-2:#9b7cf6;
  --brand-grad:linear-gradient(135deg,#6d5ce0 0%,#8b7cf6 55%,#a78bfa 100%);
  --shadow-card:0 1px 3px rgba(20,30,70,.06), 0 8px 26px rgba(20,30,70,.08);
  --shadow-hero:0 2px 6px rgba(20,30,70,.06), 0 16px 44px rgba(20,30,70,.10),
                inset 0 1px 0 rgba(255,255,255,.9);
  --wallpaper-mask:rgba(255,255,255,.46);
  --wallpaper-veil:2px;
  --hero-grad:linear-gradient(160deg,#ffffff 0%,#fbfbfd 55%,#f2f3f7 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background-color:var(--bg-page);
  background-image:var(--wallpaper);
  background-size:cover; background-position:center; background-attachment:fixed;
  color:var(--text-1); font-size:14px; line-height:1.65;
  padding:22px 16px 64px; min-height:100vh;
}
/* 壁纸遮罩 —— 深色主题压暗、浅色主题柔化。
   ⚠️ 这一层是「壁纸看起来是空的」的元凶之一：原来是固定 35% 白，
   把本就极淡的壁纸彻底抹平；且卡片 72% 白再盖一次，壁纸等于不存在。 */
body.has-wallpaper::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:var(--wallpaper-mask);
  backdrop-filter:blur(var(--wallpaper-veil));
  -webkit-backdrop-filter:blur(var(--wallpaper-veil));
}
.wrap{max-width:1120px;margin:0 auto}

/* ---------- 顶部导航（毛玻璃 + 点击加粗） ---------- */
.nav{
  display:flex;gap:6px;margin-bottom:18px;overflow-x:auto;padding:8px;
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.6);
  border:1px solid var(--glass-border);
  border-radius:999px;
  box-shadow:var(--shadow-card);
  position:sticky; top:10px; z-index:50;
}
.nav a{
  text-decoration:none;color:var(--text-2);font-size:13.5px;font-weight:500;
  padding:7px 16px;border-radius:999px;white-space:nowrap;transition:.16s;
}
.nav a:hover{color:var(--text-1);background:rgba(0,0,0,.045)}
.nav a.active{background:var(--text-1);color:var(--text-inverse);font-weight:700}
.nav a.disabled{opacity:.4;cursor:not-allowed}

/* ---------- 页头（立体块） ---------- */
.hero{
  position:relative; margin-bottom:18px; border-radius:var(--radius);
  background:var(--hero-grad);
  border:1px solid var(--border);
  box-shadow:var(--shadow-hero);
  overflow:hidden;
}
.hero::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--blue),#5AA9E6 45%,var(--green));
}
.hero-inner{padding:26px 30px 24px}
.crumb{font-size:12.5px;color:var(--text-3);margin-bottom:10px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--blue);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb b{color:var(--text-2);font-weight:500}
.hero-title{
  font-size:34px; font-weight:800; letter-spacing:-.9px; line-height:1.22;
  background:linear-gradient(135deg,#101418 20%, #2b3a4a 90%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-sub{font-size:13.5px;color:var(--text-2);margin-top:10px}
.hero-sub b{color:var(--text-1);font-weight:700}
.hero-meta{margin-top:12px;font-size:12.5px;color:var(--text-3)}

/* ---------- 卡片 ---------- */
.card{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:20px 22px;margin-bottom:16px;
  box-shadow:var(--shadow-card);
}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.card-title{font-size:17px;font-weight:700;letter-spacing:-.2px}
.card-sub{font-size:12.5px;color:var(--text-2);margin-top:3px}
.stamp{
  display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);
  background:var(--bg-sub);padding:7px 12px;border-radius:var(--radius-s);white-space:nowrap;
}
.stamp b{color:var(--text-1);font-weight:600}

/* ---------- 指标卡 ---------- */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:12px;margin:18px 0 16px}
.metric{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);
  padding:16px 12px;text-align:center;transition:.16s;
}
.metric:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.07)}
.metric .num{font-size:27px;font-weight:800;line-height:1.1;letter-spacing:-.6px}
.metric .lbl{font-size:12.5px;color:var(--text-2);margin-top:7px}

/* ---------- 总览三项：可点击卡片 + 展开明细 ---------- */
.metric-btn{
  font:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.metric-btn .hint{font-size:11.5px;color:var(--text-3);margin-top:6px;line-height:1.5}
.metric-btn.is-open{
  border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-bg);
  background:var(--surface-hi);
}
.metric-btn.is-open .lbl{color:var(--blue);font-weight:600}
.ov-tip{font-size:12px;color:var(--text-3);margin:0 0 14px}

.ov-panel{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;margin:0 0 16px;box-shadow:var(--shadow-card);
}
.ov-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid var(--border)}
.ov-head b{font-size:15px}
.ov-sub{font-size:12px;color:var(--text-2)}
.ov-close{margin-left:auto;border:1px solid var(--border-2);background:var(--surface);border-radius:999px;
  padding:3px 12px;font:inherit;font-size:12px;color:var(--text-2);cursor:pointer}
.ov-close:hover{background:var(--bg-sub)}

.ov-list{display:flex;flex-direction:column;gap:8px;margin-top:12px;max-height:540px;overflow:auto}
.ov-row{border:1px solid var(--border);border-radius:var(--radius-s);
  padding:10px 12px;cursor:pointer;transition:.14s;background:var(--surface)}
.ov-row:hover{border-color:var(--blue);background:#fbfdff}
.ov-row-main{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ov-row-main b{font-size:13.5px;color:var(--text-1)}
.ov-pos{font-size:13px;color:var(--text-1)}
.ov-badge{font-size:11.5px;color:var(--blue);background:var(--blue-bg);
  border-radius:999px;padding:1px 8px;margin-left:auto;white-space:nowrap}
.ov-meta{font-size:11.5px;color:var(--text-3);margin-top:5px}
.ov-conds{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ov-cond{font-size:11.5px;color:var(--text-2);background:var(--bg-sub);
  border-radius:5px;padding:1px 7px}
.ov-reasons{margin-top:7px;font-size:12px;line-height:1.7;
  background:var(--amber-bg);border-radius:var(--radius-s);padding:7px 10px}
.ov-reasons b{color:var(--amber)}
.ov-reason{display:block;color:var(--text-1)}

.ov-empty{font-size:13px;color:var(--text-2);line-height:1.9;margin-top:12px}
.ov-next{margin-top:10px;color:var(--text-1)}
.ov-up{margin:6px 0 0;padding-left:0;list-style:none}
.ov-up li{padding:6px 10px;border-left:3px solid var(--blue);background:var(--bg-sub);
  border-radius:0 var(--radius-s) var(--radius-s) 0;margin-bottom:6px;font-size:12.5px}
.ov-date{color:var(--blue);font-weight:600}
.ov-days{color:var(--text-3);font-size:12px}
.ov-none{color:var(--text-3)}
.ov-more{font-size:12px;color:var(--text-3);margin-top:8px;text-align:center}

/* ---------- 列表空状态的动作按钮 ---------- */
.empty-act{
  display:block;margin:14px auto 0;border:1px solid var(--border-2);background:var(--surface);
  border-radius:999px;padding:7px 18px;font:inherit;font-size:13px;color:var(--blue);
  cursor:pointer;transition:.14s;
}
.empty-act:hover{background:var(--blue-bg);border-color:var(--blue)}
.empty-sub{font-size:12.5px;color:var(--text-3)}

/* ---------- 分组「加载更多」（岗位量大时分组只先渲染一批） ---------- */
.load-more-wrap{display:flex;justify-content:center;padding:10px 0 4px}
.load-more{margin:0}

/* ---------- 说明条 ---------- */
.note{
  background:var(--bg-sub);border-radius:var(--radius-s);padding:12px 14px;
  font-size:12.5px;color:var(--text-2);line-height:1.85;
}
.note b{color:var(--text-1);font-weight:600}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:middle;margin-right:3px}

/* ---------- 视角切换（点击加粗） ---------- */
.tabs{display:flex;gap:7px;margin:18px 0 0;flex-wrap:wrap}
.tab{
  font-size:13px;font-weight:500;padding:7px 15px;border-radius:999px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);color:var(--text-2);transition:.16s;
  user-select:none; text-decoration:none; display:inline-block;
}
.tab:hover{border-color:var(--border-2);color:var(--text-1)}
.tab.active,.tab.is-active{
  background:var(--blue-bg);border-color:var(--blue);color:var(--blue);font-weight:800;
  box-shadow:0 2px 8px rgba(24,95,165,.16);
}

/* ---------- 分区 ---------- */
.section{margin-top:24px}
.section:first-child{margin-top:4px}
.section-head{
  display:flex;align-items:center;gap:8px;margin-bottom:2px;
  padding:10px 15px;background:rgba(0,0,0,.035);border-radius:var(--radius-s);
  border-left:3px solid var(--border-2);
}
.section-head h2{font-size:14.5px;font-weight:700;color:var(--text-1)}
.section-head.accent-open{border-left-color:var(--red);background:rgba(226,75,74,.07)}
.section-head.accent-upcoming{border-left-color:var(--amber);background:rgba(186,117,23,.07)}
.section-head.accent-closed{border-left-color:var(--gray);background:rgba(136,135,128,.09)}
.section-head.accent-match{border-left-color:var(--green);background:rgba(29,158,117,.07)}
.pill{
  font-size:11.5px;color:var(--text-2);border:1px solid var(--border-2);
  border-radius:999px;padding:1px 9px;font-weight:600;background:var(--surface);
}
.pill-strong{color:var(--blue);border-color:var(--blue);background:var(--blue-bg)}
.section-body{padding-top:2px}

/* ---------- 岗位行 ---------- */
.row{display:flex;align-items:flex-start;gap:11px;padding:14px 6px;border-bottom:1px solid var(--border);transition:.14s}
.row:last-child{border-bottom:none}
.row:hover{background:rgba(0,0,0,.022);border-radius:8px}
.rdot{width:7px;height:7px;border-radius:50%;flex:none;margin-top:7px}
.rmain{flex:1;min-width:0}
.rjob{font-size:14px;font-weight:700;margin-bottom:5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rmeta{font-size:12.5px;color:var(--text-2);line-height:1.75;word-break:break-word}
.rmeta .sep{color:var(--border-2);margin:0 6px}
.rright{font-size:12.5px;text-align:right;white-space:nowrap;line-height:1.55;padding-left:8px}
.rright .big{font-weight:700}
.link{color:var(--blue);text-decoration:none;font-size:12px;border-bottom:1px solid transparent}
.link:hover{border-bottom-color:var(--blue)}

/* ---------- 标签 ---------- */
.tag{font-size:11.5px;border-radius:6px;padding:2px 8px;font-weight:700;white-space:nowrap}
.t-match{background:var(--green-bg);color:var(--green)}
.t-uncertain{background:var(--amber-bg);color:var(--amber)}
.t-mismatch{background:var(--gray-bg);color:var(--gray)}

/* ---------- 筛选 ---------- */
/* ---------- 筛选器（可展开/收起） ---------- */
.filters-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.filters-toggle{
  display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;
  border:1px solid var(--border-2);background:var(--surface);color:var(--text-1);
  border-radius:999px;padding:6px 14px;cursor:pointer;transition:.14s;
}
.filters-toggle:hover{border-color:var(--blue);background:var(--blue-bg)}
.filters-toggle.is-open{border-color:var(--blue);background:var(--blue-bg);color:var(--blue);font-weight:600}
.ft-icon{font-size:12px;opacity:.75}
.ft-caret{font-size:12px;color:var(--text-3)}
.filters-toggle.is-open .ft-caret{color:var(--blue)}
.filters-summary{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px}
.fs-chip{background:var(--blue-bg);color:var(--blue);border-radius:999px;padding:2px 9px}
.fs-count{color:var(--text-3);margin-left:2px}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
.filters select,.filters input{
  font-size:12.5px;padding:7px 11px;border:1px solid var(--border-2);border-radius:var(--radius-s);
  background:var(--surface);color:var(--text-1);font-family:inherit;
}
.filters input{flex:1;min-width:150px}
.filters select:focus,.filters input:focus{outline:2px solid var(--blue-bg);border-color:var(--blue)}
.f-include{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-size:12px;color:var(--text-2);cursor:pointer}
.f-include input{accent-color:var(--blue)}
.hint{font-size:12px;color:var(--text-3);margin-top:10px}
.empty{text-align:center;padding:44px 20px;color:var(--text-3);font-size:13px}

/* ---------- 公告卡片（二级页） ---------- */
.acc-card{padding:18px 22px}
.acc-head{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start}
.acc-title{font-size:16px;font-weight:700;line-height:1.45;flex:1;min-width:240px}
.acc-title a{color:var(--text-1);text-decoration:none;border-bottom:1px solid transparent}
.acc-title a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.acc-badges{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.acc-body{margin-top:10px}
.acc-meta{font-size:12.5px;color:var(--text-3);display:flex;gap:16px;flex-wrap:wrap}
.att-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.att-chip{
  font-size:12px;text-decoration:none;color:var(--text-2);
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:4px 12px;transition:.15s;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.att-chip:hover{border-color:var(--blue);color:var(--blue)}
.att-table{background:var(--blue-bg);border-color:var(--blue);color:var(--blue);font-weight:700}

/* ---------- 岗位表（二级页表格） ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-s);background:var(--surface)}
table.pos{width:100%;border-collapse:collapse;font-size:12.5px;min-width:820px}
table.pos th{
  background:var(--bg-sub);text-align:left;padding:10px 11px;font-weight:700;
  color:var(--text-2);border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;
}
table.pos td{padding:10px 11px;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.65}
table.pos tr:last-child td{border-bottom:none}
table.pos tr:hover td{background:rgba(0,0,0,.018)}
.cell-cond{max-width:420px;white-space:pre-wrap;word-break:break-word;color:var(--text-2);font-size:12px}
.cell-org{font-weight:600;min-width:150px}
.code-chip{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  background:var(--bg-sub);border-radius:4px;padding:1px 6px;
}

/* ---------- 依据块 ---------- */
.ev{background:var(--bg-sub);border-radius:6px;padding:8px 10px;margin-top:5px;font-size:12px;color:var(--text-2);line-height:1.7}
.ev b{color:var(--text-1)}
.ev-r{background:var(--red-bg);color:var(--red)}
.ev-a{background:var(--amber-bg);color:var(--amber)}

/* ---------- 分页 ---------- */
.pager{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:18px;flex-wrap:wrap}
.pager a,.pager span{
  font-size:12.5px;padding:6px 12px;border-radius:8px;text-decoration:none;
  border:1px solid var(--border);background:var(--surface);color:var(--text-2);
}
.pager .cur{background:var(--text-1);color:var(--text-inverse);border-color:var(--text-1);font-weight:700}
.pager a:hover{border-color:var(--blue);color:var(--blue)}

/* ============================================================
   以下为「岗位行内展开」与「统考日程」新增样式
   ============================================================ */

/* ---------- 近期关键节点（倒计时） ---------- */
.alert-card{border-color:rgba(226,75,74,.28)}
.alert-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:14px}
.alert-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);transition:.16s;
}
.alert-item:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.07)}
.alert-item.urgent{border-color:var(--red);background:var(--red-bg)}
.alert-days{text-align:center;min-width:52px}
.alert-days b{display:block;font-size:23px;font-weight:800;line-height:1.05;letter-spacing:-.6px;color:var(--text-1)}
.alert-item.urgent .alert-days b{color:var(--red)}
.alert-days span{font-size:11.5px;color:var(--text-3)}
.alert-main{min-width:0;flex:1}
.alert-node{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tag-mini{
  font-size:11px;font-weight:600;background:var(--blue-bg);color:var(--blue);
  border-radius:5px;padding:1px 7px;white-space:nowrap;
}
.alert-date{font-size:12px;color:var(--text-3);margin-top:3px;line-height:1.5}

/* ---------- 岗位行：可点击 + 展开 ---------- */
.row.is-clickable{cursor:pointer;flex-wrap:wrap}
.row.is-clickable:hover{background:rgba(24,95,165,.045);border-radius:10px}
.row.expanded{background:rgba(24,95,165,.055);border-radius:10px 10px 0 0;border-bottom-color:transparent}
.expand-cue{
  font-size:11px;font-weight:500;color:var(--blue);opacity:0;
  background:var(--blue-bg);border-radius:5px;padding:1px 7px;transition:.18s;
}
.row.is-clickable:hover .expand-cue{opacity:1}
.chev{font-size:11px;color:var(--text-3);margin-top:3px;transition:transform .2s}
.row.expanded .chev{transform:rotate(180deg)}

/* 时效标签 */
.vtag{font-size:11.5px;border-radius:6px;padding:2px 8px;font-weight:700;white-space:nowrap}
.v-open{background:var(--red-bg);color:var(--red)}
.v-upcoming{background:var(--amber-bg);color:var(--amber)}
.v-ended{background:var(--gray-bg);color:var(--gray)}
.v-unknown{background:var(--bg-sub);color:var(--text-3)}

/* 演示样例标识 */
.tag-sample{
  font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px;white-space:nowrap;
  background:#EEEDFE;color:#4A3AA8;border:1px dashed #A9A0E8;
}
.row.is-sample{background:rgba(74,58,168,.035)}

/* 招录年度标识（26 年发布的公告 = 26/27 年度考试，必须显式标出） */
.ytag{
  font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px;white-space:nowrap;
  background:rgba(45,106,190,.10);color:#1F4E8C;border:1px solid rgba(45,106,190,.28);
}

/* 数据核验徽标（颜色内联设置，此处只管形状与排版） */
.verifytag{
  font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px;white-space:nowrap;
  border:1px solid transparent;cursor:help;
}

/* ---------- 行内详情面板 ---------- */
.detail-slot{
  flex-basis:100%;width:100%;max-height:0;overflow:hidden;
  transition:max-height .3s ease;
}
.detail-slot.open{max-height:none}
.detail-inner{
  margin:10px 0 4px 18px;padding:16px 18px;
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--blue);
  border-radius:var(--radius-s);
  animation:fadeIn .22s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.dloading{font-size:12.5px;color:var(--text-3);padding:8px 0}
.sample-banner{
  background:#EEEDFE;color:#4A3AA8;border:1px dashed #A9A0E8;border-radius:6px;
  padding:9px 12px;font-size:12.5px;margin-bottom:13px;line-height:1.7;
}
.sample-banner code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  background:var(--surface);border-radius:4px;padding:1px 6px;
}
.dhead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:12px;border-bottom:1px dashed var(--border)}
.dhead-title{font-size:15px;font-weight:800;letter-spacing:-.2px}
.dsec{margin-top:15px}
.dsec:first-of-type{margin-top:0}
.dsec-t{
  font-size:12px;font-weight:800;color:var(--blue);letter-spacing:.4px;
  margin-bottom:8px;text-transform:none;
}
.dempty{font-size:12.5px;color:var(--text-3);background:var(--bg-sub);padding:10px 12px;border-radius:6px;line-height:1.7}

/* 时间轴 */
.timeline{display:flex;flex-direction:column;gap:0}
.tl-item{
  display:grid;grid-template-columns:112px 1fr auto;gap:10px;align-items:center;
  padding:9px 12px;border-bottom:1px solid var(--border);font-size:13px;
}
.tl-item:last-child{border-bottom:none}
.tl-item:nth-child(odd){background:rgba(0,0,0,.016)}
.tl-key{font-weight:700;color:var(--text-1)}
.tl-date{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--blue);font-weight:600}
.tl-src{
  font-size:11px;color:var(--text-3);border:1px solid var(--border);
  border-radius:5px;padding:0 6px;cursor:help;white-space:nowrap;
}

/* 要求字段网格 */
.dl-grid{display:grid;grid-template-columns:88px 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:6px;overflow:hidden}
.dl-k{background:var(--bg-sub);padding:9px 11px;font-size:12.5px;font-weight:700;color:var(--text-2)}
.dl-v{background:var(--surface);padding:9px 11px;font-size:12.5px;line-height:1.7;word-break:break-word}

/* 可报专业清单 */
.major-box{margin-top:10px;background:var(--bg-sub);border-radius:6px;padding:11px 13px}
.major-box-t{font-size:12px;font-weight:700;color:var(--text-2);margin-bottom:8px}
.major-chip{
  display:inline-block;font-size:12px;background:var(--surface);border:1px solid var(--border-2);
  border-radius:6px;padding:3px 10px;margin:0 6px 6px 0;color:var(--text-1);
}

/* 电话 */
.phone-row{display:flex;gap:8px;flex-wrap:wrap}
.phone-chip{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:700;
  background:var(--green-bg);color:var(--green);border-radius:6px;padding:5px 12px;
}

/* 正文摘要 */
.body-excerpt{
  font-size:12.5px;color:var(--text-2);line-height:1.9;
  background:var(--bg-sub);border-radius:6px;padding:12px 14px;
  white-space:pre-wrap;word-break:break-word;max-height:190px;overflow:auto;
}

/* 来源 */
.src-line{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.src-date{font-size:12px;color:var(--text-3)}

/* 核对链路：公告 → 附件 → 岗位 */
.trace{display:flex;flex-direction:column;gap:6px}
.trace-step{
  font-size:12.5px;color:var(--text-2);line-height:1.7;
  padding-left:2px;display:flex;gap:8px;align-items:baseline;
}
.trace-step b{
  flex:0 0 18px;height:18px;line-height:18px;text-align:center;
  background:var(--bg-sub);border-radius:50%;font-size:11px;
  color:var(--text-2);font-weight:700;
}
.trace-step.ok{color:var(--green)}
.trace-step.ok b{background:rgba(29,158,117,.12);color:var(--green)}
.trace-step.warn{color:#A0641A}
.trace-step.warn b{background:rgba(224,150,40,.14);color:#A0641A}

/* 岗位基本信息（身份五要素，以岗位表原件为准） */
.dl-basic{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:6px;overflow:hidden;
}
.dl-basic-i{background:var(--surface);padding:8px 11px;display:flex;flex-direction:column;gap:2px;min-width:0}
.dl-basic-i.wide{grid-column:1 / -1}
/* 奇数个窄项时，最后一项独占一行，避免右侧出现空槽位 */
.dl-basic-i:last-child:nth-child(odd):not(.wide){grid-column:1 / -1}
.dl-basic-k{font-size:11px;color:var(--text-3);font-weight:600;letter-spacing:.2px}
.dl-basic-v{font-size:12.5px;font-weight:700;color:var(--text-1);line-height:1.6;word-break:break-word}
.dl-basic-v.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2px}
.dl-basic-v.empty{color:var(--text-3);font-weight:500}

/* 承上（源表合并单元格 / 空白单元）= 与上一行同值 */
.inh{
  display:inline-block;font-size:10.5px;font-weight:700;vertical-align:middle;
  color:#8A6A1F;background:rgba(224,180,40,.16);border:1px solid rgba(224,180,40,.4);
  border-radius:4px;padding:0 5px;margin-left:6px;cursor:help;
}

/* 核验结论徽标 */
.dsec-note{font-size:11.5px;font-weight:500;color:var(--text-3);margin-left:7px}
.warnchip{
  display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  border-radius:999px;padding:1px 8px;border:1px solid transparent;white-space:nowrap;
  margin-top:5px;
}
.warnchip+.warnchip{margin-left:5px}
.warnchip:not([class*=ok]):not([class*=info]):not([class*=warn]):not([class*=err]){
  color:#4A5A78;background:rgba(90,120,180,.1);border-color:rgba(90,120,180,.25);
}
.warnchip.ok{color:var(--green);background:rgba(29,158,117,.1);border-color:rgba(29,158,117,.28)}
.warnchip.info{color:#4A5A78;background:rgba(90,120,180,.1);border-color:rgba(90,120,180,.25)}
.warnchip.warn{color:#A0641A;background:rgba(224,150,40,.12);border-color:rgba(224,150,40,.32)}
.warnchip.err{color:#B02A2A;background:rgba(200,60,60,.1);border-color:rgba(200,60,60,.3)}

/* 岗位表原件核对区 */
.rawbox{
  background:var(--bg-sub);border:1px solid var(--border);border-radius:6px;
  padding:10px 12px;display:flex;flex-direction:column;gap:7px;
}
.rawbox-t{
  font-size:11.5px;font-weight:800;color:var(--text-2);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.rawrow{display:grid;grid-template-columns:104px 1fr;gap:9px;font-size:12.5px;line-height:1.7}
.rawk{color:var(--text-3);font-weight:600}
.rawv{color:var(--text-1);word-break:break-word}
.rawv.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.rawcond{
  font-size:12.5px;line-height:1.85;color:var(--text-1);white-space:pre-wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:9px 11px;
  max-height:220px;overflow:auto;word-break:break-word;
}
.vlist{margin:0;padding-left:18px;font-size:12.5px;line-height:1.85;color:var(--text-2)}
.vlist li{margin:1px 0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.dloading{font-size:12.5px;color:var(--text-3);padding:12px;text-align:center}
@media (max-width:520px){
  .dl-basic{grid-template-columns:1fr}
  .rawrow{grid-template-columns:1fr;gap:2px}
}

/* 分区折叠按钮 */
.sec-toggle{
  margin-left:auto;font-size:11.5px;font-weight:600;color:var(--text-2);
  background:var(--surface);border:1px solid var(--border-2);border-radius:999px;
  padding:2px 11px;cursor:pointer;font-family:inherit;transition:.15s;
}
.sec-toggle:hover{border-color:var(--blue);color:var(--blue)}
.section-body.is-collapsed{display:none}

/* 自动监测状态条 */
.mon-live{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;color:var(--text-2);
}
.mon-dot{
  width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgba(29,158,117,.13);
}
.mon-live.is-running .mon-dot{
  background:var(--amber);
  box-shadow:0 0 0 3px rgba(214,158,46,.16);
  animation:monPulse 1.1s ease-in-out infinite;
}
@keyframes monPulse{0%,100%{opacity:1}50%{opacity:.35}}
.mon-btn{
  font-size:11.5px;font-weight:600;color:var(--blue);
  background:var(--surface);border:1px solid var(--border-2);border-radius:999px;
  padding:3px 12px;cursor:pointer;font-family:inherit;transition:.15s;
}
.mon-btn:hover:not(:disabled){border-color:var(--blue);background:rgba(45,110,220,.05)}
.mon-btn:disabled{opacity:.5;cursor:default}

/* 统考卡片年度标识 —— 同一考试存在跨年度两套日程（如 2026 已结束 / 2027 即将开始），
   不加年度会看起来像重复卡片 */
.cal-year{
  display:inline-block;margin-left:6px;padding:0 5px;
  font-size:10.5px;font-weight:700;letter-spacing:.3px;
  color:var(--text-3);background:var(--bg-sub);border-radius:4px;
  vertical-align:1px;
}
.cal-item.cal-past .cal-year{opacity:.65}

/* ---------- 统考日程板块 ---------- */
/* 统考日程：每行两个（优先级高的靠前，顺序由后端排序） */
.cal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
@media (max-width:900px){.cal-grid{grid-template-columns:1fr}}
.cal-item{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);
  padding:15px 16px;transition:.16s;
}
.cal-item:hover{box-shadow:0 6px 20px rgba(0,0,0,.07)}
.cal-item.cal-live{border-color:var(--blue);box-shadow:0 0 0 3px rgba(24,95,165,.07)}
.cal-item.cal-past{opacity:.82}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.cal-name{font-size:15px;font-weight:800;letter-spacing:-.2px}
.cal-status{font-size:11.5px;font-weight:700;border-radius:6px;padding:2px 9px;white-space:nowrap}
.cal-ongoing{background:var(--blue-bg);color:var(--blue)}
.cal-upcoming{background:var(--amber-bg);color:var(--amber)}
.cal-ended{background:var(--gray-bg);color:var(--gray)}
.cal-unknown{background:var(--bg-sub);color:var(--text-3)}
.cal-full{font-size:12px;color:var(--text-2);margin-bottom:4px;line-height:1.5}
.cal-prov{font-size:11.5px;color:var(--text-3);margin-bottom:11px;line-height:1.6}
.cal-nodes{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:6px;overflow:hidden}
.cal-node{
  display:flex;align-items:center;gap:8px;
  background:var(--surface);padding:7px 10px;font-size:12.5px;flex-wrap:wrap;
}
.cal-node.is-actual{background:rgba(29,158,117,.055)}
.cal-node.is-next{background:var(--blue-bg);box-shadow:inset 3px 0 0 var(--blue)}
.cal-date{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--text-2);font-weight:600;min-width:84px}
.cal-node.is-next .cal-date{color:var(--blue);font-weight:800}
.cal-key{font-weight:600;color:var(--text-1);flex:1;min-width:80px}
.cal-range{font-size:11px;color:var(--text-3)}
.cal-guess{
  font-size:10.5px;color:var(--text-3);border:1px solid var(--border-2);
  border-radius:4px;padding:0 5px;white-space:nowrap;
}
.cal-badge-actual{
  font-size:10.5px;color:#3B6D11;background:var(--green-bg);
  border-radius:4px;padding:0 6px;white-space:nowrap;font-weight:700;
}
.cal-next{
  margin-top:11px;padding-top:10px;border-top:1px dashed var(--border);
  font-size:12.5px;color:var(--text-2);
}

/* 可点击展开的统考块 */
.cal-clickable{cursor:pointer;transition:.16s}
.cal-clickable.is-open{border-color:var(--blue);box-shadow:0 0 0 3px rgba(24,95,165,.07)}
.cal-cue{
  margin-top:9px;font-size:11.5px;color:var(--text-3);text-align:right;
}
.cal-clickable.is-open .cal-cue{color:var(--blue)}
.cal-detail{margin-top:4px}
.cal-clickable .cal-next{margin-top:8px;padding-top:0;border-top:none}
.cal-clickable.is-open .cal-next{border-top:1px dashed var(--border);padding-top:10px;margin-top:11px}

/* 阶段文字即跳转入口 */
.cal-link{
  font-weight:600;color:var(--text-1);flex:1;min-width:80px;
  text-decoration:none;border-bottom:1px solid transparent;transition:.14s;
}
.cal-link:hover{color:var(--blue);border-bottom-color:var(--blue)}
.cal-go{font-size:10px;color:var(--blue);margin-left:4px;opacity:.7}
.cal-link:hover .cal-go{opacity:1}

/* 往期时间线（已发生，供对照） */
.cal-prev{
  margin-top:14px;padding:11px 12px;border-radius:var(--radius-s);
  background:rgba(136,135,128,.07);border:1px dashed var(--border-2);
}
.cal-stage-line{
  font-size:12.5px;font-weight:600;color:var(--blue);
  background:var(--blue-bg);border-radius:var(--radius-s);
  padding:7px 10px;margin:10px 0 9px;line-height:1.6;
}
.cal-hint{font-size:11px;color:var(--text-3);margin-bottom:7px}
.cal-prev-head{font-size:11.5px;font-weight:700;color:var(--text-2);margin-bottom:8px}
.cal-prev .cal-node{background:var(--bg-card)}
.cal-site{margin-top:12px;font-size:12px;color:var(--text-2)}

/* ---------- 公告监测列表 ---------- */
.ann-list{margin-top:14px;border:1px solid var(--border);border-radius:var(--radius-s);overflow:hidden}
.ann-row{
  display:grid;grid-template-columns:104px 1fr auto;gap:12px;align-items:baseline;
  padding:9px 13px;background:var(--bg-card);border-bottom:1px solid var(--border);
}
.ann-row:last-child{border-bottom:none}
.ann-row:hover{background:#fbfdff}
.ann-date{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--text-3)}
.ann-title{
  font-size:13px;color:var(--text-1);text-decoration:none;line-height:1.6;
  border-bottom:1px solid transparent;transition:.14s;
}
.ann-title:hover{color:var(--blue);border-bottom-color:var(--blue)}
.ann-src{font-size:11.5px;color:var(--text-3);white-space:nowrap}
@media (max-width:700px){
  .ann-row{grid-template-columns:1fr;gap:3px}
  .ann-src{display:none}
}
.cal-next b{color:var(--text-1)}

@media (max-width:640px){
  body{padding:14px 10px 50px}
  .hero-inner{padding:20px 18px}
  .hero-title{font-size:25px;letter-spacing:-.5px}
  .card{padding:16px 14px}
  .acc-card{padding:14px 14px}
  .nav{top:6px}
  .detail-inner{margin-left:0;padding:13px 12px}
  .tl-item{grid-template-columns:1fr;gap:2px;padding:8px 10px}
  .cal-node{flex-wrap:wrap;gap:5px}
  .cal-guess{display:none}
  .dl-grid{grid-template-columns:74px 1fr}
}

/* ==========================================================================
   我的报考流程（2027 国考）—— 垂直时间线
   需求（2026-10-16）：用户已完成资格审查，要求「专门对应本人已报岗位的流程时间线，
   按公告通知里的，以作提醒」。
   数据来自 src/apply_flow.py（公告原文摘录，附逐条原文自检），不作推算。
   全部使用主题变量，深浅两套主题自动适配。
   ========================================================================== */
.flow-card{border-color:var(--border-2)}
.flow-codes{display:inline-flex;gap:10px;margin-left:8px;flex-wrap:wrap}
.flow-codes span{font-size:12px;color:var(--text-3)}
.flow-codes code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;font-weight:700;color:var(--blue);
  background:var(--blue-bg);padding:1px 6px;border-radius:5px;
}
.flow-next{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  background:var(--blue-bg);border:1px solid var(--blue);
  border-radius:10px;padding:8px 14px;text-align:right;
}
.flow-next span{font-size:11px;color:var(--text-3)}
.flow-next b{font-size:14px;color:var(--text-1)}
.flow-next em{font-style:normal;font-size:12px;color:var(--blue);font-weight:600}
.flow-next.soon{background:var(--red-bg);border-color:var(--red)}
.flow-next.soon em{color:var(--red)}
.flow-critical{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  background:var(--red-bg);border:1px solid var(--red);border-radius:10px;
  padding:10px 14px;margin:10px 0 4px;font-size:13px;
}
.flow-critical b{color:var(--red)}
.flow-critical>span{color:var(--text-1);font-family:ui-monospace,Menlo,monospace;font-size:12.5px}
.flow-crit-note{color:var(--text-2)!important;font-family:inherit!important;font-size:12.5px!important}
.flow-track{list-style:none;margin:14px 0 0;padding:0}
.flow-node{display:grid;grid-template-columns:24px 1fr;gap:12px}
.flow-node.is-crit .flow-name{color:var(--red)}
.flow-rail{position:relative;display:flex;justify-content:center}
.flow-rail:before{
  content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--border-2);
}
.flow-node:first-child .flow-rail:before{top:10px}
.flow-node:last-child .flow-rail:before{height:10px;bottom:auto}
.flow-rail i{
  position:relative;z-index:1;width:11px;height:11px;margin-top:4px;border-radius:50%;
  background:var(--bg-card);border:2px solid var(--border-2);
}
.flow-node.is-done .flow-rail i{background:var(--green);border-color:var(--green)}
.flow-node.is-active .flow-rail i,
.flow-node.is-today .flow-rail i{
  background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 4px var(--amber-bg);
}
.flow-node.is-crit .flow-rail i{background:var(--red);border-color:var(--red)}
.flow-body{padding-bottom:16px;min-width:0}
.flow-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.flow-name{font-weight:700;font-size:14.5px}
.flow-node.is-na .flow-name,
.flow-node.is-tbd .flow-name{font-weight:600;color:var(--text-2)}
.flow-chip{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.chip-done{background:var(--green-bg);color:var(--green)}
.chip-active{background:var(--amber-bg);color:var(--amber)}
.chip-future{background:var(--blue-bg);color:var(--blue)}
.chip-na,.chip-tbd{background:var(--gray-bg);color:var(--gray)}
.flow-when{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;color:var(--text-2);margin-top:3px;
}
.flow-node.is-done .flow-when,
.flow-node.is-na .flow-when,
.flow-node.is-tbd .flow-when{color:var(--text-3)}
.flow-slots{display:flex;gap:14px;flex-wrap:wrap;margin-top:5px;font-size:12.5px;color:var(--text-2)}
.flow-slots span{background:var(--bg-sub);padding:2px 9px;border-radius:6px}
.flow-slots b{color:var(--text-1);font-weight:600;margin-right:4px}
.flow-note{font-size:12.5px;color:var(--text-3);margin-top:4px;line-height:1.6}
.flow-foot{
  margin-top:4px;padding-top:12px;border-top:1px solid var(--border);
  font-size:12px;color:var(--text-3);line-height:1.7;
}
.flow-foot a{color:var(--blue);text-decoration:none}
.flow-foot a:hover{text-decoration:underline}

@media (max-width:640px){
  .flow-next{align-items:flex-start;text-align:left;width:100%}
  .flow-codes{margin-left:0;display:flex;margin-top:4px}
  .flow-node{grid-template-columns:18px 1fr;gap:9px}
}

/* ==== kb.css ==== */
/* ②知识库模块样式
 *
 * 设计约束（见 docs/架构/知识库模块-界面设计.md §五）：
 *   **复用 base.html 的 CSS 变量与视觉语言，不引入第二套设计体系** ——
 *   所以这里只用 `var(--…)`，不出现新的色值与圆角/阴影定义。
 *
 * 多端（§四）：桌面双栏（正文 + 反链），窄屏单栏、反链下移。
 */

/* ---------- 统计卡（L1 首页） ---------- */
.kb-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px;margin-bottom:20px}
.kb-stat{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:15px 17px;box-shadow:var(--shadow-card)}
.kb-stat b{display:block;font-size:26px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
.kb-stat span{display:block;font-size:12px;color:var(--text-2);margin-top:5px}

/* ---------- 专题网格 ---------- */
.kb-topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:10px}
@media(max-width:600px){.kb-topics{grid-template-columns:1fr 1fr}}
.kb-topic{display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-s);padding:12px 14px;text-decoration:none;color:var(--text-1);transition:border-color .15s}
.kb-topic:hover{border-color:var(--border-2)}
.kb-topic b{display:block;font-size:13.5px;font-weight:600;line-height:1.4}
.kb-topic span{display:block;font-size:11.5px;color:var(--text-3);margin-top:3px}

/* ---------- 搜索框 ---------- */
.kb-search{display:flex;gap:8px;margin:0 0 20px}
.kb-search input{flex:1;min-width:0;padding:11px 14px;border:1px solid var(--border-2);border-radius:var(--radius-s);font-size:14px;font-family:inherit;background:var(--bg-card);color:var(--text-1)}
.kb-search input:focus{outline:none;border-color:var(--blue)}
.kb-search button{padding:11px 20px;border:0;border-radius:var(--radius-s);background:var(--text-1);color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}

/* ---------- 笔记列表 ---------- */
.kb-list{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card)}
.kb-list a{display:block;padding:11px 16px;border-bottom:1px solid var(--border);text-decoration:none;color:var(--text-1)}
.kb-list a:last-child{border-bottom:0}
.kb-list a:hover{background:var(--bg-sub)}
.kb-list .t{font-size:13.5px;line-height:1.45}
.kb-list .p{font-size:11px;color:var(--text-3);margin-top:3px}

/* ---------- 通用小卡片 / 区块标题 ---------- */
.kb-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow-card)}
.kb-card h4{font-size:11.5px;font-weight:700;color:var(--text-2);margin:0 0 10px;letter-spacing:.4px}
.kb-sect{font-size:13px;font-weight:700;margin:24px 0 10px;color:var(--text-2)}

/* ---------- 新文章待办（录入块） ----------
 * 只负责「收集意图」；真正入库由 AI 跑链路 A。见 src/kb_inbox.py 模块说明。 */
.kb-inbox{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow-card)}
.kb-inbox-form{display:flex;flex-wrap:wrap;gap:8px}
.kb-inbox-form input,.kb-inbox-form select{flex:1 1 200px;min-width:0;padding:9px 12px;border:1px solid var(--border-2);border-radius:var(--radius-s);font-size:13px;font-family:inherit;background:var(--bg-card);color:var(--text-1)}
.kb-inbox-form input[name="title"]{flex:2 1 280px}
.kb-inbox-form input:focus{outline:none;border-color:var(--blue)}
.kb-inbox-form button{padding:9px 20px;border:0;border-radius:var(--radius-s);background:var(--text-1);color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.kb-inbox-hint{font-size:11.5px;color:var(--text-3);margin:9px 0 0;line-height:1.6}
.kb-inbox-hint b{color:var(--text-1)}
.kb-inbox-err{font-size:12px;color:var(--red);margin:0 0 10px}
.kb-inbox-list{margin-top:12px;border-top:1px solid var(--border);padding-top:10px}
.kb-inbox-item{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12.5px;flex-wrap:wrap}
.kb-inbox-item .t{flex:1 1 auto;min-width:0;color:var(--text-1)}
.kb-inbox-item .meta{font-size:11px;color:var(--text-3)}
.kb-inbox-item .badge{font-size:11px;padding:1px 7px;border-radius:9px;background:var(--bg-sub);color:var(--text-2);white-space:nowrap}
.kb-inbox-item.st-done .badge{color:var(--blue)}
.kb-inbox-item.st-failed .badge{color:var(--red)}
.kb-inbox-item a{font-size:11.5px;color:var(--blue);text-decoration:none}
.kb-inbox-item form{margin:0}
.kb-inbox-item button{border:0;background:none;color:var(--text-3);font-size:15px;line-height:1;cursor:pointer;padding:0 4px}
.kb-inbox-item button:hover{color:var(--red)}
.kb-read{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:18px;align-items:start}
@media(max-width:880px){
  .kb-read{grid-template-columns:1fr}
  .kb-side{order:2}            /* 反链移到正文下方 */
}
.kb-body{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 28px;box-shadow:var(--shadow-card);min-width:0;overflow-wrap:break-word;word-break:break-word}
@media(max-width:600px){.kb-body{padding:16px 15px}}

/* ---------- 正文排版 ---------- */
.kb-body h1{font-size:21px;font-weight:700;margin:0 0 14px;line-height:1.35}
.kb-body h2{font-size:16.5px;font-weight:600;margin:26px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.kb-body h3{font-size:15px;font-weight:600;margin:18px 0 8px}
.kb-body h4{font-size:13.5px;font-weight:600;margin:14px 0 6px;color:var(--text-2)}
.kb-body p{margin:9px 0}
.kb-body ul,.kb-body ol{margin:9px 0 9px 22px}
.kb-body li{margin:4px 0}
.kb-body blockquote{margin:12px 0;padding:9px 14px;border-left:3px solid var(--border-2);background:var(--bg-sub);color:var(--text-2);border-radius:0 var(--radius-s) var(--radius-s) 0}
.kb-body hr{border:0;border-top:1px solid var(--border);margin:20px 0}
.kb-body code{background:var(--bg-sub);padding:1px 5px;border-radius:4px;font-size:12.5px}
/* 用户本人的阅读标注 —— 库规则明令不得增删改，样式必须保留 */
.kb-body mark{background:var(--amber-bg);color:inherit;padding:0 2px;border-radius:2px}
.kb-body table{width:100%;border-collapse:collapse;margin:12px 0;font-size:12.5px;display:block;overflow-x:auto}
.kb-body th,.kb-body td{border:1px solid var(--border);padding:6px 9px;text-align:left;vertical-align:top}
.kb-body th{background:var(--bg-sub);font-weight:600}
.kb-body img{max-width:100%;height:auto}

/* ---------- wiki 链接三态 ----------
 * 文案差异见 docs/架构/知识库模块.md S3：
 * `ok` 可点 / `excluded` 库内存在但本期未收录 / `missing` 真断链
 */
.kb-link{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(24,95,165,.28)}
.kb-link:hover{border-bottom-color:var(--blue)}
.kb-broken{color:var(--red);background:var(--red-bg);padding:0 4px;border-radius:3px;border-bottom:1px dashed rgba(226,75,74,.5)}
.kb-excluded{color:var(--text-3);background:var(--gray-bg);padding:0 4px;border-radius:3px;border-bottom:1px dashed var(--border-2)}

/* ---------- 嵌入块 ![[x]] ---------- */
.kb-embed{margin:12px 0;border-left:3px solid var(--blue);background:var(--bg-sub);border-radius:0 var(--radius-s) var(--radius-s) 0;padding:10px 14px}
.kb-embed-src{font-size:11.5px;color:var(--text-3);margin-bottom:6px}
.kb-embed-body{font-size:13px}
.kb-embed.is-missing{border-left-color:var(--red)}
.kb-embed.is-excluded{border-left-color:var(--border-2)}
.kb-embed.is-cyclic{border-left-color:var(--amber)}

/* ---------- 页头元信息 / 标签 ---------- */
.kb-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 18px;font-size:12px;color:var(--text-3)}
.kb-tag{background:var(--bg-sub);border:1px solid var(--border);border-radius:20px;padding:2px 10px;font-size:11.5px;color:var(--text-2)}

/* ---------- 侧栏（反链面板） ---------- */
.kb-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.kb-bl{display:block;padding:9px 0;border-bottom:1px solid var(--border);text-decoration:none;color:var(--text-1)}
.kb-bl:last-child{border-bottom:0}
.kb-bl:hover .n{color:var(--blue)}
.kb-bl .n{font-size:12.5px;font-weight:600;line-height:1.45}
.kb-bl .s{font-size:11.5px;color:var(--text-3);margin-top:4px;line-height:1.55}
.kb-bl .r{font-size:10.5px;color:var(--text-3);background:var(--bg-sub);border-radius:10px;padding:0 6px;margin-left:5px}
.kb-empty{font-size:12px;color:var(--text-3);line-height:1.6}

/* ---------- 面包屑 ---------- */
.kb-crumb{font-size:12px;color:var(--text-3);margin-bottom:12px;line-height:1.7}
.kb-crumb a{color:var(--text-2);text-decoration:none}
.kb-crumb a:hover{color:var(--text-1)}
.kb-crumb .sep{margin:0 5px;color:var(--border-2)}

/* ---------- 检索命中摘要高亮 ---------- */
.kb-hit{background:var(--amber-bg);border-radius:2px;padding:0 2px}
.kb-snip{font-size:12px;color:var(--text-2);margin-top:4px;line-height:1.6}

/* ---------- 提示条 ---------- */
.kb-note-bar{font-size:12px;color:var(--text-3);margin-top:14px;text-align:center}

/* ==== shenlun.css ==== */
/* 申论批改报告 · 六色标注样式（作用域 #sl-scope，防污染站点骨架）
 * 来源：shenlun-practice-report skill 的 report-template.html <style>，
 * 由 scripts/build_shenlun_fragment.py --emit-css 一次性固化。
 * skill 模板 CSS 若变更，需用新报告重跑 --emit-css 再生本文件。 */
#sl-scope{
    --fg:#1f2328; --muted:#6b7280; --line:#e5e7eb;
    --key:#A61B1B; --key-bg:#FFE3E3; --key-bd:#E03131;
    --do:#1B5E20; --do-bg:#E3F6E8; --do-bd:#2F9E44;
    --info:#1C4E80; --info-bg:#E7F0FD;
    --prob:#8A6100; --prob-bg:#FFF3D6;
    --case:#6B21A8; --case-bg:#F2E8FF;
    --meta:#5A5A5A; --meta-bg:#F1F1F1;
  }#sl-scope *{box-sizing:border-box;}#sl-scope{margin:0;padding:36px 28px 64px;background:#f7f8fa;color:var(--fg);
    font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;line-height:1.95;font-size:15.5px;}#sl-scope .wrap{max-width:1020px;margin:0 auto;}#sl-scope header{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 30px 22px;margin-bottom:22px;box-shadow:0 1px 3px rgba(0,0,0,.04);}#sl-scope h1{font-size:22px;margin:0 0 6px;}#sl-scope .qline{color:var(--muted);font-size:13.5px;margin:0 0 18px;}#sl-scope .qline b{color:#374151;}#sl-scope h2{font-size:17px;margin:34px 0 14px;padding-left:11px;border-left:4px solid var(--do-bd);}#sl-scope h3{font-size:15px;margin:22px 0 8px;color:#374151;}#sl-scope .legend{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}#sl-scope .lg{border-radius:9px;padding:9px 12px;font-size:13px;}#sl-scope .lg b{display:block;font-size:13.5px;margin-bottom:2px;}#sl-scope .lg span{color:#5b6270;font-size:12.5px;line-height:1.6;}#sl-scope .lg-key{background:var(--key-bg);}#sl-scope .lg-key b{color:var(--key);}#sl-scope .lg-do{background:var(--do-bg);}#sl-scope .lg-do b{color:var(--do);}#sl-scope .lg-info{background:var(--info-bg);}#sl-scope .lg-info b{color:var(--info);}#sl-scope .lg-prob{background:var(--prob-bg);}#sl-scope .lg-prob b{color:var(--prob);}#sl-scope .lg-case{background:var(--case-bg);}#sl-scope .lg-case b{color:var(--case);}#sl-scope .lg-meta{background:var(--meta-bg);}#sl-scope .lg-meta b{color:var(--meta);}#sl-scope .card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px 14px;margin-bottom:14px;box-shadow:0 1px 2px rgba(0,0,0,.03);}#sl-scope .chead{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap;}#sl-scope .pnum{font-size:12px;font-weight:700;color:#6b7280;background:#f3f4f6;border-radius:6px;padding:2px 8px;}#sl-scope .badge{font-size:12px;font-weight:700;border-radius:6px;padding:2px 9px;}#sl-scope .b-key{background:var(--key);color:#fff;}#sl-scope .b-do{background:var(--do);color:#fff;}#sl-scope .b-info{background:#4C8DD6;color:#fff;}#sl-scope .b-prob{background:#E8B923;color:#4a3800;}#sl-scope .b-case{background:var(--case);color:#fff;}#sl-scope .b-meta{background:#9aa1ab;color:#fff;}#sl-scope p.txt{margin:0 0 10px;text-align:justify;}#sl-scope mark{border-radius:3px;padding:1px 3px;background:transparent;}#sl-scope .m-key{background:var(--key-bg);color:var(--key);box-shadow:inset 0 -2px 0 var(--key-bd);}#sl-scope .m-do{background:var(--do-bg);color:var(--do);box-shadow:inset 0 -2px 0 var(--do-bd);}#sl-scope .m-info{background:var(--info-bg);color:var(--info);}#sl-scope .m-prob{background:var(--prob-bg);color:var(--prob);}#sl-scope .m-case{background:var(--case-bg);color:var(--case);}#sl-scope .m-meta{background:var(--meta-bg);color:var(--meta);}#sl-scope .kw{font-weight:700;box-shadow:inset 0 -3px 0 #2F9E44;color:#14532d;border-radius:3px;padding:0 2px;}#sl-scope .kwr{font-weight:700;box-shadow:inset 0 -3px 0 #E03131;color:#7f1d1d;border-radius:3px;padding:0 2px;}#sl-scope i.t{font-style:normal;font-size:11.5px;font-weight:700;border-radius:5px;padding:1px 6px;margin-left:4px;vertical-align:1.5px;white-space:nowrap;}#sl-scope .t-key{background:#fff0f0;color:var(--key);border:1px solid #f3c4c4;}#sl-scope .t-do{background:#eefbf1;color:var(--do);border:1px solid #bfe6c8;}#sl-scope .t-info{background:#f0f6fe;color:var(--info);border:1px solid #cadcf3;}#sl-scope .t-prob{background:#fff9e8;color:var(--prob);border:1px solid #f0e0b0;}#sl-scope .t-case{background:#f8f2ff;color:var(--case);border:1px solid #e0cdfa;}#sl-scope .t-meta{background:#f5f5f5;color:var(--meta);border:1px solid #e0e0e0;}#sl-scope .note{background:#fafbfc;border:1px dashed #d9dde3;border-radius:8px;padding:9px 13px;font-size:13.5px;color:#3f454e;margin-top:4px;}#sl-scope .note b{color:#1f2328;}#sl-scope .ans{display:block;margin-top:9px;padding:9px 13px;background:#eefbf1;border-left:3px solid var(--do-bd);border-radius:0 7px 7px 0;font-size:13.5px;color:#14532d;line-height:1.85;}#sl-scope .ans b{color:#0f5132;}#sl-scope .ans .n{font-size:12px;font-weight:700;color:#fff;background:var(--do-bd);border-radius:5px;padding:1px 7px;margin-right:6px;}#sl-scope .ans .wc{color:#6b7280;font-size:12px;font-weight:400;}#sl-scope table{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff;}#sl-scope th, #sl-scope td{border:1px solid var(--line);padding:8px 11px;text-align:left;vertical-align:top;}#sl-scope th{background:#f5f7f9;font-weight:700;color:#374151;font-size:13px;}#sl-scope td.c{text-align:center;white-space:nowrap;}#sl-scope .ok{color:#2F9E44;font-weight:700;}#sl-scope .no{color:#E03131;font-weight:700;}#sl-scope .steps{counter-reset:s;list-style:none;padding:0;margin:0;}#sl-scope .steps li{background:#fff;border:1px solid var(--line);border-left:4px solid var(--do-bd);border-radius:9px;padding:12px 18px;margin-bottom:9px;font-size:14px;}#sl-scope .steps li b{color:#14532d;}#sl-scope .steps li code{background:#f3f4f6;border-radius:4px;padding:1px 6px;font-family:Consolas,monospace;font-size:13px;color:#374151;}#sl-scope .final{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px;}#sl-scope .final .item{margin-bottom:12px;}#sl-scope .final .h{font-weight:700;color:#14532d;font-size:14.5px;}#sl-scope .final .c{font-size:14px;color:#374151;text-align:justify;}#sl-scope .kws{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px;}#sl-scope .kws span{font-size:12.5px;background:#eefbf1;color:#14532d;border:1px solid #bfe6c8;border-radius:20px;padding:2px 11px;}#sl-scope .kws span.warn{background:#fff6da;color:#8A6100;border-color:#f0dca0;}#sl-scope .bar{height:10px;background:#eef1f4;border-radius:5px;overflow:hidden;min-width:90px;}#sl-scope .bar i{display:block;height:100%;background:#2F9E44;}#sl-scope .bar.b2 i{background:#E8B923;}#sl-scope .foot{margin-top:26px;color:#9aa1ab;font-size:12.5px;text-align:center;}

/* ---------- 列表/详情骨架（站点主题变量，随亮暗主题切换） ---------- */
.sl-head{margin:6px 0 16px}
.sl-head h2{font-size:20px;margin:0 0 6px;color:var(--text-1)}
.sl-head p{font-size:12.5px;color:var(--text-3);margin:0}
.sl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.sl-card{display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;text-decoration:none;color:var(--text-1);box-shadow:var(--shadow-card);transition:border-color .15s}
.sl-card:hover{border-color:var(--border-2)}
.sl-card b{display:block;font-size:14.5px;font-weight:700;line-height:1.5}
.sl-card span{display:block;font-size:12px;color:var(--text-3);margin-top:6px}
.sl-card .sl-cov{color:var(--green)}
.sl-empty{background:var(--bg-card);border:1px dashed var(--border);border-radius:var(--radius);padding:28px;color:var(--text-3);font-size:13px;text-align:center}
.sl-empty code{color:var(--text-2)}
.sl-bar{display:flex;gap:12px;align-items:baseline;margin:4px 0 14px;font-size:12.5px;color:var(--text-3)}
.sl-bar a{color:var(--blue);text-decoration:none;white-space:nowrap}

/* ---------- 学习复盘：题库/表单/筛选骨架（站点主题变量） ---------- */
.sl-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px}
.sl-btn{display:inline-block;background:var(--brand-grad);color:#fff;border:0;border-radius:10px;padding:8px 16px;font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:none}
.sl-btn[disabled]{opacity:.45;cursor:not-allowed}
.sl-warn{background:var(--amber-bg);border:1px solid rgba(251,191,36,.4);color:var(--amber);border-radius:10px;padding:9px 13px;font-size:12.5px;line-height:1.7;margin:8px 0}
.sl-warn code{background:rgba(0,0,0,.18);border-radius:4px;padding:1px 5px}
.sl-flash{background:var(--green-bg);border:1px solid rgba(74,222,128,.4);color:var(--green);border-radius:10px;padding:9px 13px;font-size:13px;margin:0 0 12px}
.sl-fail{color:var(--red)}
.sl-busy{color:var(--blue)}
.sl-hint{font-size:12px;color:var(--text-3);margin:6px 0 0}
.sl-sect{font-size:13px;font-weight:700;margin:24px 0 10px;color:var(--text-2)}
.sl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:14px 0 16px}
.sl-stat{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-s);padding:12px 14px}
.sl-stat b{display:block;font-size:22px;font-weight:800;line-height:1.15}
.sl-stat span{display:block;font-size:11.5px;color:var(--text-3);margin-top:4px}
.sl-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 8px}
.sl-filters select,.sl-filters input{background:var(--bg-card);border:1px solid var(--border);border-radius:9px;color:var(--text-1);padding:7px 10px;font-size:13px}
.sl-filters input[type=search]{min-width:200px}
.sl-filters button{background:var(--surface-hi);border:1px solid var(--border-2);color:var(--text-1);border-radius:9px;padding:7px 14px;font-size:13px;cursor:pointer}
.sl-reset{font-size:12.5px;color:var(--text-3);text-decoration:none}
.sl-table{width:100%;border-collapse:collapse;font-size:13px;background:var(--bg-card);border-radius:var(--radius-s);overflow:hidden}
.sl-table th,.sl-table td{border-bottom:1px solid var(--border);padding:9px 11px;text-align:left;vertical-align:top}
.sl-table th{background:var(--bg-sub);font-size:12.5px;color:var(--text-2)}
.sl-table td.c{text-align:center;white-space:nowrap}
.sl-table a{color:var(--blue);text-decoration:none}
.sl-form{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-card)}
.sl-form label{display:block;font-size:12.5px;color:var(--text-2);margin-bottom:12px}
.sl-form input,.sl-form select,.sl-form textarea{display:block;width:100%;margin-top:5px;background:var(--bg-page);border:1px solid var(--border);border-radius:9px;color:var(--text-1);padding:8px 11px;font-size:13.5px;font-family:inherit}
/* 🔴 隐藏的文件选择框必须显式 display:none —— 上面这条 .sl-form input 的
   display:block 优先级高于浏览器默认的 [hidden]{display:none}（元素级类选择器
   胜 UA 样式表），只写 hidden 属性会失效、露出原生「选择文件」控件撑满一行。
   踩坑记录（09-25）：截图里出现整行 file input 才发现。 */
.sl-form input[type=file]{display:none}
.sl-form textarea{line-height:1.75;resize:vertical}
.sl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 14px}
.sl-submit{display:flex;gap:12px;align-items:center;margin-top:6px}
.sl-detail{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-card)}
.sl-tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.sl-tags span{font-size:11.5px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:2px 11px;color:var(--text-2)}
.sl-qtext{font-size:14px;line-height:1.8;margin-bottom:8px}
.sl-fold{margin-top:10px;border-top:1px solid var(--border);padding-top:10px}
.sl-fold summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--text-2)}
.sl-material,.sl-ref{font-size:13px;line-height:1.9;color:var(--text-2);margin-top:9px}
.sl-ref b{color:var(--text-1)}
.sl-running{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:34px;text-align:center;box-shadow:var(--shadow-card)}
.sl-running h3{margin:6px 0 8px}
.sl-running p{font-size:13px;color:var(--text-2);margin:4px 0}
.sl-spin{font-size:30px;animation:slspin 1.6s linear infinite;display:inline-block}
@keyframes slspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* 报告内提示框（#sl-scope 作用域内） */
#sl-scope .warn-note{background:var(--prob-bg);border-left:3px solid var(--prob);color:var(--prob);border-radius:0 8px 8px 0;padding:10px 14px;font-size:13.5px;line-height:1.8;margin:0 0 12px}
#sl-scope .hint{color:#6b7280;font-size:12.5px;margin:8px 0 12px}

/* ── AI 自动打标签（2026-09-25 增）────────────────────────────
   标签来源徽章：让用户一眼看出「这个分类是 AI 判的」——
   用户明确要求「一定要带标签说明是AI生成」，此即该要求在 UI 上的落点。

   🔴 变量名以 theme.css 为准：该文件用的是 --surface / --surface-hi /
      --border / --border-2 / --text-1 / --text-2。
      首版误写 --bg-soft / --bg-card 做底色，回退值在深色主题下几乎不可见
      （徽章看起来是空的）—— 这就是「CSS 级联/变量错 = 整层静默失效」的实例。 */
.sl-tag{display:inline-block;padding:1px 7px;border-radius:999px;font-size:11.5px;
  font-weight:600;line-height:1.7;white-space:nowrap;
  background:var(--surface-hi);color:var(--text-2);border:1px solid var(--border-2)}
.sl-tag-ai{background:color-mix(in srgb, #6366f1 18%, transparent);
  color:#a5b4fc;border-color:color-mix(in srgb, #6366f1 45%, transparent)}
.sl-tag-pending{background:color-mix(in srgb, #f59e0b 18%, transparent);
  color:#fbbf24;border-color:color-mix(in srgb, #f59e0b 45%, transparent);margin-left:4px}
.sl-check{display:flex;align-items:flex-start;gap:8px;font-weight:400;
  line-height:1.75;font-size:13.5px;margin:14px 0 6px}
.sl-check input{margin-top:3px;flex:0 0 auto}
.sl-check span{color:var(--text-2)}
.sl-check b{color:var(--text-1)}
.sl-warn{font-style:normal;color:#fbbf24}

/* ── 图片转文字（OCR）上传控件（2026-09-25 增）────────────── */
.sl-ocr{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:-4px 0 14px}
.sl-ocr-label{font-size:12.5px;color:var(--text-2)}
.sl-ocr-btn{font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  padding:5px 11px;border-radius:8px;border:1px solid var(--border-2);
  background:var(--surface-hi);color:var(--text-1);transition:border-color .15s}
.sl-ocr-btn:hover:not(:disabled){border-color:color-mix(in srgb,#6366f1 55%,transparent)}
.sl-ocr-btn:disabled{opacity:.5;cursor:not-allowed}
.sl-ocr-status{font-size:12.5px;line-height:1.6}
.sl-ocr-run{color:var(--text-2)}
.sl-ocr-ok{color:#34d399}
.sl-ocr-err{color:#f87171}

/* ══════════════════════════════════════════════════════════
   首页卡片式总览 · 玻璃拟态（glassmorphism，2026-09-25 增）
   ──────────────────────────────────────────────────────────
   设计取舍：
   · 玻璃拟态的本质是「半透明 + 背景模糊 + 细亮边」。若只做半透明而没有
     backdrop-filter，会变成脏兮兮的灰块 —— 两者必须成对出现。
   · 深色主题下的可读性靠 --text-1/2 变量，不写死颜色，
     否则用户切换外观时文字会糊在背景里。
   · 🔴 变量名以 theme.css 为准（--surface / --surface-hi / --border-2 /
     --text-1 / --text-2）—— 09-25 已因写错变量名导致徽章渲染为空。
   ══════════════════════════════════════════════════════════ */
/* 🔴 2026-09-25 修复：玻璃面板此前「看着不像玻璃」的根因是**底衬太弱**。
   暗色主题下 --surface 本身就是 rgba(255,255,255,.09)（已带 alpha），
   再 color-mix(...,62%,transparent) 会二次稀释到 ~0.056 alpha —— 玻璃面板几乎不可见，
   只剩边框和阴影在撑，观感就是「贴在底色上的几条线」。
   改法：直接给一个**实底 + 高光渐变**（不依赖二次混色），再叠 backdrop-filter。
   玻璃拟态三要素（半透明面板 + 模糊 + 细亮边）现在才真正齐备。 */
:root{
  --glass-bg: rgba(30, 36, 66, .58);
  --glass-bg-hi: rgba(42, 50, 86, .70);
  --glass-line: rgba(255, 255, 255, .13);
  --glass-edge: rgba(255, 255, 255, .055);
  --glass-glow: color-mix(in srgb, #6366f1 22%, transparent);
}
html[data-theme="light"]{
  --glass-bg: rgba(255, 255, 255, .72);
  --glass-bg-hi: rgba(255, 255, 255, .86);
  --glass-line: rgba(15, 23, 42, .10);
  --glass-edge: rgba(255, 255, 255, .80);
  --glass-glow: color-mix(in srgb, #6366f1 18%, transparent);
}

.glass-hero{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:22px 24px;margin:0 0 16px;border-radius:16px;
  background:linear-gradient(135deg, var(--glass-bg-hi), var(--glass-bg));
  border:1px solid var(--glass-line);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 8px 30px rgba(0,0,0,.26), inset 0 1px 0 var(--glass-edge);
}
.glass-hero h2{margin:0 0 5px;font-size:21px;letter-spacing:.3px}
.glass-hero p{margin:0;font-size:13px;color:var(--text-2);line-height:1.65}
.glass-hero-actions{display:flex;gap:9px;flex-wrap:wrap}

.gbtn{font-size:13px;font-weight:600;padding:7px 14px;border-radius:10px;
  border:1px solid var(--glass-line);background:var(--glass-bg-hi);color:var(--text-1);
  text-decoration:none;white-space:nowrap;transition:transform .12s,border-color .15s}
.gbtn:hover{transform:translateY(-1px);border-color:var(--glass-glow)}
.gbtn-primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);border-color:transparent;color:#fff}

.glass-warn{margin:0 0 16px;padding:11px 15px;border-radius:11px;font-size:13px;line-height:1.75;
  background:color-mix(in srgb,#f59e0b 14%,transparent);
  border:1px solid color-mix(in srgb,#f59e0b 38%,transparent);
  color:var(--text-1)}
.glass-warn code{background:rgba(0,0,0,.22);padding:1px 5px;border-radius:4px;font-size:12.5px}

/* ── 卡片网格 ───────────────────────────────────────────── */
.gcards{display:grid;gap:14px;margin:0 0 14px;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.gcard{
  border-radius:15px;padding:16px 17px;
  background:linear-gradient(180deg, var(--glass-bg-hi), var(--glass-bg));
  border:1px solid var(--glass-line);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 6px 22px rgba(0,0,0,.24), inset 0 1px 0 var(--glass-edge);
  display:flex;flex-direction:column;gap:9px;min-width:0;
  transition:border-color .15s, transform .12s, box-shadow .15s;
}
.gcard-link:hover{transform:translateY(-2px);border-color:var(--glass-glow);
  box-shadow:0 10px 28px rgba(0,0,0,.30), inset 0 1px 0 var(--glass-edge)}
.gcard-wide{grid-column:1/-1;margin-bottom:14px}
.gcard-link{text-decoration:none;color:inherit;transition:transform .14s,border-color .16s,box-shadow .16s}
.gcard-link:hover{transform:translateY(-2px);border-color:var(--glass-glow);
  box-shadow:0 10px 28px rgba(0,0,0,.26), inset 0 1px 0 var(--glass-edge)}
.gcard-head{display:flex;align-items:center;gap:8px}
.gcard-head h3{margin:0;font-size:14px;font-weight:700;letter-spacing:.2px}
.gcard-ico{font-size:16px;line-height:1}
.gcard-num{font-size:31px;font-weight:800;line-height:1.08;letter-spacing:-.5px}
.gcard-num em{font-size:13px;font-weight:600;font-style:normal;color:var(--text-2);margin-left:5px}
.gcard-sub{display:flex;flex-wrap:wrap;gap:6px}
.gcard-foot{margin-top:auto;padding-top:9px;border-top:1px solid var(--glass-line);
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12.5px}
.gcard-foot a{color:#a5b4fc;text-decoration:none;font-weight:600}
.gcard-foot a:hover{text-decoration:underline}
.gdesc{margin:0;font-size:12.8px;line-height:1.75;color:var(--text-2)}
.gchip{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;
  background:var(--surface-hi);color:var(--text-2);border:1px solid var(--glass-line);white-space:nowrap}
.gchip-hot{background:color-mix(in srgb,#f59e0b 20%,transparent);
  color:#fbbf24;border-color:color-mix(in srgb,#f59e0b 42%,transparent)}
.gchip-run{background:color-mix(in srgb,#38bdf8 18%,transparent);color:#7dd3fc}
.gdim{font-size:11.8px;color:var(--text-2);opacity:.85}
.gpush{margin-left:auto;text-align:right}
.glink{color:#a5b4fc;font-weight:600;font-size:12.5px}

.gweak{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.gweak li{display:flex;justify-content:space-between;gap:8px;font-size:12.8px;
  padding-bottom:5px;border-bottom:1px dashed var(--glass-line)}
.gweak li:last-child{border-bottom:none}
.gweak b{color:#fca5a5;font-weight:700;white-space:nowrap}
.gempty-sm{font-size:12.5px;color:var(--text-2);line-height:1.7}

/* ── 热力图 ─────────────────────────────────────────────── */
.heat-wrap{display:flex;gap:9px;align-items:flex-start;padding:3px 1px 7px;
  flex-wrap:wrap;row-gap:10px}
/* 🔴 2026-09-25 修复（第二版）：格子数固定（27 周 × 7 = 189），原先 .heat-grid 直接 flex，
   在 1468px 容器里只占 375px，右侧 ~1000px 死白。
   第一次改法用 justify-content:space-between 拉满 —— **错的**：实测列间距被撑到 43px，
   一「周」本该是紧贴的一竖条，拉开后日历语义就没了。
   正确改法：**保持紧贴**（gap 3px 不动），网格宽度按内容自然定宽（width:max-content），
   富余空间交给卡片自身留白 + 右侧统计文字。宁可右侧留白，不要毁掉日历形态。 */
.heat-scroll{flex:0 0 auto;min-width:0;overflow-x:auto;max-width:100%}
/* 星期标签列：宽度要能容下单个汉字不折行，否则「一二三」会叠在一起看不出对齐。
   实测：cell 11px + gap 3px 与 .heat-col 的节奏必须一致，标签才会逐行对上格子。 */
.heat-weekdays{display:flex;flex-direction:column;gap:3px;flex:0 0 auto;
  font-size:10px;color:var(--text-2);line-height:11px;text-align:right}
.heat-weekdays span{height:11px;display:flex;align-items:center;justify-content:flex-end}
.heat-grid{display:flex;gap:3px;width:max-content}
.heat-col{display:flex;flex-direction:column;gap:3px;flex:0 0 auto}
/* 🔴 2026-09-25 修复：lv0（未练习）原先用 --surface-hi。浅色主题下它是 #fbfcff，
   与白色卡片几乎同色 → **整个日历在浅色主题下隐形**（只有练过的那几格看得见）。
   改法：给 lv0 一个**相对卡片有可见对比**的专属变量，深浅主题各配一次。 */
:root{--heat-0:rgba(255,255,255,.07)}
html[data-theme="light"]{--heat-0:rgba(15,23,42,.07)}
.heat-cell{width:11px;height:11px;border-radius:3px;display:block;
  background:var(--heat-0);border:1px solid transparent}
.heat-cell.lv1{background:color-mix(in srgb,#6366f1 32%,transparent)}
.heat-cell.lv2{background:color-mix(in srgb,#6366f1 55%,transparent)}
.heat-cell.lv3{background:color-mix(in srgb,#8b5cf6 76%,transparent)}
.heat-cell.lv4{background:linear-gradient(135deg,#8b5cf6,#c084fc)}
.heat-cell.future{background:transparent;border:1px dashed var(--glass-line);opacity:.5}
/* 网格（紧贴）+ 右侧统计，横向排布 —— 把卡片富余宽度交给信息，而不是死白 */
.heat-body{display:flex;align-items:flex-start;gap:22px;flex-wrap:wrap}
.heat-stats{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap}
.hstat{min-width:88px;padding:9px 13px;border-radius:11px;text-align:center;
  background:var(--glass-bg);border:1px solid var(--glass-line)}
.hstat b{display:block;font-size:20px;font-weight:750;line-height:1.2;
  font-variant-numeric:tabular-nums}
.hstat span{display:block;font-size:11px;color:var(--text-2);margin-top:2px}
.hstat-hot b{color:#fbbf24}
.heat-legend{display:flex;align-items:center;gap:5px;font-size:11.5px;flex-wrap:wrap;
  flex-basis:100%;margin-top:2px}
.heat-legend .heat-cell{width:11px;height:11px}

/* ── 列表（报告 / 题库 / 最近练习）───────────────────────── */
/* 🔴 2026-09-25 修复：原先 .gsect 与 .glist 是 .wrap 的**裸子元素**，
   没有玻璃卡片包裹 —— 观感上「批改报告」「题库」两段直接贴在深色底上，
   与上方的玻璃卡片割裂。现在两者都收进 .gcard-sec（一张整宽玻璃卡）。 */
.gcard-sec{gap:0}
.gsect{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;
  letter-spacing:.2px;padding-bottom:11px;margin-bottom:11px;
  border-bottom:1px solid var(--glass-line)}
.gsect-n{font-style:normal;font-size:12.5px;font-weight:600;color:var(--text-2);
  background:color-mix(in srgb,var(--surface-hi) 70%,transparent);
  padding:1px 8px;border-radius:99px;border:1px solid var(--glass-line)}
.gsect-tag{font-size:11.5px;font-weight:600;color:#fbbf24;
  background:color-mix(in srgb,#f59e0b 16%,transparent);
  padding:1px 8px;border-radius:99px;
  border:1px solid color-mix(in srgb,#f59e0b 36%,transparent)}
.glist{display:flex;flex-direction:column;gap:8px}
.glist-item{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 15px;border-radius:12px;text-decoration:none;color:inherit;
  background:var(--glass-bg);border:1px solid var(--glass-line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .12s,border-color .15s}
.glist-item:hover{transform:translateX(2px);border-color:var(--glass-glow)}
.glist-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.glist-main b{font-size:13.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.glist-main span{font-size:11.8px;color:var(--text-2)}
.glist-side{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.gpill{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap;
  background:var(--surface-hi);color:var(--text-2);border:1px solid var(--glass-line)}
.gpill-ok{background:color-mix(in srgb,#22c55e 18%,transparent);color:#86efac}
.gpill-run{background:color-mix(in srgb,#38bdf8 18%,transparent);color:#7dd3fc}
.gpill-err{background:color-mix(in srgb,#ef4444 18%,transparent);color:#fca5a5}
.gpill-ai{background:color-mix(in srgb,#6366f1 20%,transparent);color:#a5b4fc}
.gpill-pending{background:color-mix(in srgb,#f59e0b 20%,transparent);color:#fbbf24}
.gempty{padding:22px;text-align:center;font-size:13px;color:var(--text-2);
  border-radius:12px;background:var(--glass-bg);border:1px dashed var(--glass-line)}
.gempty a{color:#a5b4fc}

.grecent{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.grecent-item{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border-radius:11px;
  text-decoration:none;color:inherit;background:var(--surface-hi);border:1px solid var(--glass-line);
  transition:border-color .15s}
.grecent-item:hover{border-color:var(--glass-glow)}
.grecent-item b{font-size:12.8px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grecent-item span{font-size:11.5px;color:var(--text-2)}

/* ── 筛选条（玻璃化）────────────────────────────────────── */
.glass-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  padding:11px 13px;border-radius:12px;margin:0 0 13px;
  background:var(--glass-bg);border:1px solid var(--glass-line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.glass-filters select,.glass-filters input{
  font:inherit;font-size:12.8px;padding:6px 10px;border-radius:9px;
  background:var(--surface-hi);color:var(--text-1);border:1px solid var(--glass-line)}
.glass-filters input{min-width:158px;flex:1 1 158px}
.glass-filters button{font:inherit;font-size:12.8px;font-weight:650;cursor:pointer;
  padding:6px 15px;border-radius:9px;border:1px solid transparent;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}

/* 窄屏：卡片单列，热力图可横向滚动 */
@media (max-width:620px){
  .glass-hero{flex-direction:column;align-items:stretch}
  .gcards{grid-template-columns:1fr}
  .glist-item{flex-direction:column;align-items:flex-start}
  .glist-side{justify-content:flex-start}
}
/* ── 五、我的答案 vs 采分点（逐句高亮，2026-09-25 增）──────────────
   用户明确要求：「做到高亮我的答案 vs 采分点」。
   设计要点：两侧共用同一套色号（k1—k8 循环 + k9 灰=漏采/未命中），
   用户在左栏看到某句挂的色标，能立刻在右栏找到同色的那个采分点。
   ⚠️ 这些规则在 #sl-scope 内，故一律加 #sl-scope 前缀（与文件既有风格一致）。 */
#sl-scope .mvs{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
#sl-scope .mvs-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
#sl-scope .mvs-head>b{font-size:15px;color:#1f2328}
#sl-scope .mvsscore{font-size:13px;color:#4b5563}
#sl-scope .mvsscore>b{font-size:17px;color:#1B5E20}
#sl-scope .mvs-body{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start}
#sl-scope .mvs-left>div,#sl-scope .mvs-right>div{}
#sl-scope .ss{display:grid;grid-template-columns:26px 1fr;gap:5px 9px;padding:8px 10px;border-radius:8px;margin-bottom:7px;font-size:14px;line-height:1.85;background:#fafbfc;border-left:3px solid #e5e7eb}
#sl-scope .ss.has-hit{background:#f6fdf8;border-left-color:var(--do-bd)}
#sl-scope .ss.no-hit{background:#fdf7f7;border-left-color:#f0c4c4}
#sl-scope .ss .sn{font-size:11.5px;font-weight:700;color:#9aa1ab;text-align:right;padding-top:3px}
#sl-scope .ss .st{color:#1f2328}
#sl-scope .ss .schips{grid-column:2;display:flex;flex-wrap:wrap;gap:5px}
#sl-scope .kchip{font-size:11.5px;font-weight:700;border-radius:999px;padding:1px 9px;border:1px solid transparent;white-space:nowrap;cursor:default}
#sl-scope .krow{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:7px;margin-bottom:5px;font-size:13px;background:#fafbfc}
#sl-scope .krow.got{background:#f6fdf8}
#sl-scope .krow.lost{background:#fdf7f7}
#sl-scope .krow .kdot{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
#sl-scope .krow .klab{flex:1;color:#2b3038;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sl-scope .krow .ksub{font-size:11px;color:#9aa1ab;flex:0 0 auto}
#sl-scope .krow .ok{font-size:11.5px;flex:0 0 auto}
#sl-scope .krow .no{font-size:11.5px;flex:0 0 auto}
/* 八色循环：只用于「同一采分点在两侧对齐」，非要按语义取色 */
#sl-scope .k1{background:#FFE3E3;color:#A61B1B}
#sl-scope .k1.kdot{background:#E03131}
#sl-scope .k2{background:#E3F6E8;color:#1B5E20}
#sl-scope .k2.kdot{background:#2F9E44}
#sl-scope .k3{background:#E7F0FD;color:#1C4E80}
#sl-scope .k3.kdot{background:#4C8DD6}
#sl-scope .k4{background:#FFF3D6;color:#8A6100}
#sl-scope .k4.kdot{background:#E8B923}
#sl-scope .k5{background:#F2E8FF;color:#6B21A8}
#sl-scope .k5.kdot{background:#9B51E0}
#sl-scope .k6{background:#E0F7FA;color:#00696E}
#sl-scope .k6.kdot{background:#12A5AC}
#sl-scope .k7{background:#FDE8F3;color:#9B1B5E}
#sl-scope .k7.kdot{background:#E0479E}
#sl-scope .k8{background:#EFEFEF;color:#414651}
#sl-scope .k8.kdot{background:#8A9099}
#sl-scope .k9{background:#F1F1F1;color:#8A8F98}
#sl-scope .k9.kdot{background:#C4C9D0}
@media(max-width:900px){#sl-scope .mvs-body{grid-template-columns:1fr}}
/* ── 全屏分栏页（答题页 / 批改报告页，2026-09-25 增，S4）────────────
   用户要求：「内容铺满屏幕（不要像现在一样一长条）」「左边是题目，右边是
   批改报告」。做法：
     ① .solve-shell 用负 margin 把自身撑出 .wrap 的宽度限制（base.css 是
        max-width:1120px；直接改 base 会波及全站，故只在本页解锁）；
     ② 两栏用 grid，各自 overflow:auto 独立滚动，页面本身不出现长滚动条；
     ③ 左栏 sticky——写右边时左边的材料不会滚走（申论必须边看材料边写）。
   ⚠️ 高度用 calc(100vh - 顶栏高)，故需知道顶栏高度：见 --sl-top（下方定义）。 */
.solve-shell{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;padding:0 14px 0}
.solve-top{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;
  margin:4px 0 12px;font-size:12.5px;color:var(--text-3)}
.solve-top a{color:var(--blue);text-decoration:none;white-space:nowrap}
.solve-title{font-size:14.5px;font-weight:700;color:var(--text-1)}
.solve-meta{white-space:nowrap}
.solve-meta b{color:var(--text-2)}

.solve-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;
  align-items:start}
/* 报告页左栏较窄（题目是背景参考），右栏放大 */
.solve-grid.wide-right{grid-template-columns:minmax(300px,0.62fr) minmax(0,1.38fr)}

.solve-left,.solve-right{min-width:0}
.solve-pane{background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-card)}
.solve-pane + .solve-pane{margin-top:14px}
.solve-h{font-size:14px;font-weight:700;color:var(--text-1);margin:0 0 10px;
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.solve-h:not(:first-child){margin-top:20px}
.solve-h-note{font-size:11.5px;font-weight:400;color:var(--text-3)}
.solve-req{font-size:14.5px;line-height:1.85;color:var(--text-1);
  background:var(--surface);border-left:3px solid var(--blue);
  border-radius:0 8px 8px 0;padding:11px 14px}

/* 材料：独立滚动区 + 段号，便于与答案对照 */
.solve-material{max-height:52vh;overflow:auto;padding-right:6px}
.solve-material p{font-size:13.5px;line-height:2;color:var(--text-2);
  margin:0 0 13px;text-align:justify;position:relative;padding-left:26px}
.solve-material .para-no{position:absolute;left:0;top:2px;width:19px;height:19px;
  border-radius:5px;background:var(--surface-hi);color:var(--text-3);
  font-size:11px;font-weight:700;line-height:19px;text-align:center}

.solve-fold{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}
.solve-fold summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--text-2)}
.solve-ref{font-size:13px;line-height:1.9;color:var(--text-2);margin-top:10px;
  background:var(--surface);border-radius:8px;padding:10px 13px}
.solve-ref b{color:var(--text-1);display:block;margin-bottom:4px}

/* 作答区 */
.solve-answer textarea{width:100%;background:var(--bg-page);border:1px solid var(--border);
  border-radius:9px;color:var(--text-1);padding:11px 13px;font-size:14px;
  line-height:2;font-family:inherit;resize:vertical;min-height:260px}
.solve-answer textarea:focus{outline:none;border-color:var(--border-2)}

.solve-counter{display:flex;align-items:baseline;gap:7px;margin:9px 0 0;
  font-size:12.5px;color:var(--text-3);flex-wrap:wrap}
.solve-counter .wc-now{font-size:19px;font-weight:800;color:var(--text-1)}
.solve-counter.wc-ok .wc-now{color:var(--green)}
.solve-counter.wc-over .wc-now{color:var(--red)}
.solve-counter .wc-state{font-weight:700}
.solve-counter.wc-ok .wc-state{color:var(--green)}
.solve-counter.wc-over .wc-state{color:var(--red)}

.solve-bar{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-top:12px}
.sl-btn-ghost{background:var(--surface-hi);color:var(--text-1);border:1px solid var(--border-2)}

/* 三栏及以下：分栏改上下堆叠（窄屏硬分栏会把材料压成一条，失去意义） */
@media(max-width:1080px){
  .solve-grid,.solve-grid.wide-right{grid-template-columns:1fr}
  .solve-material{max-height:none}
  .solve-shell{margin-left:0;margin-right:0;width:auto;padding:0}
}
/* 导入表单折叠块（题库页，2026-09-25） */
.sl-import-fold{margin-top:4px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--bg-card);padding:0 18px}
.sl-import-fold[open]{padding:0 18px 18px}
.sl-import-fold>summary{cursor:pointer;font-size:13.5px;font-weight:700;
  color:var(--text-2);padding:15px 0;list-style:none}
.sl-import-fold>summary::-webkit-details-marker{display:none}
.sl-import-fold>summary::before{content:"▸ ";color:var(--text-3)}
.sl-import-fold[open]>summary::before{content:"▾ "}
.sl-import-fold>summary:hover{color:var(--text-1)}

/* ══════════════════════════════════════════════════════════════════
   首页 · 工作台布局（侧栏 + 主区，2026-09-25 按参考图重构）
   ──────────────────────────────────────────────────────────────────
   设计说明（为什么这样排）：
   · 参考图的核心是「左侧导航固定 + 右侧内容滚动」的**工作台**心智，
     不是传统的内容页。所以侧栏用 sticky 而非 fixed：
     `#page` 局部替换只换 DOM，fixed 元素在切换瞬间会吸附在旧视口位置
     造成闪跳；sticky 随文档流，天然免疫这个问题。
   · 侧栏宽 208px，主区 `1fr` —— 侧栏是「去哪」的索引，宽度固定即可；
     富余宽度全部给主区（题库行、练习记录行都需要横向空间放元信息）。
   · 深色主题下侧栏用比主区**更实**的底（--glass-bg-hi），
     让「导航」与「内容」在视觉上分层；浅色主题下改靠边框区分。
   ══════════════════════════════════════════════════════════════════ */
.sl-work{display:grid;grid-template-columns:208px minmax(0,1fr);gap:18px;
  align-items:start;margin-top:4px}
.sl-main{min-width:0;display:flex;flex-direction:column;gap:16px}

/* ── 侧栏 ─────────────────────────────────────────────── */
.sl-side{position:sticky;top:78px;display:flex;flex-direction:column;gap:14px;
  padding:16px 14px;border-radius:16px;
  background:linear-gradient(180deg,var(--glass-bg-hi),var(--glass-bg));
  border:1px solid var(--glass-line);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 6px 22px rgba(0,0,0,.20),inset 0 1px 0 var(--glass-edge)}
.sl-side-brand{display:flex;align-items:center;gap:10px;
  padding-bottom:13px;border-bottom:1px solid var(--glass-line)}
.sl-side-logo{width:32px;height:32px;flex:0 0 auto;border-radius:10px;
  background:var(--brand-grad);color:#fff;font-size:15px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(124,108,240,.4)}
.sl-side-brand b{display:block;font-size:13.5px;font-weight:750;line-height:1.3}
.sl-side-brand span{display:block;font-size:11px;color:var(--text-2);margin-top:1px}

.sl-side-nav{display:flex;flex-direction:column;gap:3px}
.sl-side-link{display:flex;align-items:center;gap:9px;padding:8px 10px;
  border-radius:10px;text-decoration:none;color:var(--text-2);
  font-size:13px;font-weight:600;transition:background .14s,color .14s}
.sl-side-link:hover{background:var(--surface);color:var(--text-1)}
.sl-side-link.is-on{background:color-mix(in srgb,#6366f1 20%,transparent);
  color:var(--text-1)}
.sl-side-link em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;
  color:var(--text-2);background:var(--surface-hi);border:1px solid var(--glass-line);
  border-radius:99px;padding:0 7px;line-height:1.7}
.sl-side-ico{width:15px;text-align:center;opacity:.85;font-size:12px}

.sl-side-cta{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:2px;padding:10px 13px;border-radius:11px;text-decoration:none;
  font-size:13px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  box-shadow:0 5px 18px rgba(124,108,240,.36);
  transition:transform .12s,filter .15s}
.sl-side-cta:hover{transform:translateY(-1px);filter:brightness(1.06)}
.sl-side-cta span{transition:transform .15s}
.sl-side-cta:hover span{transform:translateX(3px)}

.sl-side-streak{display:flex;align-items:baseline;gap:6px;justify-content:center;
  padding:9px 10px;border-radius:11px;background:var(--glass-bg);
  border:1px solid var(--glass-line)}
.sl-side-streak b{font-size:19px;font-weight:800;color:#fbbf24;
  font-variant-numeric:tabular-nums}
.sl-side-streak span{font-size:11.5px;color:var(--text-2)}

/* ── 欢迎横幅 ─────────────────────────────────────────── */
.sl-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;padding:20px 24px;border-radius:16px;
  background:linear-gradient(135deg,var(--glass-bg-hi),var(--glass-bg));
  border:1px solid var(--glass-line);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 8px 30px rgba(0,0,0,.24),inset 0 1px 0 var(--glass-edge)}
.sl-hero h2{margin:0 0 5px;font-size:20px;letter-spacing:.3px}
.sl-hero p{margin:0;font-size:13px;color:var(--text-2);line-height:1.65}
.sl-hero-sub{font-size:12px;color:var(--text-2);opacity:.8;margin-top:5px}
.sl-hero-actions{display:flex;gap:9px;flex-wrap:wrap}

/* ── 数据概览三卡 ─────────────────────────────────────── */
.sl-overview{display:grid;gap:13px;
  grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.sl-ov{padding:15px 16px;border-radius:15px;display:flex;flex-direction:column;gap:8px;
  background:linear-gradient(180deg,var(--glass-bg-hi),var(--glass-bg));
  border:1px solid var(--glass-line);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 6px 22px rgba(0,0,0,.22),inset 0 1px 0 var(--glass-edge)}
.sl-ov-top{display:flex;align-items:center;gap:8px}
.sl-ov-ico{font-size:15px;line-height:1}
.sl-ov-lab{font-size:12.8px;font-weight:700;color:var(--text-2)}
.sl-ov-num{font-size:29px;font-weight:800;line-height:1.08;letter-spacing:-.5px}
.sl-ov-num em{font-size:12.5px;font-weight:600;font-style:normal;
  color:var(--text-2);margin-left:5px}
.sl-ov-sub{display:flex;flex-wrap:wrap;gap:6px}
/* 🔴 三卡数字必须等宽 —— 否则数字变化时卡片内容会横向跳动 */
.sl-ov-num{font-variant-numeric:tabular-nums}

/* ── 主区块（题库 / 练习记录 / 报告）──────────────────── */
.sl-block{padding:17px 19px;border-radius:16px;
  background:linear-gradient(180deg,var(--glass-bg-hi),var(--glass-bg));
  border:1px solid var(--glass-line);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 6px 22px rgba(0,0,0,.22),inset 0 1px 0 var(--glass-edge)}
.sl-block-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:13px;border-bottom:1px solid var(--glass-line)}
.sl-block-head h3{margin:0;font-size:15px;font-weight:750;letter-spacing:.2px}
.sl-block-n{font-size:12px;font-weight:600;color:var(--text-2);
  background:color-mix(in srgb,var(--surface-hi) 70%,transparent);
  padding:1px 8px;border-radius:99px;border:1px solid var(--glass-line)}
/* 锚点跳转要让标题不被 sticky 导航遮住 */
.sl-block[id]{scroll-margin-top:78px}

.sl-sect-sm{font-size:12.5px;font-weight:700;color:var(--text-2);
  margin:18px 0 9px;padding-top:14px;border-top:1px solid var(--glass-line)}

/* ── 题库行 ───────────────────────────────────────────── */
.sl-qlist{display:flex;flex-direction:column;gap:8px}
.sl-qrow{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 15px;border-radius:12px;text-decoration:none;color:inherit;
  background:var(--glass-bg);border:1px solid var(--glass-line);
  transition:transform .12s,border-color .15s,background .15s}
.sl-qrow:hover{transform:translateX(2px);border-color:var(--glass-glow);
  background:var(--glass-bg-hi)}
.sl-qrow-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.sl-qrow-main b{font-size:13.5px;font-weight:650;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-qrow-meta{font-size:11.8px;color:var(--text-2)}
.sl-qrow-side{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  justify-content:flex-end;flex:0 0 auto}
.sl-qrow-go{font-size:12.5px;font-weight:700;color:#a5b4fc;white-space:nowrap}

/* ── 练习记录：热力图 + 统计 + 流水 ───────────────────── */
/* 🔴 2026-09-25 修：`.heat-body` 是 flex 且统计块 `margin-left:auto`，
   在主区变宽后中间会裂出一大块死白（热力图 375px + 统计 300px，中间空 ~700px）。
   改为「热力图 | 统计」两栏 grid：统计吃掉右半，空洞消失。
   ⚠️ 不要用 justify-content:space-between 拉满 —— 那会把列距撑到 40px+，
   周列不再是竖条，日历语义毁掉（本项目已踩过一次，见上方 .heat-grid 注释）。 */
.sl-heat-split{display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:20px;align-items:start}
.sl-heat-stats{display:flex;flex-direction:column;gap:8px}
.sl-heat-stats .hstat{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;min-width:0;padding:10px 14px;text-align:left;
  background:var(--glass-bg);border:1px solid var(--glass-line);border-radius:11px}
.sl-heat-stats .hstat b{font-size:20px;font-weight:800;line-height:1.2;
  font-variant-numeric:tabular-nums;order:2}
.sl-heat-stats .hstat span{font-size:11.5px;color:var(--text-2);order:1}

.sl-feed{display:flex;flex-direction:column;gap:6px}
.sl-feed-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto 62px;
  align-items:center;gap:11px;padding:10px 13px;border-radius:11px;
  text-decoration:none;color:inherit;background:var(--glass-bg);
  border:1px solid var(--glass-line);transition:border-color .15s}
.sl-feed-row:hover{border-color:var(--glass-glow)}
.sl-feed-date{font-size:12px;font-weight:700;color:var(--text-2);
  font-variant-numeric:tabular-nums}
.sl-feed-title{font-size:13px;font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-feed-tags{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.sl-feed-cov{text-align:right;white-space:nowrap}
.sl-feed-cov b{font-size:14.5px;font-weight:800;color:var(--green);
  font-variant-numeric:tabular-nums}
.sl-feed-cov em{font-style:normal;font-size:11px;color:var(--text-2);margin-left:3px}

/* 窄屏：侧栏折到顶部横向排布 —— 208px 的竖栏在手机上是纯浪费 */
@media (max-width:900px){
  .sl-work{grid-template-columns:1fr}
  .sl-side{position:static;top:auto}
  /* 🔴 侧栏可横向滚动放不下时不要换行成两排（会顶掉半个屏幕）；
     改为一整行横滑，与顶部导航同一交互语言。 */
  .sl-side-nav{flex-direction:row;overflow-x:auto;gap:5px;padding-bottom:2px}
  .sl-side-link{white-space:nowrap}
  .sl-side-link em{display:none}
  .sl-feed-row{grid-template-columns:52px minmax(0,1fr) auto}
  .sl-feed-tags{display:none}
  /* 两栏热力图区在窄屏堆叠；统计改回横向一行 */
  .sl-heat-split{grid-template-columns:1fr}
  .sl-heat-stats{flex-direction:row;flex-wrap:wrap}
  .sl-heat-stats .hstat{flex:1 1 120px}
}

/* ══════════════════════════════════════════════════════════════════
   答题页 · 三栏窄测布局（2026-09-25 按参考图重构）
   ──────────────────────────────────────────────────────────────────
   列宽分配的依据：
     · 材料栏 300px 固定 —— 它要能容下整段材料不折得太碎；再宽就开始抢
       作答区的注意力。超出即内部滚动，不撑高整页。
     · 作答区 `1fr` —— **视觉主体**，吃掉全部富余宽度。
     · 信息栏 236px 固定 —— 只放进度环与短提示，不需要更多。
   🔴 三栏各自独立滚动（材料栏内部滚动、作答区随页面滚动），
     所以材料栏要 sticky 吸顶：写长文时材料不能滚走，否则等于没有材料。
   ══════════════════════════════════════════════════════════════════ */
.sl-solve{margin-top:4px}
.sl-solve-top{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;
  margin:0 0 13px;font-size:12.5px;color:var(--text-3)}
.sl-solve-back{color:var(--blue);text-decoration:none;white-space:nowrap}
.sl-solve-title{font-size:15px;font-weight:750;color:var(--text-1)}
.sl-solve-meta{white-space:nowrap;font-size:12px;color:var(--text-2)}
.sl-solve-meta-r{margin-left:auto}

.sl-solve-grid{display:grid;gap:16px;align-items:start;
  /* 🔴 材料栏宽度由 CSS 变量驱动（--sl-mat-w，默认 340px），而不是写死 300px。
     原因：折叠态另有一条 `:has(.is-collapsed)` 规则也要定义这个栅格，
     若两处都直接写列定义，脚本改宽度时必然与其中一条打架。
     改用变量后：两条规则都只写 var()，脚本只改变量 —— 职责不重叠。
     变量挂在 .sl-solve-grid 上（脚本用 closest 取），不挂 :root，
     以免影响报告页共用的 .solve-grid。 */
  --sl-mat-w:340px;
  grid-template-columns:var(--sl-mat-w) minmax(0,1fr) 236px}

/* 拖拽期间：禁用文本选中 + 全局改光标。
   不加这两条，指针划过材料文字会变成「选中文字」而不是拖拽，
   而且光标在非手柄区域会闪回默认箭头，观感像拖丢了。 */
body.is-col-resizing{user-select:none;cursor:col-resize}
body.is-col-resizing *{cursor:col-resize !important}

/* ── ① 材料栏 ─────────────────────────────────────────── */
/* ⚠️ position 必须在**同一条规则**里写全：sticky（吸顶）+ relative（给手柄做定位参照）。
   若拆成两条各写一次 position，后一条会覆盖前一条 —— sticky 静默失效，
   材料栏跟着页面滚走，且**肉眼看不出是 CSS 写错了**（正是本项目 §五 E「CSS 级联错=整层静默失效」）。 */
/* ⚠️ 这里**不能**写 overflow:hidden —— 拖拽手柄定位在 right:-9px（栏外），
   父级一裁剪手柄就被切掉，表现为「手柄看不见也拖不动」，但代码上完全看不出问题。
   圆角裁剪交给 .sl-mat-head（顶）与 .sl-mat-body（底）各自处理即可。 */
.sl-mat{position:sticky;top:78px;border-radius:15px;
  background:linear-gradient(180deg,var(--glass-bg-hi),var(--glass-bg));
  border:1px solid var(--glass-line);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 6px 22px rgba(0,0,0,.20),inset 0 1px 0 var(--glass-edge);
  transition:width .18s}
.sl-mat-head{display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:11px 14px;border-bottom:1px solid var(--glass-line);
  border-radius:14px 14px 0 0;
  font-size:12.5px;font-weight:700;color:var(--text-2)}
.sl-mat-tools{display:flex;gap:4px;align-items:center}
.sl-mat-btn{font:inherit;font-size:12px;line-height:1;cursor:pointer;
  padding:3px 7px;border-radius:7px;border:1px solid var(--glass-line);
  background:var(--surface-hi);color:var(--text-2)}
.sl-mat-btn:hover{color:var(--text-1);border-color:var(--glass-glow)}

/* ── 拖拽调宽手柄 ───────────────────────────────────────
   🔴 手柄**不能**作为 grid 的一个轨道（那会多出一列，栅格就乱了）。
      做法：绝对定位贴在材料栏右边缘外侧，本体只有 3px 视觉宽度，
      但用 ::after 造一个左右各外扩 4px 的透明热区（约 11px 宽）——
      3px 的命中区在鼠标上极难抓，视觉细线 + 宽热区是标准解法。 */
/* 手柄定位参照：`.sl-mat` 已是 position:sticky（本身就是「定位元素」），
   绝对定位的 .sl-mat-grip 直接以它为参照 —— **不需要**再补 position:relative，
   补了反而会覆盖 sticky（见上）。 */
.sl-mat-grip{position:absolute;top:0;right:-9px;bottom:0;width:3px;
  cursor:col-resize;z-index:3;border-radius:2px;
  background:transparent;transition:background .15s}
.sl-mat-grip::after{content:"";position:absolute;top:0;bottom:0;
  left:-4px;right:-4px}   /* 透明热区：视觉细、好点中 */
.sl-mat-grip:hover,.sl-mat-grip.is-active{
  background:linear-gradient(180deg,#6366f1,#8b5cf6)}
.sl-mat-grip:focus-visible{outline:2px solid var(--brand);
  outline-offset:2px;background:var(--brand)}
/* 收起态：手柄失去意义（宽度由折叠规则接管），隐藏以免误导 */
.sl-mat.is-collapsed .sl-mat-grip{display:none}
/* 材料正文独立滚动：长材料不该把页面撑成一条 —— 滚轮在栏内生效 */
.sl-mat-body{max-height:calc(100vh - 220px);overflow-y:auto;padding:14px;
  border-radius:0 0 14px 14px}
.sl-mat-h{font-size:12px;font-weight:750;color:var(--text-2);
  margin:0 0 8px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.sl-mat-h:not(:first-child){margin-top:18px;padding-top:14px;
  border-top:1px solid var(--glass-line)}
.sl-mat-h-note{font-size:11px;font-weight:400;color:var(--text-2);opacity:.8}
.sl-mat-req{font-size:13.5px;line-height:1.8;color:var(--text-1);
  background:var(--surface);border-left:3px solid var(--blue);
  border-radius:0 8px 8px 0;padding:10px 12px}
.sl-mat-text p{font-size:13px;line-height:1.9;color:var(--text-2);
  margin:0 0 11px;text-align:justify;position:relative;padding-left:23px}
.sl-mat-no{position:absolute;left:0;top:1px;width:17px;height:17px;border-radius:5px;
  background:var(--surface-hi);color:var(--text-2);font-size:10.5px;font-weight:700;
  line-height:17px;text-align:center}
.sl-mat-fold-ref{margin-top:16px;padding-top:12px;border-top:1px solid var(--glass-line)}
.sl-mat-fold-ref summary{cursor:pointer;font-size:12.5px;font-weight:700;
  color:var(--text-2)}
.sl-mat-ref{font-size:12.5px;line-height:1.85;color:var(--text-2);margin-top:9px;
  background:var(--surface);border-radius:8px;padding:9px 11px}
.sl-mat-ref b{color:var(--text-1);display:block;margin-bottom:3px}

/* 收起态：只留一条窄竖条（点箭头再展开）。
   为什么用宽度动画而不是 display:none —— 收起/展开要能看见「去哪儿了」，
   瞬移会让人以为按钮点错了。
   ⚠️ 这里的列宽是**固定 46px**（不看 --sl-mat-w）：收起就是收起，
   拖拽留下的宽度此时无意义；展开时再回到变量值，用户调过的宽度不丢。 */
.sl-solve-grid:has(.sl-mat.is-collapsed){grid-template-columns:46px minmax(0,1fr) 236px}
.sl-mat.is-collapsed .sl-mat-body{display:none}
.sl-mat.is-collapsed .sl-mat-head{writing-mode:vertical-rl;
  justify-content:flex-start;padding:11px 0 11px 15px;height:150px;
  letter-spacing:2px}
/* 收起态下「重置宽度」按钮无意义，一并隐藏（与手柄同理） */
.sl-mat.is-collapsed #sl-mat-reset{display:none}

/* ── ② 作答区（视觉主体）──────────────────────────────── */
.sl-write{min-width:0;display:flex;flex-direction:column;gap:12px}
.sl-write-inner{border-radius:15px;overflow:hidden;
  background:linear-gradient(180deg,var(--glass-bg-hi),var(--glass-bg));
  border:1px solid var(--glass-line);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 6px 22px rgba(0,0,0,.22),inset 0 1px 0 var(--glass-edge);
  display:flex;flex-direction:column}
.sl-write-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:14px 17px 10px}
.sl-write-h h3{margin:0;font-size:14.5px;font-weight:750}
/* 🔴 作答区要「大」：min-height 用 calc 撑到视口内满满一屏，
   否则在 1080p 上只有 16 行高，写起来要不停滚动 —— 那就回到了
   「一长条」的老问题。减去的 300px = 顶栏 + 页头 + 底部操作栏。 */
.sl-write textarea{width:100%;flex:1;min-height:calc(100vh - 320px);
  background:var(--bg-page);border:0;border-top:1px solid var(--glass-line);
  border-bottom:1px solid var(--glass-line);
  color:var(--text-1);padding:16px 18px;font-size:14.5px;
  line-height:2.1;font-family:inherit;resize:vertical}
.sl-write textarea:focus{outline:none;background:var(--surface)}
/* 底部操作栏吸底：写长文时按钮始终在视野内，不必滚到底找 */
.sl-write-bar{position:sticky;bottom:0;display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:11px 17px;background:var(--glass-bg-hi);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--glass-line)}
.sl-write-acts{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.sl-counter{display:flex;align-items:baseline;gap:6px;
  font-size:12.5px;color:var(--text-2);flex-wrap:wrap}
.sl-counter .wc-now{font-size:20px;font-weight:800;color:var(--text-1);
  font-variant-numeric:tabular-nums}
.sl-counter.wc-ok .wc-now{color:var(--green)}
.sl-counter.wc-over .wc-now{color:var(--red)}
.sl-counter .wc-state{font-weight:700;font-size:12.5px}
.sl-counter.wc-ok .wc-state{color:var(--green)}
.sl-counter.wc-over .wc-state{color:var(--red)}

/* ── ③ 信息栏 ─────────────────────────────────────────── */
.sl-info{display:flex;flex-direction:column;gap:12px}
.sl-ring-card{padding:18px 16px 14px;border-radius:15px;text-align:center;
  position:relative;
  background:linear-gradient(180deg,var(--glass-bg-hi),var(--glass-bg));
  border:1px solid var(--glass-line);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 6px 22px rgba(0,0,0,.20),inset 0 1px 0 var(--glass-edge)}
.sl-ring{width:132px;height:132px;display:block;margin:4px auto 0;
  transform:rotate(-90deg)}   /* 从 12 点方向起画，符合钟表直觉 */
.sl-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.sl-ring-bg{stroke:var(--surface-hi)}
/* 🔴 环的颜色必须从 SVG 元素自身取（stroke 在 circle 上），
   给外层 div 换类不会让 stroke 重算 —— 这是本项目「CSS 级联错=整层静默失效」
   的同类陷阱：改对了地方才有用。 */
.sl-ring-fg{stroke:#6366f1;transition:stroke-dashoffset .18s ease-out,stroke .18s}
.sl-ring-fg.is-over{stroke:var(--red)}
/* 🔴 环心文字用绝对定位 + 撑满卡片高度后居中，而不是写死 top:62px——
   写死像素在卡片内边距变化（如窄屏字号调整）时就会偏出圆心。
   这里让容器覆盖整个 svg 区域（上下各留出 note 的高度），再用 flex 居中。 */
.sl-ring-txt{position:absolute;left:0;right:0;top:4px;height:132px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none}
.sl-ring-txt b{font-size:25px;font-weight:800;line-height:1.05;
  font-variant-numeric:tabular-nums}
.sl-ring-txt span{font-size:11px;color:var(--text-2);margin-top:2px}
.sl-ring-note{font-size:11.5px;color:var(--text-2);margin-top:9px;line-height:1.5}

.sl-tips{padding:13px 15px;border-radius:13px;
  background:var(--glass-bg);border:1px solid var(--glass-line)}
.sl-tips-quiet{opacity:.9}
.sl-tips>b{display:block;font-size:12.5px;font-weight:750;margin-bottom:7px}
.sl-tips ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:5px}
.sl-tips li{font-size:12px;color:var(--text-2);line-height:1.7}
.sl-tips .sl-hint{margin-top:8px}

.sl-hist{padding:13px 15px;border-radius:13px;
  background:var(--glass-bg);border:1px solid var(--glass-line)}
.sl-hist>b{display:block;font-size:12.5px;font-weight:750;margin-bottom:8px}
.sl-hist-list{display:flex;flex-direction:column;gap:5px}
.sl-hist-row{display:grid;grid-template-columns:1fr auto 46px;align-items:center;
  gap:8px;padding:7px 9px;border-radius:9px;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--glass-line);
  transition:border-color .15s}
.sl-hist-row:hover{border-color:var(--glass-glow)}
.sl-hist-date{font-size:11.5px;color:var(--text-2);
  font-variant-numeric:tabular-nums}
.sl-hist-st{font-size:11px}
.sl-hist-cov{font-size:12px;font-weight:750;text-align:right;
  font-variant-numeric:tabular-nums}

/* 中屏：信息栏收进作答区下方（两栏），材料栏与作答区并排。
   ⚠️ 材料栏这里也要引用 --sl-mat-w ——若写死 280px，
   用户在宽屏调好的宽度一到中屏就被重置，拖拽等于白调。 */
@media (max-width:1280px){
  .sl-solve-grid,
  .sl-solve-grid:has(.sl-mat.is-collapsed){
    grid-template-columns:var(--sl-mat-w) minmax(0,1fr)}
  .sl-info{grid-column:1/-1;display:grid;gap:12px;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:start}
  .sl-ring-card{grid-row:span 2}
  /* 🔴 中屏用 clamp 给变量设**上限**，而不是重新赋值。
     写成 `--sl-mat-w:min(340px, 42vw)` 会**直接覆盖用户拖出来的宽度**，
     一进中屏就跳回 340 —— 拖拽等于白调。
     clamp 的写法保留用户值，只在超出 42vw 时压回来。 */
  .sl-solve-grid{--sl-mat-w:clamp(220px, var(--sl-mat-w), 42vw)}
}
/* 窄屏：单栏堆叠，材料栏取消 sticky 与内部滚动（堆叠时滚动会困住内容） */
@media (max-width:900px){
  .sl-solve-grid,
  .sl-solve-grid:has(.sl-mat.is-collapsed){grid-template-columns:1fr}
  .sl-mat{position:static;top:auto}
  .sl-mat-body{max-height:none}
  .sl-mat.is-collapsed .sl-mat-head{writing-mode:horizontal-tb;height:auto;
    padding:11px 14px;letter-spacing:0}
  .sl-solve-grid:has(.sl-mat.is-collapsed){grid-template-columns:1fr}
  .sl-write textarea{min-height:52vh}
  .sl-info{grid-column:auto;grid-template-columns:1fr}
  /* 单栏堆叠时左右拖拽无意义（没有「并排」可调），隐藏手柄防误导 */
  .sl-mat-grip{display:none}
}



/* ==== theme.css ==== */
/* ==========================================================================
   theme.css — 视觉增强层
   --------------------------------------------------------------------------
   定位：base.html 的内联 <style> 定义了全部组件结构与语义色变量；
        本文件**在其之后加载**，负责玻璃质感、层次、品牌色与主题化收口。

   为什么单独成文件而不是继续堆在 base.html：
     base.html 那个 <style> 已 34KB 且被所有页面依赖，改坏即全站崩。
     把「视觉升级」独立出来，出问题只需删一个 <link> 即可整体回退。

   设计语言（参考 Glassmorphism 博客的信息层级）：
     暗底 → 玻璃卡片浮起 → 高饱和渐变强调色 → 细腻描边与内高光
   核心判断：**玻璃只有在「背后有可透的东西」时才有意义**。
     浅灰底 + 白玻璃 = 互相抵消，这正是改造前"一片惨白"的根因。
   ========================================================================== */

/* ---------------------------------------------------------------- 1. 基底 */
html{ scroll-behavior:smooth }

body{
  /* 背景：底色 + 两团极淡的品牌色光晕，不依赖壁纸也有层次 */
  background-color:var(--bg-page);
  background-image:var(--wallpaper);
  position:relative;
}
/* 无壁纸时给背景铺两团品牌色光晕，避免"死平" */
body::after{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 12% -8%, rgba(124,108,240,.20), transparent 62%),
    radial-gradient(52vw 52vw at 96% 8%, rgba(192,132,252,.15), transparent 60%),
    radial-gradient(70vw 70vw at 50% 108%, rgba(56,189,248,.10), transparent 64%);
}
html[data-theme="light"] body::after{
  background:
    radial-gradient(60vw 60vw at 10% -10%, rgba(124,108,240,.16), transparent 62%),
    radial-gradient(50vw 50vw at 98% 4%, rgba(244,144,208,.13), transparent 60%);
}

/* 滚动条 */
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-track{ background:transparent }
*::-webkit-scrollbar-thumb{
  background:var(--border-2); border-radius:999px;
  border:2.5px solid transparent; background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{ background:var(--brand); background-clip:content-box }
*{ scrollbar-width:thin; scrollbar-color:var(--border-2) transparent }

/* ------------------------------------------------------------ 2. 玻璃卡片 */
.card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.07);
  transition:border-color .2s, box-shadow .2s;
}
html[data-theme="light"] .card{
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.9);
}
.card:hover{ border-color:var(--border-2) }

/* 页头 */
.hero{
  background:var(--hero-grad);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-hero);
}
.hero::after{ background:var(--brand-grad); height:3px }
.hero-title{
  background:linear-gradient(120deg,var(--text-1) 12%,var(--brand) 78%,var(--brand-2) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:-.6px;
}
html[data-theme="light"] .hero-title{
  background:linear-gradient(120deg,#141a33 18%,#6d5ce0 88%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* 卡片标题左侧的品牌色竖条，增强分区感 */
.card-title{ display:flex; align-items:center; gap:9px }
.card-title::before{
  content:""; width:3px; height:15px; border-radius:2px;
  background:var(--brand-grad); flex:none;
}

/* --------------------------------------------------------------- 3. 导航 */
.nav{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:999px;
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.08);
  padding:7px 8px;
  gap:4px;
}
.nav a{
  font-weight:600; letter-spacing:.1px;
  border-radius:999px; padding:7px 15px;
}
.nav a:hover{ background:var(--surface); color:var(--text-1) }
.nav a.active{
  background:var(--brand-grad) !important;
  color:#fff !important;
  font-weight:700;
  box-shadow:0 4px 16px rgba(124,108,240,.42), inset 0 1px 0 rgba(255,255,255,.28);
}
.nav a.disabled{ opacity:.34 }
.nav-actions{
  margin-left:auto; display:flex; align-items:center; gap:4px;
}
.nav-actions a{
  font-size:12.5px; padding:6px 12px;
  border:1px solid transparent;
}
.nav-actions a:hover{
  border-color:var(--border-2); background:var(--surface);
}
.nav-actions a.nav-exit:hover{
  border-color:var(--red); color:var(--red); background:var(--red-bg);
}

/* ------------------------------------------------------- 4. 表单与按钮 */
input, select, textarea, button{ font-family:inherit }
input:not([type=checkbox]):not([type=radio]):not([type=file]),
select, textarea{
  background:var(--surface);
  border:1px solid var(--border-2);
  color:var(--text-1);
  border-radius:var(--radius-s);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder, textarea::placeholder{ color:var(--text-3) }
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
select:focus, textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent);
  background:var(--surface-hi);
}
select option{ background:var(--bg-card); color:var(--text-1) }
input[type=checkbox], input[type=radio]{ accent-color:var(--brand) }

/* 通用主按钮（含壁纸面板按钮） */
.wp-btn{
  background:var(--brand-grad); border-color:transparent; color:#fff;
  box-shadow:0 3px 12px rgba(124,108,240,.34);
}
.wp-btn:hover{ filter:brightness(1.06) }
.wp-btn-ghost{
  background:var(--surface) !important;
  color:var(--text-2) !important;
  border-color:var(--border-2) !important;
  box-shadow:none;
}
.wp-btn-ghost:hover{
  border-color:var(--brand) !important; color:var(--brand) !important;
  background:var(--blue-bg) !important;
}

/* 小元件统一走 --surface（原为 22 处硬编码 #fff） */
.pill, .tab, .att-chip, .pager a, .pager span, .alert-item,
.filters-toggle, .sec-toggle, .mon-btn, .major-chip, .metric,
.tl-src, .cal-guess{
  background:var(--surface);
  border-color:var(--border);
  color:var(--text-2);
}
.att-chip:hover, .pager a:hover, .sec-toggle:hover,
.mon-btn:hover:not(:disabled), .filters-toggle:hover{
  border-color:var(--brand); color:var(--brand);
}
.tab.on, .tab.is-on{
  background:var(--brand-grad); color:#fff; border-color:transparent;
}

/* 展开详情面板 / 表格 / 代码块 */
.detail-inner{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--brand);
  border-radius:var(--radius-s);
}
.tbl-wrap, table.pos, .rawcond, .rawbox, .body-excerpt,
.dl-grid, .dl-basic, .major-box, .dl-v, .dl-basic-i, .dl-k{
  background:var(--surface);
  border-color:var(--border);
}
.dl-k, table.pos th{ background:var(--surface-hi); color:var(--text-2) }
table.pos td, .dl-v, .dl-basic-i{ background:transparent }
.cal-nodes, .cal-node, .trace-step b{
  background:var(--surface); border-color:var(--border);
}
.cal-node:nth-child(odd){ background:var(--surface-hi) }
.code-chip, .cal-date, .tl-date, .sample-banner code, .fenbi-notice-path{
  background:var(--surface-hi); color:var(--text-1);
}
.ev{ background:var(--surface); color:var(--text-2) }

/* 语义提示条（原为浅底 + 深字，深色主题下必须反转文字色） */
.fenbi-notice{ color:var(--amber) }
.fenbi-notice.is-danger{ color:var(--red) }
.sample-banner{
  background:color-mix(in srgb, var(--brand) 16%, transparent);
  color:var(--brand-2); border-color:color-mix(in srgb, var(--brand) 45%, transparent);
}
.sample-banner code{ color:var(--text-1) }
.tag-sample{
  background:color-mix(in srgb, var(--brand) 18%, transparent);
  color:var(--brand-2);
  border-color:color-mix(in srgb, var(--brand) 48%, transparent);
}
.ytag{
  background:color-mix(in srgb, var(--blue) 16%, transparent);
  color:var(--blue);
  border-color:color-mix(in srgb, var(--blue) 40%, transparent);
}
.tag-mini{ background:var(--blue-bg); color:var(--blue) }
.tag-mini, .pill, .tab, .vtag, .tag, .ytag, .verifytag, .warnchip{
  border-radius:999px;
}

/* ------------------------------------------------- 5. 壁纸 / 主题面板 */
.wp-panel{
  width:352px;
  background:color-mix(in srgb, var(--bg-card) 86%, transparent);
  backdrop-filter:blur(24px) saturate(1.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-hero);
}
.wp-head{ border-bottom:1px solid var(--border) }
.wp-close:hover{ background:var(--surface); color:var(--text-1) }

/* 缩略图：从 5 列改 3 列。
   原 5 列时每个仅约 55px，而预设壁纸亮度普遍 90%+，
   缩到那个尺寸会糊成"纯白方块" —— 用户反馈的「壁纸是空的」即由此而来。 */
.wp-grid{ grid-template-columns:repeat(3,1fr); gap:9px }
.wp-thumb{
  aspect-ratio:4/3;
  border-radius:10px;
  border:1.5px solid var(--border-2);
  background-color:var(--surface-hi);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.wp-thumb:hover{ transform:translateY(-2px); border-color:var(--brand) }
.wp-thumb.on{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent);
}
.wp-thumb-none{
  background-image:linear-gradient(135deg,
    var(--surface-hi) 25%, var(--surface) 25%, var(--surface) 50%,
    var(--surface-hi) 50%, var(--surface-hi) 75%, var(--surface) 75%);
  background-size:12px 12px;
}
.wp-row input[type=text]{
  background:var(--surface); border:1px solid var(--border-2); color:var(--text-1);
  border-radius:var(--radius-s);
}
.wp-row input[type=text]:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent);
}
.wp-file{
  background:var(--surface); border:1px dashed var(--border-2);
  color:var(--text-2); border-radius:var(--radius-s);
}
.wp-file:hover{
  border-color:var(--brand); color:var(--brand); background:var(--blue-bg);
}

/* 主题切换按钮（两个小方块，直观显示明暗） */
.theme-switch{ display:flex; gap:8px }
.theme-opt{
  flex:1; cursor:pointer; padding:9px 10px; border-radius:var(--radius-s);
  border:1.5px solid var(--border-2); background:var(--surface);
  display:flex; align-items:center; gap:9px; transition:.16s;
  font-family:inherit; font-size:12.5px; color:var(--text-2); text-align:left;
}
.theme-opt:hover{ border-color:var(--brand) }
.theme-opt.on{
  border-color:var(--brand); color:var(--text-1);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.theme-dot{
  width:26px; height:26px; border-radius:8px; flex:none;
  border:1px solid var(--border-2);
}
.theme-dot-dark{ background:linear-gradient(135deg,#1b2144,#3a2f6b) }
.theme-dot-light{ background:linear-gradient(135deg,#fdfdff,#dfe5f5) }

/* ---------------------------------------------------------------- 6. 登录页 */
/* 登录页占满整屏：抵消 base.html 给 body 的默认内边距，
   否则 100vh + padding 会平白多出滚动条。
   用 :has() 而非给 body 加类 —— body 标签在 base.html 里，加类要改所有模板。 */
body:has(.login-page){ padding:0 }
body:has(.login-page)::after{ opacity:.9 }
.login-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.login-card{
  width:100%; max-width:392px;
  background:var(--glass-bg);
  backdrop-filter:blur(26px) saturate(1.8);
  -webkit-backdrop-filter:blur(26px) saturate(1.8);
  border:1px solid var(--glass-border);
  border-radius:22px;
  box-shadow:var(--shadow-hero), inset 0 1px 0 rgba(255,255,255,.10);
  padding:34px 32px 30px;
  animation:loginIn .4s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes loginIn{ from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none} }
.login-logo{
  width:46px; height:46px; border-radius:14px;
  background:var(--brand-grad);
  box-shadow:0 8px 22px rgba(124,108,240,.42);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:18px;
}
.login-title{ font-size:23px; font-weight:800; letter-spacing:-.4px }
.login-sub{ font-size:13px; color:var(--text-2); margin-top:6px; line-height:1.6 }
.login-field{ margin-top:18px }
.login-label{
  display:block; font-size:12px; font-weight:700; color:var(--text-3);
  margin-bottom:7px; letter-spacing:.3px;
}
.login-input{
  width:100%; font-size:14px; padding:12px 14px;
  border-radius:var(--radius-s);
  background:var(--surface); border:1px solid var(--border-2); color:var(--text-1);
  transition:.16s;
}
.login-input:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 26%, transparent);
  background:var(--surface-hi);
}
.login-btn{
  width:100%; margin-top:24px; padding:13px 16px;
  font-size:14.5px; font-weight:700; color:#fff; letter-spacing:.3px;
  background:var(--brand-grad); border:none; border-radius:var(--radius-s);
  cursor:pointer; box-shadow:0 6px 20px rgba(124,108,240,.4);
  transition:.16s;
}
.login-btn:hover{ filter:brightness(1.07); transform:translateY(-1px) }
.login-btn:active{ transform:none }
.login-err{
  margin-top:16px; padding:11px 13px; border-radius:var(--radius-s);
  background:var(--red-bg); border:1px solid color-mix(in srgb, var(--red) 42%, transparent);
  color:var(--red); font-size:13px; display:flex; gap:8px; align-items:flex-start;
}
.login-note{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--border);
  font-size:11.5px; color:var(--text-3); line-height:1.7;
}

/* ------------------------------------------------------ 7. 知识库细节 */
.kb-link{
  color:var(--brand-2); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--brand) 42%, transparent);
  transition:.15s;
}
.kb-link:hover{
  color:var(--brand); border-bottom-color:var(--brand);
  background:color-mix(in srgb, var(--brand) 12%, transparent);
}
mark{
  background:color-mix(in srgb, var(--amber) 40%, transparent);
  color:inherit; border-radius:3px; padding:0 2px;
}
.kb-embed{
  border-left:3px solid color-mix(in srgb, var(--brand) 55%, transparent);
  background:var(--surface);
  border-radius:0 var(--radius-s) var(--radius-s) 0;
}
.kb-broken, .kb-excluded{
  border-bottom:1px dashed var(--border-2); color:var(--text-3);
}

/* ------------------------------------------------- 8. 深色主题兼容修正
   这些问题在浅色主题下完全看不出来，只有真正渲染深色才会暴露
   （截图核对时才发现「岗位总览」三个数字卡的数字凭空消失）。 */

/* ① <button> 默认色
   浏览器给 <button> 的 color 是**黑色且不继承 body**。浅色下无碍，
   深色下黑字落在深色玻璃上等于隐形 —— .metric .num（总览三项的数字）
   就是这么消失的。用低特异性选择器兜底，具体的类仍可覆盖。 */
button{ color:var(--text-1); font-family:inherit }

/* ② 残留的「浅底 hover」：深色下 hover 会闪出一块白 */
.ov-row:hover, .ann-row:hover{ background:var(--surface-hi) }

/* ③ 残留的深色文字（原为浅底深字，深底上会糊成一团） */
.trace-step.warn, .trace-step.warn b{ color:var(--amber) }
.warnchip, .warnchip.info{
  color:var(--gray); background:var(--gray-bg); border-color:var(--border-2);
}
.warnchip.err{
  color:var(--red); background:var(--red-bg);
  border-color:color-mix(in srgb, var(--red) 42%, transparent);
}
.inh{
  color:var(--amber); background:var(--amber-bg);
  border-color:color-mix(in srgb, var(--amber) 46%, transparent);
}
.cal-badge-actual{ color:var(--green); background:var(--green-bg) }

/* ④ 表格与详情块的斑马纹在深色下要更轻，否则像格子布 */
.tl-item:nth-child(odd){ background:rgba(255,255,255,.022) }
html[data-theme="light"] .tl-item:nth-child(odd){ background:rgba(0,0,0,.016) }
table.pos tr:hover td{ background:rgba(255,255,255,.035) }
html[data-theme="light"] table.pos tr:hover td{ background:rgba(0,0,0,.018) }
.row:hover{ background:var(--surface) }

/* ------------------------------------------- 9. 知识库模块样式统一
   kb.css 自成一套（.kb-* 类），它的卡片底色用的是**不透明的 --bg-card**，
   而深色主题下 --bg-card(#151a33) 与页面底色 --bg-page(#0c1024) 几乎同色
   —— 结果整页卡片「消失」，内容像散落在背景上（截图核对时发现）。

   不直接改 kb.css 的理由：它是知识库模块自己的文件，
   把它改成依赖 glass 变量会让两个模块互相耦合；
   统一收口到这一层，将来换皮肤只需改这里。 */
.kb-stat, .kb-topic, .kb-list, .kb-card, .kb-body{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
html[data-theme="light"] .kb-stat,
html[data-theme="light"] .kb-topic,
html[data-theme="light"] .kb-list,
html[data-theme="light"] .kb-card,
html[data-theme="light"] .kb-body{
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.9);
}
.kb-topic:hover{
  border-color:var(--brand);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(124,108,240,.20), inset 0 1px 0 rgba(255,255,255,.08);
}
/* 统计卡用品牌色数字，和岗位总览的视觉语言保持一致 */
.kb-stat b, .kb-stat strong{ color:var(--brand-2) }

.kb-search input{
  background:var(--surface);
  border:1px solid var(--border-2);
  color:var(--text-1);
}
.kb-search input:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent);
  background:var(--surface-hi);
}
/* 原为 background:var(--text-1) + 白字：深色下变成「浅底白字」，等于看不见 */
.kb-search button{
  background:var(--brand-grad);
  color:#fff;
  box-shadow:0 4px 14px rgba(124,108,240,.34);
}
.kb-search button:hover{ filter:brightness(1.06) }

.kb-list a:hover, .kb-bl:hover{ background:var(--surface-hi) }
.kb-body th{ background:var(--surface-hi) }
.kb-body code{ background:var(--surface-hi) }
.kb-body blockquote{ background:var(--surface) }
.kb-meta, .kb-tag{ color:var(--text-2) }
.kb-tag{ background:var(--surface) }

/* --------------------------------------------------------- 10. 移动端 */
@media (max-width:640px){
  .nav{ border-radius:18px; padding:6px; gap:2px }
  .nav a{ padding:6px 11px; font-size:13px }
  .nav-actions a{ padding:5px 9px; font-size:12px }
  .wp-panel{ width:auto; left:8px; right:8px; border-radius:16px }
  .login-card{ padding:26px 22px 22px; border-radius:18px }
  body::after{ opacity:.75 }
}

/* ------------------------------------------------ 11. 宽屏布局（铺满屏幕）
   问题：`.wrap` 被锁在 `max-width:1120px`。
   1920px 屏幕上两侧白边合计 800px —— **白边比内容还宽**，观感是"中间一条窄长条"。

   而页面里的区块本身**都是流式网格**（`auto-fit` 的统计卡/时间线、行式列表），
   纯属被容器限制住了 —— 解锁容器即可自动利用宽度，无需改动区块内部。

   注意：全部用覆盖方式写在 theme.css，**不动 base.html 的 34KB 内联样式**
   （同特异性下后加载者胜出），出问题删一个 <link> 即整体回退。 */

@media (min-width:1280px){
  /* 容器铺满：只保留 body 的边距作为呼吸空间 */
  .wrap{ max-width:none }

  /* 近期关键节点的卡片数会变（当前 6 个），auto-fit 在常见宽度下会出现
     「5 + 1」这种断行 —— 显式指定列数，保证成行整齐。 */
  .alert-list{ grid-template-columns:repeat(3,minmax(0,1fr)) }

  /* 岗位行的两个辅助列在超宽下会被拉得过于松散，给它们设上限，
     把富余宽度让给岗位名称与条件描述（信息密度更高的部分） */
  .rright{ min-width:150px }

  /* 条件列在超宽下可以放宽，减少折行 */
  .cell-cond{ max-width:620px }

  /* 公告行的日期/来源列固定，中间标题吃到富余宽度 */
  .ann-row{ grid-template-columns:112px 1fr auto }

  /* 长文页单独保护：阅读页正文本该窄（行宽超约 90 字符即难读），
     不跟随铺满 —— 「铺满」针对信息型页面，不针对阅读型页面 */
  .kb-read{ max-width:1360px; margin-left:auto; margin-right:auto }
  /* 阅读页侧栏在超宽下加宽一点，反链摘要更完整 */
  .kb-read{ grid-template-columns:minmax(0,1fr) 300px }

  /* 搜索/列表类页面同样限制，避免单行文字跨屏 */
  .kb-search{ max-width:1100px; margin-left:auto; margin-right:auto }
}

/* 超宽屏（≥1600px）：容器已经很宽，靠**内容等比放大**来充实，
   而不是把容器收窄回去（那样就违背了「铺满」的诉求）。
   典型症状：3 个数字卡被拉到 600px 宽、字还那么小，显得发虚。 */
@media (min-width:1600px){
  .hero-title{ font-size:39px }
  .metric{ padding:22px 16px }
  .metric .num{ font-size:34px }
  .alert-days b{ font-size:27px }
  .alert-item{ padding:15px 17px }

  /* 底部两块并排：统考日程 | 公告监测
     （`.page-grid` 只包这两块，不影响其余卡片的全宽排布）
     阈值取 1440px —— 常见的笔记本宽度即可受益，不必等到 1600 */
  .page-grid{
    display:grid;
    grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
    gap:16px;
    align-items:start;
  }
  .page-grid > .card{ margin-bottom:0 }
  /* 该栏只有半宽，统考块改单列竖排 —— 既避免过宽，
     也让两栏高度接近（否则短的一栏下方会留大片空白） */
  .page-grid .cal-grid{ grid-template-columns:1fr }
}

/* 1440~1600：并排但字号不放大（避免小屏放大后拥挤） */
@media (min-width:1440px) and (max-width:1599px){
  .page-grid{
    display:grid;
    grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
    gap:16px;
    align-items:start;
  }
  .page-grid > .card{ margin-bottom:0 }
  .page-grid .cal-grid{ grid-template-columns:1fr }
}

/* 更宽（≥1750px）：关键节点一行 6 个正好放满 */
@media (min-width:1750px){
  .alert-list{ grid-template-columns:repeat(6,minmax(0,1fr)) }
}

/* 超大屏（≥2100px）再放宽一点边距，避免内容完全贴边 */
@media (min-width:2100px){
  body{ padding-left:32px; padding-right:32px }
}

/* ============================================================
   局部切页的过渡（2026-09-23 · B 层）
   ------------------------------------------------------------
   为什么需要：整页重载时浏览器会**自动**把滚动复位、并有一个白屏间隙，
   用户天然知道「页面换了」。改成 #page 局部替换后，这两件事都没了 ——
   如果不做处理，用户会觉得「点了一下，内容悄悄变了」，反而更困惑。
   所以补两个信号：① 切换中轻微降透明度（表示「正在取」）
   ② 新内容淡入（表示「已换」）。

   为什么只动 opacity：合成层属性，不触发 layout/paint，开销可忽略。
   绝不用 height/transform 之类会引起重排的属性 —— 那会把省下的
   时间又还回去。
   ============================================================ */
#page{
  transition:opacity .12s ease-out;
}
html.is-navigating #page{
  opacity:.55;
}

/* 尊重系统的「减少动效」偏好 */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* ============================================================
   公告监测块：约 15 行高、块内上下滑动；宽屏与统考日程同高
   （2026-09-24 用户口径：版块大小与统考日程一致，展示 15 条，
     展示不下改块内滑动。行高约 40px → 15 行 ≈ 600px）
   ⚠️ base.css 的 .ann-list 是 overflow:hidden（圆角裁切），
     本层在其后加载，覆盖为 overflow-y:auto。 */
.ann-list{
  max-height:600px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
}
/* 说明：两栏「同高」不靠拉伸对齐（flex 高度推导在内容动态渲染时不稳定），
   而是统一把公告列表 cap 在 600px —— 与统考日程卡（4 块单列 + 备注，约 700px）
   视觉上基本一致；两端高度均为确定性值，不受渲染时序影响。 */