/* ══════════════════════════════════════════════════════════════════════
   作业截止站 —— 全站样式

   设计立场：这是一块「学期控制台」，不是营销页。
   → 信息密度优先、可用性优先；质感靠**层次 + 发丝线 + 排版细节**，不靠发光。

   三条硬约束（来自实测与本机 skill）：
   ① 服务器在美西、跨境出向 8–20 KB/s → 零外部资源、零字体下载、零图片文件
      （唯一的"纹理"是内联 SVG 噪点，约 200 字节）
   ② 动效只动 transform / opacity（60fps），时长按用途分档，缓动一律 ease-out 系
      —— 明确不用 linear 与弹跳（skill 里写"读起来像上个时代"）
   ③ prefers-reduced-motion 必须给非动画路径；内容在 JS 挂掉时也必须可见
      （所以入场动画的"静止态"就是可见态，不是 opacity:0 + 等 JS 加 class）
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── 中性色：带一点暖调，不用纯灰（纯灰读起来廉价）── */
  --bg:#f6f5f3;
  --bg2:#efedea;
  --card:#fffefd;
  --line:rgba(28,26,24,.10);        /* 发丝线用半透明，比实色灰更精细 */
  --line2:rgba(28,26,24,.055);
  --ink:#1b1a18;
  --ink2:#4a4744;
  --muted:#7a7570;
  --faint:#a5a09a;

  /* ── 强调色：只给"当前最该注意的那一件事"用 ── */
  --brand:#2f5fd0;
  --brand-ink:#1d47ab;
  --brand-bg:#eef3ff;

  /* ── 语义色（状态专用，不做装饰）── */
  --warn:#8a5a00;   --warn-bg:#fff6e5;   --warn-line:#f0dcb2;
  --crit:#b31d1d;   --crit-bg:#fdeeee;   --crit-line:#f2c9c9;
  --over:#7d1d1d;   --over-bg:#fbe3e3;   --over-line:#efb9b9;
  --melt:#7a1c8a;   --melt-bg:#faeafd;   --melt-line:#e8c6ee;
  --ok:#186b3a;     --ok-bg:#eef8f0;     --ok-line:#c9e5d2;

  /* ── 尺寸阶梯：所有间距都从这里取，不出现 13px 这种野生值 ── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;

  /* ── 阴影：分三层叠，像纸压在桌上；不是"辉光" ── */
  --sh1:0 1px 2px rgba(24,22,20,.05);
  --sh2:0 1px 2px rgba(24,22,20,.05), 0 6px 16px -8px rgba(24,22,20,.12);
  --sh3:0 4px 12px -4px rgba(24,22,20,.12), 0 24px 48px -24px rgba(24,22,20,.24);

  /* ── 缓动与时长（按用途分档，别一把 0.3s 走天下）── */
  --e-out:cubic-bezier(.25,1,.5,1);        /* 常规减速，最常用 */
  --e-out-expo:cubic-bezier(.16,1,.3,1);   /* 更果断，用于入场 */
  --e-in:cubic-bezier(.4,0,1,1);           /* 退场，比入场快 */
  --d-fast:120ms;   /* 反馈：hover / press */
  --d-base:200ms;   /* 状态变化：展开、淡入淡出 */
  --d-slow:320ms;   /* 布局变化：弹窗、面板 */
  --d-hero:560ms;   /* 入场编排 */

  --cols:1120px;
}

@media (prefers-color-scheme: dark){
  /* 夜里看清单是真实场景（学生都晚上赶作业）—— 给一套克制的深色 */
  :root{
    --bg:#141416; --bg2:#1b1b1e; --card:#1e1e21;
    --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.06);
    --ink:#f2f0ee; --ink2:#cfcbc6; --muted:#9a958f; --faint:#6e6a66;
    --brand:#7ba2ff; --brand-ink:#a9c2ff; --brand-bg:#1c2438;
    --warn:#f0c268; --warn-bg:#2c2413; --warn-line:#4a3c1c;
    --crit:#ff8b8b; --crit-bg:#31191b; --crit-line:#57282b;
    --over:#ff9a9a; --over-bg:#3a1616; --over-line:#66292a;
    --melt:#dda2ea; --melt-bg:#2a1630; --melt-line:#4b2657;
    --ok:#79d19b; --ok-bg:#132418; --ok-line:#27452f;
    --sh1:0 1px 2px rgba(0,0,0,.4);
    --sh2:0 1px 2px rgba(0,0,0,.4), 0 8px 20px -10px rgba(0,0,0,.6);
    --sh3:0 8px 20px -6px rgba(0,0,0,.6), 0 32px 64px -32px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
       "Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;          /* 数字等宽：列表里对得齐，读得快 */
}
/* 纸面颗粒：内联 SVG，约 200 字节；只用 1.6% 不透明度，只为"有质地" */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.016;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:var(--brand-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
::selection{background:var(--brand-bg);color:var(--brand-ink)}

/* ══════════ 顶栏 ══════════ */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top::after{content:'';display:block;height:2px;
  background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 30%,transparent) 42%,transparent 78%);
  opacity:.5}
.top .in{max-width:var(--cols);margin:0 auto;padding:10px var(--s4);display:flex;align-items:center;gap:var(--s4)}
.logo{font-weight:750;font-size:16px;letter-spacing:.2px;white-space:nowrap}
.logo span{color:var(--brand)}
.top nav{display:flex;gap:2px;flex:1;flex-wrap:wrap}
.top nav a{position:relative;padding:7px 11px;border-radius:var(--r-sm);color:var(--ink2);
  font-size:14px;transition:background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out)}
.top nav a:hover{background:var(--bg2);color:var(--ink);text-decoration:none}
.top nav a.on{color:var(--brand-ink);font-weight:650;background:var(--brand-bg)}
.who{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:var(--s3);white-space:nowrap}
.who a{color:var(--ink2)}
.wrap{position:relative;z-index:1;max-width:var(--cols);margin:0 auto;padding:var(--s5) var(--s4) 72px}

/* ══════════ 通用块 ══════════ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s4) var(--s4);margin-bottom:var(--s4);box-shadow:var(--sh1)}
.card>h2,.card>h3{margin:0 0 var(--s3);font-size:15.5px;letter-spacing:.1px;font-weight:680}
.card>h2 .sub,.card>h3 .sub{font-weight:400;color:var(--muted);font-size:13px;margin-left:6px}
.row{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.grow{flex:1}
.muted{color:var(--muted)}.small{font-size:13px}.tiny{font-size:12px}
hr{border:0;border-top:1px solid var(--line2);margin:var(--s4) 0}
.banner{border-radius:var(--r);padding:11px var(--s4);margin-bottom:var(--s4);font-size:14px;
  border:1px solid transparent}
.banner.info{background:var(--brand-bg);color:var(--brand-ink);border-color:color-mix(in srgb,var(--brand) 22%,transparent)}
.banner.wait{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.banner.bad{background:var(--crit-bg);color:var(--crit);border-color:var(--crit-line)}
.banner.good{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
/* 可关闭的提示条：多一条操作入口，右上角一个"擦掉"的叉 */
.banner.dismissible{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;
  transition:opacity var(--d-base) var(--e-in),transform var(--d-base) var(--e-in)}
.banner.out{opacity:0;transform:translateY(-6px)}
.banner .x{flex:0 0 auto;width:26px;height:26px;padding:0;line-height:1;font-size:13px;
  border-radius:var(--r-pill);border-color:transparent;background:transparent;color:inherit;
  opacity:.6;cursor:pointer}
.banner .x:hover{opacity:1;background:color-mix(in srgb,currentColor 12%,transparent)}

/* 入场：静止态就是可见态（JS 挂了也看得到内容） */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.rise{animation:rise var(--d-hero) var(--e-out-expo) both}
.rise-1{animation-delay:0ms}.rise-2{animation-delay:70ms}
.rise-3{animation-delay:140ms}.rise-4{animation-delay:210ms}

/* ══════════ 三个头条数字（研究结论：首屏 KPI 不超过 3 个）══════════ */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-bottom:var(--s4)}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3) var(--s4);box-shadow:var(--sh1);transition:box-shadow var(--d-base) var(--e-out),
  transform var(--d-base) var(--e-out);animation:rise var(--d-hero) var(--e-out-expo) both}
.kpi:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.kpi .n{font-size:30px;font-weight:760;line-height:1.05;letter-spacing:-.02em}
.kpi .l{font-size:12.5px;color:var(--muted);margin-top:2px}
.kpi.over .n{color:var(--over)}.kpi.crit .n{color:var(--crit)}
.kpi.warn .n{color:var(--warn)}.kpi.ok .n{color:var(--ok)}
/* 三个数字依次浮起（stagger 60ms）—— 眼睛会按顺序读到它们 */
.kpis .kpi:nth-child(2){animation-delay:60ms}
.kpis .kpi:nth-child(3){animation-delay:120ms}

/* ══════════ Top6：前 3 张是主角（大字），后 3 张退一档 ══════════ */
.top6{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-bottom:var(--s5)}
.t3{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3) var(--s4);box-shadow:var(--sh1);overflow:hidden;
  animation:rise var(--d-hero) var(--e-out-expo) both;
  transition:transform var(--d-base) var(--e-out),box-shadow var(--d-base) var(--e-out),
             border-color var(--d-base) var(--e-out)}
.t3::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand);
  transform-origin:top;animation:grow var(--d-hero) var(--e-out-expo) both}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.t3:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.t3.hero{padding:var(--s4)}
.t3.hero .t{font-size:16.5px}
.t3.crit::before{background:var(--crit)} .t3.crit{background:linear-gradient(180deg,var(--crit-bg),var(--card) 62%)}
.t3.warn::before{background:var(--warn)} .t3.warn{background:linear-gradient(180deg,var(--warn-bg),var(--card) 62%)}
.t3.over::before{background:var(--over)} .t3.over{background:linear-gradient(180deg,var(--over-bg),var(--card) 62%)}
.t3 .k{font-size:11.5px;color:var(--muted);display:flex;justify-content:space-between;gap:var(--s2);align-items:center;letter-spacing:.02em}
/* 课程名：卡片右上角最该一眼看到的标识 —— 加粗、放大、用正文字色（别跟"第几紧急"一样灰） */
.t3 .k .crs{font-size:14.5px;font-weight:750;color:var(--ink);letter-spacing:.01em;white-space:nowrap}
.t3.hero .k .crs{font-size:15.5px}
.t3 .k .rank{color:var(--muted);font-weight:500}
.t3 .t{font-weight:640;margin:5px 0 7px;line-height:1.4}
.t3 .m{font-size:13px;color:var(--muted);display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.t3 .big{font-size:15px;font-weight:700;color:var(--ink)}

/* ══════════ 列表：把"还剩多久"做成每行的头条数字 ══════════ */
.list{width:100%;border-collapse:collapse}
.list th{text-align:left;font-size:11.5px;color:var(--faint);font-weight:620;letter-spacing:.03em;
  padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);white-space:nowrap}
.list td{padding:var(--s3);border-bottom:1px solid var(--line2);vertical-align:top}
.list tr:last-child td{border-bottom:0}
.list tbody tr{transition:background var(--d-fast) var(--e-out)}
.list tbody tr:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.list .ti{font-weight:520;line-height:1.45}
.list .lead{font-size:15px;font-weight:700;letter-spacing:-.01em}
.list tr.over .lead{color:var(--over)}
.list tr.over td{background:var(--over-bg)}
.list tr.over:hover td{background:color-mix(in srgb,var(--over-bg) 80%,var(--ink) 6%)}
.list tr.crit .lead{color:var(--crit)}

.badge{display:inline-block;font-size:11px;padding:1.5px 7px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:color-mix(in srgb,var(--card) 70%,transparent);
  color:var(--muted);white-space:nowrap;line-height:1.6}
.badge.crit{background:var(--crit-bg);color:var(--crit);border-color:var(--crit-line)}
.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.badge.over{background:var(--over-bg);color:var(--over);border-color:var(--over-line)}
.badge.melt{background:var(--melt-bg);color:var(--melt);border-color:var(--melt-line)}
.badge.load{background:var(--brand-bg);color:var(--brand-ink);border-color:color-mix(in srgb,var(--brand) 20%,transparent)}
.badge.g{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.badge.pop{animation:pop var(--d-base) var(--e-out-expo)}
@keyframes pop{from{transform:scale(.86);opacity:0}to{transform:none;opacity:1}}

/* ══════════ 分组卡片 ══════════ */
.chips{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4);align-items:center}
.chips a{font-size:13px;padding:5px 12px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--card);color:var(--ink2);
  transition:background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out),
             border-color var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out)}
.chips a:hover{background:var(--bg2);color:var(--ink);text-decoration:none}
.chips a:active{transform:scale(.97)}
.chips a.on{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:620}
.sec{border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin-bottom:var(--s3);
  overflow:hidden;box-shadow:var(--sh1);animation:fade var(--d-slow) var(--e-out) both}
.sec>.hd{padding:10px var(--s4);background:color-mix(in srgb,var(--ink) 2.5%,var(--card));
  border-bottom:1px solid var(--line);font-weight:650;font-size:14px;
  display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline}
.sec>.hd .n{font-weight:400;color:var(--muted);font-size:12.5px}
/* 展开/收起：内容淡入 + 轻微位移（只动 opacity/transform） */
details>summary{cursor:pointer}
.fold{border-top:1px solid var(--line2);background:color-mix(in srgb,var(--ink) 1.5%,var(--card))}
.fold>summary{padding:9px var(--s4);font-size:13px;color:var(--brand-ink);list-style:none;
  display:flex;align-items:center;gap:6px;transition:background var(--d-fast) var(--e-out)}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:'▸';display:inline-block;
  transition:transform var(--d-base) var(--e-out)}
.fold[open]>summary::before{transform:rotate(90deg)}
.fold[open]>summary{border-bottom:1px solid var(--line2)}
.fold>summary:hover{background:var(--brand-bg)}
.fold[open]>*:not(summary){animation:rise var(--d-base) var(--e-out) both}
.card details[open]>*:not(summary){animation:rise var(--d-base) var(--e-out) both}

/* ══════════ 表单与按钮：八种状态都要在 ══════════ */
label{font-size:12.5px;color:var(--muted);display:block;margin-bottom:4px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],
input[type=number],select,textarea{
  width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);font:inherit;font-size:14px;color:var(--ink);
  transition:border-color var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out),
             background var(--d-fast) var(--e-out)}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--ink) 22%,transparent)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
input:disabled,select:disabled{opacity:.55;cursor:not-allowed;background:var(--bg2)}
textarea{min-height:64px;resize:vertical}

button,.btn{font:inherit;font-size:13.5px;padding:7px 13px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;
  transition:background var(--d-fast) var(--e-out),border-color var(--d-fast) var(--e-out),
             transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out),
             color var(--d-fast) var(--e-out)}
a.btn{display:inline-block;text-decoration:none;color:var(--ink)}
button:hover,.btn:hover{background:var(--bg2);box-shadow:var(--sh1)}
button:active,.btn:active{transform:scale(.975)}          /* 按下去的"触感" */
button:disabled{opacity:.5;cursor:not-allowed;transform:none}
button.pri,.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
button.pri:hover,.btn.pri:hover{background:var(--brand-ink);border-color:var(--brand-ink);
  box-shadow:0 2px 8px -2px color-mix(in srgb,var(--brand) 55%,transparent)}
button.danger{color:var(--crit);border-color:var(--crit-line)}
button.danger:hover{background:var(--crit-bg)}
button.mini{padding:3px 9px;font-size:12.5px}
/* 提交中：按钮自己变成加载态（不阻塞界面的进度反馈） */
button.loading{position:relative;color:transparent!important;pointer-events:none}
button.loading::after{content:'';position:absolute;inset:0;margin:auto;width:13px;height:13px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;color:#fff;
  animation:spin .6s linear infinite}
button:not(.pri).loading::after{color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}

.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s3)}
.stack{display:flex;flex-direction:column;gap:var(--s3)}
.center{max-width:400px;margin:var(--s7) auto}
.inline-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.inline-form input[type=date]{width:138px;padding:3px 7px;font-size:12.5px}
.inline-form input[type=time]{width:96px;padding:3px 7px;font-size:12.5px}
.inline-form input[type=number]{width:64px;padding:3px 7px;font-size:12.5px}
.legend{font-size:12px;color:var(--muted);display:flex;gap:var(--s3);flex-wrap:wrap}

/* ══════════ 自绘弹窗：从遮罩里"长出来"（来源与层级可见）══════════ */
.mask{position:fixed;inset:0;background:rgba(16,15,14,.42);display:none;z-index:60;padding:var(--s4);
  align-items:center;justify-content:center;overflow:auto;
  backdrop-filter:blur(2px);animation:fade var(--d-base) var(--e-out) both}
.mask.on{display:flex}
.modal{background:var(--card);border-radius:var(--r-lg);width:100%;max-width:560px;max-height:88vh;
  overflow:auto;padding:var(--s5);box-shadow:var(--sh3);border:1px solid var(--line);
  animation:modal var(--d-slow) var(--e-out-expo) both}
@keyframes modal{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.modal h3{margin:0 0 var(--s2);font-size:17px;letter-spacing:-.01em}
.modal .acts{display:flex;gap:var(--s2);justify-content:flex-end;margin-top:var(--s4);flex-wrap:wrap}
.modal .step{font-size:11.5px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.codebox{background:#141416;color:#e3e8f0;padding:11px 13px;border-radius:var(--r-sm);overflow:auto;
  font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-all}
.ol{margin:var(--s2) 0 0;padding-left:20px}
.ol li{margin:5px 0}

/* ══════════ 密度：清单动辄几十条，给一个紧凑开关 ══════════ */
body.dense .list td{padding:5px var(--s3)}
body.dense .list .ti{font-size:13.5px}
body.dense .list .lead{font-size:13.5px}
body.dense .sec>.hd{padding:7px var(--s4)}
body.dense .card{padding:var(--s3) var(--s4)}

/* ══════════ 导入向导专用 ══════════ */
/* 粘性操作条：清单几十条时，"导入"按钮跟着页面滚、永远在眼前（不用滑到底） */
.actionbar{position:sticky;top:54px;z-index:15;display:flex;gap:var(--s3);align-items:center;
  padding:var(--s2) var(--s3);margin:0 0 var(--s3);border:1px solid var(--line);
  border-radius:var(--r);background:color-mix(in srgb,var(--card) 92%,transparent);
  backdrop-filter:blur(6px);box-shadow:var(--sh2)}
/* 三分类"快速选择"条：勾一下带动同类别的所有行 */
.catbar{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;
  padding:var(--s2) var(--s4);background:color-mix(in srgb,var(--brand) 5%,var(--card));
  border-bottom:1px solid var(--line)}
.catpick{display:flex;gap:5px;align-items:center;margin:0;color:var(--ink);
  font-size:13px;cursor:pointer}
.catpick:hover{color:var(--brand-ink)}

/* ══════════ 分步向导（配置 Agent）══════════ */
/* 一次只显示一步：像填表一样，降低"一屏太多东西"的压迫感 */
.stepper{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4);flex-wrap:wrap}
.stepper-item{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-pill);
  font-size:13px;color:var(--muted);border:1px solid var(--line);background:var(--card);
  transition:background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out),
             border-color var(--d-fast) var(--e-out)}
.stepper-item b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--bg2);color:var(--muted);font-size:11.5px;font-weight:700;
  transition:background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out)}
.stepper-item:hover{background:var(--bg2);text-decoration:none;color:var(--ink)}
.stepper-item.on{border-color:var(--brand);color:var(--brand-ink);font-weight:620;background:var(--brand-bg)}
.stepper-item.on b{background:var(--brand);color:#fff}
.stepper-item.done b::before{content:'✓'}          /* 走过的步骤打勾 */
.stepper-item.done b{background:var(--ok-bg);color:var(--ok);font-size:0}
.stepper-line{flex:1;min-width:14px;height:1px;background:var(--line)}
.panel{display:none}
.panel.on{display:block;animation:rise var(--d-slow) var(--e-out-expo) both}

/* ══════════ 响应式 ══════════ */
@media (max-width:900px){
  .top6{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .top6{grid-template-columns:1fr}
  .top6 .t3.hero{padding:var(--s3) var(--s4)}
  .kpis{grid-template-columns:1fr 1fr;gap:var(--s2)}
  .kpi .n{font-size:24px}
  .wrap{padding:var(--s4) var(--s3) 56px}
  .top nav{gap:0}
  .top nav a{padding:6px 8px;font-size:13px}
  .who{gap:var(--s2)}
  button,.btn{min-height:40px}                 /* 触摸目标够大 */
  button.mini{min-height:32px}
  .list .hide-sm{display:none}                 /* 窄屏砍掉次要列，信息不丢（在详情里） */
}

/* ══════════ 无障碍：一定要给"不动"的路径 ══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rise,.kpi,.t3::before,.sec{animation:none!important;opacity:1!important;transform:none!important}
}