:root{
  /* ===== 基础色（原有） ===== */
  --bg:#F5F0EB;
  --bg2:#EDE6DB;
  --card:#FFF;
  --text:#2C2416;
  --sub:#7A7167;
  --accent:#C8924A;
  --accent-light:#F5EDE0;
  --danger:#C0392B;
  --border:#E8E0D5;
  --shadow:0 2px 12px rgba(0,0,0,.05);
  --shadow-lg:0 8px 30px rgba(0,0,0,.08);
  --radius:14px;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;

  /* ===== v2026-10-01 统一语义色（收敛 ~38+32 个散色值为 8 个）=====
     原则：同语义只留一个色。深浅变化用 -strong/-light 派生，不再各处自造。 */
  --ok:#3A9D6E;
  --ok-strong:#1E8E5A;
  --ok-light:#EAF6F0;
  --warn:#E67E22;
  --warn-light:#FFF4E5;
  --warn-border:#F0C48A;
  --info:#3A7BD5;
  --info-light:#EAF1FB;
  --neutral:#9B9186;

  /* ===== v2026-10-01 间距尺度（收敛 17 种 → 4 档）===== */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:14px;
  --sp-4:20px;

  /* ===== v2026-10-01 字号尺度（收敛 18 种 → 4 档 + 数字档）===== */
  --fs-xs:11px;
  --fs-sm:13px;
  --fs-md:15px;
  --fs-lg:20px;

  /* ===== v2026-10-01 圆角尺度（收敛 15 种 → 3 档）===== */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:14px;
  --radius-pill:999px;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* 全局滚动条（拼多多风：细、浅、圆角） */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(155,145,134,.35);border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:rgba(155,145,134,.55);}
*{scrollbar-width:thin;scrollbar-color:rgba(155,145,134,.35) transparent;}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;overscroll-behavior:contain;}
.app{max-width:414px;margin:0 auto;padding:0 16px calc(40px + env(safe-area-inset-bottom));}

/* Overlay */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:999;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:fadeIn .2s;user-select:none;-webkit-user-select:none;}
.overlay.hidden{display:none;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.dialog{background:var(--card);border-radius:16px;padding:28px 24px;width:calc(100% - 48px);max-width:360px;box-shadow:var(--shadow-lg);animation:slideUp .25s ease-out;}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.dialog h3{font-size:17px;font-weight:700;margin-bottom:4px;letter-spacing:-.2px;}
.dialog p{font-size:13px;color:var(--sub);margin-bottom:16px;line-height:1.5;}
.dialog input{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:16px;font-family:var(--font);outline:none;margin-bottom:12px;background:#FAF8F5;transition:border-color .15s;}
.dialog input:focus{border-color:var(--accent);background:#FFF;box-shadow:0 0 0 3px rgba(200,146,74,.12);}
.dialog .btn-row{display:flex;gap:10px;justify-content:flex-end;margin-top:4px;}
.dialog .err{font-size:12px;color:var(--danger);margin-bottom:8px;display:none;}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 20px;border:none;border-radius:10px;font-size:14px;font-weight:500;font-family:var(--font);cursor:pointer;transition:background .15s,color .15s,transform .15s,opacity .15s;user-select:none;touch-action:manipulation;}
.btn:hover{opacity:.9;}
.btn:active{transform:scale(.97);opacity:.85;}
.btn-primary{background:var(--accent);color:#FFF;}
.btn-primary:hover{opacity:.9;}
.btn-danger{background:var(--danger);color:#FFF;}
.btn-danger:hover{opacity:.9;}
.btn-ghost{background:transparent;color:var(--sub);border:1.5px solid var(--border);}
.btn-ghost:hover{background:var(--bg);color:var(--text);}
.btn-sm{padding:6px 14px;font-size:12px;border-radius:8px;}
.btn-xs{padding:4px 10px;font-size:11px;border-radius:6px;}

/* Top bar */
.topbar{padding:calc(24px + env(safe-area-inset-top)) 0 12px;display:flex;align-items:center;justify-content:space-between;}
.topbar h1{font-size:22px;font-weight:800;letter-spacing:-.3px;}
.topbar .lock-btn{font-size:13px;color:var(--sub);cursor:pointer;user-select:none;transition:color .15s;}
.topbar .lock-btn:hover{color:var(--accent);}

/* Tabs */
.tabs{display:flex;gap:6px;margin-bottom:18px;background:transparent;padding:0;}
.tab{flex:1;text-align:center;padding:10px 0;font-size:14px;border-radius:10px;cursor:pointer;color:var(--sub);transition:background .2s,color .2s,transform .2s,box-shadow .2s;user-select:none;background:var(--card);box-shadow:0 1px 4px rgba(0,0,0,.04);font-weight:500;touch-action:manipulation;}
.tab.active{background:var(--accent);color:#FFF;font-weight:600;box-shadow:0 4px 14px rgba(200,146,74,.3);transform:translateY(-1px);}
.tab.tab-ledger{background:linear-gradient(135deg,#f0a030,#e08818);color:#FFF!important;font-weight:700;box-shadow:0 2px 10px rgba(240,160,48,.3);}
.tab.tab-ledger.active{background:linear-gradient(135deg,#e08818,#c87808);box-shadow:0 4px 18px rgba(232,136,24,.45);}

/* Benefit refresh cycle */

/* Summary row */
/* v2026-10-01 账本页「操作优先」：汇总卡收敛为紧凑条，不抢"记一笔"表单的视觉焦点 */
.summary{display:flex;gap:8px;margin-bottom:10px;}
.summary-item{flex:1;background:var(--card);border-radius:10px;padding:12px 10px;text-align:center;box-shadow:none;border:1px solid var(--border);transition:transform .15s ease,box-shadow .15s ease;}
.summary-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.summary-item:active{transform:scale(.98);}
.summary-item .val{font-size:19px;font-weight:700;color:var(--accent);letter-spacing:-.3px;line-height:1.2;font-variant-numeric:tabular-nums;}
.summary-item .lbl{font-size:11px;color:var(--sub);margin-top:2px;letter-spacing:.3px;}

/* Card list */
.card-list{display:flex;flex-direction:column;gap:var(--sp-3);}
.cc-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;cursor:pointer;user-select:none;transition:transform .15s,box-shadow .15s;}
.cc-card:active{transform:scale(.985);}
.cc-card:hover{box-shadow:var(--shadow-lg);}
.cc-stripe{width:5px;flex-shrink:0;position:relative;}
.cc-stripe::after{content:'';position:absolute;right:0;top:0;bottom:0;width:3px;background:inherit;opacity:.2;filter:brightness(.5);}
.cc-body{flex:1;padding:18px 18px 18px 16px;}
.cc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;}
.cc-bank{font-size:16px;font-weight:700;letter-spacing:-.2px;}
.cc-level{font-size:11px;color:var(--sub);margin-left:6px;font-weight:400;}
.cc-right{text-align:right;}
.cc-limit{font-size:17px;font-weight:800;letter-spacing:-.3px;font-variant-numeric:tabular-nums;}
.cc-last4{font-size:11px;color:var(--sub);}
.cc-meta{font-size:12px;color:var(--sub);display:flex;align-items:center;gap:12px;}
.cc-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--border);}

/* Usage bar */
.usage-bar{margin-top:8px;height:3px;background:#F0EBE2;border-radius:2px;overflow:hidden;}
.usage-bar-fill{height:100%;border-radius:2px;background:var(--accent);transition:width .4s ease;}

/* Accordion */
.cc-detail{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;border-top:1px solid transparent;font-size:13px;}
.cc-detail.open{max-height:800px;border-top-color:var(--border);padding:14px 16px 14px 16px;}
.cc-detail .row{display:flex;justify-content:space-between;padding:4px 0;}
.cc-detail .row .k{color:var(--sub);}
.cc-detail .sec-title{font-weight:600;font-size:12px;color:var(--accent);margin:8px 0 4px;}
.cc-detail .sensitive-row{padding:8px 0;text-align:center;}
.editable-val{cursor:pointer;color:var(--accent);border-bottom:1px dashed var(--accent);}
.editable-val:active{opacity:.7;}
.bf-actions{display:flex;gap:6px;margin-top:10px;}
.bf-actions .btn-xs{font-size:11px;padding:4px 10px;}
.bf-edit-btn{cursor:pointer;font-size:13px;padding:0 2px;opacity:.5;transition:opacity .2s;}
.bf-edit-btn:hover{opacity:1;}
.bf-row .bf-use{cursor:pointer;color:var(--accent);font-size:11px;margin-left:6px;}
.cc-detail .benefit-item{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:12px;}
.cc-detail .benefit-item .used{font-size:11px;color:var(--accent);}
.cc-detail .spend-item{display:flex;justify-content:space-between;font-size:12px;padding:2px 0;}
.cc-detail .spend-item .amt{font-weight:600;}

/* Spending page（刷卡模块已移除：数据层 getSpending 恒返回空、无页面渲染，2026-08-17 删死样式。卡片详情内的 .cc-detail .spend-item / .spend-mini 仍用，保留） */

/* Benefits page */
.benefit-group{margin-bottom:16px;}
.benefit-group .bg-header{font-size:14px;font-weight:700;padding:6px 4px 8px;display:flex;align-items:center;gap:8px;letter-spacing:-.2px;}
.benefit-group .bg-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px rgba(0,0,0,.05);}
.benefit-card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);}
.benefit-card .bf-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f5f1eb;font-size:13px;transition:background .15s;}
.benefit-card .bf-row:last-child{border-bottom:none;}
.benefit-card .bf-use{cursor:pointer;color:var(--accent);font-size:11px;user-select:none;padding:4px 10px;border-radius:4px;font-weight:600;transition:background .15s;}
.benefit-card .bf-use:hover{background:var(--accent-light);}
.benefit-card .bf-use:active{background:#e8d9bf;}
.bf-cycle{font-size:11px;color:var(--sub);margin-top:2px;display:flex;align-items:center;gap:6px;}
.bf-cycle .bf-days-left{color:var(--accent);font-weight:600;}
.bf-cycle .bf-days-left.expiring{color:var(--danger);}
.bf-progress{height:4px;background:#eee;border-radius:2px;margin-top:4px;overflow:hidden;}
.bf-progress .bf-progress-bar{height:100%;background:var(--accent);border-radius:2px;transition:width .3s;}
.bf-progress .bf-progress-bar.full{background:var(--danger);}
.bf-refresh-btn{font-size:11px;color:var(--sub);cursor:pointer;user-select:none;margin-left:2px;opacity:.6;transition:opacity .15s;}
.bf-refresh-btn:hover{opacity:1;color:var(--accent);}

/* Sensitive info modal */
.sensitive-info{font-size:14px;line-height:2.2;}
.sensitive-info .si-row{display:flex;justify-content:space-between;padding:2px 0;}
.sensitive-info .si-val{font-weight:700;letter-spacing:1px;font-variant-numeric:tabular-nums;}

/* Toast */
.toast{position:fixed;bottom:44px;left:50%;transform:translateX(-50%);background:#2C2416;color:#FFF;padding:10px 24px;border-radius:24px;font-size:13px;z-index:1001;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,.2);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px);}

.page{display:none;}
.page.active{display:block;animation:pageFadeIn .22s ease;}
@keyframes pageFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* Spending list in card detail */
.spend-mini{max-height:200px;overflow-y:auto;}

/* Debt section */
.debt-section{margin-top:20px;border-top:1.5px solid var(--border);padding-top:18px;}
.debt-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.debt-header span{font-size:17px;font-weight:700;letter-spacing:-.2px;}
.debt-header .btn-add{font-size:13px;padding:6px 14px;border-radius:8px;border:1.5px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer;font-family:var(--font);font-weight:500;transition:background .15s,color .15s,transform .15s;touch-action:manipulation;}
.debt-header .btn-add:hover{background:var(--accent-light);}
.debt-header .btn-add:active{transform:scale(.97);}
.debt-summary{display:flex;gap:10px;margin-bottom:14px;}
.debt-summary .ds-item{flex:1;background:var(--card);border-radius:10px;padding:12px 10px;text-align:center;box-shadow:var(--shadow);}
.debt-summary .ds-item .val{font-size:20px;font-weight:800;letter-spacing:-.4px;line-height:1.2;font-variant-numeric:tabular-nums;}
.debt-summary .ds-item .lbl{font-size:10px;color:var(--sub);margin-top:3px;letter-spacing:.5px;}
.ds-total .val{color:var(--info);}
.ds-paid .val{color:var(--ok);}
.ds-remain .val{color:var(--danger);}
.debt-list{display:flex;flex-direction:column;gap:10px;}
.debt-item{background:#EDE8E0;border-radius:12px;padding:14px 16px;box-shadow:0 1px 6px rgba(0,0,0,.04);border-left:4px solid var(--info);position:relative;cursor:pointer;user-select:none;transition:transform .15s,box-shadow .15s;}
.debt-item:active{transform:scale(.985);}
.debt-item:hover{box-shadow:0 4px 16px rgba(0,0,0,.08);}
.debt-item .di-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px;}
.debt-item .di-name{font-size:15px;font-weight:700;letter-spacing:-.2px;}
.debt-item .type-tag{font-size:10px;padding:2px 8px;border-radius:10px;background:#D8D0C4;color:#5A5040;font-weight:500;white-space:nowrap;}
.debt-item .di-actions{display:flex;gap:4px;}
.debt-item .di-actions button{background:transparent;border:none;cursor:pointer;font-size:13px;padding:2px 6px;border-radius:4px;color:var(--sub);transition:color .15s,background .15s;}
.debt-item .di-actions button:hover{color:var(--text);background:rgba(0,0,0,.05);}
.debt-item .di-actions button.di-del:hover{color:var(--danger);}
.debt-item .di-meta{font-size:12px;color:var(--sub);display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.debt-item .di-meta .sep{width:1px;height:10px;background:var(--border);}
.debt-item .di-rate{font-size:11px;color:#8B7355;}
.debt-progress{margin-top:4px;height:4px;background:#D8D0C4;border-radius:2px;overflow:hidden;}
.debt-progress-fill{height:100%;border-radius:2px;background:var(--info);transition:width .4s ease;}
.debt-detail{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;border-top:1px solid transparent;font-size:12px;color:var(--sub);}
.debt-detail.open{max-height:200px;border-top-color:#D8D0C4;padding-top:8px;margin-top:8px;}
.debt-dialog select{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:16px;font-family:var(--font);outline:none;margin-bottom:12px;background:#FAF8F5;appearance:none;-webkit-appearance:none;transition:border-color .15s;}
.debt-dialog select:focus{border-color:var(--accent);background:#FFF;box-shadow:0 0 0 3px rgba(200,146,74,.12);}

@media (min-width: 768px) {
  .app { max-width: 700px; padding: 0 24px 48px; }
  .summary { gap: 16px; }
  .summary-item .val { font-size: 28px; }
  .cc-card { border-radius: 18px; }
  .cc-body { padding: 20px 20px 20px 18px; }
  .cc-bank { font-size: 18px; }
  .card-list { gap: 14px; }
  .tab { font-size: 16px; padding: 12px 0; }
  .debt-item .di-name { font-size: 17px; }
  .debt-item .type-tag { font-size: 11px; }
  .debt-item .di-meta { font-size: 13px; }
  .debt-summary .ds-item .val { font-size: 24px; }
}

/* 备案号 footer */
.beian-footer{margin-top:28px;padding:16px 8px 8px;text-align:center;font-size:11px;color:var(--sub);line-height:1.9;border-top:1px solid var(--border);}
.beian-footer a{color:var(--sub);text-decoration:none;}
.beian-footer a:hover{color:var(--accent);}
.beian-footer .gb-sep{margin:0 6px;opacity:.4;}

/* ==================== LEDGER（记账·与项目一共享 ledger 集合）==================== */
.ledger-quick{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin-bottom:12px;}
.ledger-quick .lq-type{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.ledger-quick .lq-type button{flex:1 1 calc(33% - 6px);padding:8px 0;border:1.5px solid var(--border);border-radius:10px;background:var(--card);color:var(--sub);font-size:13px;font-weight:500;cursor:pointer;font-family:var(--font);transition:background .15s,color .15s,border-color .15s;min-width:60px;touch-action:manipulation;}
.ledger-quick .lq-type button.active[data-type="支出"]{background:var(--danger);color:#fff;border-color:transparent;}
.ledger-quick .lq-type button.active[data-type="收入"]{background:var(--ok);color:#fff;border-color:transparent;}
.ledger-quick .lq-type button.active[data-type="进货"]{background:var(--warn);color:#fff;border-color:transparent;}
.ledger-quick .lq-type button.active[data-type="销售"]{background:var(--ok);color:#fff;border-color:transparent;}
.ledger-quick .lq-type button.active[data-type="押金"]{background:var(--danger);color:#fff;border-color:transparent;}
.ledger-quick .lq-type button.active[data-type="退押金"]{background:var(--info);color:#fff;border-color:transparent;}
.ledger-quick label{display:block;font-size:12px;color:var(--sub);margin-bottom:4px;margin-top:10px;font-weight:500;}
.ledger-quick label:first-of-type{margin-top:0;}
.ledger-quick input{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:15px;font-family:var(--font);outline:none;background:#FAF8F5;transition:border-color .15s;}
.ledger-quick input:focus{border-color:var(--accent);background:#FFF;box-shadow:0 0 0 3px rgba(200,146,74,.12);}
.ledger-filter{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap;}
.ledger-filter select,.ledger-filter input{padding:8px 10px;border:1.5px solid var(--border);border-radius:10px;font-size:13px;font-family:var(--font);outline:none;background:#FAF8F5;transition:border-color .15s;}
.ledger-filter select:focus,.ledger-filter input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(200,146,74,.12);}
.ledger-filter .lf-search{flex:1;min-width:110px;}
.ledger-list{display:flex;flex-direction:column;gap:8px;}
.ledger-item{background:var(--card);border-radius:10px;padding:12px 14px;box-shadow:0 1px 4px rgba(0,0,0,.035);display:flex;justify-content:space-between;align-items:center;gap:10px;border-left:3px solid var(--border);transition:background .15s ease,box-shadow .15s ease,transform .08s ease;}
.ledger-item:hover{background:var(--bg);box-shadow:0 2px 10px rgba(0,0,0,.06);}
.ledger-item:active{transform:scale(.992);}
.ledger-item.income{border-left-color:var(--ok);}
.ledger-item.expense{border-left-color:var(--danger);}
.ledger-item.repay{border-left-color:var(--info);}
.ledger-item .li-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.ledger-item .li-proj{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ledger-item .li-meta{font-size:11px;color:var(--sub);}
.ledger-item .li-amt{font-weight:700;font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums;}
.ledger-item .li-actions{display:flex;gap:2px;flex-shrink:0;}
.ledger-item .li-actions button{background:transparent;border:none;cursor:pointer;font-size:13px;padding:2px 6px;border-radius:4px;color:var(--sub);}
.ledger-item .li-actions button:hover{color:var(--text);background:rgba(0,0,0,.05);}
.ledger-item .li-actions button.li-del:hover{color:var(--danger);}

/* C3 骨架屏：数据未加载时占位，避免空白闪烁 */
.ledger-skeleton{padding:12px 14px;background:var(--card);border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.035);display:flex;flex-direction:column;gap:8px;}
.ledger-skeleton .sk-line{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--bg2) 25%,#f3eee6 37%,var(--bg2) 63%);background-size:400% 100%;animation:sk-shimmer 1.2s ease-in-out infinite;}
.ledger-skeleton .sk-line.short{width:45%;}
@keyframes sk-shimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}

/* C2 乐观UI：本地临时记录（后台写云端中）样式 */
.ledger-item.li-temp{opacity:.6;}
.ledger-item .li-syncing{font-size:12px;color:var(--sub);display:inline-flex;align-items:center;gap:4px;}
.ledger-item .li-syncing::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);animation:sk-pulse 1s ease-in-out infinite;}
@keyframes sk-pulse{0%,100%{opacity:.3;}50%{opacity:1;}}

/* H1 安全分页："查看全部"按钮 */
.li-btn.li-showall{margin-top:2px;display:block;width:100%;padding:9px 0;background:transparent;border:1.5px dashed var(--border);border-radius:10px;color:var(--sub);font-size:13px;font-family:var(--font);cursor:pointer;transition:color .15s,border-color .15s,background .15s;touch-action:manipulation;}
.li-btn.li-showall:hover{color:var(--accent);border-color:var(--accent);background:var(--bg);}

/* ============ Dashboard（财务仪表盘） ============ */
.dash-head{margin-bottom:14px;}
.dash-title{font-size:20px;font-weight:800;letter-spacing:-.3px;}
.dash-sub{font-size:12px;color:var(--sub);margin-top:2px;}
.dash-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-4);}
.dash-kpi-item{background:var(--card);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);border:1px solid var(--border);transition:transform .18s ease,box-shadow .18s ease;}
.dash-kpi-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.kpi-val{font-size:22px;font-weight:800;letter-spacing:-.5px;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--text);}
.kpi-lbl{font-size:11px;color:var(--sub);margin-top:4px;letter-spacing:.3px;}
.kpi-mom{font-size:10px;margin-top:4px;font-weight:600;letter-spacing:.2px;font-variant-numeric:tabular-nums;}
.dash-card{background:var(--card);border-radius:var(--radius);padding:20px;margin-bottom:var(--sp-4);box-shadow:var(--shadow);border:1px solid var(--border);transition:transform .18s ease,box-shadow .18s ease;}
.dash-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.dash-card-t{font-size:15px;font-weight:700;margin-bottom:14px;letter-spacing:-.2px;color:var(--text);}
/* v2026-10-01 功能分区标题：把长页面切成有名字的区块，提供视觉停顿与归属感（纯视觉，不改布局/交互） */
.sec-head{display:flex;align-items:center;gap:8px;margin:6px 0 12px;padding-left:2px;}
.sec-head::before{content:"";flex:0 0 auto;width:3px;height:14px;border-radius:2px;background:var(--accent);}
.sec-head .sec-t{font-size:13px;font-weight:700;color:var(--text);letter-spacing:.2px;}
.sec-head .sec-d{font-size:11px;color:var(--sub);font-weight:400;margin-left:2px;}
.sec-head+.dash-card,.sec-head+.dash-kpi,.sec-head+.dash-quick-row{margin-top:0;}
.dash-canvas{width:100%;display:block;}
.dash-legend{display:flex;gap:16px;justify-content:center;font-size:11px;color:var(--sub);margin-top:8px;}
.dash-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:middle;}
.dash-donut-wrap{display:flex;align-items:center;gap:14px;}
.dash-cat-legend{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0;}
.dash-leg-item{font-size:12px;color:var(--text);display:flex;align-items:center;}
.dash-leg-item i{width:9px;height:9px;border-radius:3px;margin-right:6px;flex-shrink:0;}
.dash-leg-item b{margin-left:auto;color:var(--sub);font-weight:600;font-variant-numeric:tabular-nums;}
.dash-stat-row{display:flex;justify-content:space-between;gap:10px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);font-size:12px;color:var(--sub);flex-wrap:wrap;}
.dash-stat-row b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;}
.due-warn{background:var(--warn-light);color:var(--warn);font-size:12px;padding:8px 12px;border-radius:8px;margin-bottom:10px;font-weight:600;}
.due-sec{font-size:12px;color:var(--sub);margin:12px 0 6px;}
.due-item{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);gap:10px;}
.due-item:last-child{border-bottom:none;}
.due-soon{background:var(--warn-light);border-radius:8px;padding:9px 10px;margin-bottom:4px;}
.due-l{min-width:0;}
.due-p{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.due-m{font-size:11px;color:var(--sub);margin-top:2px;}
.due-a{font-size:15px;font-weight:700;color:var(--accent);flex-shrink:0;font-variant-numeric:tabular-nums;}
.due-empty{font-size:12px;color:var(--sub);text-align:center;padding:10px;}
/* 财务深化：预算卡 / 对账状态 / 记账列表核对按钮 */
.budget-row{display:flex;justify-content:space-between;font-size:12px;color:var(--sub);margin-bottom:6px;}
.budget-stat{font-size:13px;font-weight:700;margin-top:6px;color:var(--ok);}
.recon-stat{font-size:14px;font-weight:600;}
.recon-stat b{font-size:16px;font-weight:800;}
.li-rec.on{color:var(--ok);font-weight:600;}

/* 财务深化（蓝黄项）：记账页分类汇总 / 金额区间筛选 / 仪表盘支出TOP排行 */
.ledger-cat-summary{margin-top:10px;padding:12px 14px;background:var(--card);border-radius:12px;box-shadow:var(--shadow);}
.lcs-title{font-size:13px;font-weight:700;color:var(--sub);margin-bottom:8px;}
.lcs-title b{color:var(--danger);font-size:15px;margin-left:4px;}
.lcs-row{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:12px;}
.lcs-name{flex:0 0 64px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lcs-bar{flex:1;height:8px;background:var(--bg);border-radius:4px;overflow:hidden;}
.lcs-bar i{display:block;height:100%;border-radius:4px;background:var(--accent);transition:width .3s ease;}
.lcs-val{flex:0 0 auto;color:var(--sub);font-variant-numeric:tabular-nums;}
.lcs-val em{font-style:normal;color:var(--text);font-weight:600;margin-left:2px;font-variant-numeric:tabular-nums;}
.lf-amt{width:64px;padding:7px 8px;border:1.5px solid var(--border);border-radius:9px;font-size:13px;font-family:var(--font);outline:none;background:#FAF8F5;transition:border-color .15s;}
.lf-amt:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(200,146,74,.12);}
.dash-top{display:flex;flex-direction:column;gap:7px;margin-top:4px;}
.top-row{display:flex;align-items:center;gap:8px;font-size:12px;}
.top-rank{flex:0 0 18px;height:18px;line-height:18px;text-align:center;border-radius:50%;background:var(--bg);color:var(--sub);font-weight:700;font-size:11px;}
.top-row:nth-child(1) .top-rank{background:var(--danger);color:#fff;}
.top-row:nth-child(2) .top-rank{background:var(--warn);color:#fff;}
.top-row:nth-child(3) .top-rank{background:var(--warn);color:#fff;}
.top-name{flex:0 0 70px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.top-bar{flex:1;height:8px;background:var(--bg);border-radius:4px;overflow:hidden;}
.top-bar i{display:block;height:100%;border-radius:4px;transition:width .3s ease;}
.top-val{flex:0 0 auto;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;}
.top-pct{flex:0 0 auto;color:var(--sub);width:34px;text-align:right;font-variant-numeric:tabular-nums;}

/* 归属（店/家）选择：录入表单 + 编辑弹窗共用 */
.lq-scope{display:flex;align-items:center;gap:6px;margin:2px 0 10px;}
.lq-scope-lbl{font-size:13px;color:var(--sub);margin-right:2px;}
.lq-scope button{flex:0 0 auto;padding:6px 18px;border:1.5px solid var(--border);border-radius:999px;background:var(--card);color:var(--sub);font-size:13px;font-weight:500;cursor:pointer;font-family:var(--font);transition:background .15s,color .15s,border-color .15s;touch-action:manipulation;}
.lq-scope button.active{background:var(--accent);color:#fff;border-color:transparent;}
/* 仪表盘归属切换 */
.dash-scope{display:inline-flex;background:var(--bg2);border-radius:999px;padding:3px;gap:2px;margin-top:8px;}
.dash-scope button{border:none;background:transparent;padding:5px 18px;border-radius:999px;font-size:13px;color:var(--sub);font-family:var(--font);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;touch-action:manipulation;}
.dash-scope button.on{background:var(--card);color:var(--text);font-weight:600;box-shadow:var(--shadow);}

/* 错误兜底条：样式仅下方 .err-guard 一处定义，避免重复覆盖导致定位错位、红条被推出屏幕 */
/* #2 首页备份引导提示条 */
.home-tip{font-size:12px;color:var(--sub);background:var(--bg2);border-radius:10px;padding:10px 12px;margin:10px 0 2px;line-height:1.5;}
/* #5 店/家视图结余说明 */
.dash-note{font-size:12px;color:var(--accent);background:rgba(200,146,74,.1);border-radius:10px;padding:8px 12px;margin:8px 0 2px;line-height:1.5;}

/* 运行时错误兜底条（崩了不白屏静默死；class 化以符合 CSP 禁内联脚本） */
.err-guard{position:fixed;left:0;right:0;bottom:0;z-index:2000;background:var(--danger);color:#fff;font-family:var(--font);padding:14px 16px;box-shadow:0 -2px 12px rgba(0,0,0,.2);}
.err-guard .eg-title{font-size:14px;font-weight:700;margin-bottom:4px;}
.err-guard .eg-desc{font-size:12px;opacity:.92;line-height:1.5;}
.err-guard .eg-btn{margin-top:10px;background:#fff;color:var(--danger);border:none;border-radius:8px;padding:8px 18px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font);}

/* ============ 家庭记账（🏠 家 TAB） ============ */
.tab.tab-family{background:linear-gradient(135deg,#4A8BE0,#2F6BC0);color:#FFF!important;font-weight:700;box-shadow:0 2px 10px rgba(90,155,213,.3);}
.tab.tab-family.active{background:linear-gradient(135deg,#4A8BE0,#2F6BC0);box-shadow:0 4px 18px rgba(58,123,213,.45);}
.family-head{margin-bottom:14px;}
.family-title{font-size:20px;font-weight:800;letter-spacing:-.3px;}
.family-sub{font-size:12px;color:var(--sub);margin-top:2px;}
.family-summary{display:flex;gap:10px;margin-bottom:14px;}
.family-summary .fs-item{flex:1;background:var(--card);border-radius:var(--radius);padding:16px 12px;text-align:center;box-shadow:var(--shadow);border:1px solid var(--border);}
.family-summary .fs-item .val{font-size:22px;font-weight:800;letter-spacing:-.4px;line-height:1.2;font-variant-numeric:tabular-nums;}
.family-summary .fs-item .lbl{font-size:11px;color:var(--sub);margin-top:4px;letter-spacing:.3px;}
.family-quick{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin-bottom:14px;}
.family-quick .fq-type{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.family-quick .fq-type button{flex:1 1 calc(50% - 4px);padding:8px 0;border:1.5px solid var(--border);border-radius:10px;background:var(--card);color:var(--sub);font-size:13px;font-weight:500;cursor:pointer;font-family:var(--font);transition:background .15s,color .15s,border-color .15s;touch-action:manipulation;}
.family-quick .fq-type button.active[data-type="支出"]{background:var(--danger);color:#fff;border-color:transparent;}
.family-quick .fq-type button.active[data-type="收入"]{background:var(--ok);color:#fff;border-color:transparent;}
.family-quick label{display:block;font-size:12px;color:var(--sub);margin-bottom:4px;margin-top:10px;font-weight:500;}
.family-quick label:first-of-type{margin-top:0;}
.family-quick input,.family-quick select{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:15px;font-family:var(--font);outline:none;background:#FAF8F5;transition:border-color .15s;}
.family-quick input:focus,.family-quick select:focus{border-color:var(--accent);background:#FFF;box-shadow:0 0 0 3px rgba(200,146,74,.12);}
.family-member{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px;}
.family-member button{padding:6px 16px;border:1.5px solid var(--border);border-radius:999px;background:var(--card);color:var(--sub);font-size:13px;font-weight:500;cursor:pointer;font-family:var(--font);transition:background .15s,color .15s,border-color .15s;touch-action:manipulation;}
.family-member button.active{background:var(--info);color:#fff;border-color:transparent;}
.family-card{background:var(--card);border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:var(--shadow);border:1px solid var(--border);}
.family-card-t{font-size:15px;font-weight:700;margin-bottom:12px;letter-spacing:-.2px;}
.family-member-stat{display:flex;flex-direction:column;gap:8px;}
.fm-row{display:flex;align-items:center;gap:8px;font-size:13px;}
.fm-name{flex:0 0 56px;color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fm-bar{flex:1;height:10px;background:var(--bg);border-radius:5px;overflow:hidden;}
.fm-bar i{display:block;height:100%;border-radius:5px;background:var(--info);transition:width .3s ease;}
.fm-val{flex:0 0 auto;color:var(--sub);font-weight:600;font-variant-numeric:tabular-nums;}
.fm-pct{flex:0 0 36px;text-align:right;color:var(--sub);font-size:11px;font-variant-numeric:tabular-nums;}
.family-filter{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap;}
.family-filter select,.family-filter input{padding:8px 10px;border:1.5px solid var(--border);border-radius:10px;font-size:13px;font-family:var(--font);outline:none;background:#FAF8F5;transition:border-color .15s;}
.family-filter select:focus,.family-filter input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(200,146,74,.12);}
.family-empty{text-align:center;color:var(--sub);padding:30px;font-size:13px;}

/* ============ 仪表盘扩充 ============ */
.dash-quick-row{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.dash-quick-row .dqr-item{flex:1 1 calc(50% - 4px);background:var(--card);border-radius:10px;padding:12px 14px;box-shadow:var(--shadow);border:1px solid var(--border);min-width:120px;}
.dash-quick-row .dqr-item .dq-label{font-size:11px;color:var(--sub);margin-bottom:2px;}
.dash-quick-row .dqr-item .dq-val{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;}
.dash-quick-row .dqr-item .dq-sub{font-size:10px;color:var(--sub);margin-top:2px;}

/* 移动端打磨（纯视觉：圆角/阴影/字号/字体/背景/点击高亮，不碰布局与交互；<=480px 常规手机生效） */
@media (max-width: 480px){
  /* 去掉 iOS 点击默认高亮闪块，点按更干净 */
  a,button,.cc-card,.ledger-item,.debt-item,.tab,.btn,.lq-scope button,.dash-scope button,.bf-use,.bf-edit-btn,.bf-refresh-btn,.li-actions button,.di-actions button,.cc-detail .spend-item{-webkit-tap-highlight-color:transparent;}
  /* 卡片更圆润、阴影更柔（轻提质感，不增重） */
  .cc-card,.summary-item,.dash-card,.benefit-card,.dash-kpi-item,.family-card{border-radius:16px;box-shadow:0 3px 18px rgba(0,0,0,.06);}
  /* 关键数字更醒目（拼多多风：价格大字） */
  .kpi-val{font-size:24px;}
  .topbar h1{font-size:23px;}
  .cc-limit{font-size:18px;}
  .dash-title{font-size:21px;}
  /* 点按反馈更跟手（纯背景变化，不动布局） */
  .cc-card:active{background:#FCFAF7;}
  .ledger-item:active{background:var(--bg);}
  /* 输入框聚焦光晕更柔和 */
  .dialog input:focus,.ledger-quick input:focus,.family-quick input:focus,.debt-dialog select:focus,.ledger-filter select:focus,.ledger-filter input:focus,.family-filter select:focus,.family-filter input:focus{box-shadow:0 0 0 3px rgba(200,146,74,.12);}
  /* 进度条更圆润 */
  .bf-progress,.usage-bar,.debt-progress,.lcs-bar,.top-bar,.fm-bar{border-radius:4px;}
  /* 家庭页关键数字 */
  .family-summary .fs-item .val{font-size:20px;}
  .family-card{border-radius:16px;}
}

/* 移动端小屏适配（纯视觉：仅字号/间距，不碰布局/交互；仅 <360px 触发，桌面与常规手机不受影响） */
@media (max-width: 360px){
  .app{padding:0 12px 32px;}
  .topbar h1{font-size:20px;}
  .cc-bank{font-size:15px;}
  .cc-limit{font-size:16px;}
  .dialog{padding:24px 18px;}
  .summary-item .val{font-size:22px;}
  .summary-item{padding:14px 10px;}
  .debt-summary .ds-item .val{font-size:18px;}
  .debt-summary .ds-item{padding:10px 8px;}
  .dash-kpi-item{padding:12px 12px;}
  .kpi-val{font-size:20px;}
  .dash-card{padding:14px;}
  .cc-body{padding:14px 14px 14px 12px;}
}

.cvv-hidden {
  cursor: pointer;
  color: var(--sub);
  letter-spacing: 2px;
}
.cvv-hidden:hover {
  color: var(--accent);
}

/* ===== Web Design Guidelines 补齐 (2026-08-25) ===== */
/* 尊重系统"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms;
    animation-iteration-count:1;
    transition-duration:.01ms;
    scroll-behavior:auto
  }
}
/* focus-visible 替代：仅键盘导航显示焦点环 */
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 标题防孤行 */
h1,h2,h3{font-variant-numeric:tabular-nums}
.topbar h1,.dash-title,.family-title{text-wrap:balance}

/* 骨架屏样式 */
.dash-skeleton, .family-skeleton { padding: 16px; }
.sk-head { margin-bottom: 20px; }
.dash-skeleton .sk-line, .family-skeleton .sk-line { height: 16px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; margin-bottom: 8px; }
.sk-w60 { width: 60%; }
.sk-w40 { width: 40%; }
.sk-kpi, .sk-summary { display: flex; gap: 10px; margin-bottom: 20px; }
.sk-card { flex: 1; height: 80px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
.sk-chart { height: 150px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; margin-bottom: 16px; }
.sk-list { display: flex; flex-direction: column; gap: 10px; }
.sk-row { height: 50px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ===== v2026-09-03 账本摘要范围标签 ===== */
.ledger-scope-banner{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 10px;flex-wrap:wrap;}
.lsb-range{font-size:13px;font-weight:600;color:var(--info);background:rgba(58,123,213,.08);border-radius:8px;padding:4px 10px;}
.lsb-hint{font-size:11px;color:var(--sub);}

/* ===== v2026-09-03 总览页权益管理区 ===== */
.benefit-manage-section{margin-top:22px;}
.benefit-manage-section .debt-header{margin-bottom:10px;}

/* ===== v2026-09-03 操作痕迹全屏视图 ===== */
.audit-dialog{max-width:680px;width:calc(100% - 24px);max-height:88vh;display:flex;flex-direction:column;padding:20px 20px 16px;}
.audit-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.audit-head h3{margin:0;font-size:17px;}
.audit-stat{font-size:12px;color:var(--sub);margin-bottom:10px;}
.audit-filter{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px;}
.audit-filter select,.audit-filter input{flex:1;min-width:88px;padding:7px 9px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;background:#FAF8F5;outline:none;font-family:var(--font);}
.audit-list{overflow-y:auto;max-height:calc(88vh - 170px);}
.audit-row{display:flex;align-items:center;gap:10px;padding:10px 6px;border-bottom:1px solid var(--border);cursor:pointer;border-radius:8px;transition:background .15s;}
.audit-row:hover{background:rgba(0,0,0,.025);}
.audit-badge{width:28px;height:28px;border-radius:50%;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.audit-main{min-width:0;flex:1;}
.audit-line1{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.audit-user{font-size:13px;font-weight:600;}
.audit-act{font-size:11px;color:var(--info);background:var(--info-light);border-radius:4px;padding:1px 6px;}
.audit-time{font-size:11px;color:var(--sub);margin-left:auto;flex-shrink:0;}
.audit-detail{font-size:12px;color:var(--sub);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.audit-row.open .audit-detail{white-space:normal;}
.audit-caret{color:var(--sub);font-size:12px;transition:transform .15s;flex-shrink:0;}
.audit-row.open .audit-caret{transform:rotate(180deg);}

/* ===== v2026-09-03 空状态组件 + 按钮反馈统一 ===== */
/* 页面级空状态：图标 + 标题 + 副文案 + 可选按钮 */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:44px 20px;text-align:center;color:var(--sub);}
.empty-state .es-icon{font-size:46px;line-height:1;opacity:.92;}
.empty-state .es-title{font-size:15px;font-weight:600;color:var(--text);margin-top:2px;}
.empty-state .es-desc{font-size:12px;color:var(--sub);line-height:1.6;max-width:260px;}
.empty-state .es-action{margin-top:8px;}

/* 家庭/纯文字空状态图形化（沿用原 class，无需改 JS） */
.family-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:40px 20px;font-size:13px;}
.family-empty::before{content:'\1F3E0';font-size:40px;line-height:1;opacity:.9;}

/* 危险按钮过渡反馈 */
.btn-danger{transition:opacity .15s ease,transform .1s ease;}
.btn-danger:hover{opacity:.88;}
.btn-danger:active{transform:scale(.96);}

/* 列表删除按钮 hover 明确红色反馈 */
.debt-item .di-actions button.di-del:hover{background:rgba(192,57,43,.10);}
.ledger-item .li-actions button.li-del:hover{background:rgba(192,57,43,.10);}