/* ============================================================
   人生工作台 · 设计系统 v2
   取材自三份原件：
   · 财务库封面 —— 金色衬线大标题 / 细金线 / 米灰纸面
   · Personal OS —— 靛蓝章节色 + 红色圆点列表
   · 每日复盘 —— 桃色提示块 + 紫/黄彩色表头条
   ============================================================ */

:root{
  /* 纸面 */
  --paper:#F6F2EA;      /* 页面底色：暖米 */
  --card:#FFFFFF;
  --card2:#FFFDF8;      /* 奶油色卡片 */
  --line:#E7E0D2;       /* 暖灰描边 */
  --line2:#F0EBE0;
  --ink:#1B1814;        /* 墨 */
  --ink2:#5C554B;
  --ink3:#948C7E;

  /* 主色：金棕（财务） */
  --gold:#A9762F;
  --gold-2:#C9A227;
  --gold-l:#F7F0E2;
  --gold-d:#7E5720;

  /* 副色：靛蓝（人生 / Personal OS） */
  --blue:#3E5C9A;
  --blue-l:#EBEFF7;
  --blue-d:#2C4472;

  /* 语义色 */
  --green:#2F7D57;
  --green-l:#E7F1EA;
  --red:#B4433A;
  --red-l:#FAECE9;
  --amber:#B5832A;
  --amber-l:#FAF0DC;
  --purple:#6B5B9A;
  --purple-l:#EEEAF6;

  /* 彩色表头条（取自每日复盘 docx） */
  --band-purple:#E9E4F4;
  --band-yellow:#FAF3CC;
  --band-mint:#DEEFE3;
  --band-peach:#FBEBDC;

  --chart-1:#C9A227; --chart-2:#3E5C9A; --chart-3:#2F7D57; --chart-4:#B5832A;
  --chart-5:#6B5B9A; --chart-6:#2B7A7A; --chart-7:#B4433A; --chart-8:#C3BAA8;

  --r:16px; --r-s:11px;
  --sh:0 1px 2px rgba(58,44,24,.04), 0 10px 30px rgba(58,44,24,.06);
  --sh-s:0 1px 2px rgba(58,44,24,.05);

  --sans:"Microsoft YaHei UI","Microsoft YaHei","PingFang SC","Segoe UI",system-ui,sans-serif;
  --serif:"Noto Serif SC","Source Han Serif SC","华文中宋","Songti SC",Georgia,serif;
  --num:"Noto Serif SC",Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); background:var(--paper); color:var(--ink);
  font-size:14px; line-height:1.65; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1200px 500px at 88% -8%, rgba(201,162,39,.06), transparent 60%),
    radial-gradient(900px 420px at 0% 0%, rgba(62,92,154,.05), transparent 55%);
  background-attachment:fixed;
}
a{color:var(--blue);text-decoration:none}
button{font-family:inherit}
::selection{background:#F3E3C3}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#DCD3C2;border-radius:8px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#C9BEA9;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 外壳 ---------- */
.app{display:flex;min-height:100vh}
.rail{
  width:224px;flex:0 0 224px;background:#171512;color:#CFC8BC;
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  border-right:1px solid #241F19;
}
.rail::after{content:"";position:absolute;right:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(201,162,39,.5),transparent)}
.rail .brand{padding:22px 20px 16px}
.rail .brand b{
  display:block;color:#F4EFE4;font-family:var(--serif);font-weight:600;
  font-size:16px;letter-spacing:.06em;line-height:1.35;
}
.rail .brand span{display:block;color:#8B8069;font-size:10px;margin-top:6px;letter-spacing:.22em}
.switcher{display:flex;gap:6px;padding:0 14px 14px}
.switcher button{
  flex:1;padding:8px 6px;border-radius:10px;border:1px solid #2C2620;background:#1D1A16;
  color:#9A9082;font-size:12.5px;cursor:pointer;transition:.18s;letter-spacing:.06em;
}
.switcher button:hover{color:#DDD5C6;border-color:#3A332B}
.switcher button.on{
  background:linear-gradient(180deg,#2E2820,#221E19);color:#F6EFDF;border-color:#5A4A2C;
  box-shadow:0 0 0 1px rgba(201,162,39,.18), 0 6px 18px rgba(0,0,0,.35);
}
.nav{padding:4px 10px;overflow:auto;flex:1;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent)}
.nav::-webkit-scrollbar-thumb{background:#332C24;background-clip:content-box}
.nav .grp{font-size:10px;color:#6E6455;letter-spacing:.2em;padding:10px 10px 6px}
.nav a{
  display:flex;align-items:center;gap:9px;padding:6px 11px;border-radius:9px;
  color:#ADA493;font-size:12.5px;margin-bottom:1px;cursor:pointer;transition:.14s;
  border:1px solid transparent;
}
.nav a:hover{background:#221E19;color:#EAE3D6}
.nav a.on{
  background:linear-gradient(90deg,rgba(201,162,39,.16),rgba(201,162,39,.03));
  color:#FAF3E3;border-color:rgba(201,162,39,.28);
}
.nav a .ic{width:16px;text-align:center;opacity:.8;font-size:12px}
.nav a.on .ic{opacity:1;color:var(--gold-2)}
.rail .foot{padding:11px 16px 13px;border-top:1px solid #262018;font-size:10.5px;color:#6F6555;background:#171512;position:relative;z-index:2}
.rail .foot .btn{background:#1D1A16;border-color:#302A22;color:#C4BBAA}
.rail .foot .btn:hover{background:#252017;color:#EFE7D8}
.rail .foot a{color:#7E7461 !important}
.rail .foot a:hover{color:var(--gold-2) !important}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  height:66px;background:rgba(250,247,241,.82);backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;
  padding:0 28px;position:sticky;top:0;z-index:30;
}
.topbar h1{font-size:17px;margin:0;font-weight:600;letter-spacing:.02em}
.topbar .sub{color:var(--ink3);font-size:12px;margin-left:2px}
.spacer{flex:1}
.content{padding:26px 30px 72px;max-width:1560px;width:100%;margin:0 auto}

/* ---------- 封面式页头 ---------- */
.hero{
  position:relative;border-radius:20px;overflow:hidden;margin-bottom:22px;
  background:
    radial-gradient(700px 220px at 12% -30%, rgba(201,162,39,.16), transparent 70%),
    linear-gradient(135deg,#FFFDF8 0%,#FBF7EE 55%,#F6F0E3 100%);
  border:1px solid #EBE2CF;
  padding:30px 34px 26px;
  box-shadow:0 1px 2px rgba(58,44,24,.04), 0 18px 40px -24px rgba(58,44,24,.35);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 160px at 85% 120%, rgba(62,92,154,.07), transparent 70%);
}
.hero .eyebrow{
  font-size:10.5px;letter-spacing:.34em;color:var(--gold);text-transform:uppercase;
  display:flex;align-items:center;gap:10px;
}
.hero .eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(201,162,39,.5),transparent)}
.hero h1{
  font-family:var(--serif);font-weight:600;font-size:31px;line-height:1.28;
  margin:10px 0 0;letter-spacing:.02em;color:#241E15;
}
.hero h1 em{font-style:normal;background:linear-gradient(180deg,#C9A227,#8E6425);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{color:var(--ink2);font-size:13.5px;margin-top:8px;max-width:70ch}
.hero .rule{display:flex;align-items:center;gap:12px;margin-top:18px}
.hero .rule i{flex:1;height:1px;background:linear-gradient(90deg,transparent,#D9C79E,transparent)}
.hero .rule b{width:6px;height:6px;background:var(--gold-2);transform:rotate(45deg);opacity:.85}
.hero .metas{display:flex;gap:26px;flex-wrap:wrap;margin-top:16px}
.hero .metas .m .n{font-family:var(--num);font-size:22px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.hero .metas .m .l{font-size:11.5px;color:var(--ink3);letter-spacing:.06em}
.hero .metas .m .n.gold{color:var(--gold-d)} .hero .metas .m .n.blue{color:var(--blue-d)}
.hero .metas .m .n.green{color:var(--green)} .hero .metas .m .n.red{color:var(--red)}
.hero .acts{position:absolute;right:26px;top:26px;display:flex;gap:8px;align-items:center}
.hero.blue .eyebrow{color:var(--blue)}
.hero.blue h1 em{background:linear-gradient(180deg,#5C7CBE,#2C4472);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero.blue{background:radial-gradient(700px 220px at 12% -30%, rgba(62,92,154,.13), transparent 70%),linear-gradient(135deg,#FDFDFF 0%,#F7F8FC 55%,#EFF2F9 100%);border-color:#DFE4EF}
.hero.blue::before{background:radial-gradient(600px 160px at 85% 120%, rgba(201,162,39,.08), transparent 70%)}
.hero .quote-lite{font-family:var(--serif);font-size:16px;color:#3A3327;margin-top:10px;letter-spacing:.02em}
.hero .hintline{font-size:11.5px;color:var(--ink3);margin-top:6px}

/* ---------- 卡片 ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-s);position:relative;
}
.card .hd{display:flex;align-items:center;gap:10px;padding:15px 20px 13px;border-bottom:1px solid var(--line2)}
.card .hd h3{
  margin:0;font-size:14px;font-weight:600;letter-spacing:.02em;color:#241E15;
  display:flex;align-items:center;gap:8px;
}
.card .hd h3::before{content:"";width:3px;height:13px;border-radius:2px;background:linear-gradient(180deg,var(--gold-2),var(--gold))}
.card .hd .hint{color:var(--ink3);font-size:11.5px;letter-spacing:.02em}
.card .bd{padding:18px 20px}
.card .bd.tight{padding:0}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g23{grid-template-columns:2fr 1fr}
.g32{grid-template-columns:1fr 2fr}
@media(max-width:1240px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr 1fr}.g23,.g32{grid-template-columns:1fr}}
@media(max-width:820px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- 指标卡 ---------- */
.kpi{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--sh-s);position:relative;overflow:hidden;
  transition:.18s;
}
.kpi:hover{transform:translateY(-1px);box-shadow:var(--sh)}
.kpi::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--gold-2),transparent);opacity:.55;
}
.kpi .k{font-size:11.5px;color:var(--ink3);letter-spacing:.1em;display:flex;align-items:center;gap:6px}
.kpi .v{font-family:var(--num);font-size:27px;font-weight:600;letter-spacing:-.01em;margin-top:6px;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .d{font-size:11.5px;color:var(--ink3);margin-top:6px}
.kpi.gold .v{color:var(--gold-d)}
.kpi.green .v{color:var(--green)}
.kpi.red .v{color:var(--red)}
.kpi.blue .v{color:var(--blue-d)}
.kpi.green::after{background:linear-gradient(180deg,var(--green),transparent)}
.kpi.red::after{background:linear-gradient(180deg,var(--red),transparent)}
.kpi.blue::after{background:linear-gradient(180deg,var(--blue),transparent)}
.kpi.hero{
  background:linear-gradient(150deg,#FFFCF5,#FBF4E6);
  border-color:#EADFC7;
}
.kpi.hero .v{font-size:31px}

/* ---------- 表格 ---------- */
.tbl-wrap{overflow:auto;border-radius:0 0 var(--r) var(--r)}
table.tbl{width:100%;min-width:600px;border-collapse:separate;border-spacing:0;font-size:13px}
.tbl th{
  text-align:left;font-weight:600;color:#7A7264;font-size:11px;letter-spacing:.12em;
  padding:11px 16px;background:#FBF8F1;border-bottom:1px solid var(--line);white-space:nowrap;
  position:sticky;top:0;z-index:1;
}
.tbl td{padding:11px 16px;border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl td:first-child{min-width:88px;white-space:nowrap}
.tbl td:nth-child(2){min-width:170px}
.tbl td .bar{width:100%;min-width:80px}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover td{background:#FDFAF3}
.tbl tr:last-child td{border-bottom:none}
.tbl .num{font-variant-numeric:tabular-nums;text-align:right;font-feature-settings:"tnum"}
.tbl .muted{color:var(--ink3)}
.tbl .act{opacity:0;transition:.15s;white-space:nowrap}
.tbl tr:hover .act{opacity:1}
.mini{font-size:11.5px;color:var(--ink3);line-height:1.5}

/* ---------- 彩色表头条（来自每日复盘） ---------- */
.band{
  display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:9px;
  font-weight:600;font-size:13px;color:#2A2418;margin-bottom:10px;
}
.band .r{margin-left:auto;font-weight:500;font-size:11.5px;color:#6B6252;letter-spacing:.06em}
.band.purple{background:var(--band-purple)}
.band.yellow{background:var(--band-yellow)}
.band.mint{background:var(--band-mint)}
.band.peach{background:var(--band-peach)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;
  color:var(--ink);padding:7px 13px;border-radius:10px;font-size:12.5px;cursor:pointer;
  transition:.16s;letter-spacing:.02em;
}
.btn:hover{border-color:#D5C9AF;background:#FDFAF3;transform:translateY(-.5px)}
.btn:active{transform:none}
.btn.primary{background:linear-gradient(180deg,#26221B,#171410);color:#F6EFDF;border-color:#26221B}
.btn.primary:hover{background:#0F0D0A;border-color:#0F0D0A}
.btn.gold{background:linear-gradient(180deg,#B98B3E,#A9762F);border-color:#9C6C28;color:#fff}
.btn.gold:hover{background:#9C6C28}
.btn.blue{background:linear-gradient(180deg,#4A6AAB,#3E5C9A);border-color:#36528C;color:#fff}
.btn.sm{padding:4px 10px;font-size:11.5px;border-radius:8px}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink3)}
.btn.ghost:hover{background:#F4EFE4;color:var(--ink);transform:none}
.btn.danger{color:var(--red);border-color:#EFD9D5}
.btn.danger:hover{background:var(--red-l)}

/* ---------- 胶囊 ---------- */
.pill{
  display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;
  font-size:11px;line-height:1.7;letter-spacing:.02em;white-space:nowrap;border:1px solid transparent;
}
.pill.ok{background:var(--green-l);color:var(--green);border-color:#D3E7DA}
.pill.warn{background:var(--amber-l);color:var(--amber);border-color:#F0E0BE}
.pill.bad{background:var(--red-l);color:var(--red);border-color:#F1D8D4}
.pill.info{background:var(--blue-l);color:var(--blue-d);border-color:#D8E1F1}
.pill.gold{background:var(--gold-l);color:var(--gold-d);border-color:#EBDCC0}
.pill.gray{background:#F5F1E9;color:var(--ink2);border-color:#EAE3D6}
.pill.purple{background:var(--purple-l);color:var(--purple);border-color:#DED7EE}

/* ---------- 进度 ---------- */
.bar{height:8px;border-radius:999px;background:#EFEADF;overflow:hidden;position:relative}
.bar > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#C9A227,#A9762F);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.bar.thin{height:5px}
.bar > i.g{background:linear-gradient(90deg,#4E9C74,#2F7D57)}
.bar > i.b{background:linear-gradient(90deg,#5C7CBE,#3E5C9A)}
.bar > i.r{background:linear-gradient(90deg,#C96A5C,#B4433A)}

/* ---------- 区块标题 ---------- */
.sechead{display:flex;align-items:flex-end;gap:14px;margin:4px 0 18px}
.sechead h2{
  margin:0;font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:.02em;color:#241E15;
}
.sechead h2::after{
  content:"";display:block;width:34px;height:2px;margin-top:7px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-2),transparent);
}
.sechead p{margin:0;color:var(--ink3);font-size:12.5px;letter-spacing:.02em}

/* ---------- 表单 ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.form .full{grid-column:1/-1}
.field label{display:block;font-size:11.5px;color:var(--ink2);margin-bottom:5px;font-weight:600;letter-spacing:.04em}
.field input,.field select,.field textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:10px;font-size:13px;
  font-family:inherit;background:#FFFDF8;color:var(--ink);outline:none;transition:.15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:#C9B98F;box-shadow:0 0 0 3px rgba(201,162,39,.12);background:#fff;
}
.field textarea{min-height:74px;resize:vertical}

/* ---------- 弹窗 ---------- */
.mask{position:fixed;inset:0;background:rgba(24,20,14,.42);backdrop-filter:blur(3px);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{
  background:#FFFDF9;border-radius:18px;box-shadow:0 30px 80px rgba(30,22,10,.3);
  width:min(720px,96vw);max-height:88vh;display:flex;flex-direction:column;
  animation:pop .18s cubic-bezier(.2,.9,.3,1);border:1px solid #EFE7D6;
}
@keyframes pop{from{transform:translateY(10px) scale(.99);opacity:0}to{transform:none;opacity:1}}
.modal .mh{display:flex;align-items:center;padding:18px 22px 14px;border-bottom:1px solid var(--line2)}
.modal .mh h3{margin:0;font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:.02em}
.modal .mb{padding:20px 22px;overflow:auto}
.modal .mf{display:flex;justify-content:flex-end;gap:9px;padding:15px 22px;border-top:1px solid var(--line2);background:#FCF9F2;border-radius:0 0 18px 18px}

/* ---------- 提示 ---------- */
.toasts{position:fixed;right:22px;bottom:22px;z-index:200;display:flex;flex-direction:column;gap:9px}
.toast{
  background:linear-gradient(180deg,#26221B,#171410);color:#F6EFDF;padding:11px 16px;border-radius:11px;
  font-size:12.5px;box-shadow:0 12px 32px rgba(0,0,0,.28);animation:pop .18s;border:1px solid #3A3226;
}

/* ---------- 其它 ---------- */
.empty{padding:30px;text-align:center;color:var(--ink3);font-size:12.5px;letter-spacing:.02em}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:16px 0}
.row{display:flex;align-items:center;gap:10px}
.wrap{flex-wrap:wrap}
.right{margin-left:auto}
.quote{
  font-size:12.5px;color:var(--ink2);background:#FBF7EF;border-radius:12px;padding:12px 14px;
  border:1px solid #EDE4D2;line-height:1.75;
}
.stat{display:flex;flex-direction:column;gap:2px}
.stat .n{font-family:var(--num);font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat .l{font-size:11.5px;color:var(--ink3);letter-spacing:.06em}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--ink2)}
.legend i{display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:6px}
svg{display:block}
.clickable{cursor:pointer}

/* ---------- 顶栏搜索 ---------- */
.searchbox{position:relative;width:250px;transition:width .2s}
.searchbox:focus-within{width:330px}
.searchbox input{
  width:100%;padding:8px 12px 8px 32px;border:1px solid var(--line);border-radius:11px;
  font-size:12.5px;font-family:inherit;outline:none;background:#FFFDF8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23948C7E' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 10px 9px;
  transition:.18s;
}
.searchbox input:focus{border-color:#C9B98F;box-shadow:0 0 0 3px rgba(201,162,39,.12);background:#fff}
.search-results{
  position:absolute;top:42px;right:0;width:390px;max-height:430px;overflow:auto;background:#FFFDF9;
  border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 56px rgba(40,30,12,.18);z-index:60;padding:7px;
}
.search-results .item{display:flex;gap:10px;align-items:center;padding:9px 11px;border-radius:9px;cursor:pointer}
.search-results .item:hover{background:#F7F2E7}
.search-results .item .tag{font-size:10px;color:var(--ink3);background:#F3EEE3;border-radius:5px;padding:1px 7px;flex:0 0 auto;letter-spacing:.06em}
.search-results .item .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-results .item .sub{font-size:11px;color:var(--ink3)}
.search-results .none{padding:18px;text-align:center;color:var(--ink3);font-size:12px}

/* ---------- 响应式 ---------- */
.only-narrow{display:none}
@media(max-width:1100px){
  .hide-narrow{display:none !important}
  .searchbox{width:200px}
  .searchbox:focus-within{width:260px}
  .content{padding:20px 18px 60px}
}
@media(max-width:900px){
  .only-narrow{display:inline-flex}
  .rail{
    position:fixed;left:0;top:0;bottom:0;z-index:80;transform:translateX(-100%);
    transition:transform .22s cubic-bezier(.2,.9,.3,1);box-shadow:16px 0 50px rgba(0,0,0,.3);
    width:238px;flex-basis:238px;
  }
  .rail.open{transform:none}
  .topbar{padding:0 14px;gap:8px;height:58px}
  .sechead h2{font-size:19px}
  .hero{padding:22px 20px 20px;border-radius:16px}
  .hero h1{font-size:24px}
  .hero .metas{gap:18px}
  .kpi .v{font-size:22px}
  .kpi.hero .v{font-size:25px}
  .searchbox{width:150px}
  .searchbox:focus-within{width:190px}
  .modal{width:96vw}
  .form{grid-template-columns:1fr}
}
@media(max-width:560px){
  .searchbox{display:none}
  .topbar h1{font-size:15px}
  .hero h1{font-size:20px}
  .hero .metas .m .n{font-size:18px}
}

/* ============================================================
   主题二 / 三：Paper & Ink（Claude 风格）
   两套共享结构，只换色：claude（纸墨）/ claude-dark（纸墨·深）
   ============================================================ */
html[data-theme="claude"]{
  --paper:#F0EEE6; --card:#FFFFFF; --card2:#FAF9F5;
  --line:#E3E0D5; --line2:#EFEDE5;
  --ink:#141413; --ink2:#5C5A54; --ink3:#8C877C;

  --gold:#C2603F; --gold-2:#D97757; --gold-l:#F6E7DF; --gold-d:#A8502F;
  --blue:#5B6B8C; --blue-l:#EBEDF3; --blue-d:#3F4B63;
  --green:#3F7A5A; --green-l:#E8F0EA;
  --red:#B4472F; --red-l:#F8E9E4;
  --amber:#9A6B2F; --amber-l:#F6EEE0;
  --purple:#6E6584; --purple-l:#EFEDF3;

  --band-purple:#EDEAF2; --band-yellow:#F7F1DC; --band-mint:#E6F0E9; --band-peach:#FAE9DF;

  --rail-bg:#F0EEE6; --rail-fg:#57544E; --rail-on-bg:#FFFFFF; --rail-on-bd:#DCD8CB;
  --rail-hover:#EAE7DD; --rail-line:#E3E0D5; --rail-brand:#141413; --rail-sub:#8C877C;
  --topbar-bg:rgba(240,238,230,.86); --input-bg:#FFFFFF;
  --modal-bg:#FAF9F5; --modal-foot:#F4F2EA; --mask:rgba(20,20,19,.3);

  --chart-1:#D97757; --chart-2:#7E8CA6; --chart-3:#6F9A7C; --chart-4:#C99B6A;
  --chart-5:#8E86A6; --chart-6:#7DA3A3; --chart-7:#B4472F; --chart-8:#C9C2B2;

  --r:12px; --r-s:8px; --sh:none; --sh-s:none;
}

html[data-theme="claude-dark"]{
  --paper:#262624; --card:#30302E; --card2:#2A2A28;
  --line:#3E3E3B; --line2:#383835;
  --ink:#F2F0E9; --ink2:#C3BFB4; --ink3:#918D82;

  --gold:#D97757; --gold-2:#E08A6C; --gold-l:#3A2C26; --gold-d:#EDB49B;
  --blue:#8FA4C4; --blue-l:#2C323C; --blue-d:#B3C3DA;
  --green:#84B393; --green-l:#28332C;
  --red:#DE8773; --red-l:#3A2823;
  --amber:#D3AC6E; --amber-l:#362F24;
  --purple:#A69BC0; --purple-l:#302C39;

  --band-purple:#332F3D; --band-yellow:#37321F; --band-mint:#243329; --band-peach:#3A2A22;

  --rail-bg:#1F1F1D; --rail-fg:#B9B5AA; --rail-on-bg:#30302E; --rail-on-bd:#46443F;
  --rail-hover:#2A2A28; --rail-line:#33332F; --rail-brand:#F2F0E9; --rail-sub:#8A867B;
  --topbar-bg:rgba(38,38,36,.86); --input-bg:#2E2E2B;
  --modal-bg:#2C2C2A; --modal-foot:#262624; --mask:rgba(0,0,0,.5);

  --chart-1:#E08A6C; --chart-2:#8FA4C4; --chart-3:#84B393; --chart-4:#D3AC6E;
  --chart-5:#A69BC0; --chart-6:#7FAFAB; --chart-7:#DE8773; --chart-8:#6E6B63;

  --r:12px; --r-s:8px; --sh:none; --sh-s:none;
}

/* ---------- 共用结构 ---------- */
html[data-theme^="claude"] body{
  background:var(--paper);background-image:none;
  font-family:"Styrene B","Söhne",-apple-system,"Segoe UI","Microsoft YaHei UI","PingFang SC",sans-serif;
  font-size:14.5px;line-height:1.68;letter-spacing:.005em;color:var(--ink);
}
html[data-theme^="claude"] ::selection{background:var(--gold-l)}
html[data-theme^="claude"] ::-webkit-scrollbar-thumb{background:#CFC9BA;background-clip:content-box}
html[data-theme="claude-dark"] ::-webkit-scrollbar-thumb{background:#4A4842;background-clip:content-box}

/* 侧栏 */
html[data-theme^="claude"] .rail{background:var(--rail-bg);border-right:1px solid var(--rail-line);color:var(--rail-fg)}
html[data-theme^="claude"] .rail::after{display:none}
html[data-theme^="claude"] .rail .brand b{color:var(--rail-brand);font-family:var(--serif);font-weight:600;font-size:15.5px;letter-spacing:.01em}
html[data-theme^="claude"] .rail .brand span{color:var(--rail-sub);letter-spacing:.16em}
html[data-theme^="claude"] .switcher button{background:transparent;border:1px solid var(--rail-line);color:var(--rail-fg)}
html[data-theme^="claude"] .switcher button:hover{background:var(--rail-hover);color:var(--ink)}
html[data-theme^="claude"] .switcher button.on{background:var(--rail-on-bg);color:var(--ink);border-color:var(--rail-on-bd);box-shadow:none}
html[data-theme^="claude"] .nav .grp{color:var(--rail-sub);letter-spacing:.14em}
html[data-theme^="claude"] .nav a{color:var(--rail-fg);border:1px solid transparent}
html[data-theme^="claude"] .nav a:hover{background:var(--rail-hover);color:var(--ink)}
html[data-theme^="claude"] .nav a.on{background:var(--rail-on-bg);color:var(--ink);border-color:var(--rail-on-bd);box-shadow:0 1px 2px rgba(0,0,0,.06)}
html[data-theme^="claude"] .nav a.on .ic{color:var(--gold-2)}
html[data-theme^="claude"] .rail .foot{background:var(--rail-bg);border-top:1px solid var(--rail-line);color:var(--rail-sub)}
html[data-theme^="claude"] .rail .foot .btn{background:var(--rail-on-bg);border-color:var(--rail-line);color:var(--rail-fg)}
html[data-theme^="claude"] .rail .foot .btn:hover{background:var(--rail-hover);color:var(--ink)}
html[data-theme^="claude"] .rail .foot a{color:var(--rail-sub) !important}
html[data-theme^="claude"] .rail .foot a:hover{color:var(--gold-2) !important}

/* 顶栏 */
html[data-theme^="claude"] .topbar{background:var(--topbar-bg);border-bottom:1px solid var(--line)}
html[data-theme^="claude"] .topbar h1{font-weight:600;letter-spacing:0}
html[data-theme^="claude"] .theme-toggle{background:var(--card);border-color:var(--line);color:var(--ink2)}
html[data-theme^="claude"] .theme-toggle b{color:var(--ink)}

/* 封面区：去掉卡片与渐变 */
html[data-theme^="claude"] .hero{
  background:none;border:0;box-shadow:none;border-radius:0;
  padding:6px 0 22px;margin-bottom:20px;border-bottom:1px solid var(--line);
}
html[data-theme^="claude"] .hero::before{display:none}
html[data-theme^="claude"] .hero .eyebrow{color:var(--gold-2);letter-spacing:.18em;font-size:10.5px;font-weight:600}
html[data-theme^="claude"] .hero .eyebrow::after{display:none}
html[data-theme^="claude"] .hero h1{font-size:32px;line-height:1.25;color:var(--ink);font-weight:500;margin-top:12px;letter-spacing:-.005em}
html[data-theme^="claude"] .hero h1 em{background:none;-webkit-text-fill-color:var(--gold-2);color:var(--gold-2)}
html[data-theme^="claude"] .hero .lede{color:var(--ink2);font-size:14px;max-width:64ch;margin-top:10px}
html[data-theme^="claude"] .hero .rule{display:none}
html[data-theme^="claude"] .hero .metas{margin-top:20px;gap:32px}
html[data-theme^="claude"] .hero .metas .m .n{font-size:23px;font-weight:500;color:var(--ink)}
html[data-theme^="claude"] .hero .metas .m .n.gold,
html[data-theme^="claude"] .hero .metas .m .n.blue,
html[data-theme^="claude"] .hero .metas .m .n.green,
html[data-theme^="claude"] .hero .metas .m .n.red{color:var(--ink)}
html[data-theme^="claude"] .hero .metas .m:first-child .n{color:var(--gold-2)}
html[data-theme^="claude"] .hero .metas .m .l{color:var(--ink3);letter-spacing:.04em}
html[data-theme^="claude"] .hero .quote-lite{color:var(--ink)}

/* 卡片 / 指标卡 */
html[data-theme^="claude"] .card,
html[data-theme^="claude"] .kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:none}
html[data-theme^="claude"] .kpi::after{display:none}
html[data-theme^="claude"] .kpi:hover{transform:none;box-shadow:0 1px 2px rgba(0,0,0,.06)}
html[data-theme^="claude"] .kpi.hero{background:var(--card)}
html[data-theme^="claude"] .kpi .v{font-size:25px;font-weight:500;color:var(--ink)}
html[data-theme^="claude"] .kpi.gold .v,
html[data-theme^="claude"] .kpi.green .v,
html[data-theme^="claude"] .kpi.red .v,
html[data-theme^="claude"] .kpi.blue .v{color:var(--ink)}
html[data-theme^="claude"] .kpi .k{letter-spacing:.06em;color:var(--ink3)}
html[data-theme^="claude"] .card .hd{border-bottom:1px solid var(--line2);padding:14px 18px}
html[data-theme^="claude"] .card .hd h3{font-size:13.5px;font-weight:600;color:var(--ink)}
html[data-theme^="claude"] .card .hd h3::before{display:none}
html[data-theme^="claude"] .card .bd{padding:16px 18px}
html[data-theme^="claude"] .empty,
html[data-theme^="claude"] .mini,
html[data-theme^="claude"] .hint{color:var(--ink3)}

/* 表格 */
html[data-theme^="claude"] .tbl th{background:var(--card2);color:var(--ink3);letter-spacing:.08em;font-weight:600;border-bottom:1px solid var(--line)}
html[data-theme^="claude"] .tbl td{border-bottom:1px solid var(--line2)}
html[data-theme^="claude"] .tbl tbody tr:hover td{background:var(--card2)}

/* 按钮 */
html[data-theme^="claude"] .btn{border-radius:8px;background:var(--card);border-color:var(--line);color:var(--ink)}
html[data-theme^="claude"] .btn:hover{background:var(--card2);border-color:var(--rail-on-bd);transform:none}
html[data-theme^="claude"] .btn.primary{background:#141413;border-color:#141413;color:#F7F5EF}
html[data-theme="claude-dark"] .btn.primary{background:#EDEAE1;border-color:#EDEAE1;color:#1B1B19}
html[data-theme^="claude"] .btn.primary:hover{opacity:.9}
html[data-theme^="claude"] .btn.gold{background:var(--gold-2);border-color:var(--gold-2);color:#fff}
html[data-theme^="claude"] .btn.blue{background:var(--blue-d);border-color:var(--blue-d);color:#fff}
html[data-theme="claude-dark"] .btn.blue{color:#1B1B19}
html[data-theme^="claude"] .btn.ghost{background:transparent;border-color:transparent;color:var(--ink3)}
html[data-theme^="claude"] .btn.ghost:hover{background:var(--card2);color:var(--ink)}
html[data-theme^="claude"] .btn.danger{background:var(--card);color:var(--red);border-color:var(--line)}

/* 胶囊 */
html[data-theme^="claude"] .pill{border-color:transparent;font-weight:500}
html[data-theme^="claude"] .pill.ok{background:var(--green-l);color:var(--green)}
html[data-theme^="claude"] .pill.warn{background:var(--amber-l);color:var(--amber)}
html[data-theme^="claude"] .pill.bad{background:var(--red-l);color:var(--red)}
html[data-theme^="claude"] .pill.info{background:var(--blue-l);color:var(--blue-d)}
html[data-theme^="claude"] .pill.gold{background:var(--gold-l);color:var(--gold-d)}
html[data-theme^="claude"] .pill.purple{background:var(--purple-l);color:var(--purple)}
html[data-theme^="claude"] .pill.gray{background:var(--line2);color:var(--ink2)}

/* 进度条 */
html[data-theme^="claude"] .bar{background:var(--line2)}
html[data-theme^="claude"] .bar > i{background:var(--gold-2)}
html[data-theme^="claude"] .bar > i.g{background:var(--chart-3)}
html[data-theme^="claude"] .bar > i.b{background:var(--chart-2)}
html[data-theme^="claude"] .bar > i.r{background:var(--chart-7)}

/* 标题 */
html[data-theme^="claude"] .sechead h2{font-size:24px;font-weight:500;color:var(--ink)}
html[data-theme^="claude"] .sechead h2::after{display:none}
html[data-theme^="claude"] .sechead p{color:var(--ink3)}

/* 表单 / 弹窗 */
html[data-theme^="claude"] .field input,
html[data-theme^="claude"] .field select,
html[data-theme^="claude"] .field textarea{background:var(--input-bg);border-color:var(--line);border-radius:8px;color:var(--ink)}
html[data-theme^="claude"] .field input:focus,
html[data-theme^="claude"] .field select:focus,
html[data-theme^="claude"] .field textarea:focus{border-color:var(--rail-on-bd);box-shadow:0 0 0 3px rgba(128,128,128,.12)}
html[data-theme^="claude"] .modal{background:var(--modal-bg);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.22)}
html[data-theme^="claude"] .modal .mh h3{font-size:16px;font-weight:600}
html[data-theme^="claude"] .modal .mf{background:var(--modal-foot);border-radius:0 0 14px 14px}
html[data-theme^="claude"] .mask{background:var(--mask)}
html[data-theme^="claude"] .toast{background:#141413;border-color:#141413;color:#F7F5EF;border-radius:10px}
html[data-theme="claude-dark"] .toast{background:#EDEAE1;border-color:#EDEAE1;color:#1B1B19}
html[data-theme^="claude"] .quote{background:var(--card2);border-color:var(--line);border-radius:10px;color:var(--ink2)}
html[data-theme^="claude"] .divider{background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* 搜索 */
html[data-theme^="claude"] .searchbox input{background-color:var(--input-bg);border-radius:9px;color:var(--ink)}
html[data-theme^="claude"] .search-results{background:var(--card);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.16)}
html[data-theme^="claude"] .search-results .item:hover{background:var(--card2)}
html[data-theme^="claude"] .search-results .item .tag{background:var(--line2);color:var(--ink3)}

/* 彩带 */
html[data-theme^="claude"] .band{border-radius:8px;font-weight:600;color:var(--ink)}
html[data-theme^="claude"] .band .r{color:var(--ink2)}

/* 主题开关（两种主题都可见） */
.theme-toggle{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;
  color:var(--ink2);padding:5px 10px;border-radius:9px;font-size:11.5px;cursor:pointer;white-space:nowrap;
}
.theme-toggle:hover{color:var(--ink)}
.theme-toggle b{font-weight:600;color:var(--ink)}

/* ============================================================
   手机 / iPad（iPhone 主屏 App 模式）
   ============================================================ */
html{ -webkit-tap-highlight-color: transparent; }
body{ overscroll-behavior-y: none; }

@supports (padding: max(0px)) {
  @media (max-width: 900px) {
    .topbar{
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
      padding-top: calc(6px + env(safe-area-inset-top));
      height: auto; min-height: 58px; flex-wrap: wrap; row-gap: 6px;
    }
    .content{ padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
    .rail{ padding-bottom: env(safe-area-inset-bottom); }
    .rail .brand{ padding-top: calc(20px + env(safe-area-inset-top)); }
  }
}

/* 表格横滑时给出提示，操作按钮常显 */
@media (max-width: 900px) {
  .tbl-wrap{ -webkit-overflow-scrolling: touch; }
  .tbl th, .tbl td{ padding: 11px 12px; }
  .nav a{ padding: 10px 11px; font-size: 13.5px; }
  .switcher button{ padding: 10px 6px; font-size: 13px; }
  .btn{ padding: 9px 14px; }
  .btn.sm{ padding: 6px 11px; font-size: 12px; }
  .hero h1{ font-size: 23px; }
  .hero .metas{ gap: 18px 22px; }
  .hero .metas .m .n{ font-size: 20px; }
  .hero{ display: flex; flex-direction: column; }
  .hero .acts{ position: static; order: 9; margin-top: 14px; justify-content: flex-start; flex-wrap: wrap; }
  .kpi{ padding: 14px 16px; }
  .kpi .v{ font-size: 22px; }
  .sechead{ margin-bottom: 14px; }
  .sechead h2{ font-size: 19px; }
  .sechead p{ font-size: 12px; }
  .grid{ gap: 12px; }

  /* 底部弹层式的表单 */
  .mask{ align-items: flex-end; padding: 0; }
  .modal{
    width: 100vw; max-width: 100vw; max-height: 92vh;
    border-radius: 18px 18px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal .mb{ padding-bottom: 8px; }
  .modal .mf{ border-radius: 0; }
}

/* 触屏：hover 不可靠，操作按钮必须常显 */
@media (hover: none) {
  .tbl .act{ opacity: 1; }
  .kpi:hover, .btn:hover, .card:hover{ transform: none; }
}

/* 超窄（iPhone 竖屏 390） */
@media (max-width: 560px) {
  .topbar h1{ font-size: 16px; }
  .searchbox{
    display: block; width: 100%; order: 10; margin-top: 2px;
  }
  .searchbox:focus-within{ width: 100%; }
  .search-results{ width: 100%; left: 0; right: 0; }
  .hero{ padding: 4px 0 18px; margin-bottom: 14px; }
  .hero h1{ font-size: 20px; line-height: 1.34; text-wrap: balance; }
  .hero .lede{ font-size: 13px; }
  .hero .metas{ gap: 14px 18px; margin-top: 16px; }
  .hero .metas .m .n{ font-size: 18px; }
  .hero .metas .m .l{ font-size: 10.5px; }
  .hero .acts{ margin-top: 12px; }
  .card .bd{ padding: 14px 14px; }
  .card .hd{ padding: 12px 14px; }
  .kpi{ padding: 12px 14px; }
  .kpi .v{ font-size: 20px; }
  .kpi .k{ font-size: 11px; }
  .g2, .g3{ grid-template-columns: 1fr; }
  .g4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid{ gap: 10px; }
  .kpi .d{ display: none; }
  .sechead p{ display: none; }
}

/* 演示数据横幅 */
.demo-banner{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 16px;border-radius:12px;margin-bottom:16px;
  background:var(--amber-l,#FAF0DC);color:var(--amber,#B5832A);
  border:1px solid color-mix(in srgb, var(--amber,#B5832A) 30%, transparent);
  font-size:12.5px;font-weight:500;
}
html[data-theme="claude"] .demo-banner{background:#FBF0E4;color:#8A5A28;border-color:#EFDCC6}
html[data-theme="claude-dark"] .demo-banner{background:#37301F;color:#D9B471;border-color:#4A3F28}

/* ============================================================
   手机底部导航（只在 <=900px 显示）
   ============================================================ */
.tabbar{ display: none; }

@media (max-width: 900px){
  .tabbar{
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: color-mix(in srgb, var(--card) 92%, transparent);
    backdrop-filter: blur(12px) saturate(1.2);
    border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    align-items: stretch;
  }
  .tabbar button{
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: transparent; border: 0; cursor: pointer; padding: 4px 2px;
    color: var(--ink3); font-size: 10.5px; font-family: inherit; letter-spacing: .04em;
    border-radius: 10px; transition: color .15s, background .15s;
  }
  .tabbar button i{ font-style: normal; font-size: 17px; line-height: 1.1; }
  .tabbar button.on{ color: var(--gold-2); }
  .tabbar button.on i{ font-weight: 700; }
  .tabbar .tab-add{ margin: 0 2px; }
  .tabbar .tab-add i{
    width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--gold-2); color: #fff; font-size: 20px; margin-top: -10px;
    box-shadow: 0 6px 16px rgba(217,119,87,.35);
  }
  .tabbar .tab-add span{ margin-top: 1px; }
  .content{ padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
  .modal{ padding-bottom: calc(env(safe-area-inset-bottom) + 4px); }
}
html[data-theme="ledger"] .tabbar{ background: rgba(255,253,248,.94); }

/* 电脑端提示条 */
.desk-note{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 14px;border-radius:10px;margin-bottom:14px;
  background:var(--blue-l);color:var(--blue-d);border:1px solid color-mix(in srgb, var(--blue) 22%, transparent);
  font-size:12px;
}
.desk-note .btn{margin-left:auto}

/* 新版本提示条 */
.update-note{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 16px;border-radius:10px;margin-bottom:14px;
  background:var(--green-l);color:var(--green);
  border:1px solid color-mix(in srgb, var(--green) 28%, transparent);
  font-size:12.5px;font-weight:500;
}
html[data-theme="claude-dark"] .update-note{background:#26332B;color:#9CC7AE;border-color:#355041}

/* toast 里的操作按钮（撤销） */
.toast.has-act{display:flex;align-items:center;gap:12px;padding-right:8px}
.toast-act{
  border:0;border-radius:7px;padding:4px 10px;cursor:pointer;font-family:inherit;
  background:rgba(255,255,255,.16);color:inherit;font-size:12px;font-weight:600;white-space:nowrap;
}
.toast-act:hover{background:rgba(255,255,255,.28)}
html[data-theme="claude-dark"] .toast-act{background:rgba(0,0,0,.10)}
html[data-theme="claude-dark"] .toast-act:hover{background:rgba(0,0,0,.18)}

/* ============================================================
   微交互层 v1 · 全局动效（尊重 prefers-reduced-motion）
   ============================================================ */
:root{
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.24s; --dur-s:.15s;
}

/* 主题切换时短暂给全站加过渡 */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{
  transition:background-color .3s ease, border-color .3s ease, color .3s ease, fill .3s ease !important;
}

/* 北极星卡（主题安全） */
.ns-card{
  padding:22px 24px; margin-bottom:16px; position:relative; overflow:hidden;
  background:var(--card);
}
.ns-card::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--gold-2),transparent);
  opacity:.9;
}
.ns-eyebrow{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); font-weight:600;
}
.ns-text{
  font-family:var(--serif); font-size:19px; font-weight:600; line-height:1.5;
  margin:8px 0 10px; color:var(--ink);
}
.ns-why{
  font-size:13px; line-height:1.75; color:var(--ink2);
  border-left:2px solid var(--line); padding-left:12px; margin-bottom:16px;
}
.ns-foot{ display:flex; align-items:baseline; gap:10px }
.ns-pct{ font-family:var(--num); font-size:26px; font-weight:600; color:var(--gold); font-variant-numeric:tabular-nums }

@media (prefers-reduced-motion: no-preference){

  /* 按钮 */
  html[data-theme^="claude"] .btn{
    transition:background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease),
      color var(--dur-s) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-s) var(--ease);
    will-change:transform;
  }
  html[data-theme^="claude"] .btn:hover{ transform:translateY(-1px); box-shadow:0 3px 10px -4px rgba(0,0,0,.28) }
  html[data-theme^="claude"] .btn:active{ transform:translateY(0) scale(.97); box-shadow:none; transition-duration:.06s }
  html[data-theme^="claude"] .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 36%, transparent) }
  html[data-theme^="claude"] .btn.primary:hover{ box-shadow:0 4px 14px -6px rgba(0,0,0,.5) }

  /* 卡片 / KPI */
  html[data-theme^="claude"] .card,
  html[data-theme^="claude"] .kpi{
    transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  html[data-theme^="claude"] .card:hover{ border-color:color-mix(in srgb, var(--ink3) 34%, var(--line)) }
  html[data-theme^="claude"] .kpi:hover{ transform:translateY(-2px); box-shadow:0 6px 18px -10px rgba(0,0,0,.45) }

  /* 侧栏导航 */
  html[data-theme^="claude"] .rail nav a,
  html[data-theme^="claude"] .rail nav > div,
  html[data-theme^="claude"] .rail nav button{
    transition:background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
  }
  html[data-theme^="claude"] .rail nav a:hover,
  html[data-theme^="claude"] .rail nav > div:hover{ transform:translateX(2px) }

  /* 表格行 + 行内操作按钮 */
  html[data-theme^="claude"] .tbl tbody tr{ transition:background var(--dur-s) var(--ease) }
  html[data-theme^="claude"] .tbl tbody td button{
    opacity:0; transition:opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
  }
  html[data-theme^="claude"] .tbl tbody tr:hover td button,
  html[data-theme^="claude"] .tbl tbody td button:focus-visible{ opacity:1 }
  @media (hover:none){ html[data-theme^="claude"] .tbl tbody td button{ opacity:1 } }

  /* 输入框聚焦 */
  html[data-theme^="claude"] input,
  html[data-theme^="claude"] select,
  html[data-theme^="claude"] textarea{
    transition:border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
  }
  html[data-theme^="claude"] input:focus,
  html[data-theme^="claude"] select:focus,
  html[data-theme^="claude"] textarea:focus{
    outline:none; border-color:var(--gold);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
  }

  /* 页面入场：整块上浮 + 子元素错峰 */
  #app.enter > *{ animation:rise .38s var(--ease-out) both }
  #app.enter > *:nth-child(2){ animation-delay:.04s }
  #app.enter > *:nth-child(3){ animation-delay:.08s }
  #app.enter > *:nth-child(4){ animation-delay:.12s }
  #app.enter > *:nth-child(5){ animation-delay:.16s }
  #app.enter > *:nth-child(n+6){ animation-delay:.19s }

  /* 进度条：从 0 长到目标值 */
  .bar > i{ animation:growW .6s var(--ease-out) both }

  /* 弹层 / 抽屉 */
  .mask{ animation:fadeIn .18s var(--ease) both }
  .modal{ animation:pop .24s var(--ease-out) both }
  .drawer{ animation:drawerIn .26s var(--ease-out) both }

  /* 提示条 */
  .toast{ animation:toastIn .26s var(--ease-out) both }

  /* 搜索面板 */
  .search-results{ animation:rise .2s var(--ease-out) both }
}

@keyframes rise{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes pop{ from{opacity:0; transform:translateY(10px) scale(.99)} to{opacity:1; transform:none} }
@keyframes growW{ from{width:0} }
@keyframes drawerIn{ from{transform:translateX(-100%)} to{transform:none} }
@keyframes toastIn{ from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none} }

/* 勾选 / 完成态反馈 */
.task-done, .tbl tr.done{ transition:opacity var(--dur) var(--ease) }

/* ---------- 3 秒记一笔：常用条 ---------- */
.quick{
  border:1px solid var(--line); border-radius:12px; background:var(--card);
  padding:14px 16px 16px; margin-bottom:16px;
}
.quick-h{ display:flex; align-items:center; gap:10px; margin-bottom:10px }
.quick-t{
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink3);
}
.quick-empty{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.quick-empty .quick-t{ color:var(--ink) }
.quick-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px }
.qchip{
  display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--card2); cursor:pointer; text-align:left; font:inherit; color:var(--ink);
  transition:transform var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.qchip:hover{ transform:translateY(-2px); border-color:var(--gold); background:var(--card) }
.qchip:active{ transform:translateY(0) scale(.985) }
.qchip:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 34%, transparent) }
.q-desc{ font-size:13.5px; font-weight:600; line-height:1.3; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.q-amt{ font-family:var(--num); font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink) }
.q-meta{ font-size:11px; color:var(--ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }
.q-more{ border-style:dashed; background:transparent }
.q-more .q-desc{ color:var(--ink2) }
@media (max-width:560px){
  .quick-row{ grid-template-columns:repeat(2,1fr) }
  .qchip{ padding:11px 12px }
  .q-desc{ font-size:13px }
  .q-amt{ font-size:16px }
  .q-more{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:center; gap:8px }
}

/* ---------- 账单导入 ---------- */
.drop{
  border:1.5px dashed var(--line); border-radius:12px; padding:26px 18px; text-align:center;
  background:var(--card2); transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.drop.on{ border-color:var(--gold); background:color-mix(in srgb, var(--gold) 8%, var(--card2)) }
.drop-ico{ font-size:26px; color:var(--gold); line-height:1 }
.drop-t{ margin-top:8px; font-size:14.5px; font-weight:600; color:var(--ink) }
.drop-s{ margin-top:4px; font-size:12px; color:var(--ink3) }
.row-dup{ opacity:.55 }
.tblwrap{ overflow-x:auto }
.rules{ display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--ink2); line-height:1.7 }
.rules b{ color:var(--ink); font-weight:600 }
.tag{
  display:inline-block; padding:1px 7px; border-radius:20px; font-size:11px;
  background:color-mix(in srgb, var(--gold) 14%, transparent); color:var(--gold); white-space:nowrap;
}

/* 独立文本框（账单导入等） */
.inp{
  display:block; width:100%; box-sizing:border-box;
  background:var(--input-bg, var(--card2)); color:var(--ink);
  border:1px solid var(--line); border-radius:9px;
  padding:11px 12px; font:inherit; font-size:13.5px; line-height:1.6;
  transition:border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.inp::placeholder{ color:var(--ink3) }
.inp:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent) }

/* ---------- 今日奏折 ---------- */
.memorial{
  margin-bottom:16px; position:relative; overflow:hidden;
  border-left:3px solid var(--gold);
  background:var(--card);
}
.memorial::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, color-mix(in srgb, var(--gold) 6%, transparent), transparent 42%);
}
.mm-h{ display:flex; align-items:center; gap:12px; position:relative; z-index:1 }
.mm-seal{
  width:34px; height:34px; flex:0 0 34px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--gold) 16%, transparent);
  color:var(--gold); font-family:var(--serif); font-size:19px; font-weight:600;
  border:1px solid color-mix(in srgb, var(--gold) 34%, transparent);
}
.mm-eyebrow{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3) }
.mm-sub{ font-size:12px; color:var(--gold); margin-top:2px }
.mm-body{ margin:12px 0 14px; position:relative; z-index:1 }
.mm-body p{
  font-family:var(--serif); font-size:15.5px; line-height:1.85; color:var(--ink);
  margin:0; text-indent:0;
}
.mm-body p + p{ margin-top:2px; color:var(--ink2) }
.mm-acts{ display:flex; gap:8px; flex-wrap:wrap; position:relative; z-index:1 }
@media (max-width:560px){
  .mm-body p{ font-size:14.5px; line-height:1.8 }
  .mm-acts .btn{ flex:1 1 auto; min-width:96px }
}
/* 补记区间 chips */
.mm-quick{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin:0 0 13px; position:relative; z-index:1;
}
.mm-quick-t{ font-size:11.5px; color:var(--ink3); margin-right:2px }
.mm-chip{
  border:1px solid var(--line); background:var(--card);
  color:var(--ink2); border-radius:999px; padding:4px 11px;
  font-size:12px; cursor:pointer; font-family:inherit;
  transition: border-color var(--dur-s) var(--ease),
              color var(--dur-s) var(--ease),
              transform var(--dur-s) var(--ease);
}
.mm-chip:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-1px) }
.mm-chip:active{ transform:translateY(0) }
.mm-chip:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }
.mm-skip{ border-style:dashed; color:var(--ink3) }
.mm-skip:hover{ border-color:var(--line2); color:var(--ink2) }

/* ============================================================
   排版层 v2 —— 中文优先：字号 / 行高 / 行长 / 字距
   ============================================================ */
:root{
  --fs-body: 15px;
  --fs-aux:  12.5px;
  --fs-tbl:  13.5px;
  --lh-body: 1.72;
}
body{ font-size:var(--fs-body); line-height:var(--lh-body) }
.content{ max-width:1200px; padding:30px 34px 84px }

/* 结构文字 */
.card .hd h3{ font-size:15.5px; letter-spacing:.01em }
.card .hd .hint{ font-size:var(--fs-aux) }
.mini{ font-size:var(--fs-aux); line-height:1.62 }
.empty{ font-size:13.5px }
.sechead p{ font-size:13px }
table.tbl{ font-size:var(--fs-tbl) }
table.tbl th{ font-size:12px; letter-spacing:.08em }
.kpi .k{ font-size:var(--fs-aux); letter-spacing:.06em }
.kpi .d{ font-size:var(--fs-aux); line-height:1.55 }
.legend{ font-size:var(--fs-aux) }
.stat .l{ font-size:var(--fs-aux) }
.btn{ font-size:13.5px; padding:8px 15px }
.btn.sm{ font-size:12.5px; padding:5px 11px }
.field label{ font-size:var(--fs-aux) }
.field input, .field select, .field textarea{ font-size:14px }

/* 主题字号：与主题块同等特异性，靠顺序取胜 */
html[data-theme^="claude"] .hero h1{ font-size:clamp(30px, 2.4vw, 38px); line-height:1.28 }
html[data-theme^="claude"] .hero .lede{ font-size:15px; line-height:1.75; max-width:58ch }
html[data-theme^="claude"] .hero .metas .m .n{ font-size:26px }
html[data-theme^="claude"] .hero .metas .m .l{ font-size:12.5px }
html[data-theme^="claude"] .hero .eyebrow{ font-size:11px; letter-spacing:.2em }
html[data-theme^="claude"] .kpi .v{ font-size:28px }
html[data-theme^="claude"] .sechead h2{ font-size:22px }
html[data-theme^="claude"] .rail .nav a{ font-size:13px }

/* 奏折 */
.mm-body p{ font-size:16.5px; line-height:1.9 }
.mm-quick-t{ font-size:12.5px }
.mm-chip{ font-size:13px; padding:5px 13px }
.mm-eyebrow{ font-size:11.5px }
.mm-sub{ font-size:12.5px }
.mm-seal{ width:36px; height:36px; flex:0 0 36px; font-size:20px }

/* 快捷记一笔 */
.q-desc{ font-size:13.5px }
.q-amt{ font-size:17px }
.q-meta{ font-size:11.5px }

/* 手机：字号再放一档 */
@media (max-width:900px){
  .content{ max-width:none; padding:18px 16px 96px }
  html[data-theme^="claude"] .hero h1{ font-size:29px }
  html[data-theme^="claude"] .hero .lede{ font-size:14.5px }
  html[data-theme^="claude"] .hero .metas .m .n{ font-size:23px }
  .mm-body p{ font-size:15.5px; line-height:1.85 }
  table.tbl{ font-size:13px }
}

/* ============================================================
   打磨层 v3 —— 跨端字号适配 / 字体栈 / 触屏细节
   手机是第一现场（iPhone 主屏 App 模式），桌面只是预览。
   顺序铁律：本层必须留在文件最后。用 html[data-theme] 与 v2 排版层
   同特异性、靠顺序取胜，纠正 v2 里写死的桌面字号在窄屏继续生效的问题。
   ============================================================ */

/* ---- 1. 字体栈：拉丁走系统 UI 字体，中文回落苹方 / 雅黑 ---- */
:root{
  --sans:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",
         "PingFang SC","HarmonyOS Sans SC","MiSans","Source Han Sans SC","Noto Sans SC",
         "Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC","STZhongsong","华文中宋","SimSun",Georgia,serif;
  --num:"SF Pro Display","Songti SC","Noto Serif SC",Georgia,"Times New Roman",serif;
}

/* iOS 自动放大文字 / 横屏回弹都会毁版，锁死 */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ -moz-osx-font-smoothing:grayscale }

/* 数字统一等宽对齐：账目列不在跳 */
.kpi .v,.hero .metas .m .n,.stat .n,.q-amt,.ns-pct,
.tbl td,.tbl th,.mini b,.money{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}

/* ---- 2. 触屏（≤900）：字号阶梯重定，收掉 v2 的桌面尺寸 ---- */
@media (max-width:900px){
  html[data-theme] .content{ padding:16px 16px 96px; max-width:none }
  html[data-theme] .hero{ padding:20px 18px 18px; border-radius:16px; margin-bottom:16px }
  html[data-theme] .hero h1{ font-size:clamp(22px,5.4vw,26px); line-height:1.34; text-wrap:balance }
  html[data-theme] .hero .lede{ font-size:14px; line-height:1.72 }
  html[data-theme] .hero .metas{ gap:14px 20px; margin-top:14px }
  html[data-theme] .hero .metas .m .n{ font-size:20px }
  html[data-theme] .hero .metas .m .l{ font-size:11.5px; letter-spacing:.04em }
  html[data-theme] .hero .eyebrow{ font-size:10.5px; letter-spacing:.24em }
  html[data-theme] .kpi .v{ font-size:23px }
  html[data-theme] .sechead h2{ font-size:18px }
  html[data-theme] .rail .nav a{ font-size:14px; padding:11px }
  /* iOS Safari 输入框 <16px 会整页放大，触屏一律 16px 起 */
  html[data-theme] input,html[data-theme] select,html[data-theme] textarea,
  html[data-theme] .searchbox input,html[data-theme] .inp{ font-size:16px }
  html[data-theme] .field input,html[data-theme] .field select,html[data-theme] .field textarea{ font-size:16px }
  /* 走 `..` 顶部动作在窄屏收进抽屉，减少挤压 */
  #btn-reset,#btn-print{ display:none }
  .topbar{ row-gap:4px }
  html[data-theme] .topbar h1{ font-size:16px; letter-spacing:.01em }
  .theme-toggle{ padding:6px 10px; font-size:11.5px }
  html[data-theme] .btn{ min-height:40px }
  html[data-theme] .btn.sm{ min-height:34px }
}

/* ---- 3. 手机（≤560）：一行一件事，KPI 改两列网格 ---- */
@media (max-width:560px){
  html[data-theme] .content{ padding:12px 14px 92px }
  html[data-theme] .hero{ padding:2px 0 14px; margin-bottom:12px; background:none; border:0; box-shadow:none; border-radius:0 }
  html[data-theme] .hero::before{ display:none }
  html[data-theme] .hero h1{ font-size:22px; line-height:1.36; margin-top:8px }
  html[data-theme] .hero .lede{ font-size:13.5px; line-height:1.72; max-width:none; margin-top:6px }
  html[data-theme] .hero .metas{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  }
  html[data-theme] .hero .metas .m .n{ font-size:19px }
  html[data-theme] .hero .metas .m .l{ font-size:11px; margin-top:1px }
  html[data-theme] .hero .metas .m:last-child:nth-child(odd){ grid-column:1 / -1 }
  html[data-theme] .hero .rule{ margin-top:14px }

  html[data-theme] .card{ border-radius:14px }
  html[data-theme] .card .hd{ padding:12px 14px }
  html[data-theme] .card .hd h3{ font-size:15px }
  html[data-theme] .card .bd{ padding:13px 14px }
  html[data-theme] .kpi{ padding:13px 14px; border-radius:13px }
  html[data-theme] .kpi .v{ font-size:21px }
  html[data-theme] .mm-body p{ font-size:15px; line-height:1.85 }
  html[data-theme] .mm-acts .btn{ flex:1 1 30%; min-height:42px }
  html[data-theme] .demo-banner{ padding:10px 12px; font-size:12px; border-radius:11px }
  html[data-theme] .demo-banner .btn{ width:100%; margin-left:0 !important; margin-top:2px }
}

/* ---- 4. 触屏点击热区与按压反馈 ---- */
@media (hover:none){
  html[data-theme] .tabbar button{ min-height:46px; justify-content:center; gap:3px }
  html[data-theme] .nav a{ min-height:44px }
  html[data-theme] .tbl tbody tr{ min-height:44px }
  html[data-theme] .mm-chip{ padding:8px 14px }
}
html[data-theme] .btn:active,
html[data-theme] .qchip:active,
html[data-theme] .tabbar button:active i,
html[data-theme] .nav a:active{ transform:scale(.97) }
html[data-theme] .btn,
html[data-theme] .nav a,
html[data-theme] .tabbar button i{ transition:transform .12s var(--ease-out), color .15s, background .15s, border-color .15s }

/* 底部导航：激活态加指示条，图标不再是纯文字 */
@media (max-width:900px){
  html[data-theme] .tabbar{ padding:4px 2px calc(4px + env(safe-area-inset-bottom)) }
  html[data-theme] .tabbar button{ font-size:10.5px; position:relative }
  html[data-theme] .tabbar button i{ font-size:18px }
  html[data-theme] .tabbar button.on::before{
    content:''; position:absolute; top:1px; left:50%; transform:translateX(-50%);
    width:16px; height:2px; border-radius:2px; background:var(--gold-2);
  }
  html[data-theme] .tabbar .tab-add i{
    width:42px; height:42px; box-shadow:0 6px 16px -6px rgba(169,118,47,.55), 0 1px 2px rgba(0,0,0,.06);
  }
}

/* ---- 5. 键盘 / 焦点统一 ---- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--gold); outline-offset:2px; border-radius:6px;
}

/* ---- 6. 少动效偏好：全部降级为无动画 ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ============================================================
   打磨层 v4 —— 底部导航 SVG 图标 / 手机搜索折叠
   ============================================================ */

/* ---- 1. 底部导航：线性图标替代文字字形 ---- */
.tabbar button i{ display:flex; align-items:center; justify-content:center; height:20px }
.tabbar button i svg{ width:20px; height:20px; display:block }
.tabbar .tab-add i svg{ width:18px; height:18px }
html[data-theme] .tabbar button.on{ color:var(--gold-d) }
html[data-theme] .tabbar button.on i svg{ stroke-width:2.15 }
html[data-theme] .tabbar button{ gap:3px }
@media (hover:none){
  html[data-theme] .tabbar button i{ height:22px }
  html[data-theme] .tabbar button i svg{ width:21px; height:21px }
  html[data-theme] .tabbar .tab-add i{ width:44px; height:44px }
  html[data-theme] .tabbar .tab-add i svg{ width:19px; height:19px; stroke-width:2.4 }
}

/* ---- 2. 顶栏搜索：桌面常显，手机折叠成图标 ---- */
.search-toggle{ display:none; padding:7px 9px; line-height:0; border-radius:10px }
.search-toggle svg{ width:17px; height:17px; display:block }
/* 关闭按钮只在手机浮层里出现，桌面必须彻底隐藏 */
.search-close{ display:none }

@media (max-width:560px){
  .search-toggle{ display:inline-flex; align-items:center; justify-content:center }
  .searchbox{ display:none !important }

  body.search-open .searchbox{
    display:block !important;
    position:fixed; left:8px; right:8px; width:auto; margin:0;
    top:calc(8px + env(safe-area-inset-top, 0px));
    z-index:120; padding:6px;
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    box-shadow:0 20px 50px -18px rgba(40,30,12,.45);
    animation:searchDrop .18s var(--ease-out) both;
  }
  body.search-open .searchbox input{
    height:40px; padding-left:34px; font-size:16px; border-radius:10px; background:#fff;
  }
  body.search-open .search-results{
    position:static; width:auto; margin-top:6px; padding:2px;
    border:0; box-shadow:none; max-height:54vh;
  }
  body.search-open::before{
    content:''; position:fixed; inset:0; z-index:110;
    background:rgba(30,25,16,.30); backdrop-filter:blur(2px);
  }
  /* topbar 自身是 z-index:30 的层叠上下文，不放行就会被遮罩糊住 */
  body.search-open .topbar{ z-index:130 }
  body.search-open .search-close{
    display:flex; align-items:center; justify-content:center;
    position:absolute; right:6px; top:6px; width:40px; height:40px;
    border:0; background:transparent; color:var(--ink3);
    font-size:15px; line-height:1; border-radius:10px; cursor:pointer;
    transition:background .15s, color .15s;
  }
  body.search-open .search-close:active{ background:var(--line2); color:var(--ink) }
  body.search-open .searchbox input{ padding-right:44px }
  @keyframes searchDrop{ from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none} }
}

/* ============================================================
   打磨层 v5 · 装机与数据安全提示（assets/install.js 使用）
   ============================================================ */
.hintbar{
  display:flex; align-items:flex-start; gap:11px;
  padding:12px 14px; border-radius:12px;
  background:var(--gold-l); border:1px solid #EBDCBC; color:var(--ink);
  font-size:13px; line-height:1.55;
}
.hintbar .hb-ico{
  flex:0 0 26px; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--gold); font-size:14px; font-weight:700;
  border:1px solid #EBDCBC;
}
.hintbar .hb-txt{flex:1 1 auto; min-width:0}
.hintbar .hb-txt b{display:block; font-size:13.5px; font-weight:600; letter-spacing:.1px}
.hintbar .hb-txt span{display:block; margin-top:3px; font-size:12.5px; color:var(--ink2); line-height:1.6}
.hintbar .hb-acts{flex:0 0 auto; display:flex; gap:8px; align-self:center}
.hintbar.warn{background:var(--amber-l); border-color:#EBD7B0}
.hintbar.warn .hb-ico{color:var(--amber); border-color:#EBD7B0}
.hintbar.soft{background:var(--blue-l); border-color:#D5DEEE}
.hintbar.soft .hb-ico{color:var(--blue); border-color:#D5DEEE}

@media (max-width:640px){
  .hintbar{flex-wrap:wrap; padding:12px}
  .hintbar .hb-acts{width:100%; align-self:stretch}
  .hintbar .hb-acts .btn{flex:1; min-height:38px; font-size:13px}
}

.install-guide ol{margin:0; padding-left:20px; font-size:13.5px; line-height:1.85; color:var(--ink)}
.install-guide ol li{margin:2px 0}
.install-guide .ig-note{
  margin:14px 0 0; padding:10px 12px; border-radius:10px;
  background:var(--gold-l); border:1px solid #EBDCBC;
  font-size:12.5px; line-height:1.7; color:var(--ink2);
}

/* ============================================================
   打磨层 v6 · 导航分组 / 手机卡片化表格
   ============================================================ */

/* --- 侧栏导航分组 --- */
.nav .navgrp{
  display:flex; align-items:center; gap:7px; width:100%;
  padding:12px 10px 6px; background:none; border:0; color:inherit; font:inherit;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:#6E6455; cursor:pointer; opacity:.9;
}
.nav .navgrp:hover{color:#EAE3D6; opacity:1}
.nav .navgrp .car{font-size:9px; opacity:.75; transition:transform .18s ease; display:inline-block}
.nav .navgrp.closed .car{transform:rotate(-90deg)}
.nav .navgrp .n{margin-left:auto; font-size:9.5px; letter-spacing:.04em; opacity:.6; font-variant-numeric:tabular-nums}

/* --- 手机：表格变卡片 --- */
@media (max-width:640px){
  .tbl-wrap{overflow:visible}
  table.tbl{display:block; min-width:0; width:100%; border:0; background:none}
  .tbl thead{display:none}
  .tbl tbody{display:block}
  .tbl tbody tr{
    display:block; background:var(--card); border:1px solid var(--line);
    border-radius:14px; margin:0 0 10px; padding:12px 14px;
  }
  .tbl tbody tr:last-child{margin-bottom:0}
  .tbl td{
    display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px;
    align-items:baseline; justify-items:start; padding:4px 0; border:0;
    white-space:normal; font-size:13px; text-align:left !important;
  }
  .tbl td > *{max-width:100%}
  .tbl td::before{
    content:attr(data-label); color:var(--ink3); font-size:12px;
    font-weight:400; letter-spacing:.02em; white-space:nowrap;
  }
  .tbl td[data-label=""]::before{display:none}
  .tbl td.hsm{display:none}
  .tbl td:first-child{
    display:block; padding:0 0 8px; margin-bottom:7px;
    border-bottom:1px solid var(--line2); font-size:14.5px; font-weight:600;
  }
  .tbl td:first-child::before{display:none}
  .tbl td.act{
    display:flex; justify-content:flex-end; gap:8px; width:auto !important;
    padding-top:9px; margin-top:8px; border-top:1px dashed var(--line2);
  }
  .tbl td.act::before{display:none}
  .tbl tbody tr:hover{background:var(--card)}

  /* 环形图 + 图例 在窄屏改成上下排 */
  .donut-row{display:flex; flex-direction:column; align-items:center; gap:10px}
}

/* --- 环形图 + 图例横排（桌面/平板） --- */
.donut-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.donut-row .legend{flex:1; min-width:180px}

/* ============================================================
   打磨层 v7 · 侧栏备份状态点（build 20261031-11）
   ============================================================ */
.bkdot{
  display:inline-flex; align-items:center; gap:5px; margin-top:6px;
  padding:2px 8px; border-radius:999px; font-size:11px; line-height:1.6;
  cursor:pointer; user-select:none;
  border:1px solid var(--line); background:var(--paper);
  color:var(--ink3); transition:background .15s,color .15s;
}
.bkdot::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.75 }
.bkdot:hover{ background:var(--paper-2, #EDEAE1); color:var(--ink2) }
.bkdot.ok{ color:var(--good, #4C7A5A) }
.bkdot.soft{ color:var(--gold-2, #B5893F) }
.bkdot.warn{ color:var(--red, #A8453A); border-color:rgba(168,69,58,.28) }
@media print{ .bkdot{ display:none } }

/* ============================================================
   打磨层 v8 · 快捷记一笔半屏面板（build 20261102-12）
   ============================================================ */
.sheet-mask{
  position:fixed; inset:0; z-index:300; display:flex;
  align-items:flex-end; justify-content:center;
  background:rgba(28,24,16,.36); backdrop-filter:blur(2px);
  animation:fadeIn .16s ease-out;
}
.sheet-mask.out{ opacity:0; transition:opacity .16s ease }
.sheet{
  width:100%; max-width:520px; max-height:94vh; overflow:auto;
  background:var(--paper); border-radius:22px 22px 0 0;
  padding:8px 16px calc(66px + env(safe-area-inset-bottom, 0px)); /* 底部留出吸底按钮的高度，滚到底不会被盖住 */
  box-shadow:0 -10px 44px rgba(0,0,0,.22);
  animation:sheetIn .22s cubic-bezier(.2,.85,.3,1);
}
.sheet-grab{ width:38px; height:4px; border-radius:2px; background:var(--line); margin:2px auto 10px }
.sheet-h{ display:flex; align-items:center; gap:8px; margin-bottom:10px }
.sheet-lab{ font-size:11px; letter-spacing:.12em; color:var(--ink3); margin:6px 0 3px }
.sheet input[type="text"], .sheet input[type="date"]{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); font:inherit; font-size:16px; color:var(--ink);
}
.seg{ display:flex; gap:3px; background:var(--paper-2, #EDEAE1); border-radius:11px; padding:3px; margin-bottom:8px }
.seg button{
  flex:1; border:0; background:none; padding:6px 0; border-radius:9px;
  font:inherit; font-size:13px; color:var(--ink3); cursor:pointer;
}
.seg button.on{ background:var(--paper); color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.07) }
.amt-row{
  display:flex; align-items:baseline; gap:6px; padding:0 2px 6px;
  border-bottom:1px solid var(--line); margin-bottom:10px;
}
.amt-row .cur{ font-size:19px; color:var(--ink3) }
.amt-row .val{
  font-family:var(--num, inherit); font-size:34px; font-weight:600;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.12;
}
.qchips{
  display:flex; gap:6px; overflow-x:auto; padding:1px 0 4px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.qchips::-webkit-scrollbar{ display:none }
.qchip2{
  flex:0 0 auto; padding:6px 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--paper); font:inherit; font-size:12.5px; color:var(--ink2);
  cursor:pointer; white-space:nowrap;
}
.qchip2.on{ background:var(--ink); border-color:var(--ink); color:#fff }
.keys{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:6px }
.keys button{
  padding:10px 0; border-radius:12px; border:1px solid var(--line);
  background:var(--paper); font:inherit; font-family:var(--num, inherit);
  font-size:19px; cursor:pointer;
}
.keys button:active{ background:var(--paper-2, #EDEAE1) }
/* 保存按钮永远贴在面板底部：小屏/iOS 工具栏吃掉高度时也不会被推下去 */
.sheet-foot{ display:flex; gap:8px; margin-top:8px; position:sticky; bottom:-1px; background:var(--paper); padding:6px 0 2px }
.sheet-foot .btn{ flex:1; padding:12px 0; font-size:15px }
@keyframes sheetIn{ from{ transform:translateY(20px); opacity:.5 } to{ transform:none; opacity:1 } }
@media (min-width:641px){
  .sheet-mask{ align-items:center }
  .sheet{ border-radius:22px; max-width:430px; padding:8px 18px 18px; box-shadow:0 24px 80px rgba(0,0,0,.28) }
}
@media (prefers-reduced-motion:reduce){ .sheet{ animation:none } }

/* ============================================================
   打磨层 v9 · 空态 / 图表下钻（build 20261102-13）
   ============================================================ */
.empty{
  padding:34px 20px !important; text-align:center; color:var(--ink3);
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.empty-ico{
  width:46px; height:46px; border-radius:50%; display:flex;
  align-items:center; justify-content:center;
  background:var(--paper-2, #EDEAE1); color:var(--ink3); margin-bottom:8px;
}
.empty-t{ font-size:13.5px; color:var(--ink2); font-weight:600 }
.empty-h{ font-size:12px; color:var(--ink3); line-height:1.7; max-width:32em }
.donut-seg{ transition:opacity .15s ease }
.donut-seg:hover{ opacity:.82 }
.lg-pick{ cursor:pointer }
.lg-pick:hover{ text-decoration:underline }
.drill-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px }

/* ============================================================
   打磨层 v10 · 账单向导 / 目标下钻 / 月度总结（build 20261103-14）
   ============================================================ */
.wiz-steps{ display:flex; gap:8px; margin:2px 0 14px; flex-wrap:wrap }
.wiz-step{
  flex:1 1 180px; display:flex; gap:9px; align-items:center;
  padding:10px 12px; border-radius:12px; border:1px solid var(--line);
  background:var(--paper); opacity:.62;
}
.wiz-step.on{ opacity:1; border-color:var(--gold-2); box-shadow:0 1px 0 rgba(0,0,0,.03) }
.wiz-step.past{ opacity:.9 }
.wiz-n{
  width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;background:var(--paper-2,#EDEAE1);color:var(--ink2);flex:0 0 auto;
}
.wiz-step.on .wiz-n{ background:var(--gold-2); color:#fff }
.wiz-step.past .wiz-n{ background:#E4EFE7; color:#3F7A54 }
.wiz-t{ font-size:12.5px; font-weight:600; color:var(--ink) }
.wiz-d{ font-size:11px; color:var(--ink3) }
.wiz-kpis{ display:flex; gap:8px; flex-wrap:wrap }
.wiz-kpi{ min-width:104px; padding:8px 11px; border-radius:10px; background:var(--paper-2,#EDEAE1) }
.wiz-kpi .k-l{ font-size:10.5px; color:var(--ink3); letter-spacing:.06em }
.wiz-kpi .k-v{ font-size:14px; font-weight:600; font-variant-numeric:tabular-nums }
.wiz-kpi.ok .k-v{ color:#3F7A54 }
.wiz-kpi.warn .k-v{ color:#B5822E }
.wiz-kpi.gold .k-v{ color:var(--gold-1) }
.wiz-kpi.green .k-v{ color:#3F7A54 }
.wiz-kpi.gray .k-v{ color:var(--ink3) }

.goal-card{ transition:box-shadow .15s ease, transform .15s ease }
.goal-card:hover{ box-shadow:0 6px 20px rgba(0,0,0,.07); transform:translateY(-1px) }
.goal-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:12px }
.gcell{ padding:8px 10px; border-radius:10px; background:var(--paper-2,#EDEAE1) }
.gcell .g-l{ font-size:10.5px; color:var(--ink3); letter-spacing:.06em }
.gcell .g-v{ font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums }
.gcell .g-v.green{ color:#3F7A54 } .gcell .g-v.red{ color:#C0453B }
.hist-list{ display:flex; flex-direction:column; gap:1px }
.hist-row{ display:flex; align-items:center; gap:10px; padding:7px 2px; border-bottom:1px dashed var(--line2) }
.hist-row .right{ margin-left:auto }
.sum-p{ margin:0 0 8px; font-size:13.5px; line-height:1.85; color:var(--ink2) }
.sum-p:last-child{ margin-bottom:0; font-weight:600; color:var(--ink) }
@media (max-width:560px){
  .goal-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .wiz-step{ flex:1 1 100% }
  .wiz-d{ display:none }
}
/* 账单预览表里的「勾选 + 日期」单元格 */
.chk{ display:inline-flex; align-items:center; gap:8px; cursor:pointer }
.chk input{ width:16px; height:16px; accent-color:var(--gold-1) }
/* 弹窗里的空态不该占半屏 */
.modal .empty, .sheet .empty{ padding:18px 12px }
.modal .empty svg, .sheet .empty svg{ width:30px; height:30px }
/* 卡片化表格的行间距收一点，别让卡看着虚 */
@media (max-width:640px){
  .tbl tbody tr{ row-gap:6px !important; padding:12px 14px !important }
}
.sum-acts{ display:flex; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line2) }

/* ============================================================
   打磨层 v11 · 间距节奏（build 20261103-15）
   旧问题：padding 有 88 种写法、gap 22 种、卡片内边距 14/16/18 混用，
           导致「每块都还行，整页没有呼吸」。这里只统一结构级间距。
   规则：4 的倍数打底，8 的倍数走节奏；三级留白 = 章节 32 / 卡片 16 / 行内 8
   ============================================================ */
:root{
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --r-1:8px; --r-2:12px; --r-3:16px;
  --gutter:var(--sp-5);
}

/* ---- 一级留白：页面与章节 ---- */
@media (min-width:901px){
  .content{ padding:var(--sp-6) var(--sp-6) calc(var(--sp-7) + var(--sp-5)) }
}
.sechead{ margin:0 0 var(--sp-5); gap:var(--sp-3) }
.sechead h2{ margin:0 }
/* 章节之间：页面根容器相邻块统一 24 */
.page > .wrap > * + *, .page-body > * + *{ margin-top:var(--sp-5) }

/* ---- 二级留白：卡片 ---- */
.card .hd, .card .card-h{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line2);
}
.card .bd, .card .card-b{ padding:var(--sp-4) }
.card .bd.tight{ padding:0 }
.card .hd h3, .card .card-h h3{
  margin:0; font-size:14px; font-weight:600; letter-spacing:.02em; color:#241E15;
  display:flex; align-items:center; gap:var(--sp-2);
}
.card .hd h3::before, .card .card-h h3::before{
  content:""; width:3px; height:13px; border-radius:2px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
}
.card .hd .hint, .card .card-h .hint, .card .card-hint{
  color:var(--ink3); font-size:11.5px; letter-spacing:.02em;
}
.card .card-hint{ margin-left:auto }
.card{ border-radius:var(--r-3) }

/* ---- 三级留白：网格与卡片内行 ---- */
.grid{ gap:var(--sp-4) }
.grid.g2, .grid.g3, .grid.g4{ gap:var(--sp-4) }
.kpi{ padding:var(--sp-4) }
.kpi .v{ margin-top:var(--sp-1) }
.kpi .d{ margin-top:var(--sp-1) }
.row{ gap:var(--sp-2) }

/* ---- 主视觉 hero：跟下面拉开一档 ---- */
.hero{ padding:var(--sp-6) }
.hero .metas{ margin-top:var(--sp-4); gap:var(--sp-5) }
.hero .lede{ margin-top:var(--sp-2) }
.hero .rule{ margin-top:var(--sp-4) }

/* 手机端收紧一档，但节奏不变 */
@media (max-width:640px){
  :root{ --gutter:var(--sp-4) }
  .content{ padding:var(--sp-4) var(--sp-4) calc(var(--sp-6) + var(--sp-5)) }
  .card .hd, .card .card-h{ padding:var(--sp-3) var(--sp-3) }
  .card .bd, .card .card-b{ padding:var(--sp-3) }
  .grid{ gap:var(--sp-3) }
  .sechead{ margin-bottom:var(--sp-4) }
  .hero{ padding:var(--sp-5) var(--sp-4) }
  /* 手机上标题与副标题不抢同一行 */
  .card .hd, .card .card-h{ flex-wrap:wrap }
  .card .card-hint{ margin-left:0; flex-basis:100% }
}

/* ============================================================
   打磨层 v12 · 提醒中心 / 大臣奏本（build 20261103-16）
   ============================================================ */
.rm-row{ padding:var(--sp-2) 0; border-bottom:1px dashed var(--line2); cursor:pointer; align-items:center }
.rm-row:last-child{ border-bottom:0 }
.rm-row:hover{ background:color-mix(in srgb, var(--gold) 5%, transparent) }
.rm-main{ flex:1; min-width:0 }
.rm-main > div:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rm-bad{ color:var(--red) }
.rm-gt{ display:flex; align-items:baseline; gap:var(--sp-2); font-size:12px; letter-spacing:.08em; color:var(--ink3); margin-bottom:var(--sp-1) }
.rm-gt > span:first-child{ color:var(--ink) }
.rm-p{ margin:0 0 var(--sp-2); font-size:13px; line-height:1.75; color:var(--ink2) }
.rm-acts{ display:flex; gap:var(--sp-2); margin-top:var(--sp-3) }

.mmt-seg{ max-width:240px; margin-top:var(--sp-2) }
.mmt-kpis{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-2); margin-top:var(--sp-4) }
.mmt-kpi{ padding:var(--sp-2) var(--sp-3); border:1px solid var(--line2); border-radius:var(--r-2); background:color-mix(in srgb, var(--paper) 60%, #fff) }
.mmt-k{ font-size:11px; letter-spacing:.1em; color:var(--ink3) }
.mmt-v{ font-family:var(--num); font-size:17px; font-weight:600; margin-top:2px; font-variant-numeric:tabular-nums }
.mmt-d{ font-size:10.5px; color:var(--ink3); margin-top:2px }
.mmt-acts{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4) }
.mmt-mark{
  display:flex; gap:var(--sp-2); align-items:baseline; margin:var(--sp-3) 0 var(--sp-1);
  padding:var(--sp-2) var(--sp-3); border-left:3px solid var(--red);
  background:color-mix(in srgb, var(--red) 6%, transparent); border-radius:var(--r-1);
  font-family:var(--serif); font-size:14px; color:var(--ink);
}
.mmt-mark-k{ font-size:11px; letter-spacing:.16em; color:var(--red); font-family:var(--sans) }
.mmt-p{ margin:0 0 var(--sp-1); font-size:13px; line-height:1.8; color:var(--ink2) }
@media (max-width:640px){
  .mmt-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .mmt-v{ font-size:16px }
}
/* 提醒页三张 KPI：手机上也要横排，别竖着堆三张 */
.grid.rm-kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-2) }
.grid.rm-kpis .kpi{ padding:var(--sp-3) }
@media (max-width:640px){
  .grid.rm-kpis{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .grid.rm-kpis .kpi{ padding:var(--sp-2) }
  .grid.rm-kpis .kpi .k{ font-size:10.5px }
  .grid.rm-kpis .kpi .v{ font-size:16px; margin-top:2px }
  .grid.rm-kpis .kpi .d{ font-size:10.5px }
}
.rm-note{ margin:var(--sp-3) 0 0; line-height:1.7; color:var(--ink3) }
.rm-more{ display:flex; justify-content:flex-end; margin-top:var(--sp-3) }
.rm-more .btn.sm{ padding:5px 10px; font-size:12px }

/* ---------- 打磨层 v14 · 存储体检（数据与导出页） ---------- */
.st-row{ display:flex; align-items:center; gap:var(--sp-3); padding:9px 0; border-bottom:1px dashed var(--line2); font-size:12.5px }
.st-row:last-of-type{ border-bottom:none }
.st-lb{ flex:0 0 104px; min-width:0; color:var(--ink2); display:flex; align-items:center; gap:6px }
.st-track{ flex:1; min-width:0; height:8px; border-radius:99px; background:#EFE9DC; overflow:hidden }
.st-fill{ height:100%; min-width:3px; border-radius:99px; background:var(--gold); transition:width .3s ease }
.st-fill.blue{ background:var(--blue) }
.st-fill.ink{ background:#BFB6A4 }
.st-fill.red{ background:var(--red) }
.st-num{ flex:0 0 auto; min-width:78px; text-align:right; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums }
.st-total{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--line) }
.st-total .t{ font-size:13px; font-weight:700 }
.st-total .v{ font-size:13px; font-variant-numeric:tabular-nums; color:var(--ink2) }
.st-ops{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3) }
@media (max-width:640px){
  .st-lb{ flex-basis:78px; font-size:12px }
  .st-num{ min-width:66px; font-size:12px }
}