/* v53 — shared light/dark design tokens and compact metric spacing. */
:root {
  --bg:#f3f5f9; --bg-accent:#f3f5f9;
  --surface:#ffffff; --surface-2:#f5f7fb; --surface-3:#eaf0f8;
  --line:#e3e8f1; --line-strong:#cdd6e5;
  --text:#18243a; --muted:#4e5e76;
  --primary:#426de7; --primary-2:#315bd1; --primary-soft:#ebf0ff; --accent:#315ac7;
  --good:#14845d; --good-soft:#e9f6f0; --bad:#c13f4d; --bad-soft:#fff0f2;
  --shadow:0 3px 14px rgba(28,45,80,.035),0 1px 2px rgba(28,45,80,.02);
  --shadow-premium:0 16px 40px rgba(28,45,80,.1);
  --radius-xl:22px; --radius-lg:18px; --radius-md:12px;
  --hero-from:#1e3468; --hero-to:#3358a5; --hero-ink:#fff; --hero-muted:#d0dcf5;
}
:root[data-theme="dark"] {
  --bg:#0d1421; --bg-accent:#0d1421;
  --surface:#172132; --surface-2:#1c293d; --surface-3:#25354d;
  --line:#2a374c; --line-strong:#415372;
  --text:#f0f4fc; --muted:#b9c6da;
  --primary:#426de7; --primary-2:#315bd1; --primary-soft:#23365a; --accent:#a9c2ff;
  --good:#68d5a8; --good-soft:#1a3a34; --bad:#ff929e; --bad-soft:#402731;
  --shadow:0 4px 18px rgba(0,0,0,.12);
  --shadow-premium:0 18px 48px rgba(0,0,0,.32);
  --hero-from:#23395e; --hero-to:#22304c; --hero-ink:#f5f8ff; --hero-muted:#b7c9e9;
}
html,body { background:var(--bg); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; font-weight:500; -webkit-font-smoothing:auto; }
/* Keep the viewport as the only page scroller. With explicit root overflow,
   body overflow-x:hidden would create another scroll container; the old
   overscroll-behavior:none on body then traps wheel/touch scrolling there.
   Clip horizontal motion at the root and reserve a stable scrollbar width. */
html { overflow-x:hidden; overflow-y:scroll; overscroll-behavior:none; scrollbar-gutter:stable; }
html.modal-open { overflow-y:hidden; }
body { min-height:100dvh; overflow:visible; overscroll-behavior:auto; }
button { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button:focus-visible,[data-action]:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
button:disabled { opacity:.45; cursor:default; }
.app-shell { width:min(100%,600px); padding:calc(18px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom)); }
/* Static text should not request a compositing layer. Swipe classes retain
   their temporary transform/backface rules while the finger is moving. */
.app-shell,.content { backface-visibility:visible; -webkit-backface-visibility:visible; }
.hero { padding:0; margin-bottom:16px; background:none; border:0; border-radius:0; box-shadow:none; }
.hero-top { align-items:center; margin-bottom:20px; gap:12px; }
.brand { display:flex; align-items:center; gap:11px; min-width:0; }
.brand-mark { display:grid; place-items:center; width:44px; height:44px; flex:0 0 44px; border-radius:15px; background:var(--text); color:var(--surface); }
.brand-mark svg { width:27px; height:27px; }
.brand>div { min-width:0; }
.hero h1 { font-size:22px; font-weight:750; line-height:1.15; letter-spacing:-.045em; }
.hero-sub { font-size:12px; font-weight:500; line-height:1.5; margin-top:4px; }
.icon-btn { background:var(--surface); border-color:var(--line); border-radius:14px; font-size:21px; }
.period-row { background:var(--surface-3); padding:4px; border-radius:15px; gap:3px; margin-bottom:9px; }
.chip { padding:0 4px; font-size:12px; min-height:39px; font-weight:650; border-color:transparent; border-radius:11px; }
#presetPeriods .seg-indicator { border-radius:11px; box-shadow:0 3px 7px rgba(29,61,140,.16); background:var(--primary-2); }
.range-btn { min-height:46px; padding:10px 13px; border-radius:14px; background:var(--surface); border-color:var(--line); }
.range-label { font-weight:600; font-size:13px; }
.range-value { font-size:13px; font-weight:650; letter-spacing:0; }
.range-value::after { content:'⌄'; display:inline-block; margin-left:8px; color:var(--muted); }
.network-switcher { margin-top:10px; border-radius:13px; background:var(--surface-3); border:0; box-shadow:none; gap:2px; }
.network-chip { flex:1 0 auto; min-height:36px; padding:7px 10px; font-size:12px; font-weight:650; border-radius:10px; }
#networkSwitcher .seg-indicator { border-radius:10px; box-shadow:0 2px 6px rgba(29,61,140,.15); }
#tabs,#tabs.has-plans { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:5px; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); margin-bottom:12px; }
.tab { min-height:39px; font-size:13px; font-weight:650; border:0; border-radius:12px; }
#tabs .tabs-indicator { border-radius:12px; background:var(--primary-2); box-shadow:0 3px 9px rgba(29,61,140,.14); }
#freshnessNote { color:var(--muted); font-size:12px; line-height:1.5; font-weight:600; padding:0 3px; margin-bottom:12px; }
#freshnessNote::before { content:''; display:inline-block; width:5px; height:5px; margin-right:6px; margin-bottom:1px; border-radius:50%; background:var(--muted); }
.content { gap:12px; overflow:visible; will-change:auto; min-width:0; transform:none; }
.revenue-hero { padding:21px 20px 18px; border-radius:22px; border:1px solid rgba(139,168,226,.18); color:var(--hero-ink); background:linear-gradient(118deg,var(--hero-from),var(--hero-to)); box-shadow:0 8px 24px rgba(32,62,124,.12); overflow:hidden; }
.revenue-eyebrow { display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--hero-muted); font-size:13px; font-weight:550; }
.revenue-scope { padding:4px 8px; font-size:12px; font-weight:600; border:1px solid rgba(200,216,248,.23); border-radius:7px; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.revenue-total { margin:16px 0 22px; font-size:clamp(28px,8.2vw,43px); line-height:1.08; font-weight:720; letter-spacing:-.045em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.revenue-plan-line { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; font-weight:600; color:var(--hero-muted); }
.revenue-plan-line strong { color:var(--hero-ink); font-size:13px; font-weight:650; }
.revenue-track { height:5px; border-radius:6px; background:rgba(212,225,250,.2); margin:9px 0 8px; overflow:hidden; }
.revenue-track>span { height:100%; display:block; background:#b1c7ff; border-radius:inherit; }
.revenue-caption { color:var(--hero-muted); font-size:12px; font-weight:600; }
.revenue-pacing { margin-top:15px; padding-top:13px; border-top:1px solid rgba(212,225,250,.24); }
.revenue-pacing-line { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:5px 12px; color:var(--hero-ink); font-size:14px; font-weight:650; line-height:1.4; }
.revenue-pacing-line strong { font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.revenue-pacing-values { display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:3px 7px; min-width:0; max-width:100%; }
.revenue-pacing-percent { font-size:16px; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; }
.revenue-pacing--ahead .revenue-pacing-line { color:#aff4d0; }
.revenue-pacing--behind .revenue-pacing-line { color:#ffd0d7; }
.revenue-pacing-note { margin-top:7px; color:var(--hero-muted); font-size:13px; font-weight:500; line-height:1.5; }
.summary-board,.compact-card,.section-block,.plan-card,.plan-controls { background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); }
.summary-board { padding:14px; }
.summary-subhead { text-transform:none; letter-spacing:0; color:var(--text); font-weight:650; font-size:14px; margin-bottom:9px; }
.summary-section+.summary-section { margin-top:12px; padding-top:12px; }
.summary-grid { gap:8px; }
/* Let labels and values define the height, including wrapped text. */
.metric-box { min-width:0; min-height:0; background:var(--surface-2); border:0; border-radius:12px; padding:10px 11px; }
.metric-label { font-size:13px; font-weight:600; line-height:1.4; margin-bottom:4px; }
.metric-value { font-size:20px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.metric-foot { font-size:12px; font-weight:500; line-height:1.45; }
.finance-grid .metric-box:last-child:nth-child(odd) { grid-column:1/-1; }
.cards-stack { gap:12px; }
.compact-card { padding:16px; }
.compact-head { gap:10px; margin-bottom:12px; }
.compact-title { font-size:17px; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.compact-subtitle { font-size:13px; font-weight:500; line-height:1.45; margin-top:5px; }
.card-arrow { display:none; }
.compact-badges { flex-shrink:0; max-width:48%; }
.badge { border:0; min-height:27px; font-size:12px; font-weight:600; line-height:1.35; padding:4px 8px; border-radius:7px; max-width:100%; white-space:normal; overflow-wrap:anywhere; text-align:center; }
.badge-accent { background:var(--primary-soft); color:var(--accent); }
.badge-muted { background:var(--surface-2); }
.compact-stats { gap:8px; }
.tiny-stat { min-width:0; border:0; border-radius:11px; padding:9px 11px; min-height:0; background:var(--surface-2); }
.tiny-stat-label { font-size:13px; font-weight:600; line-height:1.4; margin-bottom:4px; }
.tiny-stat-value { font-size:18px; font-weight:650; line-height:1.2; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.modal-sheet { background:var(--surface); border-color:var(--line); max-width:590px; margin:0 auto; box-shadow:var(--shadow-premium); border-radius:24px; }
.modal-body { padding:14px; gap:12px; }
.modal-head { padding:21px 16px 12px; }
.modal-head h2 { font-size:17px; font-weight:650; line-height:1.25; }
.modal-backdrop { background:rgba(6,13,27,.5); backdrop-filter:none; -webkit-backdrop-filter:none; }
.section-block { padding:13px; }
.section-title { font-size:15px; font-weight:650; }
.section-subtitle,.compact-footer-line { font-size:13px; font-weight:500; line-height:1.45; }
.list-row { background:var(--surface-2); border:0; padding:12px; border-radius:12px; }
.list-row-title { font-weight:600; overflow-wrap:anywhere; }
.list-row-value { font-weight:650; }
.list-row-meta,.list-row-submeta { line-height:1.5; font-size:13px; font-weight:500; }
.cash-board,.cash-section-inline,.cash-section-inline .compact-card,.cash-neutral-card,.tiny-stat.cash-zero,.tiny-stat.cash-neutral { background:var(--surface-2); box-shadow:none; border-color:var(--line); }
.cash-board,.cash-section-inline { background:var(--surface); }
.cash-inflow-card,.tiny-stat.cash-plus { background:var(--good-soft); box-shadow:none; border:0; }
.cash-outflow-card,.tiny-stat.cash-minus { background:var(--bad-soft); box-shadow:none; border:0; }
.amount-negative { color:var(--bad); } .amount-positive { color:var(--good); }
.plan-controls,.plan-card { padding:16px; }
.plan-kind-tabs { gap:3px; padding:4px; border-radius:13px; margin-bottom:12px; }
.plan-kind { font-weight:600; font-size:12px; padding:8px 3px; line-height:1.35; overflow-wrap:anywhere; }
.plan-kind.is-active { background:var(--primary-2); box-shadow:0 2px 5px rgba(22,52,112,.15); }
.plan-heading { margin-bottom:7px; }
.plan-heading h2 { font-size:18px; font-weight:700; }
.plan-sort-cycle { margin-bottom:0; border:0; background:var(--surface-2); min-height:48px; border-radius:12px; }
.plan-sort-copy>span { font-size:12px; font-weight:600; }
.plan-sort-copy>strong { font-size:13px; font-weight:600; line-height:1.4; white-space:normal; overflow-wrap:anywhere; }
.plan-sort-icon,.plan-sort-cycle-mark { background:transparent; }
.plan-refresh { background:var(--surface-2); border:0; font-size:23px; border-radius:12px; }
.plan-card-head>strong { font-size:25px; font-weight:700; color:var(--accent); }
.plan-card h3 { font-weight:650; font-size:16px; }
.plan-overview { padding:17px 16px 14px; }
.plan-small-grid { gap:12px 10px; margin:14px 0; }
.plan-metric>strong { font-size:22px; font-weight:650; letter-spacing:-.035em; line-height:1.2; }
.plan-metric>span { font-size:13px; font-weight:600; line-height:1.4; margin-bottom:4px; }
.plan-metric>small,.plan-pace small { font-size:12px; font-weight:500; line-height:1.45; }
.plan-heading p,.plan-note,.plan-next-option p,.plan-day-goal span { font-size:13px; font-weight:500; line-height:1.45; }
.plan-card-foot { font-size:12px; line-height:1.45; padding-top:12px; margin-top:12px; align-items:center; flex-wrap:wrap; }
.plan-card-foot span { white-space:normal; }
.plan-card-foot .plan-delta { font-weight:650; }
.plan-progress { height:5px; margin:12px 0; }
.plan-hero-number { font-weight:700; }
.plan-status,.plan-level-status { font-size:13px; font-weight:600; line-height:1.4; }
.plan-level-summary { font-size:12px; line-height:1.4; }
.plan-tiers thead th { font-size:12px; }
:root[data-theme="dark"] .plan-level-0 { --plan-level:#ef8f9d; }
:root[data-theme="dark"] .plan-level-1 { --plan-level:#eab76c; }
:root[data-theme="dark"] .plan-level-2 { --plan-level:#91b6ff; }
:root[data-theme="dark"] .plan-level-3 { --plan-level:#68d5a8; }
.cal-month { background:var(--surface-2); border:0; }
.cal-day { min-height:39px; font-weight:550; }
.cal-dw { font-size:12px; font-weight:600; }
.cal-day.today { outline:1px dashed var(--accent); outline-offset:-3px; }
.mini-chip { background:var(--surface-2); border:0; font-weight:550; }
.ghost-btn,.primary-btn { font-weight:650; border-radius:13px; box-shadow:none; }
.loading,.empty-state { border-color:var(--line); border-radius:20px; box-shadow:none; padding:24px 20px; color:var(--muted); font-size:13px; animation:none; }
.loading-dot { display:inline-block; width:12px; height:12px; border:2px solid var(--line-strong); border-top-color:var(--accent); border-radius:50%; margin-right:8px; vertical-align:-1px; animation:spin .8s linear infinite; }
.loading-lines { display:grid; gap:12px; margin-top:24px; }
.loading-lines i { display:block; height:30px; border-radius:8px; background:var(--surface-2); }
.loading-lines i:last-child { width:64%; }
.view-error { display:flex; align-items:center; gap:10px; padding:12px; margin:0 0 12px; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:14px; font-size:12px; }
.view-error button { margin-left:auto; border:0; border-radius:9px; padding:9px; background:var(--primary-soft); color:var(--accent); font-weight:600; }
.busy-overlay { background:rgba(7,15,30,.3); }
.busy-box { background:var(--surface); border-color:var(--line); }
.ptr-pill { background:var(--surface); border-color:var(--line); backdrop-filter:none; -webkit-backdrop-filter:none; }
.hero,.tabs,.summary-board,.compact-card,.section-block,.modal-sheet { transition:none; }
.content,.cal-month { will-change:auto; }
@media (hover:hover) {
  .chip:hover,.tab:hover,.network-chip:hover { transform:none; }
}
@supports (content-visibility:auto) {
  .cards-stack>.compact-card { contain-intrinsic-size:auto 295px; }
}
@media (max-width:390px) {
  .app-shell { padding-left:12px; padding-right:12px; }
  .hero h1 { font-size:20px; }
  .brand-mark { width:40px; height:40px; flex-basis:40px; }
  .chip { font-size:12px; }
  .tab { font-size:12px; }
  .range-value { font-size:12px; }
  .summary-board,.compact-card,.plan-controls,.plan-card { padding:13px; }
  .metric-value,.tiny-stat-value { font-size:17px; }
  .plan-metric>strong { font-size:20px; }
  .plan-kind-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:360px) {
  .compact-head { flex-wrap:wrap; }
  .compact-titles { flex-basis:100%; }
  .compact-badges { max-width:100%; flex-direction:row; flex-wrap:wrap; align-items:center; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}