/* ============================================================
   多端财务记账系统 · 共享主题（莫兰迪冷灰 + Apple 设计语言）
   结构对齐界面原型；本版做视觉精修：
   - 统一 4/8 栅格与 12px 卡片节奏、16px 圆角层级
   - 关键按钮/悬浮键/平衡卡采用同色系渐变与柔和投影
   - 收紧三级文字色差以提升可读性；统一 hairline 描边
   ============================================================ */
:root{
  --paper:#F2F3F4;      /* 冷调高级灰底 */
  --paper-2:#EAEDEC;
  --surface:#FFFFFF;    /* 卡片 */
  --surface-2:#EEF0F0;  /* 分组列表底 */
  --surface-3:#F7F8F8;  /* 表头 / 页脚 */
  --ink:#2C2F31;        /* 近黑主文字（冷，稍提对比） */
  --ink-2:#5F6569;      /* 次级文字 */
  --ink-3:#7B8387;      /* 三级文字（再加深一档：保证小字对比度 ≥3.5） */
  --line:#DDE1E2;       /* 分隔线 */
  --line-2:#ECEEEF;     /* hairline */

  --brand:#7E8C84;      /* 灰鼠尾草绿 —— 主色 */
  --brand-tint:#67776F; /* 交互高亮（加深一档） */
  --brand-soft:#EAEEEC;
  --brand-grad:linear-gradient(135deg,#93A29A,#6E7E76 78%);
  --brand-grad-2:linear-gradient(135deg,#8FA198,#5F7168);

  --in:#8A9A8E;    --in-ink:#4F6054;    --in-soft:rgba(138,154,142,.18);   /* 进账 灰绿 */
  --out:#B07A6A;   --out-ink:#8E5A48;   --out-soft:rgba(176,122,106,.18);  /* 出账 灰砖 */
  --fee:#8FA3B0;   --fee-ink:#52606C;   --fee-soft:rgba(143,163,176,.17);  /* 费用 灰蓝 */
  --danger:#A0523F;

  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px;
  --shadow-xs:0 1px 1.5px rgba(40,48,52,.04), 0 0 0 .5px rgba(40,48,52,.03);
  --shadow-sm:0 1px 2px rgba(40,48,52,.05), 0 0 0 .5px rgba(40,48,52,.05);
  --shadow:0 6px 20px rgba(40,48,52,.08), 0 0 0 .5px rgba(40,48,52,.05);
  --shadow-lg:0 22px 54px rgba(40,48,52,.16), 0 0 0 .5px rgba(40,48,52,.07);
  --ring:0 0 0 3px rgba(103,119,111,.22);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--font);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--brand-tint);text-decoration:none}
button{font-family:var(--font);cursor:pointer}
input,select,textarea{font-family:var(--font);font-size:14px;color:var(--ink)}
::placeholder{color:#A6ACB0}
:focus-visible{outline:none;box-shadow:var(--ring)}
.money{font-variant-numeric:tabular-nums}
.mini{font-size:11px;color:var(--ink-3);letter-spacing:.02em;line-height:1.5}
.sub{font-size:10.5px;color:var(--ink-3);margin-top:2px}

/* ---------- 卡片 / 行 ---------- */
.card{background:var(--surface);border-radius:var(--r-md);padding:14px;box-shadow:var(--shadow-sm);transition:box-shadow .18s ease,transform .18s ease}
.card.tight{padding:12px 14px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stack{display:flex;flex-direction:column;gap:12px}

/* ---------- 按钮 ---------- */
.btn{border:0;border-radius:12px;padding:13px 16px;font-size:15px;font-weight:600;-webkit-appearance:none;transition:filter .16s,transform .08s,box-shadow .16s;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.btn:active{transform:scale(.985)}
.btn.primary{background:var(--brand-grad);color:#fff;width:100%;box-shadow:0 4px 14px rgba(110,126,118,.35)}
.btn.save{background:linear-gradient(135deg,#8FA096,#677A6F);color:#fff;width:100%;box-shadow:0 4px 14px rgba(79,96,84,.30)}
.btn.ghost{background:var(--surface);box-shadow:var(--shadow-sm);border:.5px solid var(--line)}
.btn.danger-ghost{background:transparent;color:var(--danger)}
.btn.sm{padding:6px 11px;font-size:12px;border-radius:9px}
.btn.block{display:block;width:100%}
.btn:hover:not(:disabled){filter:brightness(1.04)}
.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn-row{display:flex;gap:9px}
.btn-row .btn{flex:1}
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp 0.7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- 输入 ---------- */
.field{margin-bottom:14px}
.field .lb{font-size:11px;color:var(--ink-3);margin-bottom:6px;display:flex;align-items:center;gap:6px;letter-spacing:.02em}
.inp,select.inp{width:100%;border:0;background:var(--surface);box-shadow:var(--shadow-sm);border-radius:12px;padding:12px 13px;font-size:13.5px;-webkit-appearance:none;transition:box-shadow .15s;border:.5px solid transparent}
.inp:focus,select.inp:focus{border-color:var(--brand);box-shadow:var(--ring)}
select.inp{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%23848B90' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 13px center;padding-right:30px}
textarea.inp{resize:vertical;min-height:76px;line-height:1.6}
.field-note{font-size:10.5px;color:var(--ink-3);margin-top:4px;line-height:1.5}

/* ---------- 分段控制器 / chips ---------- */
.segbar{display:flex;gap:2px;background:rgba(48,50,52,.10);padding:3px;border-radius:12px}
.segbar .sg{flex:1;text-align:center;padding:8px 0;border-radius:9px;font-size:12.5px;color:var(--ink-2);background:transparent;border:0;transition:.15s}
.segbar .sg.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 2px 7px rgba(78,52,47,.10),0 0 0 .5px rgba(78,52,47,.04)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 14px;border-radius:999px;border:.5px solid var(--line-2);background:var(--surface);font-size:12px;color:var(--ink-2);box-shadow:var(--shadow-xs);transition:.16s}
.chip:hover{border-color:var(--brand);color:var(--brand-tint)}
.chip.on{background:var(--brand-grad);color:#fff;font-weight:600;border-color:transparent;box-shadow:0 3px 9px rgba(110,126,118,.30)}
.chip:disabled{opacity:.4;cursor:not-allowed}

/* ---------- 标签 / 类型徽章 ---------- */
.tg{display:inline-block;padding:3px 9px;border-radius:7px;font-size:10.5px;font-weight:600;letter-spacing:.02em}
.tg.IN{background:var(--in-soft);color:var(--in-ink)}
.tg.OUT{background:var(--out-soft);color:var(--out-ink)}
.tg.FEE{background:var(--fee-soft);color:var(--fee-ink)}
.tg.soft{background:rgba(48,50,52,.08);color:var(--ink-2)}
.tag{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:11.5px;font-weight:600;flex:none}
.tag.IN{background:var(--in-soft);color:var(--in)}
.tag.OUT{background:var(--out-soft);color:var(--out)}
.tag.FEE{background:var(--fee-soft);color:var(--fee)}

/* ---------- 记录行 ---------- */
.rec{display:flex;align-items:center;gap:11px;padding:11.5px 0;border-bottom:.5px solid var(--line-2)}
.rec:last-child{border-bottom:0}
.rec .tag{width:36px;height:36px;border-radius:12px;font-size:12px}
.rec .mid{flex:1;min-width:0}
.rec .p1{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec .p2{font-size:10.5px;color:var(--ink-3);margin-top:2.5px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;line-height:1.5}
.rec .amt{font-size:13.5px;font-variant-numeric:tabular-nums;font-weight:700;flex:none}
.paperclip{color:var(--ink-3);font-size:11px}

/* ---------- 弹层 / 轻提示 ---------- */
.overlay{position:fixed;inset:0;background:rgba(40,46,48,.46);z-index:60;display:flex;align-items:flex-end;justify-content:center;-webkit-backdrop-filter:blur(3px);animation:fade .18s}
.overlay.center{align-items:center;padding:20px}
@keyframes fade{from{opacity:0}}
.sheet{background:var(--paper);width:100%;max-width:560px;max-height:88%;overflow-y:auto;border-radius:22px 22px 0 0;padding:10px 18px calc(20px + env(safe-area-inset-bottom));animation:up .22s cubic-bezier(.3,.9,.3,1)}
@keyframes up{from{transform:translateY(34px);opacity:.55}}
.sheet.center{border-radius:22px;max-height:86%;box-shadow:var(--shadow-lg);animation:pop .18s cubic-bezier(.3,.9,.3,1)}
@keyframes pop{from{transform:scale(.965);opacity:.6}}
.sheet .grip{width:38px;height:4px;border-radius:2px;background:rgba(48,50,52,.16);margin:8px auto 14px}
.sheet-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.sheet-hd .tt{font-size:16.5px;font-weight:700;letter-spacing:-.012em}
.x-btn{width:30px;height:30px;border-radius:50%;background:rgba(48,50,52,.10);border:0;color:var(--ink-2);font-size:13px;display:grid;place-items:center;transition:background .15s}
.x-btn:hover{background:rgba(48,50,52,.18)}

#toast{position:fixed;left:50%;bottom:44px;transform:translateX(-50%) translateY(16px);background:rgba(40,44,46,.94);color:#fff;font-size:13px;padding:11px 19px;border-radius:12px;z-index:99;opacity:0;transition:.22s;pointer-events:none;max-width:82vw;text-align:center;line-height:1.5;box-shadow:var(--shadow)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 状态徽标 / 徽章 ---------- */
.state{display:inline-flex;align-items:center;gap:5px;font-size:11px}
.state i{width:6px;height:6px;border-radius:50%;display:block}
.state.on i{background:var(--in)} .state.off i{background:var(--ink-3)}
.badge{font-size:10px;padding:2.5px 8px;border-radius:6px;background:var(--brand-soft);color:var(--brand-tint);font-weight:600}

/* ---------- 空状态 / 表格 ---------- */
.empty{padding:44px 10px;text-align:center;color:var(--ink-3);font-size:12.5px;line-height:2.1}
.empty::before{content:"· · ·";display:block;font-size:20px;letter-spacing:.3em;color:var(--line);margin-bottom:6px}
.tbwrap{background:var(--surface);border-radius:var(--r-lg);overflow-x:auto;overflow-y:hidden;box-shadow:var(--shadow-sm)}
table.t{width:100%;border-collapse:collapse;font-size:12.5px}
/* 列多而内容短的表格（如用户管理）：单元格不换行，宽度不足时由容器横向滚动，
   避免被浏览器压成「管/理/员」这种竖排文字 */
table.t.nw td{white-space:nowrap}
table.t thead th{background:var(--surface-3);text-align:left;padding:12px 14px;font-size:10.5px;color:var(--ink-3);font-weight:600;letter-spacing:.05em;border-bottom:.5px solid var(--line);white-space:nowrap}
table.t td{padding:11.5px 14px;border-bottom:.5px solid var(--line-2);vertical-align:middle}
table.t tbody tr{transition:background .12s}
table.t tbody tr:last-child td{border-bottom:0}
table.t tbody tr:hover{background:#F9FAF9}
.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.act{display:flex;gap:14px;white-space:nowrap}
.act a{font-size:12px;cursor:pointer;font-weight:500;transition:opacity .15s}
.act a:hover{opacity:.7}
.act a.e{color:var(--brand-tint)} .act a.d{color:var(--danger)}
.tfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:var(--surface-3);border-top:.5px solid var(--line);font-size:11.5px;color:var(--ink-3)}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--surface);border-radius:var(--r-md);padding:12px 14px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.sel{border:.5px solid transparent;background:rgba(48,50,52,.09);border-radius:9px;padding:8px 12px;font-size:12px;color:var(--ink);font-family:var(--font);min-width:96px;appearance:none;cursor:pointer;transition:border-color .15s}
.sel:hover{border-color:var(--brand)}
.sel.ghost-sel{background:var(--surface);box-shadow:var(--shadow-sm)}
.spacer{flex:1}
.sbtn{padding:8px 15px;border-radius:9px;border:0;font-size:12px;cursor:pointer;font-weight:600;transition:filter .15s}
.sbtn.p{background:var(--brand);color:#fff;box-shadow:0 2px 8px rgba(126,140,132,.30)}
.sbtn.g{background:rgba(48,50,52,.09);color:var(--ink)}
.sbtn.danger{background:rgba(158,90,72,.13);color:var(--danger)}
.sbtn.sm{padding:5px 10px;font-size:11px;border-radius:8px}
.sbtn:hover{filter:brightness(1.05)}

.pill{display:inline-flex;align-items:center;gap:7px;background:rgba(48,50,52,.08);border:0;border-radius:999px;padding:6px 13px;font-size:11.5px;color:var(--ink-2);white-space:nowrap}

/* ---------- 校验 ---------- */
.inp.bad{box-shadow:0 0 0 1.5px var(--danger), var(--shadow-sm);border-color:var(--danger)}
.err-tip{color:var(--danger);font-size:11px;margin-top:4px;display:none}

/* ---------- 滚动条（桌面） ---------- */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(48,50,52,.28);border-radius:6px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background-color:rgba(48,50,52,.45)}
::-webkit-scrollbar-track{background:transparent}