/* ============================================================
   项目节点台账 · Web 全局样式（H5 皮肤 + PC 共享底座）
   ------------------------------------------------------------
   设计体系：A 版（系统灰 HIG）+ 品牌浓度 mid（2026-10-23 切换）
   前身：v1 editorial（纸感米白 + 噪点 + Barlow 数字 + 渐变 hero），
         已留档 archive/2026-10-23-styles.v1-editorial

   档位切换：改下面第二行 @import 即可（low / mid / high）
   同时必须跑 design/set_brand_level.py（会一并同步两个 html 的
   theme-color meta；PC 无 app.json，配置层限制只存在于小程序侧）

   本文件只引用 web/tokens.css 的变量，不重新定义任何色值；
   布局与内容结构保持 v1 不变（只换皮，不换骨）。
   ============================================================ */
/* 2026-11-06 分层说明（逻辑分层；物理拆分前提见 DESIGN.md §12.4）：
   本文件 = PC / H5 共享底座 + H5 专属皮肤，按下方分区注释隔开。
   PC（pc.css）经 @import 加载本文件；H5 专属 class 在 PC 不生成 DOM，属已知冗余。
   共享：reset / 按钮 / 表单 / chip / toast / meta-strip / trail / empty / 无障碍
   H5 专属：topbar / hero / node / project / notice / metric / tabbar / sheet / login */
@import "tokens.css";
@import "brand-level.mid.css";

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--tq-canvas); color:var(--tq-ink-900);
  font-family:var(--tq-font); font-size:var(--tq-fs-body);
  line-height:var(--tq-lh-normal); letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
input,textarea,select{font:inherit;color:inherit}
/* 图标：Lucide 风格统一描边 */
svg.ic{width:var(--tq-icon-s);height:var(--tq-icon-s);flex:none;fill:none;stroke:currentColor;
  stroke-width:var(--tq-icon-stroke);stroke-linecap:round;stroke-linejoin:round}
svg{display:block}
.hidden{display:none!important}

/* ---------- 外壳 ---------- */
#app{position:relative;z-index:1;min-height:100vh;padding-bottom:calc(var(--tq-sp-9) + var(--tq-safe-b))}
#app.plain{padding-bottom:var(--tq-sp-6)}

/* ---------- 顶栏（A 版：纯色 + 发丝线，滚动不换材质） ---------- */
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--tq-sp-3);
  padding:var(--tq-sp-2) var(--tq-page-pad);
  background:var(--tq-surface);color:var(--tq-ink-900);
  border-bottom:var(--tq-line-soft);
}
.topbar .brand{display:flex;align-items:baseline;gap:var(--tq-sp-2);min-width:0}
.topbar .brand b{font-size:var(--tq-fs-body-lg);font-weight:var(--tq-fw-semibold);letter-spacing:-.01em}
.topbar .brand span{font-size:var(--tq-fs-caption);letter-spacing:.12em;text-transform:uppercase;
  color:var(--tq-ink-500)}
.topbar .spacer{flex:1}
.iconbtn{width:var(--tq-tap-h);height:var(--tq-tap-h);display:grid;place-items:center;
  border-radius:var(--tq-r-circle);
  transition:transform var(--tq-dur-micro) var(--tq-ease),background var(--tq-dur-micro) var(--tq-ease)}
.iconbtn:active{transform:scale(.9);background:var(--tq-ink-100)}
.iconbtn svg{width:var(--tq-icon-m);height:var(--tq-icon-m)}

/* ---------- Hero（A 版浅色；high 档由 --tq-hero-bg 接管为渐变） ---------- */
.hero{
  position:relative;margin:0;padding:var(--tq-sp-5) var(--tq-page-pad) var(--tq-sp-4);
  background:var(--tq-hero-bg);
  color:var(--tq-hero-fg);
  border-bottom:var(--tq-line-soft);
}
.hero::after{ /* 一条细规线，mid 档透明（A 版无材质装饰） */
  content:"";position:absolute;left:var(--tq-page-pad);right:var(--tq-page-pad);bottom:0;
  height:2px;background:var(--tq-hero-line);
}
.hero .kicker{color:var(--tq-hero-kick)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--tq-sp-3);
  align-items:end;margin-top:var(--tq-sp-3)}
.hero-main .big{
  font-size:var(--tq-fs-display);line-height:1;font-weight:var(--tq-fw-semibold);
  letter-spacing:-.02em;font-variant-numeric:var(--tq-nums);
}
.hero-main .big small{font-size:var(--tq-fs-secondary);font-weight:var(--tq-fw-regular);
  letter-spacing:.06em;margin-left:var(--tq-sp-2);color:var(--tq-hero-sub)}
.hero-main .sub{margin-top:var(--tq-sp-2);font-size:var(--tq-fs-secondary);color:var(--tq-hero-sub);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-side{border-left:var(--tq-line-soft);padding-left:var(--tq-sp-3)}
.hero-side .row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--tq-sp-2)}
.hero-side .row:last-child{margin-bottom:0}
.hero-side .lab{font-size:var(--tq-fs-caption);letter-spacing:.04em;color:var(--tq-hero-sub)}
.hero-side .val{font-size:var(--tq-fs-title-sm);font-weight:var(--tq-fw-semibold);
  font-variant-numeric:var(--tq-nums)}
.hero-side .val.red{color:var(--tq-hero-red)}
.hero-side .val.orange{color:var(--tq-hero-orange)}

/* ---------- 通用排版 ---------- */
.kicker{font-size:var(--tq-fs-caption);font-weight:var(--tq-fw-semibold);letter-spacing:.08em;
  text-transform:uppercase;color:var(--tq-ink-400)}
.page-title{font-size:var(--tq-fs-title-sm);font-weight:var(--tq-fw-semibold);
  letter-spacing:-.01em;margin:0}
.muted{color:var(--tq-ink-500)}
.num{font-variant-numeric:var(--tq-nums)}

/* ---------- 分组（编号小标题） ---------- */
.content{padding:0 var(--tq-page-pad)}
.section{margin-top:var(--tq-sp-5)}
.section-head{display:flex;align-items:baseline;gap:var(--tq-sp-2);margin-bottom:var(--tq-sp-2)}
.section-head .idx{font-size:var(--tq-fs-caption);color:var(--tq-ink-400);
  font-weight:var(--tq-fw-semibold)}
.section-head h3{margin:0;font-size:var(--tq-fs-body);font-weight:var(--tq-fw-semibold);
  letter-spacing:.02em}
.section-head .count{margin-left:auto;font-size:var(--tq-fs-secondary);color:var(--tq-ink-500);
  font-variant-numeric:var(--tq-nums)}

/* ---------- 节点卡（A 版无状态条：--tq-rail-w 为 0，high 档 3px） ---------- */
.node{
  position:relative;display:block;width:100%;text-align:left;
  background:var(--tq-surface);border:var(--tq-line);border-radius:var(--tq-r-lg);
  padding:var(--tq-card-pad);margin-bottom:var(--tq-card-gap);overflow:hidden;
  transition:transform var(--tq-dur-micro) var(--tq-ease),
    border-color var(--tq-dur-base) var(--tq-ease),background var(--tq-dur-base) var(--tq-ease);
}
.node::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--tq-rail-w);
  background:var(--tq-brand-500);opacity:.45}
.node.st-overdue::before{background:var(--tq-danger);opacity:1}
.node.st-today::before{background:var(--tq-warning);opacity:1}
.node.st-done::before{background:var(--tq-success);opacity:1}
.node:active{transform:scale(.985);background:var(--tq-ink-100)}
.node .t{font-size:var(--tq-fs-body-lg);font-weight:var(--tq-fw-semibold);line-height:1.4;letter-spacing:0}
.node .meta{display:flex;flex-wrap:wrap;gap:var(--tq-sp-1) var(--tq-sp-2);margin-top:var(--tq-sp-1);
  font-size:var(--tq-fs-secondary);color:var(--tq-ink-500)}
.node .meta .wbs{font-variant-numeric:var(--tq-nums);letter-spacing:.04em}
.node .foot{display:flex;align-items:center;gap:var(--tq-sp-2);margin-top:var(--tq-sp-2)}
.node .proj{flex:1;min-width:0;font-size:var(--tq-fs-secondary);color:var(--tq-ink-500);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.node .right{margin-left:auto;display:flex;align-items:center;gap:var(--tq-sp-1);
  flex:none;white-space:nowrap}
.days{font-size:var(--tq-fs-secondary);font-weight:var(--tq-fw-semibold);
  font-variant-numeric:var(--tq-nums);white-space:nowrap}
.days.red{color:var(--tq-danger)} .days.orange{color:var(--tq-warning)}
.days.muted{color:var(--tq-ink-500)}

/* ---------- 状态 chip（tint 底 + 同色系边框，与小程序 .chip.* 同构） ---------- */
.chip{
  display:inline-flex;align-items:center;gap:var(--tq-sp-1);
  padding:var(--tq-sp-half) var(--tq-sp-2);
  border-radius:var(--tq-r-full);
  font-size:var(--tq-fs-caption);line-height:1.6;white-space:nowrap;
  border:1px solid transparent;
}
.chip svg{width:var(--tq-icon-s);height:var(--tq-icon-s)}
.chip.s-未开始{background:var(--tq-ink-100);color:var(--tq-ink-500);border-color:var(--tq-ink-200)}
.chip.s-即将开始{background:var(--tq-warning-bg);color:var(--tq-warning);border-color:var(--tq-warning-bg)}
.chip.s-进行中{background:var(--tq-success-bg);color:var(--tq-success);border-color:var(--tq-success-bg)}
.chip.s-已完成,.chip.s-提前完成{background:var(--tq-success-bg);color:var(--tq-success);border-color:var(--tq-success-bg)}
.chip.s-已滞后{background:var(--tq-danger-bg);color:var(--tq-danger);border-color:var(--tq-danger-bg)}

/* ---------- 项目卡 ---------- */
.project{background:var(--tq-surface);border:var(--tq-line);border-radius:var(--tq-r-lg);
  padding:var(--tq-card-pad);margin-bottom:var(--tq-card-gap)}
.project .top{display:flex;align-items:flex-start;gap:var(--tq-sp-2)}
.project .name{font-size:var(--tq-fs-body-lg);font-weight:var(--tq-fw-semibold);line-height:1.35;
  flex:1;letter-spacing:0}
.project .type{font-size:var(--tq-fs-caption);letter-spacing:.08em;text-transform:uppercase;
  color:var(--tq-ink-500);margin-top:var(--tq-sp-1)}
.project .figures{display:flex;gap:var(--tq-sp-4);margin-top:var(--tq-sp-3)}
.project .fig{display:flex;flex-direction:column;gap:var(--tq-sp-1)}
.project .fig b{font-size:var(--tq-fs-title-sm);font-weight:var(--tq-fw-semibold);
  font-variant-numeric:var(--tq-nums);letter-spacing:-.01em}
.project .fig span{font-size:var(--tq-fs-caption);color:var(--tq-ink-500);letter-spacing:.04em}
.project .bar{height:var(--tq-bar-h);background:var(--tq-ink-150);border-radius:var(--tq-r-full);
  overflow:hidden;margin-top:var(--tq-sp-3)}
.project .bar i{display:block;height:100%;background:var(--tq-brand-500);
  border-radius:var(--tq-r-full);transition:width var(--tq-dur-emph) var(--tq-ease)}
.project .nodes{margin-top:var(--tq-sp-3);border-top:var(--tq-line-soft);padding-top:var(--tq-sp-2)}
.project .nodes .node{margin-bottom:var(--tq-sp-2)}

/* ---------- 通知流 ---------- */
.notice{display:flex;gap:var(--tq-sp-2);padding:var(--tq-sp-3) 0;border-bottom:var(--tq-line-soft)}
.notice .dot{width:var(--tq-dot-s);height:var(--tq-dot-s);border-radius:var(--tq-r-circle);
  background:var(--tq-brand-500);margin-top:var(--tq-sp-1);flex:none}
.notice.dead .dot{background:var(--tq-danger)}
.notice .body{flex:1;min-width:0}
.notice .ev{font-size:var(--tq-fs-secondary);font-weight:var(--tq-fw-semibold);letter-spacing:.02em}
.notice .meta{font-size:var(--tq-fs-caption);color:var(--tq-ink-500);margin-top:var(--tq-sp-1)}
.notice .time{font-size:var(--tq-fs-caption);color:var(--tq-ink-500);white-space:nowrap;
  font-variant-numeric:var(--tq-nums)}

/* ---------- 统计 ---------- */
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:var(--tq-sp-2);margin-top:var(--tq-sp-3)}
.metric{background:var(--tq-surface);border:var(--tq-line);border-radius:var(--tq-r-lg);
  padding:var(--tq-card-pad)}
.metric b{display:block;font-size:var(--tq-fs-headline);line-height:1;letter-spacing:-.02em;
  font-weight:var(--tq-fw-semibold);font-variant-numeric:var(--tq-nums)}
.metric span{display:block;margin-top:var(--tq-sp-2);font-size:var(--tq-fs-caption);
  color:var(--tq-ink-500);letter-spacing:.04em}
.metric.alert b{color:var(--tq-danger)}

/* ---------- 空态 ---------- */
.empty{padding:var(--tq-empty-pad) var(--tq-page-pad);text-align:center;color:var(--tq-ink-500);
  font-size:var(--tq-fs-secondary)}
.empty svg{width:var(--tq-icon-l);height:var(--tq-icon-l);margin:0 auto var(--tq-sp-2);opacity:.4}
.empty p{margin:0;font-size:var(--tq-fs-secondary)}

/* ---------- 底部 Tab（A 版：纯色 + 轻阴影，不用毛玻璃） ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
  padding:var(--tq-sp-2) var(--tq-sp-3) calc(var(--tq-sp-2) + var(--tq-safe-b));
  background:var(--tq-surface);
  border-top:var(--tq-line-soft);
  box-shadow:var(--tq-e2);
}
.tabbar button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;
  gap:var(--tq-sp-1);padding:var(--tq-sp-2) 0 var(--tq-sp-1);color:var(--tq-ink-500);
  border-radius:var(--tq-r-sm);
  transition:color var(--tq-dur-base) var(--tq-ease),transform var(--tq-dur-micro) var(--tq-ease)}
.tabbar button svg{width:var(--tq-icon-m);height:var(--tq-icon-m);
  transition:transform var(--tq-dur-emph) var(--tq-ease)}
.tabbar button span{font-size:var(--tq-fs-caption);letter-spacing:.04em}
.tabbar button.on{color:var(--tq-tab-selected)}
.tabbar button.on svg{transform:translateY(-1px) scale(1.06)}
.tabbar button.on::after{content:"";position:absolute;bottom:0;width:var(--tq-icon-s);height:2px;
  border-radius:var(--tq-r-full);background:var(--tq-accent);
  animation:tabIn var(--tq-dur-emph) var(--tq-ease)}
@keyframes tabIn{from{transform:scaleX(.2);opacity:0}to{transform:scaleX(1);opacity:1}}
.tabbar button:active{transform:scale(.94)}

/* ---------- 登录（A 版浅色，全档位一致，与小程序登录页同皮） ---------- */
.login{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:var(--tq-sp-7) var(--tq-sp-6);
  background:var(--tq-canvas);color:var(--tq-ink-900);
}
.login .mark{font-size:var(--tq-fs-caption);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tq-brand-600);font-weight:var(--tq-fw-semibold)}
.login h1{font-size:var(--tq-fs-headline);line-height:1.2;letter-spacing:-.02em;
  margin:var(--tq-sp-3) 0 var(--tq-sp-2);font-weight:var(--tq-fw-semibold)}
.login p{font-size:var(--tq-fs-secondary);color:var(--tq-ink-500);margin:0 0 var(--tq-sp-6);
  max-width:300px}
.login .field input{color:var(--tq-ink-900);height:var(--tq-btn-h);font-size:var(--tq-fs-body-lg)}
.login .field input::placeholder{color:var(--tq-ink-400)}
.login .btn{width:100%;height:var(--tq-btn-h);margin-top:var(--tq-sp-4);
  border-radius:var(--tq-r-8);font-size:var(--tq-fs-body)}
.login .hint{margin-top:var(--tq-sp-4);font-size:var(--tq-fs-caption);line-height:1.8;
  color:var(--tq-ink-400)}
.login .hint code{background:var(--tq-surface-2);padding:var(--tq-sp-half) var(--tq-sp-2);
  border-radius:var(--tq-r-xs)}

/* ---------- 表单 ---------- */
.field{display:block;background:var(--tq-surface);border:var(--tq-line);
  border-radius:var(--tq-r-sm);padding:var(--tq-sp-1) var(--tq-sp-3);
  transition:border-color var(--tq-dur-base) var(--tq-ease),box-shadow var(--tq-dur-base) var(--tq-ease)}
.field:focus-within{border-color:var(--tq-brand-500);box-shadow:var(--tq-focus)}
.field input,.field textarea{width:100%;border:0;outline:0;background:none;
  padding:var(--tq-sp-3) 0;font-size:var(--tq-fs-body-lg)}
.field textarea{min-height:var(--tq-input-h);resize:vertical;line-height:var(--tq-lh-relaxed)}
.field-label{display:flex;align-items:baseline;gap:var(--tq-sp-1);
  margin:var(--tq-sp-4) 0 var(--tq-sp-2);font-size:var(--tq-fs-secondary);color:var(--tq-ink-500)}
.field-label b{font-weight:var(--tq-fw-semibold);color:var(--tq-ink-900);font-size:var(--tq-fs-secondary)}
.field-label .req{color:var(--tq-warning);font-size:var(--tq-fs-caption)}
.field-label .opt{color:var(--tq-ink-400);font-size:var(--tq-fs-caption)}

/* 附件 */
.filebtn{display:flex;align-items:center;justify-content:center;gap:var(--tq-sp-2);
  height:var(--tq-tap-h);border:1px dashed var(--tq-ink-200);border-radius:var(--tq-r-sm);
  color:var(--tq-ink-500);font-size:var(--tq-fs-secondary);background:var(--tq-surface);
  transition:border-color var(--tq-dur-base) var(--tq-ease),color var(--tq-dur-base) var(--tq-ease),
    transform var(--tq-dur-micro) var(--tq-ease)}
.filebtn:active{transform:scale(.985)}
.filebtn svg{width:var(--tq-icon-m);height:var(--tq-icon-m)}
.attach{display:flex;align-items:center;gap:var(--tq-sp-2);padding:var(--tq-sp-2) var(--tq-sp-3);
  margin-top:var(--tq-sp-1);background:var(--tq-surface-2);border-radius:var(--tq-r-sm);
  font-size:var(--tq-fs-secondary)}
.attach .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach .sz{color:var(--tq-ink-500);font-variant-numeric:var(--tq-nums)}
.attach button{color:var(--tq-ink-500);width:var(--tq-icon-l);height:var(--tq-icon-l);
  display:grid;place-items:center;border-radius:var(--tq-r-circle)}
.attach button:active{background:var(--tq-ink-100)}

/* 按钮（主按钮 = 藏青底白字，全屏唯一主操作样式） */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--tq-sp-2);
  height:var(--tq-btn-h);padding:0 var(--tq-sp-5);border-radius:var(--tq-r-8);
  background:var(--tq-brand-500);color:var(--tq-on-brand);font-size:var(--tq-fs-body);
  font-weight:var(--tq-fw-semibold);letter-spacing:.02em;
  transition:transform var(--tq-dur-micro) var(--tq-ease),background var(--tq-dur-micro) var(--tq-ease)}
.btn:active{transform:scale(.98);background:var(--tq-brand-600)}
.btn[disabled]{background:var(--tq-ink-300);color:var(--tq-on-brand);opacity:.45}
.btn.primary{background:var(--tq-brand-500);color:var(--tq-on-brand)}
.btn.primary:active{background:var(--tq-brand-600)}
.btn.ghost{background:transparent;color:var(--tq-brand-500);border:var(--tq-line)}
.btn.ghost:active{background:var(--tq-ink-100);transform:none}
.btn.block{width:100%}
.btn.sm{height:var(--tq-btn-h-sm);font-size:var(--tq-fs-secondary);padding:0 var(--tq-sp-3);
  border-radius:var(--tq-r-sm)}

/* ---------- 底部抽屉 Sheet ---------- */
.scrim{position:fixed;inset:0;z-index:50;background:var(--tq-mask);
  opacity:0;transition:opacity var(--tq-dur-base) var(--tq-ease)}
.scrim.show{opacity:1}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:51;max-height:92vh;
  display:flex;flex-direction:column;
  background:var(--tq-surface);border-radius:var(--tq-r-lg) var(--tq-r-lg) 0 0;
  transform:translateY(100%);will-change:transform;
  box-shadow:var(--tq-e3);
}
.sheet.dragging{transition:none}
.sheet.open{transform:translateY(0);transition:transform var(--tq-dur-emph) var(--tq-ease-enter)}
.sheet.closing{transform:translateY(100%);transition:transform var(--tq-dur-emph) var(--tq-ease)}
.sheet .grab{display:flex;justify-content:center;padding:var(--tq-sp-2) 0 var(--tq-sp-1);
  flex:none;touch-action:none}
.sheet .grab i{width:38px;height:var(--tq-sp-1);border-radius:var(--tq-r-full);
  background:var(--tq-ink-300);display:block}
.sheet .head{display:flex;align-items:flex-start;gap:var(--tq-sp-2);
  padding:var(--tq-sp-1) var(--tq-sp-5) var(--tq-sp-3);flex:none;
  border-bottom:var(--tq-line-soft)}
.sheet .head .t{flex:1;min-width:0}
.sheet .head h2{margin:0;font-size:var(--tq-fs-body-lg);font-weight:var(--tq-fw-semibold);
  line-height:1.35;letter-spacing:-.01em}
.sheet .head .sub{margin-top:var(--tq-sp-1);font-size:var(--tq-fs-caption);
  color:var(--tq-ink-500);display:flex;gap:var(--tq-sp-2);flex-wrap:wrap}
.sheet .body{padding:var(--tq-sp-4) var(--tq-sp-5) calc(var(--tq-sp-5) + var(--tq-safe-b));
  overflow-y:auto;-webkit-overflow-scrolling:touch}
.sheet .foot{flex:none;padding:var(--tq-sp-3) var(--tq-sp-5) calc(var(--tq-sp-4) + var(--tq-safe-b));
  border-top:var(--tq-line-soft);background:var(--tq-surface)}

/* 抽屉信息条（标题已在 head，正文不再重复节点名） */
.meta-strip{display:grid;grid-template-columns:1fr 1fr;gap:var(--tq-sp-3) var(--tq-sp-4);
  background:var(--tq-surface);border:var(--tq-line);border-radius:var(--tq-r-lg);
  padding:var(--tq-card-pad);margin-bottom:var(--tq-sp-4)}
.meta-strip .cell{display:flex;flex-direction:column;gap:var(--tq-sp-1);min-width:0}
.meta-strip .cell span{font-size:var(--tq-fs-caption);letter-spacing:.04em;color:var(--tq-ink-500)}
.meta-strip .cell b{font-size:var(--tq-fs-secondary);font-weight:var(--tq-fw-semibold);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:var(--tq-nums)}
.meta-strip .cell b.red{color:var(--tq-danger)}

/* 留痕 */
.trail{margin-top:var(--tq-sp-4)}
.trail .item{display:flex;gap:var(--tq-sp-2);padding:var(--tq-sp-2) 0;
  font-size:var(--tq-fs-secondary);color:var(--tq-ink-500);border-bottom:var(--tq-line-soft)}
.trail .item time{font-variant-numeric:var(--tq-nums);white-space:nowrap;
  color:var(--tq-ink-500);font-size:var(--tq-fs-caption)}
.trail .item b{color:var(--tq-ink-900);font-weight:var(--tq-fw-semibold)}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(86px + var(--tq-safe-b));transform:translate(-50%,10px);
  z-index:80;max-width:86%;padding:var(--tq-sp-2) var(--tq-sp-4);border-radius:var(--tq-r-full);
  font-size:var(--tq-fs-secondary);background:var(--tq-brand-700);color:var(--tq-on-brand);
  opacity:0;pointer-events:none;
  transition:opacity var(--tq-dur-base) var(--tq-ease),transform var(--tq-dur-base) var(--tq-ease-enter)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--tq-danger)}

/* ---------- 入场动画（一次性，stagger） ---------- */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.anim{animation:rise var(--tq-dur-hero) var(--tq-ease-enter) both}

/* ---------- 无障碍 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;
    transition-duration:.001ms!important}
}
@media (prefers-reduced-transparency:reduce){
  .scrim{background:var(--tq-mask-strong)}
}
/* 2026-11-06：DESIGN.md §6 口径为「白内环 + brand-500 外环」，橙（--tq-accent）
   仅限状态点/计数点缀，不得作焦点环。outline-offset 的留白即内环。 */
:focus-visible{outline:2px solid var(--tq-brand-500);outline-offset:2px;border-radius:var(--tq-r-sm)}

/* 桌面：居中成窄栏，保持阅读宽度（非拉伸后台） */
@media (min-width:720px){
  #app,.login{max-width:520px;margin:0 auto;background:var(--tq-canvas);
    box-shadow:0 0 0 1px var(--tq-line-soft),var(--tq-e3)}
  .tabbar{max-width:520px;left:50%;transform:translateX(-50%)}
  .sheet{max-width:520px;left:50%;transform:translate(-50%,100%)}
  .sheet.open{transform:translate(-50%,0)}
  .sheet.closing{transform:translate(-50%,100%)}
  .sheet.dragging{transform:translate(-50%,var(--drag,0))}
}