/* ============================================================
   MAPHITE 工作室工作台 · 基础样式（定稿 A「深蓝仪表台」）
   依据：docs/视觉方向稿/A/direction.html；说明：docs/视觉定稿.md
   规矩：色值和像素只写在 :root 的令牌里，下面所有样式只引用变量。
   兼容：Chrome 87，禁用写法见 complaint-center 的 docs/前端设计规范.md §1，由 tests/check_css_compat.py 把关；flex 间距一律用 margin。
   ============================================================ */

:root{
  /* 字体 */
  --font:"MiSans","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --fw-m:500; --fw-b:700; --fw-h:900;

  /* 字号 6 档；16px 以下只有 --fs-1，且只给角标、标签栏、刻度 */
  --fs-1:14px;   /* 角标（补、已修改）、标签栏文字、热度条刻度、图例刻度、星期表头 */
  --fs-2:16px;   /* 正文：记录、统计标签、说明、提示、字段名、状态 */
  --fs-3:18px;   /* 姓名、按钮、子页标题、日期翻页、单笔金额 */
  --fs-4:22px;   /* 页面标题、任务标题、次级数字 */
  --fs-5:32px;   /* 月度数字 */
  --fs-6:52px;   /* 主数字 */
  --lh-num:1;
  --lh-tight:1.3;
  --lh-body:1.5;

  /* 颜色：底与面 */
  --c-bg:#0A1423;
  --c-panel:#111F35;
  --c-raised:#1B2D48;
  --c-line:#22354F;
  --c-line-strong:#3A5176;
  --c-scrim:rgba(3,7,13,.72);
  /* 颜色：字 */
  --c-text:#F2F5FA;
  --c-text-2:#B3BFD1;
  --c-text-3:#8696AF;
  /* 颜色：已选 / 当前（反白） */
  --c-inverse:#F2F5FA;
  --c-on-inverse:#0A1423;
  /* 颜色：品牌橙，只给主操作、热度、奖励 */
  --c-orange:#FF7A00;
  --c-on-orange:#0A1423;
  /* 颜色：状态 */
  --c-red:#FF7A6B;
  --c-red-dim:#DB9087;
  --c-red-wash:#3A1D26;
  --c-green:#7CCBA2;
  --c-green-wash:#14322F;
  /* 颜色：警示（重复截图等提示）暖黄，与深蓝底、品牌橙协调；不与热度五档任何一档相同 */
  --c-warn:#F2C14E;
  /* 颜色：日历五档 0 / 1 / 2–3 / 4–5 / 6+ */
  --c-heat-0:#26395A;
  --c-heat-1:#6A4426;
  --c-heat-2:#B25A0E;
  --c-heat-3:#FF7A00;
  --c-heat-4:#FFC98A;
  /* 颜色：照片占位 */
  --c-ph-a:#2B4163;
  --c-ph-b:#16263F;

  /* 圆角 */
  --r-1:2px;    /* 日历格、进度条 */
  --r-2:4px;    /* 角标、状态块、月历格 */
  --r-3:6px;    /* 分段内块、提示条 */
  --r-4:10px;   /* 按钮、输入框、选项 */
  --r-5:14px;   /* 卡片、弹层 */
  --r-round:50%;

  /* 间距 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --sp-rec:10px;     /* 记录行上下内边距：24 行高 + 20 = 44 */

  /* 尺寸 */
  --tap:44px;        /* 最小可点高度 */
  --ctl:48px;        /* 选项按钮 */
  --btn:52px;        /* 主按钮、输入框 */
  --bar:56px;        /* 顶栏、标签栏 */
  --seg-w:52px;      /* 顶部紧凑分段的单段宽 */
  --mark:22px;
  --pill:28px;
  --icon:22px;
  --icon-s:18px;
  --avatar:44px;
  --avatar-s:28px;
  --logo-w:26px;
  --logo-h:20px;
  --thumb:72px;
  --thumb-l:96px;
  --heat-w:8px;
  --heat-h:24px;
  --heat-gap:2px;
  --heat-week:4px;
  --legend-w:44px;
  --legend-h:14px;
  --grab-w:36px;
  --meter:6px;
  --dot:9px;
  --dot-top:6px;
  --hair:1px;
  --bold-line:3px;
  --stroke:1.8;
  --stroke-b:2.5;
  --ls-label:.08em;
  --ls-num:-.02em;

  /* 产品外壳（direction.html 里由样机外框承担，这里补成页面级） */
  --page-max:480px;      /* 电脑宽屏上居中成一列的最大宽度 */
  --sheet-max:85vh;      /* 底部弹层最高 */
  --op-disabled:.5;      /* 禁用态透明度 */
  --z-foot:10;
  --z-sheet:20;
  --z-toast:30;          /* 提示条：必须高于弹层（--z-sheet），否则弹层里的提示被遮住 */

  /* 标志图形（MAPHITE），data URI，不引外部资源 */
  --logo-img:url("data:image/png;base64,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");
}

/* ---------- 全局基础 ---------- */
*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--c-bg)}
body{font-family:var(--font);font-weight:var(--fw-m);font-size:var(--fs-2);line-height:var(--lh-body);color:var(--c-text);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
ul,ol{list-style:none}
i,em{font-style:normal}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
svg{display:block;flex:none}
h1,h2,h3,h4{font-size:inherit;font-weight:inherit}
button,input,textarea,select{font:inherit;color:inherit;background:transparent;border:0;border-radius:0;outline:0;-webkit-appearance:none;appearance:none}
button{cursor:pointer;text-align:center}
button[disabled],.is-disabled{opacity:var(--op-disabled);pointer-events:none}
textarea{resize:none}
input::placeholder,textarea::placeholder{color:var(--c-text-3)}

.logo{display:block;flex:none;width:var(--logo-w);height:var(--logo-h);background:var(--logo-img) no-repeat center;background-size:contain}
.ic{width:var(--icon);height:var(--icon);fill:none;stroke:currentColor;stroke-width:var(--stroke);stroke-linecap:round;stroke-linejoin:round}
.ic-s{width:var(--icon-s);height:var(--icon-s)}
.ic-solid circle{fill:currentColor;stroke:none}
.ic-solid path{stroke:var(--c-panel);stroke-width:var(--stroke-b)}
.num{font-variant-numeric:tabular-nums}

/* ---------- 页面外壳：一列，电脑宽屏上居中 ---------- */
.app{display:flex;flex-direction:column;min-height:100vh;max-width:var(--page-max);margin:0 auto;background:var(--c-bg)}
.body{flex:1 1 auto;padding:0 var(--sp-4) var(--sp-5)}
.foot{position:sticky;bottom:0;z-index:var(--z-foot)}

/* ---------- 页头（根页面）：标题和视图切换一行，日期翻页一行 ---------- */
.top{flex:none;padding:var(--sp-4) var(--sp-4) var(--sp-3)}
.top-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3)}
.title-w{display:flex;align-items:center}
.title-w .logo{margin-right:var(--sp-2)}
.title{font-size:var(--fs-4);font-weight:var(--fw-h);line-height:var(--lh-tight)}

/* ---------- 二级页返回头 ---------- */
.bar{flex:none;display:flex;align-items:center;height:var(--bar);padding:0 var(--sp-2);margin-top:var(--sp-2)}
.bar-btn{flex:none;width:var(--tap);height:var(--tap);display:flex;align-items:center;justify-content:center;color:var(--c-text)}
.bar-t{flex:1;text-align:center;font-size:var(--fs-3);font-weight:var(--fw-b)}

/* ---------- 分段切换（视图切换 / 日期分段） ---------- */
.seg{display:flex;padding:var(--sp-1);background:var(--c-panel);border:var(--hair) solid var(--c-line);border-radius:var(--r-4)}
.seg-i{flex:1 1 0;height:var(--tap);line-height:var(--tap);text-align:center;font-size:var(--fs-2);color:var(--c-text-2);border-radius:var(--r-3);white-space:nowrap}
.seg-i.is-on{background:var(--c-inverse);color:var(--c-on-inverse);font-weight:var(--fw-b)}
.seg-i.is-wide{flex-grow:1.7}
.seg.is-compact{flex:none}
.seg.is-compact .seg-i{flex:none;width:var(--seg-w)}

/* ---------- 日期翻页 ---------- */
.datenav{display:flex;align-items:center}
.navbtn{flex:none;width:var(--tap);height:var(--tap);display:flex;align-items:center;justify-content:center;border:var(--hair) solid var(--c-line);border-radius:var(--r-4);color:var(--c-text-2)}
.datenav-t{flex:1;text-align:center;font-size:var(--fs-3);font-weight:var(--fw-b)}
.datenav-t em{font-weight:var(--fw-m);color:var(--c-text-2);margin-left:var(--sp-2)}

/* ---------- 奖励事由行：左侧橙线 ---------- */
.reward{padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3);background:var(--c-panel);border-left:var(--bold-line) solid var(--c-orange);border-radius:var(--r-3)}
.reward-t{font-size:var(--fs-2);line-height:var(--lh-body)}
.reward-t b{font-weight:var(--fw-b)}

/* ---------- 人员卡 ---------- */
.card{background:var(--c-panel);border:var(--hair) solid var(--c-line);border-radius:var(--r-5);padding:var(--sp-4);margin-bottom:var(--sp-3)}
.card.has-list{padding-bottom:var(--sp-1)}
.card.is-link{cursor:pointer}
.card-head{display:flex;align-items:center}
.avatar{flex:none;width:var(--avatar);height:var(--avatar);border-radius:var(--r-4);background:var(--c-raised);display:flex;align-items:center;justify-content:center;font-size:var(--fs-3);font-weight:var(--fw-b);margin-right:var(--sp-3)}
.who{flex:1 1 auto;min-width:0}
.who-n{font-size:var(--fs-3);font-weight:var(--fw-b);line-height:var(--lh-tight)}
.who-n.is-link{display:flex;align-items:center}
.who-n.is-link .ic{margin-left:var(--sp-1);color:var(--c-text-3)}
.who-r{font-size:var(--fs-2);color:var(--c-text-2);line-height:var(--lh-tight)}
.count{flex:none;display:flex;align-items:baseline}
.count-n{font-size:var(--fs-6);font-weight:var(--fw-h);line-height:var(--lh-num);letter-spacing:var(--ls-num)}
.count-n.is-mid{font-size:var(--fs-5)}
.count-u{font-size:var(--fs-2);color:var(--c-text-2);margin-left:var(--sp-1)}

/* 统计标签：纯文字，不做成块，免得像能点的按钮 */
.tags{display:flex;flex-wrap:wrap;margin:var(--sp-3) calc(var(--sp-4) * -1) 0 0}
.tag{flex:none;margin:0 var(--sp-4) var(--sp-1) 0;font-size:var(--fs-2);line-height:var(--lh-body);white-space:nowrap}
.tag i{color:var(--c-text-2);margin-right:var(--sp-1)}
.tag b{font-weight:var(--fw-b);color:var(--c-text)}
.card .heat + .tags{margin-top:var(--sp-2)}
.card > .tags:last-child{margin-bottom:calc(var(--sp-1) * -1)}

/* ---------- 记录列表：动作白色粗体，内容退后一层 ---------- */
.recs{margin-top:var(--sp-2);border-top:var(--hair) solid var(--c-line)}
.rec{display:flex;align-items:baseline;min-height:var(--tap);padding:var(--sp-rec) 0;border-bottom:var(--hair) solid var(--c-line);font-size:var(--fs-2);line-height:var(--lh-body)}
.rec:last-child{border-bottom:0}
.recs.is-flush{margin-top:0;border-top:0}
.recs.is-flush .rec{padding:var(--sp-3) 0}
.recs.is-flush .rec:first-child{padding-top:0}
.rec-main{flex:1 1 auto;min-width:0}
.rec-main b{font-weight:var(--fw-b);white-space:nowrap}
.rec-main span{white-space:nowrap;color:var(--c-text-2)}
.rec-main .sep{color:var(--c-text-3);margin:0 var(--sp-1)}
.rec-main .with{color:var(--c-text-3)}
.rec-main .rec-meta{display:block;font-size:var(--fs-2);color:var(--c-text-3);line-height:var(--lh-tight);margin-bottom:var(--sp-1)}
/* 角标："补""已修改" */
.mark{flex:none;height:var(--mark);line-height:calc(var(--mark) - var(--hair) * 2);padding:0 var(--sp-2);margin-left:var(--sp-2);border:var(--hair) solid var(--c-line-strong);border-radius:var(--r-2);font-size:var(--fs-1);font-weight:var(--fw-b);color:var(--c-text-2);white-space:nowrap}
/* "此条已作废"占位行：红色弱化字 + 禁止小图标 */
.rec.is-void{color:var(--c-red-dim)}
.rec.is-void .rec-main{display:flex;align-items:center}
.rec.is-void .ic{margin-right:var(--sp-2)}

/* ---------- 热度条：30 格一行、按周分组；整张卡是点击区，格子不单独点 ---------- */
.hint{font-size:var(--fs-2);color:var(--c-text-2);margin-bottom:var(--sp-3)}
.heat{display:flex;min-height:var(--tap);margin-top:var(--sp-3)}
.wk{flex:none;margin-right:var(--heat-week)}
.wk:last-child{margin-right:0}
.wk-c{display:flex}
.wk-l{margin-top:var(--sp-1);font-size:var(--fs-1);line-height:var(--lh-tight);color:var(--c-text-3);white-space:nowrap}
.h{flex:none;width:var(--heat-w);height:var(--heat-h);margin-right:var(--heat-gap);border-radius:var(--r-1);background:var(--c-heat-0)}
.h:last-child{margin-right:0}
.h1{background:var(--c-heat-1)} .h2{background:var(--c-heat-2)} .h3{background:var(--c-heat-3)} .h4{background:var(--c-heat-4)}
/* 图例 */
.legend{display:flex;align-items:flex-start;justify-content:center;padding:var(--sp-2) 0 0}
.legend-e{flex:none;font-size:var(--fs-2);line-height:var(--legend-h);color:var(--c-text-2)}
.legend-s{flex:none;width:var(--legend-w);margin:0 var(--heat-gap);text-align:center}
.legend-e:first-child{margin-right:var(--sp-2)}
.legend-e:last-child{margin-left:var(--sp-2)}
.legend-s i{display:block;height:var(--legend-h);border-radius:var(--r-1)}
.legend-s span{display:block;margin-top:var(--sp-1);font-size:var(--fs-1);color:var(--c-text-3);line-height:var(--lh-tight)}
.l0{background:var(--c-heat-0)} .l1{background:var(--c-heat-1)} .l2{background:var(--c-heat-2)} .l3{background:var(--c-heat-3)} .l4{background:var(--c-heat-4)}

/* ---------- 月历底部弹层：7 列，每格不小于 44 ---------- */
.scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-sheet);background:var(--c-scrim)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sheet);max-width:var(--page-max);max-height:var(--sheet-max);margin:0 auto;overflow-y:auto;padding:var(--sp-2) var(--sp-4) var(--sp-6);background:var(--c-panel);border-top:var(--hair) solid var(--c-line-strong);border-radius:var(--r-5) var(--r-5) 0 0}
.grab{width:var(--grab-w);height:var(--sp-1);margin:0 auto var(--sp-3);border-radius:var(--r-1);background:var(--c-line-strong)}
.cal-w{display:flex;margin-top:var(--sp-4)}
.cal-w span{flex:1 1 0;margin-right:var(--heat-week);text-align:center;font-size:var(--fs-1);line-height:var(--lh-tight);color:var(--c-text-3)}
.cal-w span:last-child{margin-right:0}
.cal-r{display:flex;margin-top:var(--heat-week)}
.d{flex:1 1 0;height:var(--tap);line-height:var(--tap);margin-right:var(--heat-week);border-radius:var(--r-2);text-align:center;font-size:var(--fs-2);font-weight:var(--fw-b);background:var(--c-heat-0);color:var(--c-text-2)}
.d:last-child{margin-right:0}
.d.is-none{background:transparent}
.d1{background:var(--c-heat-1);color:var(--c-text)} .d2{background:var(--c-heat-2);color:var(--c-text)} .d3{background:var(--c-heat-3);color:var(--c-on-orange)} .d4{background:var(--c-heat-4);color:var(--c-on-orange)}
.sheet-tip{margin-top:var(--sp-4);text-align:center;font-size:var(--fs-2);color:var(--c-text-2)}

/* ---------- 表单 ---------- */
.field{margin-top:var(--sp-5)}
.field:first-child{margin-top:var(--sp-2)}
.label{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--sp-2);font-size:var(--fs-2);font-weight:var(--fw-b);color:var(--c-text-2)}
.label em{font-weight:var(--fw-m);color:var(--c-text-3)}
/* 选项块（快捷项、多选块共用） */
.opt{flex:none;height:var(--ctl);padding:0 var(--sp-4);display:flex;align-items:center;justify-content:center;border:var(--hair) solid var(--c-line);border-radius:var(--r-4);background:var(--c-panel);font-size:var(--fs-2);color:var(--c-text);white-space:nowrap}
.opt.is-on{background:var(--c-inverse);border-color:var(--c-inverse);color:var(--c-on-inverse);font-weight:var(--fw-b)}
.opt .ic{margin-right:var(--sp-1);stroke-width:var(--stroke-b)}
/* 快捷项：三列 */
.quick{display:flex;flex-wrap:wrap;margin:0 calc(var(--sp-2) * -1) calc(var(--sp-2) * -1) 0}
.quick .opt{width:calc(33.333% - var(--sp-2));padding:0;margin:0 var(--sp-2) var(--sp-2) 0}
/* 多选块（一起干的人） */
.people{display:flex;flex-wrap:wrap}
.people .opt{min-width:var(--thumb-l);margin:0 var(--sp-2) var(--sp-2) 0}
/* 输入框 */
.input{display:flex;align-items:center;width:100%;height:var(--btn);padding:0 var(--sp-4);border:var(--hair) solid var(--c-line-strong);border-radius:var(--r-4);background:var(--c-panel);font-size:var(--fs-2)}
.input-t{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.input .ic{color:var(--c-text-3);margin-left:var(--sp-2)}
textarea.input{height:auto;min-height:var(--btn);padding:var(--sp-3) var(--sp-4);line-height:var(--lh-body)}
/* 数量步进器 */
.qty{display:flex}
.step{flex:none;width:var(--btn);height:var(--btn);display:flex;align-items:center;justify-content:center;border:var(--hair) solid var(--c-line);border-radius:var(--r-4);background:var(--c-panel);color:var(--c-text)}
.qty-box{flex:1 1 auto;height:var(--btn);line-height:calc(var(--btn) - var(--hair) * 2);margin:0 var(--sp-2);text-align:center;border:var(--hair) solid var(--c-line-strong);border-radius:var(--r-4);background:var(--c-panel)}
.qty-box b{font-size:var(--fs-4);font-weight:var(--fw-b)}
.qty-box span{font-size:var(--fs-2);color:var(--c-text-2);margin-left:var(--sp-1)}

/* ---------- 照片占位 ---------- */
.photos{display:flex;flex-wrap:wrap}
.ph{flex:none;width:var(--thumb);height:var(--thumb);margin:0 var(--sp-2) var(--sp-2) 0;border-radius:var(--r-4);background:var(--c-ph-b);background:linear-gradient(135deg,var(--c-ph-a),var(--c-ph-b));display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--c-text-3)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.is-l{width:var(--thumb-l);height:var(--thumb-l)}
.ph.is-add{background:transparent;border:var(--hair) dashed var(--c-line-strong);color:var(--c-text-2)}

/* ---------- 底部：通栏主按钮 + 标签栏 ---------- */
.dock{flex:none;display:flex;padding:var(--sp-2) var(--sp-4);background:var(--c-bg);border-top:var(--hair) solid var(--c-line)}
.dock.is-last{padding-top:var(--sp-3);padding-bottom:var(--sp-5)}
/* 按钮层级：橙色主按钮 > 白边次级 > 文字按钮；危险操作用红色文字 */
.btn{flex:1 1 0;height:var(--btn);display:flex;align-items:center;justify-content:center;border-radius:var(--r-4);font-size:var(--fs-3);font-weight:var(--fw-b);border:var(--hair) solid transparent;white-space:nowrap}
.btn + .btn{margin-left:var(--sp-2)}
.btn .ic{margin-right:var(--sp-2);stroke-width:var(--stroke-b)}
.btn-primary{background:var(--c-orange);color:var(--c-on-orange)}
.btn-ghost{flex-grow:2;border-color:var(--c-line-strong);color:var(--c-text)}
.btn-text{color:var(--c-text-2)}
.btn-quiet{color:var(--c-red)}
.tabs{flex:none;display:flex;background:var(--c-panel);border-top:var(--hair) solid var(--c-line);padding-bottom:var(--sp-2)}
.tab{flex:1 1 0;position:relative;height:var(--bar);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:var(--fs-1);color:var(--c-text-3)}
.tab .ic{margin-bottom:var(--sp-1)}
.tab.is-on{color:var(--c-text);font-weight:var(--fw-b)}
.tab.is-on:before{content:"";position:absolute;top:calc(var(--hair) * -1);left:50%;width:var(--avatar-s);margin-left:calc(var(--avatar-s) / -2);height:var(--heat-gap);background:var(--c-orange)}

/* ---------- 状态胶囊：浅底 + 字色一种样式 ---------- */
.pill{flex:none;display:inline-block;height:var(--pill);line-height:var(--pill);padding:0 var(--sp-3);margin-right:var(--sp-2);border-radius:var(--r-2);font-size:var(--fs-2);font-weight:var(--fw-b);white-space:nowrap}
.pill-green{background:var(--c-green-wash);color:var(--c-green)}
.pill-plain{background:var(--c-raised);color:var(--c-text-2)}
.pill-red{background:var(--c-red-wash);color:var(--c-red)}

/* ---------- 详情页通用块 ---------- */
.status{display:flex;align-items:center;margin-top:var(--sp-2)}
.status-due{margin-left:auto;font-size:var(--fs-2);color:var(--c-text-2)}
.h-title{margin-top:var(--sp-3);font-size:var(--fs-4);font-weight:var(--fw-h);line-height:var(--lh-tight)}
.kv{display:flex;margin-top:var(--sp-4);background:var(--c-panel);border:var(--hair) solid var(--c-line);border-radius:var(--r-5)}
.kv-i{flex:1 1 0;padding:var(--sp-3) var(--sp-4)}
.kv-i + .kv-i{border-left:var(--hair) solid var(--c-line)}
.kv-k{font-size:var(--fs-2);color:var(--c-text-3);line-height:var(--lh-tight);margin-bottom:var(--sp-2)}
.kv-v{display:flex;align-items:center;font-size:var(--fs-2);font-weight:var(--fw-b)}
.kv-v i{flex:none;width:var(--avatar-s);height:var(--avatar-s);border-radius:var(--r-3);background:var(--c-raised);display:flex;align-items:center;justify-content:center;font-size:var(--fs-1);margin-right:var(--sp-2)}
.para{margin-top:var(--sp-4);font-size:var(--fs-2);line-height:var(--lh-body);color:var(--c-text-2)}
.para + .photos{margin-top:var(--sp-3)}
.sec{display:flex;align-items:baseline;justify-content:space-between;margin:var(--sp-6) 0 var(--sp-3);font-size:var(--fs-2);font-weight:var(--fw-b);color:var(--c-text-2);letter-spacing:var(--ls-label)}
.sec em{font-weight:var(--fw-m);color:var(--c-text-3);letter-spacing:0}
.note{display:flex;align-items:center;margin-top:var(--sp-2);font-size:var(--fs-2);color:var(--c-text-3)}
.note .ic{margin-right:var(--sp-1)}

/* ---------- 时间线 ---------- */
.tl li{position:relative;padding:0 0 var(--sp-4) var(--avatar-s)}
.tl li:last-child{padding-bottom:0}
.tl li:before{content:"";position:absolute;left:var(--sp-1);top:var(--dot-top);width:var(--dot);height:var(--dot);border-radius:var(--r-round);background:var(--c-line-strong)}
.tl li:after{content:"";position:absolute;left:var(--sp-2);top:var(--sp-6);bottom:calc(var(--sp-1) * -1);width:var(--hair);background:var(--c-line)}
.tl li:last-child:after{display:none}
.tl li.is-key:before{background:var(--c-orange)}
.tl-t{font-size:var(--fs-2);color:var(--c-text-3);line-height:var(--lh-tight)}
.tl-m{margin-top:var(--sp-1);font-size:var(--fs-2);line-height:var(--lh-body)}
.tl-m b{font-weight:var(--fw-b)}
.tl-m em{font-weight:var(--fw-b);color:var(--c-orange)}
.tl-n{margin-top:var(--sp-1);padding:var(--sp-2) var(--sp-3);background:var(--c-panel);border-radius:var(--r-3);font-size:var(--fs-2);line-height:var(--lh-body);color:var(--c-text)}

/* ---------- 金额（"我的奖金"一屏用，该屏【待定】，样式先照方向稿提取） ---------- */
.hero{background:var(--c-panel);border:var(--hair) solid var(--c-line);border-radius:var(--r-5);padding:var(--sp-5) var(--sp-4) var(--sp-4);margin-top:var(--sp-4)}
.hero-k{font-size:var(--fs-2);color:var(--c-text-2);line-height:var(--lh-tight)}
.hero-v{margin-top:var(--sp-2);line-height:var(--lh-num);white-space:nowrap}
.hero-v i{font-size:var(--fs-4);font-weight:var(--fw-b);color:var(--c-orange);margin-right:var(--sp-1)}
.hero-v b{font-size:var(--fs-6);font-weight:var(--fw-h);letter-spacing:var(--ls-num)}
.meter{display:flex;height:var(--meter);margin-top:var(--sp-5);border-radius:var(--r-1);overflow:hidden;background:var(--c-raised)}
.meter i{flex:none;display:block;height:var(--meter);background:var(--c-green);margin-right:var(--heat-gap)}
.meter-l{display:flex;justify-content:space-between;margin-top:var(--sp-2);font-size:var(--fs-2);color:var(--c-text-2)}
.meter-l b{font-weight:var(--fw-b);color:var(--c-text);margin-left:var(--sp-1)}
.hero-y{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:var(--hair) solid var(--c-line);font-size:var(--fs-2);color:var(--c-text-2)}
.hero-y b{font-size:var(--fs-4);font-weight:var(--fw-b);color:var(--c-text)}
.bonus{padding:var(--sp-4) 0;border-bottom:var(--hair) solid var(--c-line)}
.bonus:first-child{padding-top:0}
.bonus:last-child{border-bottom:0;padding-bottom:0}
.bonus-a{display:flex;align-items:baseline;justify-content:space-between}
.bonus-r{flex:1 1 auto;min-width:0;font-size:var(--fs-2);line-height:var(--lh-body)}
.bonus-m{flex:none;margin-left:var(--sp-3);font-size:var(--fs-3);font-weight:var(--fw-b)}
.bonus-b{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-2)}
.bonus-d{font-size:var(--fs-2);color:var(--c-text-3)}
.bonus-b .pill{margin-right:0}
.bonus.is-void .bonus-r,.bonus.is-void .bonus-m{color:var(--c-text-3);text-decoration:line-through}
.bonus-w{margin-top:var(--sp-2);font-size:var(--fs-2);line-height:var(--lh-body);color:var(--c-red-dim)}