/* ===== 视觉：浅灰柔光底 · 黑色胶囊导航 · 磨砂颗粒渐变卡 · 荧光青柠强调色 ===== */
:root {
  --bg: #ebebe8; --bg2: #f4f4f1; --card: rgba(255, 255, 255, .86); --card-solid: #fff; --ink: #121212; --ink2: #3a3a38;
  --muted: #8d8d88; --line: rgba(18, 18, 18, .09); --line2: rgba(18, 18, 18, .16); --pill: rgba(255, 255, 255, .55);
  --lime: #d4f13a; --lime-d: #9fbe17; --lime-ink: #1d2400; --warn: #ff6b3d; --good: #4a9b4f; --blue: #6e8fa8;
  --c0: #b9d63c; --c1: #e58c6c; --c2: #8b9c5c; --c3: #cf9ca3; --c4: #6e8fa8; --c5: #e2b65e; --c6: #8c6e9d; --c7: #5fa090; --c8: #d77d9c; --c9: #a69786; --c-other: #c8c8c2; --c-open: #b8b8b0;
  --h0: rgba(18, 18, 18, .045); --h1: #eef6cc; --h2: #d6ec70; --h3: #9dbd1d; --h1t: #4b5a12; --h2t: #2d3a00; --h3t: #172000;
  --shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 24px 48px -30px rgba(40, 40, 30, .35);
  --r: 30px; --r-s: 20px;
  --font: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0e0e0d; --bg2: #151514; --card: rgba(30, 30, 28, .86); --card-solid: #1c1c1a; --ink: #f1f1ec; --ink2: #cfcfc8; --muted: #8a8a84;
  --line: rgba(255, 255, 255, .08); --line2: rgba(255, 255, 255, .16); --pill: rgba(255, 255, 255, .05);
  --h0: rgba(255, 255, 255, .06); --h1: #343c1c; --h2: #6b861b; --h3: #cbe83c; --h1t: #d9e6a6; --h2t: #f3f9da; --h3t: #1d2400; --c-other: #5c5c56; --c-open: #77776f;
  --shadow: 0 24px 48px -30px rgba(0, 0, 0, .8); color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); min-height: 100vh; font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
body::before { content: ""; position: fixed; inset: -20vh -20vw; z-index: -2; pointer-events: none;
  background: radial-gradient(38vw 30vh at 78% 12%, rgba(246, 205, 178, .75), transparent 70%), radial-gradient(34vw 32vh at 62% 46%, rgba(222, 238, 170, .7), transparent 70%), radial-gradient(30vw 26vh at 92% 70%, rgba(236, 196, 204, .6), transparent 70%), radial-gradient(40vw 30vh at 8% 90%, rgba(255, 255, 255, .8), transparent 70%); filter: blur(10px); }
:root[data-theme="dark"] body::before { opacity: .16; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--grain); opacity: .05; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 12px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a { color: inherit; }

/* ---------- 布局 ---------- */
.shell { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
.rail { display: none; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 16px 18px 6px; position: sticky; top: 0; z-index: 20; }
.logo { width: 40px; height: 40px; display: grid; place-items: center; flex: none; }
.logo svg { width: 30px; height: 30px; }
.topnav { display: none; }
.top-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
main { padding: 4px 16px 130px; max-width: 1320px; width: 100%; margin: 0 auto; }
@media (min-width: 1000px) {
  .shell { grid-template-columns: 84px 1fr; }
  .rail { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 0; position: sticky; top: 0; height: 100vh; }
  .rail .sp { flex: 1; }
  .topbar { padding: 22px 28px 6px 6px; background: linear-gradient(var(--bg) 60%, transparent); }
  .topbar .logo { display: none; }
  .topnav { display: flex; gap: 8px; flex-wrap: wrap; }
  main { padding: 6px 28px 60px 6px; }
  .bottomnav { display: none !important; }
}

/* ---------- 胶囊 / 按钮 ---------- */
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line2); background: var(--pill); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); white-space: nowrap; font-size: 14px; }
.pill svg { width: 17px; height: 17px; }
.pill.on, .pill.dark { background: var(--ink); color: var(--bg2); border-color: var(--ink); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .6); }
.pill.lime { background: var(--lime); color: var(--lime-ink); border-color: transparent; }
.pill.sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.pill.danger { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.pill[disabled] { opacity: .45; cursor: not-allowed; }
.circ { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line2); background: var(--pill); display: grid; place-items: center; flex: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.circ svg { width: 18px; height: 18px; }
.circ.dark { background: #0d0d0d; color: #fff; border-color: #0d0d0d; }
.circ.sm { width: 36px; height: 36px; }
.circ.sm svg { width: 15px; height: 15px; }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--ink); color: var(--bg2); font-size: 11px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.chip.on { background: var(--ink); color: var(--bg2); border-color: var(--ink); }
.chip .sw { width: 10px; height: 10px; border-radius: 50%; }

/* 底部悬浮导航（手机） */
.bottomnav { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; display: flex; gap: 2px; align-items: center; padding: 6px; border-radius: 999px; background: rgba(250, 250, 247, .78); border: 1px solid var(--line); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .35); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); width: min(560px, calc(100vw - 20px)); justify-content: space-between; }
:root[data-theme="dark"] .bottomnav { background: rgba(28, 28, 26, .82); }
.bottomnav button { flex: 1; min-width: 44px; min-height: 52px; border: 0; background: transparent; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10.5px; color: var(--muted); }
.bottomnav button.on { background: var(--ink); color: var(--bg2); }
.bottomnav button.add { flex: none; width: 54px; height: 54px; background: #0d0d0d; color: var(--lime); border-radius: 50%; }
.bottomnav button.add svg { width: 24px; height: 24px; stroke-width: 2.2; }

/* ---------- 标题区 ---------- */
.hello { margin: 10px 2px 18px; }
.hello h1 { margin: 0; font-weight: 500; font-size: clamp(26px, 6vw, 40px); letter-spacing: -.02em; line-height: 1.12; }
.hello h1 span { display: block; color: var(--muted); font-weight: 400; }
.periodbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.periodbar .pill.cur svg { width: 14px; height: 14px; }
.periodbar .sub { color: var(--muted); font-size: 12.5px; margin-left: 4px; }

/* ---------- 网格与卡片 ---------- */
.grid { display: grid; gap: 16px; }
.g-acc { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.g-2 { grid-template-columns: 1fr; }
@media (min-width: 900px) { .g-2 { grid-template-columns: 1.25fr 1fr; } .g-2b { grid-template-columns: 1fr 1fr; } }
.card { background: var(--card); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); border: 1px solid rgba(255, 255, 255, .6); position: relative; min-width: 0; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
:root[data-theme="dark"] .card { border-color: var(--line); }
.card-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.card-h h2, .card-h h3 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.card-h .note { color: var(--muted); font-size: 12px; }
.card-h .r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.ic-ring { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center; flex: none; position: relative; }
.ic-ring svg.ico { width: 19px; height: 19px; }
.scope { color: var(--muted); font-size: 12px; margin: -8px 0 12px; }
.muted { color: var(--muted); }
.r { text-align: right; }
.sec-title { display: flex; align-items: baseline; gap: 10px; margin: 26px 2px 12px; }
.sec-title h2 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.sec-title .tabs-u { display: flex; gap: 22px; }
.ulink { border: 0; background: none; padding: 8px 0; color: var(--muted); border-bottom: 2px solid transparent; min-height: 44px; font-size: 16px; }
.ulink.on { color: var(--ink); border-color: var(--ink); }

/* ---------- 渐变账户卡（磨砂颗粒） ---------- */
.acard { position: relative; overflow: hidden; color: #fff; border-radius: 34px; padding: 20px 20px 18px; min-height: 248px; box-shadow: 0 30px 60px -34px rgba(40, 40, 10, .7), 0 1px 0 rgba(255, 255, 255, .35) inset; isolation: isolate; }
.acard::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--g); }
.acard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain); opacity: .32; mix-blend-mode: overlay; }
.acard[data-t="olive"] { --g: radial-gradient(120% 90% at 100% 100%, #d4ee52 0%, rgba(212, 238, 82, 0) 55%), radial-gradient(80% 70% at 85% 0%, #8fa65a 0%, rgba(143, 166, 90, 0) 70%), linear-gradient(155deg, #34381d 0%, #59612a 45%, #8fa52f 100%); }
.acard[data-t="rose"] { --g: radial-gradient(110% 90% at 100% 0%, #e2a28d 0%, rgba(226, 162, 141, 0) 60%), radial-gradient(90% 80% at 0% 100%, #c7a37f 0%, rgba(199, 163, 127, 0) 70%), linear-gradient(155deg, #8c5f62 0%, #b9877f 50%, #c99d86 100%); }
.acard[data-t="slate"] { --g: radial-gradient(110% 90% at 100% 100%, #b9d4dd 0%, rgba(185, 212, 221, 0) 60%), linear-gradient(155deg, #2f3a45 0%, #566b7d 50%, #8aa3b3 100%); }
.acard[data-t="plum"] { --g: radial-gradient(110% 90% at 100% 0%, #e0a9c3 0%, rgba(224, 169, 195, 0) 60%), linear-gradient(155deg, #3a2b40 0%, #6d4f77 50%, #a9809f 100%); }
.acard[data-t="sand"] { --g: radial-gradient(110% 90% at 100% 100%, #f1d9a2 0%, rgba(241, 217, 162, 0) 60%), linear-gradient(155deg, #5c4c34 0%, #9c825a 50%, #cdb284 100%); }
.acard[data-t="teal"] { --g: radial-gradient(110% 90% at 100% 100%, #b8e6c4 0%, rgba(184, 230, 196, 0) 60%), linear-gradient(155deg, #1e3634 0%, #3f7268 50%, #7fb8a3 100%); }
.acard .top { display: flex; align-items: center; gap: 12px; }
.acard .logo-ring { width: 50px; height: 50px; position: relative; display: grid; place-items: center; flex: none; }
.acard .logo-ring svg.arc { position: absolute; inset: 0; width: 50px; height: 50px; }
.acard .logo-ring svg.ico { width: 20px; height: 20px; }
.acard .nm { font-size: 19px; line-height: 1.12; font-weight: 400; letter-spacing: -.01em; max-width: 12ch; word-break: break-all; }
.acard .role { font-size: 11.5px; opacity: .72; margin-top: 3px; }
.acard .go { margin-left: auto; width: 50px; height: 50px; border-radius: 50%; background: #0d0d0d; color: #fff; border: 0; display: grid; place-items: center; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .7); }
.acard .go svg { width: 16px; height: 16px; }
.acard .lab { font-size: 12.5px; opacity: .72; margin-top: 18px; }
.acard .bigrow { display: flex; align-items: flex-end; gap: 14px; }
.big { font-size: clamp(34px, 9vw, 46px); font-weight: 300; letter-spacing: -.035em; line-height: 1.05; }
.big .cur { font-size: .42em; opacity: .6; margin-right: 3px; vertical-align: .55em; letter-spacing: 0; }
.big .dec { font-size: .5em; opacity: .7; letter-spacing: 0; }
.acard .side { font-size: 12px; opacity: .72; line-height: 1.3; padding-bottom: 6px; }
.acard .side b { display: block; font-weight: 500; opacity: 1; font-size: 13.5px; color: #fff; }
.acard .dots { color: #fff; margin: 10px 0 2px; display: block; }
.acard .stats3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; font-size: 11.5px; }
.acard .stats3 div { opacity: .72; }
.acard .stats3 b { display: block; font-weight: 500; font-size: 14px; opacity: 1; color: #fff; margin-top: 1px; }
.acard .cmp { font-size: 11.5px; opacity: .78; margin-top: 10px; line-height: 1.35; }
.acard .glass { background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .22); border-radius: 18px; }
/* 预算进度（参考图：已付 | 标记 | 剩余） */
.budget { margin-top: 18px; }
.acard .bigrow .ringbox { margin-left: auto; width: 84px; height: 84px; margin-top: -18px; }
.bbar { position: relative; display: flex; gap: 10px; align-items: stretch; }
.bseg { padding: 10px 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.bseg .ri { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; flex: none; }
.bseg .ri::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bseg.used { color: var(--lime); border-color: color-mix(in srgb, var(--lime) 55%, transparent) !important; background: linear-gradient(90deg, rgba(212, 241, 58, .18), rgba(212, 241, 58, .06)) !important; }
.bseg .v { color: #fff; margin-left: auto; font-weight: 500; white-space: nowrap; font-size: 12.5px; }
.bmark { position: absolute; top: -12px; bottom: -6px; width: 2px; background: var(--lime); border-radius: 2px; }
.bmark::before { content: ""; position: absolute; top: -2px; left: -6px; border: 7px solid transparent; border-top: 9px solid var(--lime); border-bottom: 0; }
.blabels { display: flex; justify-content: space-between; font-size: 11.5px; opacity: .72; margin-top: 6px; }
.ringbox { position: relative; width: 92px; height: 92px; color: #fff; }
.ringbox .rt { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-size: 11px; line-height: 1.1; opacity: .9; }
.ringbox .rt b { display: block; font-size: 19px; font-weight: 400; }
.ringbox .rt small { opacity: .6; }
.acard .quick { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.acard .quick button { min-height: 40px; border-radius: 99px; padding: 0 14px; background: #fff; color: #111; border: 0; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.acard .quick button.ghost { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .28); }

/* 合计次要条 */
.totalbar { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 12px 18px; border-radius: 24px; border: 1px solid var(--line2); background: var(--pill); margin: 16px 0 6px; font-size: 13px; color: var(--ink2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.totalbar b { font-weight: 500; color: var(--ink); }
.totalbar .t { color: var(--muted); }

/* 数字小卡（参考图白色卡片） */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.kpi { background: var(--card-solid); border-radius: 26px; padding: 16px; box-shadow: var(--shadow); min-height: 128px; display: flex; flex-direction: column; }
.kpi .t { font-size: 13px; color: var(--ink2); margin-top: 10px; }
.kpi .v { font-size: 26px; font-weight: 300; letter-spacing: -.03em; margin-top: auto; }
.kpi .v small { font-size: 12px; color: var(--muted); letter-spacing: 0; }

/* 交易行 */
.txl { list-style: none; margin: 0; padding: 0; }
.txl li { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 18px; min-height: 56px; cursor: pointer; }
.txl li:hover, .txl li:focus-visible { background: var(--h0); }
.txl .ti { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 14px; color: #fff; }
.txl .tm { flex: 1; min-width: 0; }
.txl .tm b { display: block; font-weight: 500; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txl .tm span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txl .ta { text-align: right; font-size: 15px; font-weight: 500; white-space: nowrap; }
.txl .ta small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.amt-expense { color: var(--ink); } .amt-income { color: var(--good); } .amt-refund { color: var(--c4); } .amt-transfer { color: var(--muted); }
.tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--line2); margin-left: 4px; color: var(--ink2); }
.dayhead { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 6px 4px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
.dayhead:first-child { border-top: 0; }
.dayhead b { color: var(--ink); font-weight: 500; }

/* 热力色阶 */
.h0 { fill: var(--h0); background: var(--h0); } .h1 { fill: var(--h1); background: var(--h1); } .h2 { fill: var(--h2); background: var(--h2); } .h3 { fill: var(--h3); background: var(--h3); }
.miniheat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(1, 1fr); gap: 4px; }
.miniheat span { display: block; height: 30px; border-radius: 8px; min-width: 6px; }
.legend-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 12px; }
.legend-row i { width: 16px; height: 16px; border-radius: 5px; display: inline-block; }
.legend-row .rule { flex-basis: 100%; line-height: 1.45; }

/* ---------- 日历 ---------- */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal .wd { text-align: center; font-size: 12px; color: var(--muted); padding: 4px 0; }
.cal .cell { position: relative; aspect-ratio: 1 / 1.05; min-height: 46px; border-radius: 16px; border: 1px solid transparent; padding: 6px 7px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; background: var(--h0); overflow: hidden; }
.cal .cell .d { font-size: 13px; font-weight: 500; }
.cal .cell .m { font-size: 10px; color: var(--muted); }
.cal .cell .a { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal .cell.h1 { color: var(--h1t); } .cal .cell.h2 { color: var(--h2t); } .cal .cell.h3 { color: var(--h3t); }
.cal .cell.out { opacity: .28; pointer-events: none; }
.cal .cell.fut { background: transparent; border: 1px dashed var(--line2); }
.cal .cell.today::after { content: ""; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px var(--ink); }
.cal .cell.sel { outline: 2px solid var(--ink); outline-offset: 1px; }
.cal .cell .inc { position: absolute; bottom: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
@media (min-width: 700px) { .cal { gap: 8px; } .cal .cell { aspect-ratio: 1.25 / 1; padding: 8px 10px; } .cal .cell .a { font-size: 12px; } }
.daypanel .stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 12px; }
.daypanel .stats4 div { background: var(--h0); border-radius: 16px; padding: 10px; font-size: 11.5px; color: var(--muted); }
.daypanel .stats4 b { display: block; color: var(--ink); font-size: 14px; font-weight: 500; margin-top: 2px; word-break: break-all; }
.txl .acts { display: flex; gap: 4px; }

/* ---------- 图表通用 ---------- */
.chart-box { width: 100%; min-height: 40px; }
svg.chart { display: block; overflow: visible; }
svg.chart .grid { stroke: var(--line); stroke-width: 1; }
svg.chart .zero { stroke: var(--line2); stroke-dasharray: 3 3; }
svg.chart .ax { font-size: 10.5px; fill: var(--muted); }
svg.chart .ax.strong, svg.chart .lbl.strong { fill: var(--ink); font-weight: 500; }
svg.chart .lbl { font-size: 11.5px; fill: var(--ink2); }
svg.chart .b { fill: var(--ink); opacity: .82; } svg.chart .hl { fill: var(--lime-d); } svg.chart .neg { fill: var(--c4); }
svg.chart .bar.sel .b, svg.chart .bar.sel .hl { fill: var(--lime-d); opacity: 1; }
svg.chart .bar { cursor: pointer; }
svg.chart .today { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 4 3; }
svg.chart .today-t { fill: var(--warn); }
svg.chart .b-exp { fill: var(--ink); } svg.chart .b-inc { fill: var(--lime-d); }
svg.chart .line { fill: none; stroke: var(--ink); stroke-width: 1.8; }
svg.chart .area { fill: url(#none); fill: var(--lime); opacity: .14; }
svg.chart .hit { fill: transparent; }
svg.chart .hit:hover, svg.chart .hit:focus { fill: var(--ink); fill-opacity: .12; }
svg.chart .pin { fill: var(--lime); }
svg.chart .pin-t { font-size: 10px; fill: var(--lime-ink); font-weight: 600; }
svg.chart .drop { stroke: var(--ink); stroke-dasharray: 2 3; opacity: .5; }
svg.chart .cellt { font-size: 10px; }
svg.chart .cellt.l0, svg.chart .cellt.l1 { fill: var(--h1t); } svg.chart .cellt.l2 { fill: var(--h2t); } svg.chart .cellt.l3 { fill: var(--h3t); }
svg.chart .flow { opacity: .42; transition: opacity .15s; } svg.chart .flow:hover, svg.chart .flow:focus { opacity: .75; }
svg.chart .node-c { fill: var(--ink); }
svg.chart .g-period { fill: var(--ink); opacity: .1; }
svg.chart.kline .cdl.up .body { fill: var(--card-solid); stroke: var(--good); stroke-width: 1.5; } svg.chart.kline .cdl.up .wick { stroke: var(--good); }
svg.chart.kline .cdl.down .body { fill: var(--warn); stroke: var(--warn); } svg.chart.kline .cdl.down .wick { stroke: var(--warn); }
svg.chart.kline .vol { fill: var(--ink); opacity: .22; }
svg.chart.kline .cdl:hover .vol, svg.chart.kline .cdl:focus .vol { opacity: .5; }
svg [tabindex]:focus { outline: none; } svg [tabindex]:focus-visible { outline: none; stroke: var(--ink); stroke-width: 2; }
.hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rank li { display: grid; grid-template-columns: 12px 1fr auto 52px; gap: 4px 10px; align-items: center; font-size: 13.5px; padding: 4px 2px; border-radius: 12px; }
.rank .dot { width: 10px; height: 10px; border-radius: 50%; }
.rank .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .am { font-weight: 500; } .rank .pc { color: var(--muted); font-size: 12px; text-align: right; }
.rank .track { grid-column: 2 / 5; height: 6px; background: var(--h0); border-radius: 9px; overflow: hidden; }
.rank .track span { display: block; height: 100%; border-radius: 9px; }
.empty { display: grid; place-items: center; text-align: center; gap: 4px; padding: 26px 10px; color: var(--muted); font-size: 13px; }
.empty b { color: var(--ink2); font-weight: 500; font-size: 14px; }
.empty-ic { width: 52px; height: 52px; border-radius: 50%; border: 1px dashed var(--line2); display: grid; place-items: center; margin-bottom: 6px; }
.empty-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.dtable { margin-top: 12px; font-size: 13px; }
.dtable summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--ink2); }
.dtable table, table.t { width: 100%; border-collapse: collapse; }
.dtable th, .dtable td, table.t th, table.t td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.dtable th, table.t th { color: var(--muted); font-size: 12px; }
.dtable tfoot td { font-weight: 500; }

/* 统计页：各账户并排（手机横滑） */
.cols { display: grid; gap: 16px; grid-auto-flow: column; grid-auto-columns: minmax(88%, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.cols > * { scroll-snap-align: start; }
@media (min-width: 900px) { .cols { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); overflow: visible; } }
.colhead { display: flex; align-items: center; gap: 10px; padding: 6px 8px 12px; }
.colhead .sw { width: 34px; height: 22px; border-radius: 8px; }
.colhead b { font-weight: 500; font-size: 16px; }
.colhead span { color: var(--muted); font-size: 12px; }
.stack { display: grid; gap: 16px; }
.subtabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 16px; padding: 2px; }
.subtabs::-webkit-scrollbar { display: none; }
.enter > * { animation: rise .55s cubic-bezier(.2, .8, .2, 1) both; }
.enter > *:nth-child(2) { animation-delay: .06s; } .enter > *:nth-child(3) { animation-delay: .12s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .enter > * { animation: none; } * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- 表单 ---------- */
.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field > span { font-size: 12.5px; color: var(--muted); }
.inp, select.inp, textarea.inp { width: 100%; min-height: 46px; border-radius: 16px; border: 1px solid var(--line2); background: var(--card-solid); padding: 10px 14px; font-size: 15px; }
textarea.inp { min-height: 120px; resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.inp:focus { outline: 2px solid var(--ink); outline-offset: 0; }
.inp.bad { border-color: var(--warn); }
.err { color: var(--warn); font-size: 12.5px; min-height: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--h0); }
.seg button { min-height: 42px; border: 0; border-radius: 999px; background: transparent; font-size: 14px; }
.seg button.on { background: var(--ink); color: var(--bg2); }
.amt-in { font-size: 38px; font-weight: 300; letter-spacing: -.03em; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; background: transparent; padding: 6px 0; width: 100%; }
.amt-in:focus { outline: none; border-color: var(--ink); }
.catgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.catgrid .chip { min-height: 40px; }
.switch { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; }
.switch input { width: 20px; height: 20px; accent-color: var(--ink); }
.list-edit { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.list-edit li { display: flex; gap: 8px; align-items: center; }
.list-edit li .inp { flex: 1; min-width: 0; }
.slotpick { width: 46px; min-height: 46px; border-radius: 14px; border: 1px solid var(--line2); padding: 0; }

/* ---------- 弹层 ---------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(10, 10, 8, .38); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: min(640px, 100%); max-height: 92vh; overflow: auto; background: var(--bg2); border-radius: 30px 30px 0 0; padding: 10px 18px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .4); animation: up .28s cubic-bezier(.2, .8, .2, 1); }
.sheet.wide { width: min(900px, 100%); }
.sheet .grab { width: 44px; height: 5px; border-radius: 9px; background: var(--line2); margin: 2px auto 10px; }
.sheet-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; position: sticky; top: -10px; background: var(--bg2); padding: 6px 0; z-index: 2; }
.sheet-h h2 { margin: 0; font-size: 19px; font-weight: 500; flex: 1; }
@media (min-width: 700px) { .scrim { align-items: center; } .sheet { border-radius: 30px; } }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.dialog { width: min(420px, calc(100% - 32px)); background: var(--bg2); border-radius: 28px; padding: 22px; margin: auto; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); }
.scrim.center { align-items: center; }
.dialog h2 { margin: 0 0 8px; font-size: 19px; font-weight: 500; }
.dialog p { margin: 0 0 18px; color: var(--ink2); font-size: 14px; white-space: pre-line; }
.dialog .btns { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 80; background: #0d0d0d; color: #fff; border-radius: 999px; padding: 8px 8px 8px 20px; display: flex; align-items: center; gap: 12px; font-size: 14px; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .6); max-width: calc(100vw - 24px); animation: up .25s; }
.toast button { min-height: 38px; border-radius: 99px; border: 0; padding: 0 14px; background: var(--lime); color: var(--lime-ink); font-weight: 500; }
.toast.noact { padding: 12px 20px; }
@media (min-width: 1000px) { .toast { bottom: 28px; } }
#tip { position: fixed; z-index: 90; pointer-events: none; background: #0d0d0d; color: #fff; border-radius: 14px; padding: 8px 12px; font-size: 12px; max-width: 260px; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .6); opacity: 0; transition: opacity .12s; }
#tip.show { opacity: 1; }
#tip b { display: block; font-size: 15px; font-weight: 500; color: var(--lime); margin: 1px 0; }
#tip span { opacity: .7; }

/* ---------- 引导页 ---------- */
.onb { min-height: 100vh; display: grid; place-items: center; padding: 20px 14px 40px; }
.onb-card { width: min(560px, 100%); }
.onb .hero { margin-bottom: 14px; }
.onb .hero .acard { min-height: 0; }
.onb .hero h1 { font-weight: 400; font-size: 30px; letter-spacing: -.02em; margin: 26px 0 6px; line-height: 1.15; }
.onb .hero p { margin: 0; opacity: .8; font-size: 14px; }
.onb .accrow { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; align-items: end; }
.onb .acc-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2); margin: 6px 0 8px; }
.onb .acc-label i { width: 26px; height: 16px; border-radius: 6px; }

/* 设置 */
.set-sec { margin-bottom: 16px; }
.set-sec .card-h { margin-bottom: 10px; }
.accedit { border: 1px solid var(--line); border-radius: 22px; padding: 14px; margin-bottom: 10px; }
.accedit .hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.accedit .hd .sw { width: 34px; height: 22px; border-radius: 8px; }
.themes { display: flex; gap: 8px; flex-wrap: wrap; }
.themes button { width: 44px; height: 44px; border-radius: 14px; border: 2px solid transparent; position: relative; overflow: hidden; }
.themes button.on { border-color: var(--ink); }
.themes button span { position: absolute; inset: 0; background: var(--g); }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--muted); }
.statusdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--c-other); }
.statusdot.ok { background: var(--good); } .statusdot.error { background: var(--warn); } .statusdot.syncing { background: var(--lime-d); animation: blink 1s infinite; } .statusdot.offline { background: var(--c5); }
@keyframes blink { 50% { opacity: .3; } }
.preview-t { font-size: 12px; overflow-x: auto; }
.preview-t td, .preview-t th { white-space: nowrap; }
.preview-t tr.dup td { color: var(--muted); text-decoration: line-through; }
.counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.counts div { background: var(--h0); border-radius: 16px; padding: 10px 12px; font-size: 12px; color: var(--muted); }
.counts b { display: block; font-size: 22px; font-weight: 300; color: var(--ink); }
.maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.maps label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.maps select { min-height: 42px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card-solid); padding: 0 8px; font-size: 13px; }
.filters { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.filters .field { margin: 0; }
.hits { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink2); padding: 12px 4px 4px; }
.hits b { font-weight: 500; color: var(--ink); }

.swipe-hint { margin: -6px 2px 12px; font-size: 12px; color: var(--muted); }
@media (min-width: 900px) { .swipe-hint { display: none; } }
.acard .stats3 b { font-size: 13px; white-space: nowrap; }
.txl .tm span.tag { display: inline-block; vertical-align: 1px; color: var(--ink2); font-size: 11px; }
.acard .resv { margin-top: 14px; padding: 12px 14px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; font-size: 11.5px; }
.acard .resv div { opacity: .75; } .acard .resv b { display: block; opacity: 1; color: #fff; font-weight: 500; font-size: 14px; margin-top: 2px; white-space: nowrap; }
a.pill, a.circ { text-decoration: none; }
.cal .cell.h1 { background: var(--h1); } .cal .cell.h2 { background: var(--h2); } .cal .cell.h3 { background: var(--h3); }
.cal .cell.fut { background: transparent; }
@media (min-width: 1000px) { .cal .cell { aspect-ratio: auto; height: 86px; } }
.stack { align-content: start; }
svg.chart.kline .cdl.flat .body { fill: var(--muted); stroke: var(--muted); } svg.chart.kline .cdl.flat .wick { stroke: var(--muted); }
.shell { grid-template-columns: minmax(0, 1fr); }
.shell > div { min-width: 0; }
@media (min-width: 1000px) { .shell { grid-template-columns: 84px minmax(0, 1fr); } }
.card-h .chips { min-width: 0; flex: 1 1 auto; }
@media (max-width: 999px) { .top-right .pill.dark { display: none; } }
html, body { overflow-x: hidden; }