/* ══════════════════════════════════════════════════════════════════════
   练功房 · H5 站设计系统
   更新备注 · 2026-11-14（新建）
   这一份是整站的唯一视觉来源：所有页面只允许用这里的变量与组件类，
   页面里不写颜色、不写字号。改风格只改这一份。

   为什么另起一份、不复用原型里的 CSS：原型是 390×844 的取景稿，
   带假状态栏、带机身、带 1440 版心；真机 H5 里这些全是错的——
   手机上真有状态栏，微信里没有机身，用户会上下滑。
   所以这里只留三件事：安全区、发丝线、字阶。
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* 色：白底 + 一个信号色。白底上不用底色分层，只用线与留白。 */
  --bg:#FFFFFF;
  --soft:#FAFAFA;          /* 极浅块：说明条、空态 */
  --ink:#1C1C1E;
  --dim:rgba(28,28,30,.60);
  --faint:rgba(28,28,30,.42);
  --line:rgba(0,0,0,.10);   /* 发丝线：分界 */
  --rule:rgba(0,0,0,.26);   /* 墨线：强调分界 */
  --accent:#A93B2B;         /* 朱砂：主操作、关键数字。全页只给一处 */
  --accent-soft:#F6E7E3;
  --ok:#1F6B4E;
  --ok-soft:#E6F0EA;
  --warn:#8A5A13;
  --warn-soft:#F7EEDD;
  --dark:#17191B;           /* 深带：当前任务那一块 */

  --r-card:3px;
  --r-ctl:6px;
  --r-sheet:16px;
  --r-pill:999px;

  --sh:0 1px 2px rgba(0,0,0,.04);
  --sh-lift:0 6px 18px -10px rgba(0,0,0,.28);

  --sans:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;

  --maxw:520px;            /* 版心：微信里 390，iPhone Plus 428，平板与桌面收在 520 */
  --pad:20px;
  --cta:50px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;text-size-adjust:100%}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-appearance:none}
input,textarea{font:inherit;color:inherit;-webkit-appearance:none}

/* ── 页面骨架：一列，中间版心，两侧留白 ── */
.shell{max-width:var(--maxw);margin:0 auto;min-height:100vh;position:relative;
  padding-bottom:calc(env(safe-area-inset-bottom) + 16px)}
.shell.cta-on{padding-bottom:calc(var(--cta) + env(safe-area-inset-bottom) + 22px)}

/* ── 顶栏：返回 + 标题 + 右侧 ── */
.top{position:sticky;top:0;z-index:30;background:var(--bg);
  padding:calc(env(safe-area-inset-top) + 8px) var(--pad) 8px;
  display:grid;grid-template-columns:56px 1fr 84px;align-items:center;
  border-bottom:1px solid var(--line)}
.top .back{display:flex;align-items:center;height:32px;color:var(--ink);font-size:13px;gap:2px}
.top .back svg{width:16px;height:16px}
.top h1{font-size:16px;font-weight:600;letter-spacing:.02em;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .rt{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.top .menu{display:flex;align-items:center;gap:3px;height:32px;padding:0 10px;
  border:1px solid var(--line);border-radius:var(--r-pill)}
.top .menu i{display:block;width:3px;height:3px;border-radius:50%;background:var(--ink);opacity:.6}
.top .menu s{display:block;width:1px;height:11px;background:var(--line);margin:0 5px}
.top .menu .cir{width:13px;height:13px;border:1px solid var(--ink);border-radius:50%;
  opacity:.55;display:grid;place-items:center}
.top .menu .cir::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink)}

/* ── 页眉区 ── */
.lead{padding:24px var(--pad) 0}
.eyebrow{font-size:10.5px;letter-spacing:.10em;color:var(--faint);margin-bottom:10px}
h1.big{font-size:25px;line-height:1.42;font-weight:600;letter-spacing:-.01em}
h1.big em{font-style:normal;color:var(--accent)}
p.sub{font-size:13.5px;line-height:1.75;color:var(--dim);margin-top:12px}

/* ── 区块 ── */
.sec{padding:0 var(--pad);margin-top:26px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:10px;border-bottom:1px solid var(--rule);margin-bottom:2px}
.sec-h h2{font-size:17px;font-weight:600}
.sec-h .more{font-size:12px;color:var(--faint);display:flex;align-items:center;gap:3px}
.sec-h .more svg{width:12px;height:12px}

/* ── 深带：当前要做的那一件事 ── */
.band{background:var(--dark);color:rgba(255,255,255,.94);padding:22px;margin-top:22px}
.band .chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.08em;
  color:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.24);border-radius:var(--r-card);
  padding:3px 8px;margin-bottom:14px}
.band .chip b{color:#fff;font-weight:600}
.band h2{font-size:19px;font-weight:600;line-height:1.45}
.band .meta{font-size:12.5px;color:rgba(255,255,255,.62);margin-top:8px}
.band .wave{height:34px;margin:18px 0 6px;opacity:.42}
.band .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.band .est{font-size:11.5px;color:rgba(255,255,255,.62)}
.band .go{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;
  border:1px solid rgba(255,255,255,.34);border-radius:var(--r-ctl);font-size:13px}
.band .go svg{width:13px;height:13px}

/* ── 三个数 ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:16px 0}
.stats .cell{position:relative;padding:0 2px}
.stats .cell+.cell{padding-left:14px}
.stats .cell+.cell::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:1px;background:var(--line)}
.stats .k{font-size:11px;letter-spacing:.08em;color:var(--faint);margin-bottom:3px}
.stats .v{font-size:21px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stats .v s{text-decoration:none;font-size:12px;font-weight:400;color:var(--faint);margin-left:2px}
.stats .v .arw{font-size:13px;vertical-align:2px}

/* ── 卡片 ── */
.card{display:block;width:100%;text-align:left;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-card);padding:18px;box-shadow:var(--sh)}
.card .top-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.card .score{font-size:38px;font-weight:600;line-height:.94;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.card .score small{font-size:12px;font-weight:400;color:var(--faint);margin-left:3px}
.card .delta{text-align:right;font-size:12px;color:var(--dim);line-height:1.5}
.card .delta b{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.card .watch{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;gap:9px;align-items:flex-start}
.card .watch .ts{flex:none;font-size:12px;color:var(--accent);font-variant-numeric:tabular-nums;padding-top:1px}
.card .watch p{font-size:13.5px;line-height:1.6;color:var(--dim)}
.card .watch p b{color:var(--ink);font-weight:600}

/* ── 行列表：一屏十条，靠细线不靠卡片墙 ── */
.list{border-top:1px solid var(--line)}
.row{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);
  text-align:left}   /* 行也是 button，不加这句名字会跟着按钮居中对齐 */
.row .main{flex:1;min-width:0}
.row .nm{font-size:15px;line-height:1.4;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .nm .sc{font-variant-numeric:tabular-nums;margin-left:8px;font-weight:600}
.row .d{font-size:11.5px;color:var(--faint);margin-top:3px;line-height:1.6}
.row .act{flex:none;font-size:12.5px;color:var(--accent);display:flex;align-items:center;gap:2px}
.row .act svg{width:12px;height:12px}
.row .pick{flex:none;width:18px;height:18px;border:1px solid rgba(0,0,0,.20);border-radius:50%;
  display:grid;place-items:center}
.row .pick.on{background:var(--accent);border-color:var(--accent);color:#fff}
.row .pick.on::after{content:"";width:6px;height:3px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;
  transform:rotate(-45deg) translateY(-1px)}

/* ── 状态签 ── */
.tag{display:inline-block;flex:none;font-size:10.5px;letter-spacing:.06em;padding:3px 8px;
  border-radius:var(--r-pill);background:var(--ok-soft);color:var(--ok);white-space:nowrap}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.bad{background:var(--accent-soft);color:var(--accent)}
.tag.plain{background:transparent;border:1px solid var(--line);color:var(--dim)}

/* ── 段控：三个身份各自一套 ── */
.seg{display:flex;gap:24px;padding:14px var(--pad) 0;border-bottom:1px solid var(--line)}
.seg button{position:relative;padding:0 0 11px;font-size:14.5px;color:var(--faint)}
.seg button.on{color:var(--ink);font-weight:600}
.seg button.on::after{content:"";position:absolute;left:-1px;right:-1px;bottom:0;height:2px;background:var(--ink)}
.seg .count{font-size:10.5px;margin-left:4px;color:var(--faint);font-variant-numeric:tabular-nums}
.seg button.on .count{color:var(--accent)}

/* ── 按钮 ── */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--bg);
  border-top:1px solid var(--line);padding:11px var(--pad) calc(env(safe-area-inset-bottom) + 13px)}
.cta-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:12px}
.cta-inner .hint{flex:none;width:64px;font-size:10.5px;line-height:1.5;color:var(--faint);letter-spacing:.04em}
.btn{flex:1;height:var(--cta);border-radius:var(--r-ctl);display:flex;align-items:center;
  justify-content:center;gap:9px;font-size:15px;font-weight:600;letter-spacing:.04em}
.btn.primary{background:var(--accent);color:#fff;
  box-shadow:0 2px 6px rgba(169,59,43,.16),0 14px 30px -18px rgba(169,59,43,.55)}
.btn.primary:active{transform:translateY(1px)}
.btn.primary[disabled]{background:#D9D5D0;color:#8C8A86;box-shadow:none}
.btn.ghost{background:var(--bg);border:1px solid var(--line);color:var(--ink)}
.btn.dark{background:var(--ink);color:#fff}
.btn.sm{flex:none;height:34px;padding:0 14px;font-size:13px;font-weight:500}

/* ── 选择项 ── */
.pick-list{display:grid;gap:10px;margin-top:16px}
.pick-item{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-card);text-align:left;width:100%}
.pick-item.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pick-item .ico{flex:none;width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;color:var(--ink)}
.pick-item .ico svg{width:18px;height:18px}
.pick-item .tx{flex:1;min-width:0}
.pick-item .tx b{display:block;font-size:15px;font-weight:600}
.pick-item .tx span{display:block;font-size:11.5px;color:var(--faint);margin-top:3px;line-height:1.5}

/* ── 录音条 ── */
.rec{margin-top:18px;border:1px solid var(--line);border-radius:var(--r-card);padding:18px;background:var(--soft)}
.rec .row1{display:flex;align-items:center;justify-content:space-between}
.rec .time{font-size:30px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rec .time small{font-size:12px;font-weight:400;color:var(--faint);margin-left:4px}
.rec .state{font-size:11.5px;color:var(--dim);display:flex;align-items:center;gap:6px}
.rec .state i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.rec .wave{height:40px;margin:14px 0 4px}
.rec .tip{font-size:11.5px;color:var(--faint);line-height:1.6}

/* ── 空态 / 说明条 ── */
.note{margin-top:18px;padding:14px 16px;background:var(--soft);border-radius:var(--r-card);
  font-size:12.5px;line-height:1.75;color:var(--dim)}
.empty{padding:48px 0;text-align:center;color:var(--faint);font-size:13px;line-height:1.8}

/* ── 矩阵：五维条 ── */
.dims{margin-top:6px}
.dim{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.dim .nm{flex:none;width:96px;font-size:13.5px}
.dim .bar{flex:1;height:3px;background:rgba(0,0,0,.12);position:relative}
.dim .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}
.dim .bar i.low{background:var(--accent)}
.dim .num{flex:none;width:34px;text-align:right;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}

/* ── 三档点评 ── */
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.level{padding:12px 10px;border:1px solid var(--line);border-radius:var(--r-card);text-align:center}
.level.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.level b{display:block;font-size:14px;font-weight:600}
.level span{display:block;font-size:10.5px;color:var(--faint);margin-top:4px;line-height:1.5}

/* ── 分享卡 ── */
.share{margin:0 var(--pad);background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-card);padding:20px 18px 16px;box-shadow:var(--sh)}
.share .brand{display:flex;justify-content:space-between;align-items:center;
  font-size:10.5px;letter-spacing:.12em;color:var(--faint)}
.share .who{font-size:26px;font-weight:600;line-height:1.24;margin-top:16px;letter-spacing:-.01em}
.share .who em{font-style:normal;color:var(--accent)}
.share .line{font-size:13px;line-height:1.8;margin-top:10px}
.share .line b{font-weight:600}
.share .split{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.share .plus{font-size:26px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.share .plus small{display:block;font-size:10.5px;font-weight:400;color:var(--faint);margin-top:6px;letter-spacing:.08em}
.share .qr{width:76px;height:76px;flex:none;color:var(--ink)}
.share .qrnote{font-size:10.5px;color:var(--dim);margin-top:12px}

/* ── 吐司 ── */
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 96px);transform:translateX(-50%) translateY(8px);
  z-index:80;background:rgba(0,0,0,.94);color:#fff;font-size:13px;padding:10px 16px;
  border-radius:var(--r-ctl);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;white-space:nowrap}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── 桌面兜底：H5 也是要能在大屏上打开的 ── */
@media (min-width:560px){
  body{background:#F4F4F2}
  .shell{background:var(--bg);box-shadow:0 0 0 1px var(--line),0 20px 60px -30px rgba(0,0,0,.3);min-height:100vh}
  .cta-bar{background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(12px)}
  .toast{max-width:var(--maxw)}
}