/* Self-hosted (CSP allows only 'self' for font-src — no Google Fonts CDN). */
    @font-face {
      font-family: 'Source Serif 4';
      font-style: normal;
      font-weight: 400 600;
      font-display: swap;
      src: url('./fonts/source-serif-4.woff2') format('woff2');
    }
    @font-face {
      font-family: 'IBM Plex Sans';
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url('./fonts/ibm-plex-sans.woff2') format('woff2');
    }

    /* ── Token layer additions: typography + semantic status colors ──
       Purely additive, unused elsewhere yet. --due/--paid/--overdue
       mirror the existing --gold/--pos/--neg dark/light split below
       (dark values here; light override at :root[data-theme="light"]). */
    :root {
      --font-display: 'Source Serif 4', ui-serif, Georgia, "Times New Roman", serif;
      --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", sans-serif;
      --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

      --due:          #d8b85a;
      --due-soft:     rgba(216,184,90,.12);
      --paid:         #55c98b;
      --paid-soft:    rgba(85,201,139,.12);
      --overdue:      #e6948c;
      --overdue-soft: rgba(255,105,97,.12);
    }

    .num-display {
      font-family: var(--font-display);
      font-variant-numeric: tabular-nums;
      font-feature-settings: "kern" 1, "tnum" 1;
    }

    .label-caps {
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* ── Premium dark / gold palette (Session 3) ───────────── */
      --bg:        #0a0a0c;   /* near-black canvas */
      --bg-2:      #101014;   /* faint raised wells (inputs) */
      --surface:   #141418;   /* card base */
      --surface-2: #1a1a20;   /* raised card / hover */
      --border:    #26262e;   /* hairline */
      --border-2:  #34343f;   /* brighter hairline */
      --text:      #f3f1ea;   /* warm off-white */
      --muted:     #8b8b95;   /* secondary text */
      --muted-2:   #5d5d66;   /* tertiary */
      --gold:      #d4af37;   /* the one accent — emphasis + positive */
      --gold-2:    #e7c869;   /* lighter gold for highlights */
      --gold-soft: rgba(212, 175, 55, 0.12);
      --neg:       #c75f57;   /* muted red — negatives / liabilities */
      --neg-soft:  rgba(199, 95, 87, 0.13);
      /* aliases kept so pre-existing rules adopt the new look */
      --accent:    var(--gold);
      --accent-dk: #b8932b;
      --danger:    var(--neg);
      --radius:    14px;
      --radius-lg: 20px;
      --safe-top:  env(safe-area-inset-top, 0px);
      --safe-bot:  env(safe-area-inset-bottom, 0px);
    }

    html, body {
      height: 100%;
      background: var(--bg);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 16px;
      -webkit-text-size-adjust: 100%;
    }

    /* ── Layout shells ─────────────────────────────────────── */

    #app {
      min-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: calc(var(--safe-top) + 24px) 24px calc(var(--safe-bot) + 24px);
    }

    .screen { display: none; width: 100%; max-width: 400px; }
    .screen.active { display: flex; flex-direction: column; gap: 16px; }

    /* ── Card ──────────────────────────────────────────────── */

    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 28px 24px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .card-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--text);
    }

    .card-subtitle {
      font-size: 0.875rem;
      color: var(--muted);
      margin-top: -12px;
    }

    /* ── Form elements ─────────────────────────────────────── */

    .field { display: flex; flex-direction: column; gap: 6px; }

    label {
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    input {
      width: 100%;
      padding: 13px 14px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 1rem;
      outline: none;
      transition: border-color 0.15s;
      -webkit-appearance: none;
    }

    input:focus { border-color: var(--accent); }

    input[type="number"] { -moz-appearance: textfield; }
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }

    /* OTP input — large digits */
    input.otp {
      font-size: 1.75rem;
      letter-spacing: 0.3em;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    /* ── Buttons ───────────────────────────────────────────── */

    .btn {
      width: 100%;
      padding: 14px;
      border: none;
      border-radius: 8px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.15s, background 0.15s;
      -webkit-appearance: none;
    }

    .btn:active { opacity: 0.8; }
    .btn:disabled { opacity: 0.45; cursor: not-allowed; }

    .btn-primary { background: var(--accent); color: #0f172a; }
    .btn-primary:not(:disabled):hover { background: var(--accent-dk); color: #fff; }

    .btn-ghost {
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--border);
    }

    /* ── Misc ──────────────────────────────────────────────── */

    .logo {
      text-align: center;
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--accent);
    }

    .error-msg {
      font-size: 0.875rem;
      color: var(--danger);
      min-height: 20px;
      text-align: center;
    }

    .info-msg {
      font-size: 0.875rem;
      color: var(--muted);
      text-align: center;
      line-height: 1.5;
    }

    /* QR code — Supabase returns an SVG, injected directly */
    #qr-container { display: flex; justify-content: center; }
    #qr-container svg { border-radius: 8px; background: #f1f5f9; padding: 8px; }

    /* ── Logged-in shell ───────────────────────────────────── */

    .shell-header {
      width: 100%;
      max-width: 400px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }

    .shell-status {
      font-size: 0.9375rem;
      color: var(--muted);
    }

    .shell-status strong { color: #4ade80; }

    /* ── Spinner ───────────────────────────────────────────── */

    .spinner {
      width: 24px; height: 24px;
      border: 3px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      margin: 0 auto;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    /* ════════════════════════════════════════════════════════ */
    /* SESSION 2 — DATA-ENTRY LAYER                              */
    /* ════════════════════════════════════════════════════════ */

    /* The app screen becomes a full-height flex column with a
       sticky header, scrollable main, and fixed bottom nav.
       Override the centered auth layout when the app is active. */
    #app.app-mode {
      display: block;
      padding: 0;
    }

    .app-wrap {
      display: flex;
      flex-direction: column;
      min-height: 100%;
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
    }

    .app-header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: rgba(15, 23, 42, 0.92);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
      padding: calc(var(--safe-top) + 12px) 18px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .app-header h1 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
    .ver-badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; margin-left: 8px; vertical-align: middle; }

    .icon-btn {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--muted);
      border-radius: 8px;
      padding: 7px 12px;
      font-size: 0.8125rem;
      font-weight: 600;
      cursor: pointer;
    }
    .icon-btn:active { opacity: 0.7; }

    /* Scrollable view area; bottom padding clears the nav bar. */
    .app-main {
      flex: 1;
      padding: 16px 16px calc(var(--safe-bot) + 84px);
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .view { display: none; flex-direction: column; gap: 16px; }
    .view.active { display: flex; }

    /* ── Bottom tab bar ────────────────────────────────────── */
    .tabbar {
      position: fixed;
      left: 0; right: 0; bottom: 0;
      z-index: 20;
      display: flex;
      background: rgba(30, 41, 59, 0.96);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-top: 1px solid var(--border);
      padding-bottom: var(--safe-bot);
    }
    .tabbar-inner { display: flex; width: 100%; max-width: 640px; margin: 0 auto; }

    .tab {
      flex: 1;
      background: transparent;
      border: none;
      color: var(--muted);
      padding: 9px 2px 7px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    .tab .tab-ico { font-size: 1.25rem; line-height: 1; }
    .tab.active { color: var(--accent); }
    .desktop-nav-label, .desktop-tool-link { display: none; }

    .global-add {
      position: fixed; right: max(18px, calc((100vw - 640px) / 2 + 18px));
      bottom: calc(var(--safe-bot) + 76px); z-index: 19;
      width: 54px; height: 54px; border: 1px solid rgba(231,200,105,.55);
      border-radius: 18px; background: linear-gradient(145deg, var(--gold-2), var(--gold));
      color: #181306; box-shadow: 0 14px 30px -12px rgba(212,175,55,.75);
      font-size: 1.8rem; font-weight: 400; line-height: 1; cursor: pointer;
      transition: transform .15s, box-shadow .15s;
    }
    .global-add:hover { box-shadow: 0 16px 34px -10px rgba(212,175,55,.85); }
    .global-add:active { transform: scale(.94); }
    .global-add:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

    /* ── Section headings / group headers ──────────────────── */
    .view-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
    .view-sub { font-size: 0.875rem; color: var(--muted); margin-top: -10px; }

    .group-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin: 6px 2px 0;
    }
    .group-head .g-name {
      font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.06em; color: var(--muted);
    }
    .group-head .g-total { font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }

    /* ── List rows ─────────────────────────────────────────── */
    .row {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: border-color 0.12s;
    }
    .row:active { border-color: var(--accent); }
    .row.archived { opacity: 0.5; }

    .row-ico {
      width: 38px; height: 38px; flex: none;
      border-radius: 9px;
      background: var(--bg);
      border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.15rem;
    }
    .row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .row-title { font-size: 0.9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .row-meta { font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .row-amt { text-align: right; font-variant-numeric: tabular-nums; flex: none; }
    .row-amt .amt-val { font-size: 0.9375rem; font-weight: 700; }
    .row-amt .amt-ccy { font-size: 0.6875rem; color: var(--muted); }
    .pos { color: var(--gold); }
    .neg { color: var(--neg); }

    .empty {
      text-align: center;
      color: var(--muted);
      font-size: 0.875rem;
      padding: 32px 16px;
      line-height: 1.6;
    }

    /* ── Quick-add bar (Transactions) ──────────────────────── */
    .quick-row { display: flex; gap: 10px; }
    .quick-btn {
      flex: 1;
      padding: 16px 8px;
      border-radius: var(--radius);
      border: none;
      font-size: 0.9375rem;
      font-weight: 700;
      cursor: pointer;
      display: flex; flex-direction: column; align-items: center; gap: 4px;
    }
    .quick-btn .q-ico { font-size: 1.25rem; }
    .quick-exp { background: rgba(248, 113, 113, 0.15); color: #fca5a5; border: 1px solid rgba(248,113,113,0.3); }
    .quick-inc { background: rgba(74, 222, 128, 0.15); color: #86efac; border: 1px solid rgba(74,222,128,0.3); }
    .quick-xfer { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }

    /* ── Add / pill buttons ────────────────────────────────── */
    .add-btn {
      width: 100%; padding: 13px;
      border-radius: var(--radius);
      border: 1px dashed var(--border);
      background: transparent;
      color: var(--accent);
      font-size: 0.9375rem; font-weight: 600;
      cursor: pointer;
    }
    .add-btn:active { opacity: 0.7; }

    /* ── Bottom-sheet modal ────────────────────────────────── */
    .sheet-backdrop {
      position: fixed; inset: 0; z-index: 100;
      background: rgba(0, 0, 0, 0.55);
      display: none;
      align-items: flex-end;
      justify-content: center;
    }
    .sheet-backdrop.open { display: flex; }

    .sheet {
      width: 100%;
      max-width: 640px;
      max-height: 92vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      background: var(--surface);
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      border: 1px solid var(--border);
      padding: 14px 20px calc(var(--safe-bot) + 24px);
      display: flex;
      flex-direction: column;
      gap: 16px;
      animation: sheet-up 0.22s ease;
    }
    @keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

    .sheet-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 2px auto 4px; }
    .sheet-title { font-size: 1.125rem; font-weight: 700; }

    .sheet select,
    .sheet textarea {
      width: 100%;
      padding: 13px 14px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 1rem;
      outline: none;
      font-family: inherit;
      -webkit-appearance: none;
    }
    .sheet select:focus,
    .sheet textarea:focus { border-color: var(--accent); }
    .sheet textarea { resize: vertical; min-height: 64px; }
    .sheet select { background-image: none; }

    .row-2 { display: flex; gap: 12px; }
    .row-2 > .field { flex: 1; min-width: 0; }

    /* ── Type picker grid (Add Account) ────────────────────── */
    .type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .type-cell {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px 6px;
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      cursor: pointer;
      color: var(--text);
    }
    .type-cell:active { border-color: var(--accent); }
    .type-cell .tc-ico { font-size: 1.5rem; }
    .type-cell .tc-name { font-size: 0.75rem; font-weight: 600; text-align: center; }

    /* ── Segmented control (txn type within form) ──────────── */
    .seg { display: flex; gap: 6px; flex-wrap: wrap; }
    .seg-btn {
      flex: 1; min-width: 70px;
      padding: 9px 6px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--muted);
      font-size: 0.8125rem; font-weight: 600;
      cursor: pointer;
    }
    .seg-btn.active { background: var(--accent); color: #0f172a; border-color: var(--accent); }

    .sheet-actions { display: flex; gap: 10px; margin-top: 4px; }
    .sheet-actions .btn { flex: 1; }
    .ledger-toolbar { display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(130px,.7fr)); gap:10px; }
    .ledger-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:12px 0; }
    .ledger-stat { min-width:0; padding:12px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
    .ledger-stat span { display:block; color:var(--muted); font-size:.65rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
    .ledger-stat strong { display:block; margin-top:5px; overflow:hidden; text-overflow:ellipsis; font-size:.95rem; white-space:nowrap; }
    .ledger-list { overflow:hidden; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
    .ledger-row { width:100%; display:grid; grid-template-columns:92px minmax(170px,1fr) minmax(90px,.55fr) minmax(100px,.65fr); gap:10px; align-items:center; padding:12px 14px; border:0; border-bottom:1px solid var(--border); color:var(--text); background:transparent; text-align:start; cursor:pointer; }
    .ledger-row:last-child { border-bottom:0; }
    .ledger-row:hover { background:var(--surface-2); }
    .ledger-row span,.ledger-row strong { min-width:0; }
    .ledger-row small { display:block; margin-top:3px; overflow:hidden; color:var(--muted); font-size:.66rem; text-overflow:ellipsis; white-space:nowrap; }
    .ledger-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ledger-flow,.ledger-balance { text-align:end; font-variant-numeric:tabular-nums; }
    .ledger-opening { margin:10px 0 2px; padding:11px 13px; border:1px dashed var(--border-2); border-radius:14px; color:var(--muted); font-size:.72rem; }
    .ledger-opening strong { color:var(--text); }
    @media(max-width:700px) {
      .ledger-toolbar { grid-template-columns:1fr 1fr; }
      .ledger-toolbar .field:first-child { grid-column:1/-1; }
      .ledger-summary { grid-template-columns:1fr 1fr; }
      .ledger-summary .ledger-stat:last-child { grid-column:1/-1; }
      .ledger-row { grid-template-columns:74px minmax(0,1fr) minmax(88px,auto); padding:11px; }
      .ledger-balance { grid-column:2/4; padding-top:7px; border-top:1px dashed var(--border); }
    }

    .chip-list { display: flex; flex-direction: column; gap: 8px; }
    .split-row {
      display: flex; align-items: center; gap: 10px;
      background: var(--bg); border: 1px solid var(--border);
      border-radius: 8px; padding: 10px 12px;
    }
    .split-row .sr-name { flex: 1; font-size: 0.875rem; font-weight: 600; }
    .split-row .sr-pct { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 700; }
    .split-row .sr-del { color: var(--danger); background: none; border: none; font-size: 1.1rem; cursor: pointer; }

    .hint { font-size: 0.75rem; color: var(--muted); line-height: 1.5; }
    .danger-text { color: var(--danger); }

    /* ════════════════════════════════════════════════════════ */
    /* SESSION 3 — PREMIUM DARK / GOLD OVERHAUL                  */
    /* ════════════════════════════════════════════════════════ */

    /* Canvas: a faint cool glow at the top, settling into near-black.
       Gives cards something to sit against without looking flat. */
    body {
      background:
        radial-gradient(130% 70% at 50% -8%, #17171f 0%, rgba(23,23,31,0) 60%),
        var(--bg);
      background-attachment: fixed;
      letter-spacing: -0.005em;
    }

    /* Numbers everywhere read as tabular, tight, confident. */
    .amt-val, .hero-value, .stat .s-val, .mini .m-val,
    .legend-val, .rtxn-amt, .g-total { font-variant-numeric: tabular-nums; }

    /* ── Chrome: header + tab bar go near-black glass ──────────── */
    .app-header {
      background: rgba(10, 10, 12, 0.78);
      border-bottom: 1px solid var(--border);
    }
    .app-header h1 { font-weight: 600; letter-spacing: -0.02em; }
    .app-header h1::before {
      content: '◈';
      color: var(--gold);
      margin-right: 9px;
      font-size: 0.85em;
      vertical-align: 1px;
    }
    .icon-btn { border-color: var(--border-2); border-radius: 10px; }

    .tabbar {
      background: rgba(11, 11, 14, 0.9);
      border-top: 1px solid var(--border);
    }
    .tab { padding: 8px 1px 6px; gap: 2px; font-size: 0.6rem; letter-spacing: 0.03em; }
    .tab .tab-ico { font-size: 1.15rem; opacity: 0.55; transition: opacity 0.15s; }
    .tab.active { color: var(--gold); }
    .tab.active .tab-ico { opacity: 1; }

    /* ── Cards & rows: subtle elevation, warmer surfaces ───────── */
    .card {
      background: linear-gradient(180deg, #17171d 0%, #131318 100%);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 14px 30px -18px rgba(0, 0, 0, 0.8);
    }

    .row {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.022);
      transition: border-color 0.12s, background 0.12s;
    }
    .row:active { border-color: var(--gold); background: var(--surface-2); }
    .row-ico {
      background: var(--bg-2);
      border-color: var(--border);
      border-radius: 11px;
    }

    .view-title { font-weight: 600; letter-spacing: -0.025em; font-size: 1.6rem; }
    .group-head .g-name { color: var(--muted); }

    /* Inputs sit in dark wells */
    input, .sheet select, .sheet textarea { background: var(--bg-2); }
    input:focus, .sheet select:focus, .sheet textarea:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px var(--gold-soft);
    }

    .btn-primary { color: #1a1407; }
    .btn-primary:not(:disabled):hover { background: var(--gold-2); color: #1a1407; }
    .seg-btn.active, .type-cell:active { border-color: var(--gold); }
    .seg-btn.active { background: var(--gold); color: #1a1407; }

    /* Quick-add: Income now carries the gold, Expense the muted red */
    .quick-inc { background: var(--gold-soft); color: var(--gold-2); border: 1px solid rgba(212,175,55,0.3); }
    .quick-exp { background: var(--neg-soft); color: #e0958d; border: 1px solid rgba(199,95,87,0.32); }

    .sheet { background: linear-gradient(180deg, #17171d 0%, #131318 100%); }

    /* SVG icon sizing across all contexts */
    .tab .tab-ico svg { width: 22px; height: 22px; display: block; }
    .row-ico svg { width: 20px; height: 20px; display: block; }
    .tc-ico svg { width: 26px; height: 26px; display: block; }
    .g-name svg { width: 13px; height: 13px; display: inline-block; vertical-align: -1px; margin-right: 2px; }
    .q-ico svg { width: 20px; height: 20px; display: block; }
    .hint svg { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 3px; }
    .sr-del svg { width: 14px; height: 14px; display: block; }

    /* Sheet title polish — matches panel-head style */
    .sheet-title {
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border);
      letter-spacing: -0.01em;
    }

    /* ── Dashboard: hero ──────────────────────────────────────── */
    .dash { display: flex; flex-direction: column; gap: 18px; }

    .hero {
      position: relative;
      overflow: hidden;
      padding: 26px 22px 24px;
      border-radius: var(--radius-lg);
      background:
        radial-gradient(120% 100% at 100% 0%, rgba(212,175,55,0.10) 0%, rgba(212,175,55,0) 55%),
        linear-gradient(165deg, #1c1c24 0%, #121217 100%);
      border: 1px solid var(--border-2);
      box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.9);
    }
    .hero::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      opacity: 0.65;
    }
    .hero-label {
      font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em;
      color: var(--muted); font-weight: 600;
    }
    .hero-value {
      font-size: 2.65rem; font-weight: 700; letter-spacing: -0.035em;
      line-height: 1.04; margin-top: 8px; color: var(--text);
    }
    .hero-value.neg { color: var(--neg); }
    .hero-value .ccy {
      font-size: 0.95rem; font-weight: 600; color: var(--gold);
      letter-spacing: 0.05em; margin-right: 8px; vertical-align: 0.45em;
    }
    .hero-total {
      margin-top: 12px; padding-top: 12px;
      border-top: 1px solid var(--border);
      font-size: 0.82rem; color: var(--muted);
      display: flex; justify-content: space-between; align-items: baseline;
    }
    .hero-total b { color: var(--text); font-weight: 600; }

    /* ── Stat tiles (assets / liabilities) ────────────────────── */
    .stat-row { display: flex; gap: 12px; }
    .stat {
      flex: 1; min-width: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 15px 16px;
    }
    .stat .s-label {
      font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.11em;
      color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 6px;
    }
    .stat .s-label::before {
      content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
    }
    .stat.is-asset .s-label::before { background: var(--gold); }
    .stat.is-liab  .s-label::before { background: var(--neg); }
    .stat .s-val { font-size: 1.18rem; font-weight: 700; margin-top: 7px; letter-spacing: -0.02em; }
    .stat .s-ccy { font-size: 0.68rem; color: var(--muted-2); margin-left: 3px; font-weight: 600; }

    /* ── "This month" three-up ────────────────────────────────── */
    .panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px 18px;
    }
    .panel-head {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 14px;
    }
    .panel-title { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }
    .panel-title .pt-sub { color: var(--muted-2); font-weight: 500; }

    .mini-row { display: flex; gap: 14px; }
    .mini { flex: 1; min-width: 0; }
    .mini .m-label {
      font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--muted); font-weight: 600;
    }
    .mini .m-val { font-size: 1.05rem; font-weight: 700; margin-top: 5px; letter-spacing: -0.02em; }

    /* ── Charts ───────────────────────────────────────────────── */
    .chart-wrap { position: relative; width: 100%; }
    .chart-wrap.donut { height: 200px; }
    .chart-wrap.bars  { height: 210px; }
    .chart-wrap.line  { height: 190px; }

    .toggle {
      display: flex; gap: 3px; padding: 3px;
      background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
    }
    .toggle button {
      border: none; background: transparent; color: var(--muted);
      font-size: 0.7rem; font-weight: 600; padding: 5px 11px;
      border-radius: 7px; cursor: pointer; transition: all 0.12s;
    }
    .toggle button.active { background: var(--gold); color: #1a1407; }

    /* Custom donut legend (cleaner than Chart.js default) */
    .legend { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
    .legend-item { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; }
    .legend-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
    .legend-name { flex: 1; min-width: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .legend-pct { color: var(--muted-2); font-variant-numeric: tabular-nums; font-size: 0.74rem; }
    .legend-val { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 76px; text-align: right; }

    /* ── Recent transactions cards ────────────────────────────── */
    .rtxn {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius);
    }
    .rtxn-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
    .rtxn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .rtxn-title { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rtxn-meta { font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rtxn-amt { text-align: right; flex: none; }
    .rtxn-amt .ra-native { font-size: 0.9rem; font-weight: 700; }
    .rtxn-amt .ra-omr { font-size: 0.66rem; color: var(--muted-2); }

    /* Missing-rate flag banner */
    .flag {
      background: var(--neg-soft);
      border: 1px solid rgba(199, 95, 87, 0.34);
      color: #e3a39c;
      font-size: 0.76rem; line-height: 1.5;
      padding: 11px 13px; border-radius: 11px;
    }
    .flag b { color: #efbdb6; }
    /* ── Category Manager Overlay ──────────────────────────────────────── */
    .cat-overlay {
      position: fixed; inset: 0; z-index: 90;
      background: var(--bg);
      overflow-y: auto; -webkit-overflow-scrolling: touch;
      display: none; flex-direction: column;
      padding-bottom: calc(var(--safe-bot) + 32px);
    }
    .cat-overlay.open { display: flex; }
    .cat-head {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 20px 12px;
      background: rgba(10,10,12,0.88);
      border-bottom: 1px solid var(--border);
      position: sticky; top: 0; z-index: 2;
      backdrop-filter: blur(8px);
    }
    .cat-head h2 { flex: 1; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
    .cat-head-btn {
      background: none; border: 1px solid var(--border); border-radius: 8px;
      color: var(--muted); font-size: 0.78rem; font-weight: 600;
      padding: 7px 14px; cursor: pointer;
    }
    .cat-head-btn:hover { border-color: var(--gold); color: var(--gold); }
    .cat-section { padding: 0 16px 16px; }
    .cat-sec-hd {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 0 10px;
    }
    .cat-sec-hd h3 {
      font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.08em; color: var(--muted);
    }
    .cat-add-lnk {
      font-size: 0.78rem; font-weight: 600; color: var(--gold);
      background: none; border: none; cursor: pointer; padding: 4px 0;
    }
    .cat-parent-card {
      background: linear-gradient(180deg,#17171d 0%,#131318 100%);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin-bottom: 8px;
      overflow: hidden;
    }
    .cat-parent-row {
      display: flex; align-items: center; gap: 11px;
      padding: 12px 14px; cursor: pointer;
    }
    .cat-color-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
    .cat-parent-ico { flex: none; }
    .cat-parent-ico svg { width: 18px; height: 18px; display: block; }
    .cat-parent-info { flex: 1; min-width: 0; }
    .cat-parent-name { font-size: 0.9375rem; font-weight: 600; }
    .cat-parent-meta { font-size: 0.73rem; color: var(--muted); }
    .cat-action-btn {
      background: none; border: 1px solid var(--border); border-radius: 7px;
      color: var(--muted); font-size: 0.72rem; font-weight: 600;
      padding: 5px 9px; cursor: pointer; margin-left: 4px;
    }
    .cat-action-btn:hover { border-color: var(--gold); color: var(--gold); }
    .cat-action-btn.danger:hover { border-color: #e05454; color: #e05454; }
    .cat-subs {
      border-top: 1px solid var(--border);
      padding: 8px 14px 10px 38px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .cat-sub-row {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 12px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
    }
    .cat-sub-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; opacity: 0.65; }
    .cat-sub-name { flex: 1; font-size: 0.875rem; }
    .cat-sub-meta { font-size: 0.72rem; color: var(--muted); }
    .cat-sub-edit {
      background: none; border: none; color: var(--muted); cursor: pointer;
      padding: 3px; display: flex; align-items: center;
    }
    .cat-sub-edit svg { width: 14px; height: 14px; display: block; }
    .icon-picker { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
    .icon-cell {
      background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px;
      padding: 9px 4px 7px; display: flex; flex-direction: column;
      align-items: center; gap: 4px; cursor: pointer; color: var(--muted);
      transition: border-color .12s, color .12s;
    }
    .icon-cell.ic-sel { border-color: var(--gold); color: var(--gold); background: rgba(212,175,55,.08); }
    .icon-cell svg { width: 20px; height: 20px; display: block; }
    .icon-cell .ic-lbl { font-size: 0.5rem; text-align: center; font-weight: 600; line-height: 1.2; }
    .color-row { display: flex; gap: 8px; flex-wrap: wrap; }
    .color-sw {
      width: 26px; height: 26px; border-radius: 50%;
      border: 2.5px solid transparent; cursor: pointer;
      transition: border-color .1s, transform .1s;
    }
    .color-sw.c-sel { border-color: #fff; transform: scale(1.18); }
    .cat-2step { display: flex; flex-direction: column; gap: 8px; }
    .drill-back {
      display: flex; align-items: center; gap: 8px;
      font-size: 0.8rem; color: var(--gold); cursor: pointer;
      padding: 6px 0 2px; font-weight: 600;
    }
    .drill-back svg { width: 14px; height: 14px; display: block; }
    .flag svg { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 4px; }
    .sync-status { font-size: 0.7rem; font-weight: 600; color: var(--muted); margin: 0 auto 0 10px; white-space: nowrap; transition: color 0.2s, opacity 0.3s; opacity: 0; pointer-events: none; }
    .sync-status.saving { color: var(--gold); opacity: 1; }
    .sync-status.synced { color: #66bb6a; opacity: 1; }
    .sync-status.sync-err { color: var(--neg); opacity: 1; }
    .cat-sub-del { background: none; border: none; color: var(--muted); cursor: pointer; padding: 3px; display: flex; align-items: center; opacity: 0.55; transition: color .12s, opacity .12s; }
    .cat-sub-del:hover { color: var(--neg); opacity: 1; }
    .cat-sub-del svg { width: 13px; height: 13px; display: block; }
    .cat-add-sub-btn { display: flex; align-items: center; gap: 5px; font-size: 0.75rem; color: var(--gold); background: none; border: 1px dashed rgba(212,175,55,0.35); border-radius: 8px; padding: 6px 12px; cursor: pointer; margin-top: 2px; width: 100%; font-weight: 600; transition: border-color .12s, background .12s; }
    .cat-add-sub-btn:hover { border-color: var(--gold); background: var(--gold-soft); }
    .txn-search-wrap { position: sticky; top: -1px; z-index: 5; background: var(--bg); padding: 6px 0 4px; }
    .txn-search-rel { position: relative; }
    .txn-search { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 10px 14px 10px 38px; color: var(--text); font-size: 0.9375rem; }
    .txn-search:focus { outline: none; border-color: var(--gold); }
    .txn-search-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; display: flex; }
    .filter-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; margin: 2px 0 6px; }
    .filter-row::-webkit-scrollbar { display: none; }
    .filter-chip { flex: none; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 5px 13px; font-size: 0.73rem; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; transition: border-color .12s, color .12s, background .12s; }
    .filter-chip:hover { border-color: var(--gold); color: var(--gold); }
    .filter-chip.active { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
    .filter-chip.f-clear { border-color: var(--border-2); color: var(--neg); }
    .filter-chip.f-clear:hover { border-color: var(--neg); background: var(--neg-soft); }
    .txn-count { font-size: 0.7rem; color: var(--muted); text-align: right; padding: 0 2px 4px; }
    .filter-sep { width: 1px; height: 20px; background: var(--border); flex: none; align-self: center; }
    .recur-badge { display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold); background: var(--gold-soft); border: 1px solid rgba(212,175,55,0.3); border-radius: 5px; padding: 1px 5px; vertical-align: middle; margin-left: 6px; }
    .recur-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .onboard-overlay { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: none; align-items: center; justify-content: center; padding: 24px; }
    .onboard-overlay.open { display: flex; }
    .onboard-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 28px; max-width: 380px; width: 100%; display: flex; flex-direction: column; gap: 18px; }
    .onboard-logo { font-size: 2.5rem; color: var(--gold); text-align: center; }
    .onboard-progress { display: flex; justify-content: center; gap: 6px; }
    .onboard-progress span { width: 20px; height: 4px; border-radius: 2px; background: var(--border-2); }
    .onboard-progress span.is-active { background: var(--gold); }
    .onboard-title { font-size: 1.4rem; font-weight: 700; text-align: center; }
    .onboard-sub { font-size: 0.875rem; color: var(--muted); text-align: center; line-height: 1.5; }
    .onboard-steps { display: flex; flex-direction: column; gap: 12px; }
    .onboard-step { display: flex; align-items: flex-start; gap: 14px; }
    .os-num { width: 26px; height: 26px; border-radius: 50%; background: var(--gold-soft); border: 1px solid rgba(212,175,55,0.4); color: var(--gold); font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
    .os-text { font-size: 0.875rem; color: var(--text); line-height: 1.5; padding-top: 3px; }
    .os-text b { color: var(--text); }

    .dash-section-title {
      font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.13em;
      color: var(--muted); font-weight: 600; margin: 4px 2px -4px;
    }

    /* ── Reports overlay ─────────────────────────────────────── */
    .rep-controls { padding: 14px 16px 4px; display: flex; flex-direction: column; gap: 12px; }
    .rep-seg { display: flex; gap: 6px; }
    .rep-seg button {
      flex: 1; padding: 9px 4px; border-radius: 9px; border: 1px solid var(--border);
      background: var(--bg-2); color: var(--muted); font-size: 0.78rem; font-weight: 600; cursor: pointer;
    }
    .rep-seg button.active { background: var(--gold); color: #1a1407; border-color: var(--gold); }
    .rep-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .rep-nav button {
      background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px;
      color: var(--text); font-size: 1rem; font-weight: 700; padding: 7px 14px; cursor: pointer;
    }
    .rep-nav .rep-range { font-size: 0.9rem; font-weight: 600; color: var(--text); }
    .rep-custom { display: flex; gap: 10px; }
    .rep-custom .field { flex: 1; }
    .rep-body { padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 16px; }

    .rep-summary { display: flex; gap: 10px; }
    .rep-stat {
      flex: 1; background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 13px;
    }
    .rep-stat .rs-l { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
    .rep-stat .rs-v { font-size: 1.02rem; font-weight: 700; margin-top: 5px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

    /* Modern wealth sections: holdings + loans */
    .feature-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
    .feature-head-copy { min-width: 0; }
    .feature-head .view-sub { margin-top: 4px; }
    .feature-add {
      flex: none; width: 42px; height: 42px; border-radius: 13px;
      border: 1px solid rgba(212,175,55,.45); background: var(--gold-soft);
      color: var(--gold-2); font-size: 1.45rem; line-height: 1; cursor: pointer;
    }
    .feature-add:active { transform: scale(.96); }
    .finance-hero {
      position: relative; overflow: hidden; padding: 22px;
      border: 1px solid var(--border-2); border-radius: var(--radius-lg);
      background: radial-gradient(100% 120% at 100% 0%, rgba(212,175,55,.16), transparent 58%),
        linear-gradient(155deg, #1c1c23, #111115);
      box-shadow: 0 18px 44px -28px #000;
    }
    .finance-hero.debt {
      background: radial-gradient(100% 120% at 100% 0%, rgba(199,95,87,.16), transparent 58%),
        linear-gradient(155deg, #1c1a1d, #111115);
    }
    .finance-eyebrow {
      color: var(--muted); font-size: .67rem; font-weight: 700;
      letter-spacing: .13em; text-transform: uppercase;
    }
    .finance-value {
      margin-top: 7px; font-size: clamp(2rem, 9vw, 2.65rem); line-height: 1;
      font-weight: 750; letter-spacing: -.045em; font-variant-numeric: tabular-nums;
    }
    .finance-value small {
      margin-left: 5px; color: var(--gold); font-size: .72rem;
      font-weight: 700; letter-spacing: .06em;
    }
    .finance-hero.debt .finance-value small { color: var(--neg); }
    .finance-hero-foot {
      display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px;
      margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border);
    }
    .finance-kpi span {
      display: block; color: var(--muted-2); font-size: .64rem;
      letter-spacing: .08em; text-transform: uppercase;
    }
    .finance-kpi strong {
      display: block; margin-top: 4px; font-size: .92rem;
      font-variant-numeric: tabular-nums;
    }
    .finance-list { display: flex; flex-direction: column; gap: 10px; }
    .finance-card {
      width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer;
      display: grid; grid-template-columns: 46px minmax(0,1fr) auto;
      gap: 13px; align-items: center; padding: 16px;
      border: 1px solid var(--border); border-radius: 16px;
      background: linear-gradient(145deg, var(--surface), #111115);
      transition: border-color .16s, transform .16s, background .16s;
    }
    .finance-card:hover { border-color: var(--border-2); background: var(--surface-2); }
    .finance-card:active { transform: scale(.99); }
    /* var(--gold) here measured 2.53:1 contrast against the light-theme
       background — under WCAG's 3:1 focus-indicator minimum. var(--text)
       contrasts against var(--bg) in both themes; see :focus-visible below. */
    .finance-card:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
    .finance-card.archived { opacity: .52; }
    .finance-avatar {
      width: 46px; height: 46px; border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      color: var(--gold-2); background: var(--gold-soft);
      border: 1px solid rgba(212,175,55,.2);
    }
    .finance-avatar.debt {
      color: #e38b82; background: var(--neg-soft); border-color: rgba(199,95,87,.22);
    }
    .finance-avatar svg { width: 21px; height: 21px; }
    .finance-main { display: block; min-width: 0; overflow: hidden; }
    .finance-title {
      display: block; font-size: .94rem; font-weight: 700; overflow: hidden;
      white-space: nowrap; text-overflow: ellipsis;
    }
    .finance-meta {
      display: block; margin-top: 4px; color: var(--muted); font-size: .73rem;
      overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    }
    .finance-amount {
      min-width: 76px; text-align: right; font-variant-numeric: tabular-nums;
    }
    .finance-amount strong { display: block; font-size: .98rem; }
    .finance-amount span { display: block; margin-top: 3px; color: var(--muted); font-size: .68rem; }
    .finance-progress {
      grid-column: 2 / 4; height: 5px; overflow: hidden;
      border-radius: 99px; background: var(--border);
    }
    .finance-progress > span {
      display: block; height: 100%; border-radius: inherit;
      background: linear-gradient(90deg, var(--gold), var(--gold-2));
    }
    .finance-progress.debt > span { background: linear-gradient(90deg, #a94e48, #d77b72); }
    .portfolio-tools { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 18px; }
    .portfolio-tools button { min-width:0;text-align:left;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--card);color:var(--text); }
    .portfolio-tools b,.portfolio-tools span { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
    .portfolio-tools b { font-size:.84rem;margin-bottom:4px; }
    .portfolio-tools span { color:var(--muted);font-size:.7rem; }
    .valuation-status { display:inline-flex;width:max-content;margin-top:5px;padding:3px 7px;border-radius:999px;font-size:.62rem;font-weight:700; }
    .valuation-status.fresh { color:var(--pos);background:rgba(102,187,106,.10); }
    .valuation-status.due { color:var(--gold);background:rgba(212,175,55,.10); }
    .valuation-status.stale { color:var(--danger);background:rgba(224,84,84,.10); }
    .allocation-row { display:grid;grid-template-columns:minmax(90px,1fr) minmax(110px,2fr) auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border); }
    .allocation-row:last-child { border-bottom:0; }
    .allocation-bar { height:8px;border-radius:99px;background:var(--border);overflow:hidden; }
    .allocation-bar i { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold),#f0d36c); }
    .allocation-value { text-align:right;font-size:.72rem;color:var(--muted); }
    .history-spark { display:flex;align-items:end;gap:5px;height:120px;padding:12px 0;border-bottom:1px solid var(--border); }
    .history-spark i { flex:1;min-width:8px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--gold),rgba(212,175,55,.25)); }
    @media(max-width:560px) {
      .portfolio-tools { grid-template-columns:1fr; }
      .portfolio-tools button { padding:12px 14px; }
    }
    .section-label {
      margin: 6px 2px -1px; color: var(--muted); font-size: .66rem;
      font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    }
    .budget-body {
      width: 100%; max-width: 640px; margin: 0 auto;
      padding: 18px 16px calc(var(--safe-bot) + 34px);
      display: flex; flex-direction: column; gap: 14px; overflow-y: auto;
    }
    .schedule-body {
      width: 100%; max-width: 640px; margin: 0 auto;
      padding: 18px 16px calc(var(--safe-bot) + 34px);
      display: flex; flex-direction: column; gap: 12px; overflow-y: auto;
    }
    .due-badge {
      display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 99px;
      font-size: .62rem; font-weight: 750; letter-spacing: .03em;
      color: var(--gold-2); background: var(--gold-soft);
    }
    .due-badge.overdue { color: #e6948c; background: var(--neg-soft); }
    .due-badge.paused { color: var(--muted); background: var(--border); }
    .schedule-actions { display: flex; gap: 8px; margin-top: 12px; }
    .schedule-actions button {
      flex: 1; padding: 8px 7px; border-radius: 9px; border: 1px solid var(--border);
      background: var(--bg-2); color: var(--muted); font-size: .7rem; font-weight: 700; cursor: pointer;
    }
    .schedule-actions button.primary { color: #181306; background: var(--gold); border-color: var(--gold); }
    .commit-cycle-card {
      display: flex; align-items: center; gap: 18px;
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
      padding: 20px; margin-top: 8px;
    }
    .commit-cycle-ring { flex: none; }
    .commit-cycle-copy { flex: 1; min-width: 0; }
    .commit-cycle-copy .num-display { display: block; font-size: 1.9rem; font-weight: 600; color: var(--text); }
    .commit-cycle-sub { color: var(--muted); font-size: .8rem; margin-top: 4px; }
    .commit-row {
      display: flex; align-items: center; gap: 12px;
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
      padding: 14px 16px; margin-top: 10px; cursor: pointer;
    }
    .commit-row-copy { flex: 1; min-width: 0; }
    .commit-chips { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
    .kind-chip, .status-chip {
      display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 99px;
      font-size: .62rem; font-weight: 750; letter-spacing: .03em;
    }
    .kind-chip { color: var(--muted); background: var(--border); }
    .status-chip.due { color: var(--due); background: var(--due-soft); }
    .status-chip.paid { color: var(--paid); background: var(--paid-soft); }
    .status-chip.overdue { color: var(--overdue); background: var(--overdue-soft); }
    .commit-row-value { text-align: right; flex: none; }
    .commit-row-value strong { display: block; font-variant-numeric: tabular-nums; }
    .commit-row-value span { color: var(--muted); font-size: .7rem; }
    .planner-tabs { display:flex; gap:6px; padding:4px; border-radius:12px; background:var(--bg-2); }
    .planner-tabs button { flex:1; border:0; border-radius:9px; padding:9px; background:transparent; color:var(--muted); font-weight:700; }
    .planner-tabs button.active { background:var(--surface); color:var(--gold); box-shadow:0 1px 8px #0005; }
    .cal-head, .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
    .cal-head span { text-align:center; color:var(--muted); font-size:.62rem; font-weight:750; }
    .cal-day { min-height:54px; padding:6px 4px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); text-align:left; }
    .cal-day.blank { visibility:hidden; }
    .cal-day.today { border-color:var(--gold); }
    .cal-day strong { display:block; font-size:.7rem; }
    .cal-day i { display:inline-block; width:6px; height:6px; margin:5px 2px 0 0; border-radius:50%; background:var(--neg); }
    .cal-day i.income { background:var(--pos); }
    .forecast-bar { height:7px; overflow:hidden; border-radius:99px; background:var(--border); }
    .forecast-bar span { display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-2)); }
    .forecast-line { display:flex; justify-content:space-between; gap:12px; font-size:.76rem; color:var(--muted); }
    .lock-screen { position:fixed; inset:0; z-index:500; display:none; align-items:center; justify-content:center; padding:24px; background:var(--bg); }
    .lock-screen.open { display:flex; }
    .lock-card { width:min(100%,380px); padding:28px 22px; border:1px solid var(--border); border-radius:24px; background:var(--surface); text-align:center; box-shadow:0 24px 80px #0008; }
    .lock-mark { width:58px; height:58px; margin:0 auto 16px; display:grid; place-items:center; border-radius:18px; color:var(--gold); background:var(--gold-soft); font-size:1.5rem; }
    .lock-pin { margin:18px 0 12px; text-align:center; font-size:1.45rem; letter-spacing:.45em; font-variant-numeric:tabular-nums; }
    .notice-count { min-width:24px; height:24px; display:inline-grid; place-items:center; border-radius:99px; padding:0 7px; background:var(--neg-soft); color:#e6948c; font-size:.68rem; font-weight:800; }
    .budget-card {
      padding: 16px; border-radius: 16px; border: 1px solid var(--border);
      background: linear-gradient(145deg, var(--surface), #111115);
    }
    .budget-card-head { display: flex; align-items: center; gap: 11px; }
    .budget-card-copy { flex: 1; min-width: 0; }
    .budget-card-copy strong { display: block; font-size: .92rem; }
    .budget-card-copy span { display: block; margin-top: 3px; color: var(--muted); font-size: .7rem; }
    .budget-card-value { text-align: right; font-variant-numeric: tabular-nums; }
    .budget-card-value strong { display: block; font-size: .9rem; }
    .budget-card-value span { color: var(--muted); font-size: .65rem; }
    .budget-track { height: 8px; margin-top: 13px; border-radius: 99px; overflow: hidden; background: var(--border); }
    .budget-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--gold),var(--gold-2)); }
    .budget-track.warn span { background: linear-gradient(90deg,#c98b35,#e0a84f); }
    .budget-track.over span { background: linear-gradient(90deg,#a94e48,#d77b72); }
    .budget-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; color: var(--muted); font-size: .68rem; }
    .budget-launch {
      display: flex; align-items: center; gap: 13px; cursor: pointer;
      width: 100%; padding: 16px; color: inherit; text-align: left; font: inherit;
      border: 1px solid var(--border); border-radius: 16px;
      background: linear-gradient(145deg, rgba(212,175,55,.09), var(--surface));
    }
    .budget-launch .finance-avatar { flex: none; }
    .budget-launch-copy { flex: 1; min-width: 0; }
    .budget-launch-copy strong { display: block; font-size: .92rem; }
    .budget-launch-copy span { display: block; margin-top: 4px; color: var(--muted); font-size: .72rem; }
    .budget-launch-arrow { color: var(--gold); font-size: 1.2rem; }
    .account-summary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
    .account-summary {
      padding: 13px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
    }
    .account-summary span { display: block; color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; }
    .account-summary strong { display: block; margin-top: 6px; font-size: .85rem; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
    .activity-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
    .activity-kpi {
      padding: 13px 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
      min-width: 0;
    }
    .activity-kpi span { display: block; color: var(--muted); font-size: .61rem; text-transform: uppercase; letter-spacing: .06em; }
    .activity-kpi strong { display: block; margin-top: 6px; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .modern-empty {
      padding: 28px 20px; text-align: center; border: 1px dashed var(--border-2);
      border-radius: var(--radius-lg); background: rgba(255,255,255,.012);
    }
    .modern-empty .empty-ico {
      width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 17px;
      display: flex; align-items: center; justify-content: center;
      color: var(--gold); background: var(--gold-soft);
    }
    .modern-empty .empty-ico svg { width: 24px; height: 24px; }
    .modern-empty strong { display: block; font-size: 1rem; }
    .modern-empty p { margin: 7px auto 17px; max-width: 330px; color: var(--muted); font-size: .8rem; line-height: 1.5; }
    .modern-empty .btn { max-width: 220px; }
    .loan-next-step {
      margin-top: 18px; padding: 15px; border: 1px solid var(--border);
      border-radius: 16px; background: rgba(255,255,255,.018);
    }
    .loan-next-copy strong { display: block; font-size: .86rem; }
    .loan-next-copy span {
      display: block; margin-top: 4px; color: var(--muted);
      font-size: .7rem; line-height: 1.45;
    }
    .loan-next-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
    .loan-next-actions .btn { padding: 10px 8px; font-size: .75rem; }
    .asset-type-grid {
      display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px;
    }
    .asset-type-card {
      min-height: 82px; padding: 13px; border: 1px solid var(--border);
      border-radius: 14px; background: var(--surface); color: var(--text);
      text-align: left; cursor: pointer;
    }
    .asset-type-card:hover, .asset-type-card.selected {
      border-color: var(--gold); background: var(--gold-soft);
    }
    .asset-type-card b { display: block; font-size: .82rem; }
    .asset-type-card span { display: block; margin-top: 5px; color: var(--muted); font-size: .65rem; line-height: 1.35; }
    .asset-kind-badge {
      display: inline-flex; margin-right: 5px; padding: 2px 6px;
      border-radius: 6px; background: var(--gold-soft); color: var(--gold);
      font-size: .55rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    }
    .detail-hero {
      padding: 18px; border-radius: 16px; border: 1px solid var(--border);
      background: linear-gradient(145deg, var(--bg), rgba(212,175,55,.055));
    }
    .detail-hero.debt { background: linear-gradient(145deg, var(--bg), rgba(199,95,87,.06)); }
    .detail-top { display: flex; align-items: center; gap: 12px; }
    .detail-top .finance-avatar { width: 42px; height: 42px; border-radius: 13px; }
    .detail-name { min-width: 0; flex: 1; }
    .detail-name strong { display: block; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .detail-name span { display: block; color: var(--muted); font-size: .72rem; margin-top: 3px; }
    .detail-value { margin-top: 18px; font-size: 2rem; font-weight: 750; letter-spacing: -.035em; }
    .detail-value small { color: var(--muted); font-size: .7rem; letter-spacing: .05em; margin-left: 4px; }
    .detail-caption { margin-top: 5px; color: var(--muted); font-size: .72rem; }
    .detail-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 16px; }
    .detail-metric { padding-top: 11px; border-top: 1px solid var(--border); min-width: 0; }
    .detail-metric span { display: block; color: var(--muted-2); font-size: .6rem; text-transform: uppercase; letter-spacing: .07em; }
    .detail-metric strong { display: block; margin-top: 4px; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; }
    @media (max-width: 370px) {
      .finance-card { grid-template-columns: 40px minmax(0,1fr) auto; padding: 14px; gap: 10px; }
      .finance-avatar { width: 40px; height: 40px; border-radius: 12px; }
      .detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .account-summary-grid, .activity-summary { grid-template-columns: 1fr; }
    }

    /* Activity stays deliberately compact on phones. */
    @media (max-width: 699px) {
      #view-holdings.active.is-empty-view {
        min-height: calc(100dvh - var(--safe-top) - var(--safe-bot) - 150px);
        display: flex; flex-direction: column;
      }
      #view-holdings.active.is-empty-view .modern-empty {
        margin-top: auto; margin-bottom: auto;
      }
      #view-transactions .feature-head { margin-bottom: 10px; }
      #view-transactions .activity-summary {
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 6px;
      }
      #view-transactions .activity-kpi { padding: 10px 8px; border-radius: 12px; }
      #view-transactions .activity-kpi span { font-size: .56rem; }
      #view-transactions .activity-kpi strong { margin-top: 4px; font-size: .74rem; }
      #view-transactions .quick-row { gap: 6px; }
      #view-transactions .quick-btn {
        min-width: 0; padding: 10px 5px; border-radius: 11px;
        font-size: .72rem; flex-direction: row; justify-content: center; gap: 5px;
      }
      #view-transactions .quick-btn .q-ico { display: flex; font-size: 1rem; }
      #view-transactions .quick-btn .q-ico svg { width: 17px; height: 17px; }
      #view-transactions .txn-search-wrap { padding-top: 3px; }
      #view-transactions .txn-search {
        padding-top: 9px; padding-bottom: 9px; font-size: .86rem;
      }
      #view-transactions .filter-row { margin-bottom: 3px; }
      #view-transactions .filter-row + .filter-row { margin-top: -1px; }
      #view-transactions .filter-chip { padding: 5px 10px; font-size: .68rem; }
      #view-transactions .section-label { margin-top: 8px; }
      #view-transactions .finance-list { gap: 6px; }
      #view-transactions .finance-card {
        grid-template-columns: 34px minmax(0,1fr) auto;
        gap: 9px; padding: 10px; border-radius: 12px; overflow: hidden;
      }
      #view-transactions .finance-avatar {
        width: 34px; height: 34px; border-radius: 10px;
      }
      #view-transactions .finance-avatar svg { width: 17px; height: 17px; }
      #view-transactions .finance-title { font-size: .82rem; line-height: 1.25; }
      #view-transactions .finance-meta { margin-top: 2px; font-size: .64rem; }
      #view-transactions .finance-amount { min-width: 70px; }
      #view-transactions .finance-amount strong { font-size: .82rem; }
      #view-transactions .finance-amount span { margin-top: 1px; font-size: .61rem; }
      #view-transactions .txn-note { display: none; }
      #view-transactions .recur-badge {
        font-size: .52rem; padding: 1px 4px; margin-left: 4px;
      }
    }

    /* Responsive workspace: keep the compact phone experience, but let
       tablets and desktops use their available width intentionally. */
    @media (min-width: 700px) {
      #app.app-mode, #screen-app { width: 100%; max-width: none; min-width: 0; }
      #screen-app.active { align-items: stretch; }
      .app-wrap { max-width: 980px; min-width: 0; }
      .app-main { padding: 24px 24px calc(var(--safe-bot) + 92px); }
      #view-dashboard .dash {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px; align-items: start;
      }
      .dash-flag, .dash-hero, .dash-stats, .dash-month,
      .dash-spending, .dash-bars, .dash-line, .dash-recent { grid-column: 1 / -1; }
      .dash-launch { grid-column: span 1; height: 100%; }
      .panel, .hero, .stat, .budget-launch { box-shadow: 0 18px 45px -28px rgba(0,0,0,.9); }
    }

    @media (min-width: 1100px) {
      body { background-position: 240px 0; }
      #screen-app { min-height: 100vh; }
      .app-wrap { width: 100%; max-width: none; min-width: 0; min-height: 100vh; }
      .app-header {
        margin-left: 240px; width: calc(100% - 240px);
        padding: 18px 32px; min-height: 72px;
      }
      .app-header h1 { font-size: 1.45rem; }
      .app-header h1::before { display: none; }
      .app-main {
        margin-left: 240px; width: calc(100% - 240px);
        min-width: 0; padding: 28px 34px 48px;
      }
      .view.active:not(#view-dashboard) { width: 100%; max-width: 1100px; margin: 0 auto; }
      .tabbar {
        top: 0; right: auto; width: 240px; height: 100vh;
        align-items: stretch; border-top: 0; border-right: 1px solid var(--border);
        padding: 0; background: rgba(11,11,14,.96);
      }
      .tabbar-inner {
        max-width: none; height: 100%; flex-direction: column;
        gap: 6px; padding: 24px 16px; overflow-y: auto;
      }
      .tabbar-inner::before {
        content: '◆  Wealth'; display: block; margin: 3px 10px 27px;
        color: var(--text); font-size: 1.15rem; font-weight: 750;
        letter-spacing: -.025em;
      }
      .tab {
        flex: none; min-height: 46px; padding: 11px 14px;
        flex-direction: row; justify-content: flex-start; gap: 13px;
        border-radius: 12px; font-size: .82rem; letter-spacing: 0;
      }
      .tab .tab-ico { width: 24px; display: grid; place-items: center; }
      .tab.active { background: var(--gold-soft); color: var(--gold); }
      .desktop-nav-label {
        display: block; margin: 14px 13px 3px; color: var(--muted-2);
        font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
      }
      .desktop-tool-link {
        display: flex; align-items: center; gap: 12px; width: 100%;
        min-height: 39px; padding: 8px 14px; border: 0; border-radius: 10px;
        color: var(--muted); background: transparent; font-size: .75rem;
        font-weight: 650; text-align: left; cursor: pointer;
      }
      .desktop-tool-link:hover { color: var(--text); background: rgba(255,255,255,.035); }
      .desktop-tool-link svg { width: 18px; height: 18px; opacity: .68; }
      .global-add { right: 34px; bottom: 28px; }
      #view-dashboard { width: 100%; max-width: 1280px; margin: 0 auto; }
      #view-dashboard .dash {
        width: 100%; min-width: 0;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 20px; align-items: stretch;
      }
      .dash-flag { grid-column: 1 / -1; }
      .dash-hero { grid-column: span 8; min-height: 190px; }
      .dash-stats { grid-column: span 4; height: 100%; }
      .dash-stats .stat { display: flex; flex-direction: column; justify-content: center; }
      .dash-month { grid-column: span 4; height: 100%; }
      .dash-launch { grid-column: span 2; min-height: 112px; height: 100%; }
      .dash-launch .budget-launch-copy span { white-space: normal; }
      .dash-spending { grid-column: span 5; }
      .dash-bars { grid-column: span 7; }
      .dash-line { grid-column: span 7; }
      .dash-recent { grid-column: span 5; display: flex; flex-direction: column; gap: 10px; }
      .dash-spending, .dash-bars, .dash-line { height: 100%; }
      .dash-spending .chart-wrap.donut { height: 250px; }
      .dash-bars .chart-wrap.bars, .dash-line .chart-wrap.line { height: 280px; }
      .dash-recent .rtxn { padding: 13px 14px; }
      #view-more.active {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px; align-items: stretch;
      }
      #view-more > .view-title, #view-more > .view-sub, #view-more > .add-btn,
      #view-more > .group-head, #view-more > .empty, #view-more > #build-info {
        grid-column: 1 / -1;
      }
      #view-more > .row { min-height: 76px; margin: 0; }
      #view-more .more-planning-row { display: none; }
    }

    .rep-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
    .rep-block h4 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 10px; }
    .rep-chart-wrap { display: flex; justify-content: center; margin: 0 0 14px; }
    .rep-chart-wrap svg { max-width: 100%; height: auto; }
    .rep-ring-track { stroke: var(--border); }
    .rep-ring-label { font-family: var(--font-body); font-size: 12px; letter-spacing: .06em; fill: var(--muted); }
    .rep-ring-value { font-family: var(--font-display); font-size: 22px; font-weight: 600; fill: var(--text); }
    .rep-tr { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 0.86rem; }
    .rep-tr:first-of-type { border-top: none; }
    .rep-tr .rt-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
    .rep-tr .rt-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rep-tr .rt-pct { color: var(--muted-2); font-size: 0.74rem; font-variant-numeric: tabular-nums; }
    .rep-tr .rt-val { font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; font-weight: 600; }

    .rep-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 0 16px; }
    .rep-actions .btn { min-width: 0; padding-inline: 8px; }
    .report-brand { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:4px 2px 0; }
    .report-brand strong { display:block; font-size:1.05rem; letter-spacing:-.025em; }
    .report-brand span,.report-brand small { color:var(--muted); font-size:.7rem; }
    .report-brand small { text-align:right; line-height:1.45; }
    .rep-flow-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
    .rep-flow-card { min-width:0; padding:13px 14px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
    .rep-flow-card span { display:block; color:var(--muted); font-size:.65rem; text-transform:uppercase; letter-spacing:.07em; }
    .rep-flow-card strong { display:block; margin-top:5px; font-size:.92rem; font-variant-numeric:tabular-nums; }
    .rep-detail { display:none; }
    .rep-detail-table { width:100%; border-collapse:collapse; font-size:.7rem; }
    .rep-detail-table th { padding:7px 6px; color:var(--muted); text-align:left; border-bottom:1px solid var(--border-2); font-size:.6rem; text-transform:uppercase; letter-spacing:.05em; }
    .rep-detail-table td { padding:7px 6px; border-bottom:1px solid var(--border); vertical-align:top; }
    .rep-detail-table .num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
    .report-footnote { color:var(--muted-2); font-size:.65rem; text-align:center; }
    @media(max-width:620px) {
      .rep-actions { grid-template-columns:1fr; }
      .rep-flow-summary { grid-template-columns:1fr; }
      .report-brand { align-items:flex-start; }
    }
    .rep-meta { font-size: 0.72rem; color: var(--muted-2); text-align: center; padding: 4px 16px 0; }

    /* Print: show only the report, in a clean light theme (ink-friendly) */

    /* ════════════════════════════════════════════════════════ */
    /* SESSION 33 — APPLE-LEVEL DESIGN SYSTEM + APP SHELL       */
    /* Shared foundation only; individual screens keep content. */
    /* ════════════════════════════════════════════════════════ */
    :root {
      color-scheme: dark;
      --bg: #08080a;
      --bg-2: #0f0f12;
      --surface: #151518;
      --surface-2: #1c1c20;
      --surface-3: #242429;
      --border: rgba(255,255,255,.08);
      --border-2: rgba(255,255,255,.14);
      --text: #f5f5f7;
      --muted: #a1a1aa;
      --muted-2: #66666f;
      --gold: #d8b85a;
      --gold-2: #f0d47b;
      --gold-soft: rgba(216,184,90,.12);
      --neg: #ff6961;
      --neg-soft: rgba(255,105,97,.12);
      --pos: #55c98b;
      --radius-xs: 10px;
      --radius-sm: 12px;
      --radius: 16px;
      --radius-lg: 22px;
      --radius-xl: 28px;
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --shadow-sm: 0 1px 2px rgba(0,0,0,.32), 0 8px 24px rgba(0,0,0,.18);
      --shadow-md: 0 18px 55px rgba(0,0,0,.38);
      --shadow-lg: 0 32px 90px rgba(0,0,0,.55);
      --ease: cubic-bezier(.22,1,.36,1);
    }

    html { background: var(--bg); scroll-behavior: smooth; }
    body {
      min-width: 320px;
      background:
        radial-gradient(900px 540px at 68% -160px, rgba(216,184,90,.075), transparent 64%),
        radial-gradient(700px 500px at 0% 100%, rgba(92,92,120,.06), transparent 70%),
        var(--bg);
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", sans-serif;
      font-feature-settings: "kern" 1, "tnum" 1;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    button, input, select, textarea { font: inherit; }
    button, .row, .finance-card, .budget-launch, .type-cell {
      -webkit-tap-highlight-color: transparent;
    }
    ::selection { color: #18130a; background: var(--gold-2); }
    * { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
    *::-webkit-scrollbar { width: 8px; height: 8px; }
    *::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: var(--surface-3); background-clip: padding-box; }

    #app.app-mode { min-height: 100dvh; background: transparent; }
    #screen-app { min-height: 100dvh; }
    #screen-app.active { animation: shell-in .42s var(--ease) both; }
    .app-wrap { min-height: 100dvh; isolation: isolate; }

    .app-header {
      min-height: calc(62px + var(--safe-top));
      padding: calc(var(--safe-top) + 11px) 16px 11px;
      gap: 10px;
      background: rgba(8,8,10,.72);
      border-color: var(--border);
      box-shadow: 0 1px 0 rgba(255,255,255,.018);
      backdrop-filter: saturate(150%) blur(24px);
      -webkit-backdrop-filter: saturate(150%) blur(24px);
    }
    .app-header h1 {
      min-width: 0; margin-right: auto;
      font-size: clamp(1.16rem, 4.8vw, 1.42rem);
      font-weight: 690; letter-spacing: -.035em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .app-header h1::before { color: var(--gold-2); }
    .app-header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
    .ver-badge {
      padding: 3px 7px; border-color: var(--border);
      color: var(--muted-2); background: rgba(255,255,255,.035);
      font-size: .56rem; border-radius: 999px;
    }
    .sync-status { max-width: 110px; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .icon-btn {
      min-height: 38px; padding: 8px 11px;
      border-color: var(--border); border-radius: var(--radius-xs);
      color: var(--muted); background: rgba(255,255,255,.025);
      transition: color .18s, background .18s, border-color .18s, transform .18s var(--ease);
    }
    .icon-btn:hover { color: var(--text); border-color: var(--border-2); background: rgba(255,255,255,.055); }
    .icon-btn:active { transform: scale(.96); }
    .icon-btn.active { color: var(--gold-2); border-color: rgba(216,184,90,.35); background: rgba(216,184,90,.1); }
    #signout-btn { display: none; }
    #more-nav-btn { display: inline-flex; align-items: center; gap: 5px; }
    #more-nav-btn svg { width: 15px; height: 15px; }

    .app-main {
      width: 100%; max-width: 720px; margin: 0 auto;
      padding: 20px 16px calc(var(--safe-bot) + 112px);
      gap: var(--space-5);
    }
    .view { gap: var(--space-4); }
    .view.active { animation: view-in .34s var(--ease) both; }
    .view-title { font-size: clamp(1.55rem, 7vw, 2rem); font-weight: 700; letter-spacing: -.045em; }
    .view-sub { color: var(--muted); line-height: 1.5; }

    .card, .panel, .hero, .stat, .row, .finance-card, .budget-launch {
      border-color: var(--border);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.025), var(--shadow-sm);
    }
    .card, .panel { border-radius: var(--radius-lg); }
    .card { padding: clamp(22px,5vw,30px); }
    .row, .finance-card, .budget-launch {
      border-radius: var(--radius);
      transition: transform .22s var(--ease), border-color .18s, background .18s, box-shadow .22s var(--ease);
    }
    .row-ico, .finance-avatar { border-radius: var(--radius-sm); }
    .group-head .g-name, .section-label {
      color: var(--muted-2); font-size: .67rem; font-weight: 750; letter-spacing: .105em;
    }

    input, select, textarea, .sheet select, .sheet textarea {
      min-height: 48px; padding: 12px 14px;
      border: 1px solid var(--border); border-radius: var(--radius-sm);
      background: rgba(255,255,255,.035); color: var(--text);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
      transition: border-color .18s, background .18s, box-shadow .18s;
    }
    textarea, .sheet textarea { min-height: 88px; line-height: 1.45; }
    input:hover, select:hover, textarea:hover { border-color: var(--border-2); background: rgba(255,255,255,.048); }
    input:focus, select:focus, textarea:focus,
    .sheet select:focus, .sheet textarea:focus {
      border-color: rgba(240,212,123,.62);
      background: rgba(255,255,255,.055);
      box-shadow: 0 0 0 4px rgba(216,184,90,.10);
      outline: 0;
    }
    label { color: var(--muted); font-size: .72rem; font-weight: 680; letter-spacing: .055em; }

    .btn, .add-btn, .quick-btn, .seg-btn {
      min-height: 48px; border-radius: var(--radius-sm);
      font-weight: 680; letter-spacing: -.01em;
      transition: transform .18s var(--ease), filter .18s, background .18s, border-color .18s, color .18s;
    }
    .btn-primary {
      border: 1px solid rgba(255,255,255,.12);
      background: linear-gradient(180deg, var(--gold-2), var(--gold));
      color: #1b1609;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 10px 26px rgba(216,184,90,.13);
    }
    .btn-primary:not(:disabled):hover { color: #1b1609; filter: brightness(1.035); }
    .btn-ghost, .add-btn {
      border-color: var(--border); background: rgba(255,255,255,.025); color: var(--muted);
    }
    .btn-ghost:hover, .add-btn:hover { color: var(--text); border-color: var(--border-2); background: rgba(255,255,255,.05); }
    .btn:active, .add-btn:active, .quick-btn:active, .seg-btn:active { transform: scale(.985); }
    .btn:disabled { filter: grayscale(.25); opacity: .42; }

    .tabbar {
      left: 10px; right: 10px; bottom: max(8px, var(--safe-bot));
      border: 1px solid var(--border-2); border-radius: 24px;
      padding: 5px; background: rgba(20,20,24,.86);
      box-shadow: 0 18px 50px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.055);
      backdrop-filter: saturate(170%) blur(28px);
      -webkit-backdrop-filter: saturate(170%) blur(28px);
    }
    .tabbar-inner { gap: 2px; }
    .tab {
      min-width: 0; min-height: 54px; padding: 7px 2px 6px;
      border-radius: 18px; color: var(--muted-2);
      font-size: clamp(.5rem,2.3vw,.61rem); font-weight: 650;
      transition: color .2s, background .2s, transform .18s var(--ease);
    }
    .tab .tab-ico { opacity: .72; transition: opacity .2s, transform .25s var(--ease); }
    .tab.active { color: var(--gold-2); background: rgba(216,184,90,.105); }
    .tab.active .tab-ico { opacity: 1; transform: translateY(-1px); }
    .tab:active { transform: scale(.94); }

    .global-add {
      right: 20px; bottom: calc(var(--safe-bot) + 84px);
      width: 56px; height: 56px; border-radius: 18px;
      border-color: rgba(240,212,123,.55);
      background: linear-gradient(145deg,var(--gold-2),var(--gold));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 16px 36px rgba(0,0,0,.52);
      transition: transform .2s var(--ease), box-shadow .2s;
    }
    .global-add:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 20px 42px rgba(0,0,0,.6); }

    .sheet-backdrop {
      background: rgba(0,0,0,.58);
      backdrop-filter: blur(9px);
      -webkit-backdrop-filter: blur(9px);
    }
    .sheet {
      border-color: var(--border-2);
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
      padding: 12px 20px calc(var(--safe-bot) + 24px);
      background: linear-gradient(180deg, rgba(30,30,35,.98), rgba(18,18,21,.99));
      box-shadow: 0 -24px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
      animation: sheet-up .38s var(--ease);
    }
    .sheet-grab { width: 36px; background: rgba(255,255,255,.18); }
    .sheet-title { font-size: 1.25rem; font-weight: 720; letter-spacing: -.025em; }
    .sheet-actions {
      gap: 10px; position: sticky; bottom: 0; padding: 10px 0 4px; margin-bottom: -4px;
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2);
      border-top: 1px solid var(--border);
    }
    .toast {
      border: 1px solid var(--border-2); border-radius: 14px;
      background: rgba(28,28,32,.9); box-shadow: var(--shadow-md);
      backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    }

    .screen:not(#screen-app) .logo {
      color: var(--text); font-size: 1.72rem; font-weight: 720; letter-spacing: -.04em;
    }
    .screen:not(#screen-app) .logo::first-letter { color: var(--gold-2); }
    .screen:not(#screen-app) .card {
      border-color: var(--border-2);
      background: linear-gradient(180deg,rgba(28,28,32,.94),rgba(18,18,21,.96));
      box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.055);
    }

    @keyframes shell-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes view-in {
      from { opacity: 0; transform: translateY(7px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (hover:hover) and (pointer:fine) {
      .row:hover, .finance-card:hover, .budget-launch:hover {
        transform: translateY(-2px); border-color: var(--border-2);
        background-color: var(--surface-2); box-shadow: var(--shadow-sm);
      }
    }

    @media (min-width: 700px) {
      .app-main { max-width: 1040px; padding: 30px 30px 116px; }
      .sheet-backdrop { align-items: center; padding: 24px; }
      .sheet {
        max-width: 620px; max-height: min(860px, calc(100dvh - 48px));
        border-radius: var(--radius-xl); padding: 14px 24px 26px;
        box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06);
        animation: dialog-in .32s var(--ease);
      }
      .sheet-grab { display: none; }
      @keyframes dialog-in {
        from { opacity: 0; transform: translateY(12px) scale(.985); }
        to { opacity: 1; transform: translateY(0) scale(1); }
      }
    }

    @media (min-width: 1100px) {
      body { background-position: 264px 0, 0 100%; }
      .app-header {
        margin-left: 264px; width: calc(100% - 264px);
        min-height: 76px; padding: 15px 38px;
        background: rgba(8,8,10,.68);
      }
      .app-header h1 { font-size: 1.48rem; }
      .app-header-actions { gap: 10px; }
      #signout-btn { display: inline-flex; align-items: center; }
      .app-main {
        margin-left: 264px; width: calc(100% - 264px);
        max-width: none; padding: 34px 40px 64px;
      }
      .view.active:not(#view-dashboard) { max-width: 1160px; }
      #view-dashboard { max-width: 1380px; }
      .tabbar {
        left: 0; bottom: 0; width: 264px; height: 100dvh;
        border: 0; border-right: 1px solid var(--border);
        border-radius: 0; padding: 0;
        background: rgba(11,11,13,.86);
        box-shadow: inset -1px 0 0 rgba(255,255,255,.018);
      }
      .tabbar-inner { gap: 4px; padding: 28px 18px 22px; }
      .tabbar-inner::before {
        content: '◆  Wealth'; margin: 2px 12px 30px;
        font-size: 1.2rem; font-weight: 720; letter-spacing: -.035em;
      }
      .tab {
        min-height: 46px; padding: 10px 13px;
        border-radius: 12px; font-size: .83rem; font-weight: 620;
      }
      .tab:hover, .desktop-tool-link:hover { background: rgba(255,255,255,.045); }
      .tab.active { background: rgba(216,184,90,.12); box-shadow: inset 0 0 0 1px rgba(216,184,90,.08); }
      .desktop-nav-label { margin: 18px 13px 5px; }
      .desktop-tool-link { min-height: 42px; border-radius: 11px; font-size: .78rem; }
      .global-add { right: 34px; bottom: 30px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }


    /* ════════════════════════════════════════════════════════ */
    /* SESSION 34 — WEALTH OS                                   */
    /* New information architecture and rebuilt Home.           */
    /* ════════════════════════════════════════════════════════ */
    :root {
      --os-blue:#6e8dff; --os-violet:#9a7cff; --os-green:#58d19b;
      --os-orange:#ffb35c; --os-rose:#ff7c8f; --os-cyan:#58c8dc;
    }
    .app-header h1::before { display:none; }
    .command-btn {
      display:flex; align-items:center; gap:10px; min-height:36px; padding:7px 10px;
      border:1px solid var(--border); border-radius:11px; color:var(--muted);
      background:rgba(255,255,255,.035); font-size:.76rem; font-weight:650; cursor:pointer;
    }
    .command-btn kbd { display:none; padding:2px 5px; border-radius:5px; color:var(--muted-2); background:rgba(127,127,127,.14); font:inherit; font-size:.61rem; }
    .language-switch{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:42px;height:36px;padding:0 9px;border:1px solid var(--border);border-radius:11px;color:var(--text);background:var(--surface);font-size:.68rem;font-weight:800;cursor:pointer}
    .language-switch svg{width:15px;height:15px;color:var(--muted)}
    .ai-command{color:var(--gold-2);border-color:rgba(212,175,55,.35);background:linear-gradient(135deg,rgba(212,175,55,.16),rgba(212,175,55,.06));box-shadow:0 8px 20px rgba(212,175,55,.12)}
    .ai-command svg{width:16px;height:16px}
    .omr-symbol{display:inline-block;width:.92em;height:.58em;vertical-align:.02em;color:currentColor;background:currentColor;-webkit-mask:url('./omr-symbol.webp') center/contain no-repeat;mask:url('./omr-symbol.webp') center/contain no-repeat}
    @media(max-width:560px){.language-switch{min-width:36px;width:36px;padding:0}.ai-command{width:36px;padding:0;justify-content:center}.ai-command span,.ai-command kbd{display:none}.app-header-actions{gap:6px}}
    .os-home { display:grid; gap:18px; }
    .os-span-all { grid-column:1/-1; }
    .os-balance-card {
      position:relative; overflow:hidden; padding:24px 20px 18px; border-radius:28px;
      background:
        radial-gradient(440px 240px at 100% 0%,rgba(212,175,55,.20),transparent 68%),
        linear-gradient(145deg,#1c1c22,#111014 70%);
      border:1px solid rgba(255,255,255,.12); box-shadow:0 26px 70px -28px #000, inset 0 1px 0 rgba(255,255,255,.1);
    }
    .os-balance-card::after { content:''; position:absolute; width:180px; height:180px; right:-90px; top:-80px; border:1px solid rgba(255,255,255,.1); border-radius:50%; }
    .os-balance-head { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; color:rgba(245,245,247,.66); font-size:.76rem; font-weight:650; }
    .os-balance-head button,.os-section-head>button { border:0; background:transparent; color:var(--gold); font-size:.76rem; font-weight:700; cursor:pointer; }
    .os-balance-value { position:relative; z-index:1; margin-top:12px; color:#fff; font-size:clamp(2.35rem,11vw,4.2rem); line-height:1; font-weight:710; letter-spacing:-.065em; font-variant-numeric:tabular-nums; }
    .os-balance-value small { margin-right:8px; color:rgba(245,245,247,.52); font-size:.72rem; font-weight:700; letter-spacing:.05em; vertical-align:top; }
    .os-balance-meta { position:relative; z-index:1; display:flex; gap:18px; margin-top:16px; color:rgba(245,245,247,.58); font-size:.7rem; }
    .os-balance-meta span { display:flex; align-items:center; gap:6px; }
    .os-balance-meta i { width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(212,175,55,.1); }
    .os-balance-meta i.is-negative { background:var(--neg); box-shadow:0 0 0 4px rgba(199,95,87,.1); }
    .os-balance-meta b { color:rgba(245,245,247,.92); font-weight:700; }
    .os-balance-card .hero-total { position:relative; z-index:1; margin-top:12px; }
    .os-quick-actions { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,.09); }
    .os-quick-actions button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; border:0; border-radius:14px; color:#fff; background:rgba(255,255,255,.075); font-size:.72rem; font-weight:680; cursor:pointer; backdrop-filter:blur(10px); }
    .os-quick-actions button i { display:grid; place-items:center; width:22px; height:22px; border-radius:8px; background:rgba(255,255,255,.1); font-style:normal; font-size:.9rem; }
    .os-section { min-width:0; }
    .os-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 2px 12px; }
    .os-section-head span,.os-page-head .os-kicker { display:block; margin-bottom:3px; color:var(--muted-2); font-size:.62rem; font-weight:760; letter-spacing:.1em; text-transform:uppercase; }
    .os-section-head h3 { font-size:1.18rem; font-weight:710; letter-spacing:-.035em; }
    .os-account-scroll { display:flex; gap:11px; margin:0 -16px; padding:0 16px 6px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
    .os-account-scroll::-webkit-scrollbar { display:none; }
    .os-account-card,.os-account-empty { flex:0 0 min(70vw,260px); min-height:98px; padding:15px 16px; border:1px solid var(--border); border-radius:20px; color:var(--text); text-align:left; scroll-snap-align:start; cursor:pointer; background:var(--surface-2); box-shadow:0 20px 44px -32px #000; }
    .os-account-card { display:flex; flex-direction:column; gap:7px; }
    .os-account-top { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); font-size:.72rem; font-weight:650; }
    .os-account-name { display:flex; align-items:center; gap:7px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
    .os-account-dot { width:6px; height:6px; border-radius:50%; background:var(--gold); flex:0 0 6px; }
    .os-account-cur { font-style:normal; color:var(--muted-2); flex:0 0 auto; }
    .os-account-card strong { margin-top:auto; font-size:1.42rem; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
    .os-account-card small { color:var(--muted); }
    .os-account-empty { display:grid; place-items:center; align-content:center; gap:8px; border-style:dashed; color:var(--muted); background:var(--surface); }
    .os-flow-card,.os-activity-card,.os-plan-preview { padding:18px; border:1px solid var(--border); border-radius:20px; background:rgba(21,21,24,.78); box-shadow:0 20px 44px -32px #000, inset 0 1px 0 rgba(255,255,255,.03); }
    .os-flow-content { display:grid; grid-template-columns:116px 1fr; gap:20px; align-items:center; }
    .os-flow-ring { --p:calc(var(--progress)*1%); width:112px; aspect-ratio:1; display:grid; place-content:center; text-align:center; border-radius:50%; background:radial-gradient(circle at center,var(--surface) 57%,transparent 59%),conic-gradient(var(--gold) var(--p),rgba(127,127,127,.16) 0); }
    .os-flow-ring strong { font-size:1.35rem; letter-spacing:-.04em; }
    .os-flow-ring span { color:var(--muted-2); font-size:.64rem; }
    .os-flow-lines { display:grid; gap:10px; }
    .os-flow-lines div { display:flex; justify-content:space-between; gap:12px; padding-bottom:9px; border-bottom:1px solid var(--border); font-size:.76rem; }
    .os-flow-lines div:last-child { border:0; padding:0; }
    .os-flow-lines span { color:var(--muted); }
    .os-flow-lines b { font-variant-numeric:tabular-nums; }
    .os-insight-card { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:12px; align-items:center; min-height:108px; padding:17px; border:1px solid rgba(212,175,55,.22); border-radius:20px; color:var(--text); text-align:left; background:linear-gradient(135deg,rgba(212,175,55,.10),rgba(212,175,55,.02)); box-shadow:0 20px 44px -32px #000; cursor:pointer; }
    .os-spark { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; color:var(--gold-2); background:rgba(212,175,55,.14); }
    .os-spark svg { width:21px; height:21px; }
    .os-insight-card small { display:block; color:var(--gold); font-size:.57rem; font-weight:800; letter-spacing:.11em; }
    .os-insight-card b { display:block; margin-top:3px; font-size:.9rem; }
    .os-insight-card p { margin-top:3px; color:var(--muted); font-size:.7rem; line-height:1.4; }
    .os-insight-card>i { color:var(--muted-2); font-style:normal; font-size:1.4rem; }
    .os-insights-link { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px; padding:15px 17px; border:1px dashed rgba(212,175,55,.3); border-radius:20px; color:var(--text); text-align:left; background:rgba(212,175,55,.04); cursor:pointer; }
    .os-insights-link b { display:block; font-size:.86rem; }
    .os-insights-link small { display:block; margin-top:3px; color:var(--muted); font-size:.7rem; }
    .os-insights-link>i { color:var(--gold); font-style:normal; font-size:1.3rem; }
    .os-plan-chips { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
    .os-flow-card .os-glance-secondary { grid-template-columns:repeat(4,1fr); margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
    .os-flow-card .os-glance-secondary button { min-height:auto; padding:0 7px 0 0; border:0; background:transparent; }
    .os-plan-chips button { min-width:0; min-height:70px; padding:11px; border:1px solid var(--border); border-radius:16px; color:var(--text); text-align:left; background:rgba(255,255,255,.025); cursor:pointer; }
    .os-plan-chips span { display:block; color:var(--muted-2); font-size:.62rem; }
    .os-plan-chips b { display:block; margin-top:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.76rem; }
    .os-activity-list { display:grid; gap:3px; }
    .os-activity-list .rtxn { padding:11px 4px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; }
    .os-activity-list .rtxn:last-child { border-bottom:0; }
    .os-chart-card { border-radius:24px; }
    .os-page-head { padding:8px 2px 4px; }
    .os-page-head h2 { font-size:clamp(2rem,10vw,3rem); letter-spacing:-.06em; }
    .os-page-head p { max-width:520px; margin-top:7px; color:var(--muted); line-height:1.5; }
    .os-plan-grid { display:grid; gap:10px; }
    .os-plan-card { display:grid; grid-template-columns:46px minmax(0,1fr) auto; gap:13px; align-items:center; min-height:78px; padding:14px; border:1px solid var(--border); border-radius:20px; color:var(--text); text-align:left; background:var(--surface); cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
    .os-plan-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:15px; color:var(--gold); background:rgba(212,175,55,.11); }
    .os-plan-icon svg { width:23px; height:23px; }
    .os-plan-card.is-debt .os-plan-icon { color:var(--neg); background:rgba(199,95,87,.1); }
    .os-plan-card b { display:block; font-size:.88rem; }
    .os-plan-card small { display:block; margin-top:4px; color:var(--muted); font-size:.68rem; }
    .os-plan-card>i { color:var(--muted-2); font-style:normal; font-size:1.35rem; }
    .tabbar-inner::before { content:'Wealth OS'; }
    @media(max-width:699px) {
      .app-header { min-height:68px; }
      .app-header h1 { font-size:1.55rem; }
      .command-btn { width:38px; padding:0; justify-content:center; }
      .command-btn span { font-size:0; }
      .command-btn span::after { content:'✦'; font-size:1rem; color:var(--gold-2); }
      .sync-status { display:none; }
      .tab { font-size:.57rem; }
    }
    @media(min-width:700px) {
      .os-home { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
      .os-balance-card,.os-accounts-strip,.os-plan-preview,.os-activity-card { grid-column:1/-1; }
      .os-flow-card,.os-insight-card { min-height:100%; }
      .os-chart-card { grid-column:span 1; }
      .os-chart-line { grid-column:1/-1; }
      .os-account-scroll { margin:0; padding:0 0 6px; }
      .os-account-card,.os-account-empty { flex-basis:280px; }
      .os-plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    }
    @media(min-width:1100px) {
      .command-btn { min-width:190px; justify-content:space-between; }
      .command-btn kbd { display:inline-block; }
      .os-home { grid-template-columns:repeat(12,minmax(0,1fr)); gap:22px; }
      .os-balance-card { grid-column:span 8; min-height:310px; padding:30px; }
      .os-balance-value { margin-top:20px; }
      .os-quick-actions { max-width:500px; margin-top:30px; }
      .os-accounts-strip { grid-column:span 4; min-width:0; }
      .os-accounts-strip .os-account-scroll { display:grid; gap:9px; max-height:310px; overflow-y:auto; overflow-x:hidden; }
      .os-accounts-strip .os-account-card,.os-accounts-strip .os-account-empty { width:100%; min-height:98px; padding:14px; }
      .os-accounts-strip .os-account-card strong { font-size:1.22rem; }
      .os-flow-card { grid-column:span 5; }
      .os-insight-card { grid-column:span 7; }
      .os-plan-preview { grid-column:span 5; }
      .os-activity-card { grid-column:span 7; }
      .os-chart-card { grid-column:span 6; }
      .os-chart-line { grid-column:span 12; }
      .os-plan-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    }

    /* SESSION 35 — Wealth OS phone containment */
    html, body, #app, #screen-app, .app-wrap { max-width:100%; overflow-x:clip; }
    .app-main, .view, .os-home, .os-balance-card, .os-flow-card,
    .os-accounts-strip, .os-plan-preview, .os-activity-card, .os-chart-card {
      min-width:0; max-width:100%;
    }
    .tabbar-inner::before { content:none; display:none; }
    .os-quick-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .os-quick-actions button {
      min-width:0; padding:8px 5px; gap:5px; overflow:hidden;
      white-space:nowrap; font-size:clamp(.61rem,2.8vw,.72rem);
    }
    .os-quick-actions button i { width:20px; height:20px; flex:0 0 20px; }
    .os-account-scroll {
      max-width:calc(100% + 32px); overscroll-behavior-inline:contain;
      -webkit-overflow-scrolling:touch;
    }
    .os-flow-content { grid-template-columns:96px minmax(0,1fr); gap:14px; }
    .os-flow-ring { width:94px; }
    .os-flow-lines { min-width:0; }
    .os-flow-lines div { min-width:0; gap:8px; }
    .os-flow-lines b {
      min-width:0; max-width:62%; overflow:hidden; text-overflow:ellipsis;
      white-space:nowrap; text-align:right; font-size:clamp(.67rem,3.1vw,.78rem);
    }
    @media(max-width:370px) {
      .os-balance-card { padding-left:16px; padding-right:16px; }
      .os-balance-value { font-size:2.05rem; }
      .os-balance-meta { gap:11px; font-size:.64rem; }
      .os-quick-actions button { flex-direction:column; gap:3px; font-size:.58rem; }
      .os-flow-content { grid-template-columns:82px minmax(0,1fr); gap:10px; }
      .os-flow-ring { width:80px; }
    }
    @media(min-width:1100px) {
      .tabbar-inner::before {
        content:'Wealth OS'; display:block; margin:2px 12px 30px;
        font-size:1.2rem; font-weight:720; letter-spacing:-.035em;
      }
    }

    /* SESSION 36 — Activity, Accounts and transaction entry */
    .os-describe-btn{display:flex;align-items:center;gap:7px;min-height:40px;padding:8px 12px;border:1px solid rgba(212,175,55,.25);border-radius:13px;color:var(--gold-2);background:rgba(212,175,55,.09);font-weight:700;cursor:pointer}.os-describe-btn svg{width:17px;height:17px}
    #view-transactions .activity-summary{padding:5px;border:1px solid var(--border);border-radius:22px;background:var(--surface)}#view-transactions .activity-kpi{min-height:82px;padding:14px 10px;border:0;border-radius:17px;background:transparent}#view-transactions .activity-kpi+.activity-kpi{border-left:1px solid var(--border);border-radius:0}#view-transactions .activity-kpi strong{font-size:clamp(.72rem,3vw,1rem)}
    #view-transactions .quick-row{padding:5px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.025)}#view-transactions .quick-btn{min-height:45px;border:0;border-radius:13px;background:transparent}#view-transactions .quick-exp{color:#e08a82}#view-transactions .quick-inc{color:var(--gold-2)}
    .os-activity-controls{position:sticky;top:calc(var(--safe-top) + 62px);z-index:5;margin:0 -5px;padding:8px 5px 7px;background:linear-gradient(var(--bg) 76%,transparent);backdrop-filter:blur(16px)}#view-transactions .txn-search-wrap{padding:0}#view-transactions .txn-search{min-height:44px;padding-left:42px;border-radius:15px;background:var(--surface)}#view-transactions .filter-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}#view-transactions .filter-row::-webkit-scrollbar{display:none}#view-transactions .filter-chip{flex:none;background:var(--surface)}#view-transactions .filter-chip.active{color:#17130a;background:var(--gold-2);border-color:var(--gold-2)}
    .os-transaction-timeline .section-label{position:sticky;top:calc(var(--safe-top) + 174px);z-index:3;width:max-content;margin:15px 0 7px;padding:5px 9px;border:1px solid var(--border);border-radius:999px;background:rgba(15,15,18,.9)}.os-transaction-timeline .finance-list{gap:0;overflow:hidden;border:1px solid var(--border);border-radius:20px;background:var(--surface)}.os-transaction-timeline .finance-card{border:0;border-radius:0;box-shadow:none;background:transparent}.os-transaction-timeline .finance-card+.finance-card{border-top:1px solid var(--border)}.os-transaction-timeline .finance-avatar{border:0;border-radius:14px;color:var(--gold-2);background:rgba(212,175,55,.1)}.os-transaction-timeline .finance-avatar.debt{color:#e08a82;background:rgba(199,95,87,.1)}
    #view-accounts .finance-hero{overflow:hidden;border-color:rgba(212,175,55,.22);border-radius:28px;background:radial-gradient(420px 220px at 100% 0%,rgba(212,175,55,.20),transparent 65%),linear-gradient(145deg,#1c1c22,#111014)}#view-accounts .finance-value{font-size:clamp(2rem,10vw,3.4rem)}#view-accounts .account-summary{border:1px solid var(--border);border-radius:16px;background:var(--surface)}
    .os-account-portals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.os-account-portals button{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:66px;padding:10px;border:1px solid var(--border);border-radius:18px;color:var(--text);text-align:left;background:var(--surface);cursor:pointer}.os-account-portals button>span{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;color:var(--gold);background:rgba(212,175,55,.1)}.os-account-portals svg{width:19px;height:19px}.os-account-portals b,.os-account-portals small{grid-column:2;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.os-account-portals b{align-self:end;font-size:.78rem}.os-account-portals small{align-self:start;color:var(--muted);font-size:.62rem}.os-account-portals i{grid-column:3;grid-row:1/3;color:var(--muted-2);font-style:normal}
    #view-accounts .finance-list{display:grid;gap:9px}#view-accounts .finance-card{min-height:82px;padding:14px;border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018))}#view-accounts .finance-card .finance-avatar{width:46px;height:46px;border:0;color:var(--gold);background:rgba(212,175,55,.1)}
    .sheet:has(.txn-form-shell){max-width:600px}.txn-form-shell{display:flex;flex-direction:column;gap:15px}.txn-form-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.txn-form-kicker{display:block;margin-bottom:3px;color:var(--muted-2);font-size:.6rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.txn-form-head .sheet-title{padding:0;border:0;font-size:1.45rem}.txn-close{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;color:var(--muted);background:rgba(127,127,127,.14);font-size:1.25rem}
    .txn-type-seg{padding:4px;border:1px solid var(--border);border-radius:15px;background:var(--bg-2);flex-wrap:nowrap;overflow-x:auto}.txn-type-seg .seg-btn{flex:1 0 auto;min-height:39px;border:0;border-radius:11px;background:transparent}.txn-type-seg .seg-btn.active{color:#151109;background:var(--gold-2)}
    .txn-amount-block{padding:18px;border:1px solid var(--border);border-radius:22px;background:radial-gradient(260px 130px at 100% 0%,rgba(212,175,55,.12),transparent),var(--surface)}.txn-amount-row{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:9px;margin-top:8px}.txn-amount-row #tx-amt{min-width:0;height:60px;padding:0;border:0;background:transparent;box-shadow:none;font-size:2.15rem;font-weight:720}.txn-currency-select select{height:60px;text-align:center;font-weight:750}
    .txn-detail-card{display:grid;gap:13px;padding:16px;border:1px solid var(--border);border-radius:22px;background:rgba(255,255,255,.022)}.txn-ai-suggestion{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;padding:11px;border:1px solid rgba(212,175,55,.22);border-radius:14px;color:var(--gold-2);background:rgba(212,175,55,.08);font-size:.72rem}.txn-ai-suggestion small{grid-column:2;color:var(--muted)}.txn-recurring-link{border:0;color:var(--muted);background:transparent;text-align:left;font-size:.72rem}.txn-secondary-actions{display:flex;gap:8px}.txn-secondary-actions>*{flex:1}.sheet[data-txn-type="expense"] .txn-amount-block{border-color:rgba(199,95,87,.2)}.sheet[data-txn-type="income"] .txn-amount-block{border-color:rgba(212,175,55,.22)}
    @media(max-width:699px){.os-describe-btn span{display:none}.os-describe-btn{width:40px;padding:0;justify-content:center}.os-activity-controls{top:calc(var(--safe-top) + 64px)}.os-transaction-timeline .section-label{top:calc(var(--safe-top) + 175px)}#view-accounts .finance-card{grid-template-columns:46px minmax(0,1fr) auto}.txn-primary-actions{position:sticky;bottom:0;z-index:4;padding-top:8px;background:linear-gradient(transparent,var(--surface) 22%)}.txn-secondary-actions{flex-direction:column}}
    @media(min-width:700px){#view-accounts .finance-list{grid-template-columns:repeat(2,minmax(0,1fr))}.os-account-portals{max-width:520px}.txn-detail-card{grid-template-columns:repeat(2,minmax(0,1fr))}.txn-detail-card #txn-cat-picker,.txn-detail-card .txn-ai-suggestion,.txn-detail-card .field:last-child{grid-column:1/-1}}

    /* ════════════════════════════════════════════════════════ */
    /* SESSION 37 — COMPLETE PLAN SYSTEM                        */
    /* Goals, budgets, forecast, recurring, portfolio and debt. */
    /* ════════════════════════════════════════════════════════ */
    #budget-overlay,#schedule-overlay,#goals-overlay,#planner-overlay{
      background:radial-gradient(720px 420px at 80% -100px,rgba(212,175,55,.08),transparent 70%),var(--bg);
    }
    #budget-overlay .cat-head,#schedule-overlay .cat-head,#goals-overlay .cat-head,#planner-overlay .cat-head{
      min-height:72px;padding:calc(var(--safe-top) + 12px) 16px 12px;border-bottom:1px solid var(--border);
      background:rgba(8,8,10,.76);backdrop-filter:saturate(150%) blur(24px);-webkit-backdrop-filter:saturate(150%) blur(24px);
    }
    #budget-overlay .cat-head h2,#schedule-overlay .cat-head h2,#goals-overlay .cat-head h2,#planner-overlay .cat-head h2{
      font-size:1.15rem;font-weight:720;letter-spacing:-.035em;
    }
    #budget-overlay .cat-head-btn,#schedule-overlay .cat-head-btn,#goals-overlay .cat-head-btn,#planner-overlay .cat-head-btn{
      min-width:46px;min-height:38px;padding:8px 10px;border:1px solid var(--border);border-radius:12px;color:var(--gold);background:rgba(255,255,255,.035);font-weight:700;
    }
    #budget-body,#schedule-body,#goals-body,#planner-body{width:100%;max-width:1120px;padding:22px 16px calc(var(--safe-bot) + 40px);gap:14px}
    #budget-body .finance-hero,#schedule-body .finance-hero,#goals-body .finance-hero,
    #view-holdings .finance-hero,#view-liabilities .finance-hero{
      overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:28px;
      background:radial-gradient(480px 260px at 100% 0%,rgba(212,175,55,.20),transparent 68%),linear-gradient(145deg,#1c1c22,#111014);
      box-shadow:0 28px 68px -34px #000,inset 0 1px 0 rgba(255,255,255,.07);
    }
    #view-liabilities .finance-hero{background:radial-gradient(480px 260px at 100% 0%,rgba(199,95,87,.20),transparent 68%),linear-gradient(145deg,#241615,#141010)}
    #budget-body .finance-value,#schedule-body .finance-value,#goals-body .finance-value,
    #view-holdings .finance-value,#view-liabilities .finance-value{font-size:clamp(2rem,10vw,3.7rem);letter-spacing:-.06em}
    #goals-body .finance-list{display:grid;gap:11px}
    #goals-body .os-goal-card{position:relative;min-height:106px;padding:16px;border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018))}
    #goals-body .os-goal-card .finance-avatar{
      width:58px;height:58px;border:0;border-radius:50%;color:var(--gold);
      background:radial-gradient(circle at center,var(--surface) 55%,transparent 58%),conic-gradient(var(--gold) calc(var(--goal-progress)*1%),rgba(127,127,127,.16) 0);
    }
    #goals-body .os-goal-card .finance-avatar svg{width:21px;height:21px}
    #goals-body .finance-progress{height:5px;background:rgba(127,127,127,.14)}#goals-body .finance-progress>span{background:linear-gradient(90deg,var(--gold),var(--gold-2))}
    #budget-body .budget-card,#schedule-body .budget-card{
      padding:15px;border:1px solid var(--border);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.018));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
    }
    #budget-body .budget-card .finance-avatar{border:0;color:var(--gold);background:rgba(212,175,55,.1)}
    #budget-body .budget-bar{height:8px;margin-top:14px;border-radius:999px;background:rgba(127,127,127,.14)}
    #budget-body .budget-bar>span{border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--gold-2))}
    #budget-body .budget-bar.over>span{background:linear-gradient(90deg,var(--neg),#e08a82)}
    #schedule-body .budget-card .finance-avatar{border:0;color:var(--gold);background:rgba(212,175,55,.1)}
    #schedule-body .budget-card .finance-avatar.debt{color:var(--neg);background:rgba(199,95,87,.1)}
    #schedule-body .due-badge{padding:5px 9px;border-radius:999px}
    #schedule-body .schedule-actions{padding-top:11px;border-top:1px solid var(--border)}
    #schedule-body .schedule-actions button{min-height:38px;border-radius:11px}
    #planner-body .planner-tabs{position:sticky;top:calc(var(--safe-top) + 72px);z-index:4;padding:5px;border:1px solid var(--border);border-radius:16px;background:rgba(15,15,18,.9);backdrop-filter:blur(18px)}
    #planner-body .planner-tabs button{min-height:43px;border-radius:12px}
    #planner-body .planner-tabs button.active{color:#17130a;background:var(--gold-2);box-shadow:0 8px 24px rgba(0,0,0,.22)}
    #planner-body .cal-head{margin-top:8px;padding:0 4px}#planner-body .cal-grid{gap:7px}
    #planner-body .cal-day{min-height:68px;padding:8px;border-color:var(--border);border-radius:15px;background:var(--surface)}
    #planner-body .cal-day.today{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(212,175,55,.14)}
    #planner-body .forecast-line{padding:13px 14px;border:1px solid var(--border);border-radius:15px;background:var(--surface)}
    #planner-body .forecast-bar{height:9px;background:rgba(127,127,127,.14)}
    #view-holdings .portfolio-tools{padding:5px;border:1px solid var(--border);border-radius:20px;background:var(--surface)}
    #view-holdings .portfolio-tools button{min-height:48px;border:0;border-radius:15px;background:transparent}
    #view-holdings .finance-list,#view-liabilities .finance-list{display:grid;gap:10px}
    #view-holdings .finance-card,#view-liabilities .finance-card{min-height:94px;padding:15px;border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018))}
    #view-holdings .finance-card .finance-avatar{border:0;color:var(--gold);background:rgba(212,175,55,.1)}
    #view-liabilities .finance-card .finance-avatar{border:0;color:var(--neg);background:rgba(199,95,87,.1)}
    #view-holdings .finance-progress,#view-liabilities .finance-progress{height:5px;background:rgba(127,127,127,.14)}
    #view-holdings .finance-progress>span{background:linear-gradient(90deg,var(--gold),var(--gold-2))}
    #view-liabilities .finance-progress>span{background:linear-gradient(90deg,var(--neg),#e08a82)}
    #view-liabilities .loan-next-step{padding:18px;border:1px solid rgba(199,95,87,.16);border-radius:22px;background:rgba(199,95,87,.055)}
    #view-liabilities .loan-next-actions{gap:9px}
    @media(max-width:699px){
      #budget-body,#schedule-body,#goals-body,#planner-body{overflow-x:clip}
      #budget-body .finance-hero-foot,#schedule-body .finance-hero-foot,#goals-body .finance-hero-foot,
      #view-holdings .finance-hero-foot,#view-liabilities .finance-hero-foot{gap:10px}
      #goals-body .os-goal-card{grid-template-columns:58px minmax(0,1fr) auto}
      #schedule-body .schedule-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
      #planner-body .cal-grid{gap:4px}#planner-body .cal-day{min-height:56px;padding:6px 4px;border-radius:11px}
    }
    @media(min-width:700px){
      #budget-body,#schedule-body,#goals-body,#planner-body{padding:30px 28px 52px}
      #goals-body .finance-list,#view-holdings .finance-list,#view-liabilities .finance-list{grid-template-columns:repeat(2,minmax(0,1fr))}
      #budget-body .budget-card,#schedule-body .budget-card{min-height:150px}
    }
    @media(min-width:1100px){
      #budget-overlay .cat-head,#schedule-overlay .cat-head,#goals-overlay .cat-head,#planner-overlay .cat-head{padding-left:max(32px,calc((100vw - 1120px)/2));padding-right:max(32px,calc((100vw - 1120px)/2))}
      #budget-body .finance-hero,#schedule-body .finance-hero,#goals-body .finance-hero{min-height:240px}
      #planner-body .cal-day{min-height:88px}
    }

    /* ════════════════════════════════════════════════════════ */
    /* SESSION 38 — THEMES + WEB/PHONE UI QUALITY PASS          */
    /* ════════════════════════════════════════════════════════ */
    select,select option,select optgroup{
      color-scheme:dark;background-color:#1c1c20;color:#f5f5f7;
    }
    .appearance-card{display:grid;gap:14px;padding:16px;border:1px solid var(--border);border-radius:20px;background:var(--surface)}
    .appearance-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border:1px solid var(--border);border-radius:14px;background:var(--bg-2)}
    .appearance-seg button{min-width:0;min-height:40px;border:0;border-radius:10px;color:var(--muted);background:transparent;font-weight:700;cursor:pointer}
    .appearance-seg button.active{color:#17130a;background:var(--gold-2);box-shadow:0 6px 18px rgba(0,0,0,.16)}
    .os-activity-list .rtxn{
      grid-template-columns:9px minmax(0,1fr) minmax(70px,auto);
      width:100%;max-width:100%;overflow:hidden;gap:10px;
    }
    .os-activity-list .rtxn-body{min-width:0;overflow:hidden}
    .os-activity-list .rtxn-title,.os-activity-list .rtxn-meta{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .os-activity-list .rtxn-amt{min-width:0;max-width:min(32vw,118px);overflow:hidden;text-align:right}
    .os-activity-list .ra-native{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(.68rem,3.1vw,.86rem)}
    .os-activity-list .ra-omr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .finance-card,.rtxn,.budget-card,.os-plan-card,.row{min-width:0;max-width:100%}
    .finance-main,.finance-title,.finance-meta,.finance-amount,.budget-card-copy,.budget-card-value{min-width:0}
    .finance-title,.finance-meta{overflow:hidden;text-overflow:ellipsis}
    .finance-amount{max-width:min(42vw,190px);overflow:hidden}
    .finance-amount strong,.finance-amount span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    canvas,img,svg{max-width:100%}
    .chart-wrap{min-width:0;max-width:100%;overflow:hidden}
    .cat-overlay,.budget-body,.schedule-body,.rep-body,.app-main,.view{min-width:0;max-width:100%}
    .sheet,.txn-form-shell,.txn-detail-card,.row-2,.field{min-width:0}
    @media(max-width:699px){
      .os-activity-card{padding:15px}
      .os-activity-list .rtxn{padding:11px 0}
      .os-activity-list .rtxn-dot{width:8px;height:8px}
      .os-activity-list .rtxn-title{font-size:.78rem}
      .os-activity-list .rtxn-meta{font-size:.63rem}
      .finance-card{overflow:hidden}
      .finance-amount{max-width:34vw}
      .row-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
      .sheet{max-width:100vw}
    }
    :root[data-theme="light"]{
      color-scheme:light;
      --bg:#f5f5f7;--bg-2:#ececf0;--surface:#ffffff;--surface-2:#f2f2f5;--surface-3:#e3e3e8;
      --border:rgba(20,20,30,.10);--border-2:rgba(20,20,30,.17);--text:#17171a;--muted:#686872;--muted-2:#92929c;
      --gold:#bd972d;--gold-2:#d8b85a;--gold-soft:rgba(189,151,45,.12);--neg:#d94c4c;--neg-soft:rgba(217,76,76,.10);--pos:#21875d;
      --due:#bd972d;--due-soft:rgba(189,151,45,.12);--paid:#21875d;--paid-soft:rgba(33,135,93,.12);--overdue:#d94c4c;--overdue-soft:rgba(217,76,76,.10);
      --shadow-sm:0 1px 2px rgba(20,20,30,.06),0 10px 30px rgba(20,20,30,.06);
      --shadow-md:0 20px 55px rgba(20,20,30,.13);--shadow-lg:0 32px 90px rgba(20,20,30,.18);
    }
    :root[data-theme="light"] body{
      background:radial-gradient(900px 540px at 68% -160px,rgba(189,151,45,.09),transparent 64%),#f5f5f7;color:var(--text);
    }
    :root[data-theme="light"] select,:root[data-theme="light"] select option,:root[data-theme="light"] select optgroup{
      color-scheme:light;background-color:#fff;color:#17171a;
    }
    :root[data-theme="light"] .app-header,:root[data-theme="light"] .cat-head{
      background:rgba(245,245,247,.80)!important;box-shadow:0 1px 0 rgba(20,20,30,.05);
    }
    :root[data-theme="light"] .tabbar{background:rgba(250,250,252,.88);box-shadow:0 18px 50px rgba(20,20,30,.16),inset 0 1px 0 rgba(255,255,255,.8)}
    :root[data-theme="light"] .sheet{background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(246,246,248,.99))}
    :root[data-theme="light"] .cat-overlay{background:#f5f5f7}
    :root[data-theme="light"] .card,:root[data-theme="light"] .panel,:root[data-theme="light"] .row,
    :root[data-theme="light"] .finance-card,:root[data-theme="light"] .budget-card,:root[data-theme="light"] .os-plan-card,
    :root[data-theme="light"] .os-flow-card,:root[data-theme="light"] .os-activity-card,:root[data-theme="light"] .os-plan-preview{
      color:var(--text);background-color:#fff;background-image:none;border-color:var(--border);box-shadow:var(--shadow-sm);
    }
    /* These are ID-scoped in dark mode (#view-accounts .finance-card etc.), which otherwise
       out-specifies the plain-class override above and leaves a near-invisible card in light mode. */
    :root[data-theme="light"] #view-accounts .finance-card,
    :root[data-theme="light"] #view-holdings .finance-card,
    :root[data-theme="light"] #view-liabilities .finance-card,
    :root[data-theme="light"] #goals-body .os-goal-card,
    :root[data-theme="light"] #budget-body .budget-card,
    :root[data-theme="light"] #schedule-body .budget-card{
      background:#fff;background-image:none;box-shadow:var(--shadow-sm);
    }
    :root[data-theme="light"] input,:root[data-theme="light"] textarea,:root[data-theme="light"] .sheet select,:root[data-theme="light"] .sheet textarea{
      color:var(--text);background:#fff;border-color:var(--border);
    }
    :root[data-theme="light"] .os-activity-controls{background:linear-gradient(#f5f5f7 76%,transparent)}
    :root[data-theme="light"] .os-transaction-timeline .section-label{background:rgba(255,255,255,.92)}
    :root[data-theme="light"] .os-transaction-timeline .finance-list{background:#fff}
    :root[data-theme="light"] .planner-tabs,:root[data-theme="light"] .appearance-seg{background:#ececf0}
    :root[data-theme="light"] .icon-btn,:root[data-theme="light"] .command-btn{background:rgba(20,20,30,.035)}
    :root[data-theme="light"] .ai-command{color:#8b6b14;border-color:rgba(189,151,45,.3);background:linear-gradient(135deg,rgba(189,151,45,.14),rgba(189,151,45,.05));box-shadow:0 8px 20px rgba(189,151,45,.15)}
    :root[data-theme="light"] .finance-hero{color:#fff;border-color:rgba(20,20,30,.20);box-shadow:0 20px 48px -24px rgba(22,27,45,.48)}
    :root[data-theme="light"] .finance-hero .finance-eyebrow,:root[data-theme="light"] .finance-hero .finance-kpi span{color:rgba(255,255,255,.58)}
    :root[data-theme="light"] .finance-hero .finance-value,:root[data-theme="light"] .finance-hero .finance-kpi strong{color:#fff}
    :root[data-theme="light"] .finance-hero .finance-hero-foot{border-color:rgba(255,255,255,.13)}
    :root[data-theme="light"] .finance-hero .pos{color:#e7c869}:root[data-theme="light"] .finance-hero .neg{color:#e8968c}
    :root[data-theme="light"] .tab{color:#85858f}:root[data-theme="light"] .tab.active{color:#8b6b14;background:rgba(189,151,45,.13)}
    :root[data-theme="light"] .neg{color:#d94c4c}
    :root[data-theme="light"] .screen:not(#screen-app) .card{background:linear-gradient(180deg,#fff,#f7f7f9)}
    @media(prefers-color-scheme:light){
      :root:not([data-theme]){color-scheme:light}
    }
    @media print {
      @page { size: A4 portrait; margin: 11mm 10mm 13mm; }
      html, body { width:auto !important; height:auto !important; min-height:0 !important; overflow:visible !important; background:#EFEBE2 !important; }
      body > *:not(#report-overlay) { display:none !important; }
      #report-overlay {
        position:static !important; inset:auto !important; display:block !important;
        width:auto !important; height:auto !important; min-height:0 !important; max-height:none !important;
        overflow:visible !important; padding:0 !important; margin:0 !important;
        background:#FBF9F5 !important; color:#201F1D !important;
        font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
        print-color-adjust:exact; -webkit-print-color-adjust:exact;
      }
      #report-overlay .no-print { display:none !important; }
      #report-overlay .rep-body { display:block !important; padding:0 !important; margin:0 !important; }
      #report-overlay .report-brand { margin-bottom:5mm; padding-bottom:3mm; border-bottom:1px solid #E4DFD4; }
      #report-overlay .report-brand strong { color:#201F1D !important; font-size:14pt; font-family:'Source Serif 4', serif !important; font-weight:600; }
      #report-overlay .report-brand span,#report-overlay .report-brand small { color:#8A857B !important; }
      #report-overlay .report-hero {
        margin:0 0 4mm !important; padding:5mm !important; border:1px solid #E4DFD4 !important;
        border-radius:1.5mm !important; background:#F4F0E7 !important; box-shadow:none !important;
        break-inside:avoid-page;
      }
      #report-overlay .finance-eyebrow,#report-overlay .report-net small,#report-overlay .report-hero-foot { color:#8A857B !important; }
      #report-overlay .report-net { font-size:28pt !important; font-family:'Source Serif 4', serif !important; font-weight:600; }
      #report-overlay .rep-summary { grid-template-columns:repeat(4,1fr) !important; gap:2.5mm !important; margin-bottom:3mm; }
      #report-overlay .rep-stat,#report-overlay .rep-flow-card {
        padding:3mm !important; border:1px solid #E4DFD4 !important; border-radius:1.5mm !important;
        background:#FBF9F5 !important; color:#201F1D !important; box-shadow:none !important;
        break-inside:avoid-page;
      }
      #report-overlay .rs-l,#report-overlay .rep-flow-card span,#report-overlay .rep-block h4,#report-overlay .rt-pct { color:#8A857B !important; }
      #report-overlay .rs-v,#report-overlay .rep-flow-card strong,#report-overlay .rt-name,#report-overlay .rt-val { color:#201F1D !important; }
      #report-overlay .report-insight {
        margin:0 0 3mm !important; padding:3mm !important; border:1px solid #EEE0B0 !important;
        border-radius:1.5mm !important; background:#FBF3DE !important; break-inside:avoid-page;
      }
      #report-overlay .report-insight-mark { color:#201F1D !important; background:#F4E2A0 !important; }
      #report-overlay .report-insight small,#report-overlay .rep-meta,#report-overlay .report-footnote { color:#A6A091 !important; }
      #report-overlay .rep-flow-summary { grid-template-columns:repeat(3,1fr) !important; gap:2.5mm !important; margin-bottom:3mm; }
      #report-overlay .rep-meta { margin:1mm 0 3mm; padding:0; }
      #report-overlay .rep-block {
        margin:0 0 4mm !important; padding:4mm !important; border:1px solid #E4DFD4 !important;
        border-radius:1.5mm !important; background:#FBF9F5 !important; color:#201F1D !important;
        box-shadow:none !important; break-inside:auto;
      }
      #report-overlay .rep-chart-wrap { margin:0 auto 4mm !important; break-inside:avoid-page; }
      #report-overlay .rep-chart-wrap svg { width:45mm !important; height:45mm !important; }
      #report-overlay .rep-ring-track { stroke:#EFEBE2 !important; }
      #report-overlay .rep-ring-label { fill:#8A857B !important; }
      #report-overlay .rep-ring-value { fill:#201F1D !important; font-family:'Source Serif 4', serif !important; }
      #report-overlay .rep-cat-group { break-inside:avoid-page; border-color:#EFEBE2 !important; }
      #report-overlay .rep-sub-list,#report-overlay .rep-tr,#report-overlay .rep-sub-row { border-color:#EFEBE2 !important; }
      #report-overlay .rep-sub-name,#report-overlay .rep-sub-val,#report-overlay .rep-sub-pct { color:#8A857B !important; }
      #report-overlay .pos { color:#3F6B4C !important; }
      #report-overlay .neg { color:#A83A32 !important; }
      #report-overlay.print-detailed .rep-detail { display:block !important; page-break-before:always; }
      #report-overlay .rep-detail-table { font-size:7.5pt !important; }
      #report-overlay .rep-detail-table thead { display:table-header-group; }
      #report-overlay .rep-detail-table tr { break-inside:avoid; }
      #report-overlay .rep-detail-table th { color:#8A857B !important; border-color:#E4DFD4 !important; }
      #report-overlay .rep-detail-table td { color:#201F1D !important; border-color:#EFEBE2 !important; }
      #report-overlay .report-footnote { margin-top:4mm; }
    }

    /* ── S39 final product polish ───────────────────────────── */
    .sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
    html[dir="rtl"] body{font-family:Tahoma,Arial,sans-serif}
    html[dir="rtl"] .tabbar-inner,html[dir="rtl"] .topbar-actions{direction:rtl}
    html[dir="rtl"] .row,html[dir="rtl"] .field,html[dir="rtl"] .sheet-title,html[dir="rtl"] .hint,html[dir="rtl"] .flag{text-align:right}
    html[dir="rtl"] .import-row-amount{text-align:left}
    html[dir="rtl"] .os-plan-card,html[dir="rtl"] .desktop-tool-link,html[dir="rtl"] .os-plan-chips button{text-align:right}
    html[dir="rtl"] .os-plan-card>i{transform:scaleX(-1)}
    @media (min-width:1100px){
      html[dir="rtl"] body{background-position:calc(100% - 264px) 0,100% 100%}
      html[dir="rtl"] .app-header,html[dir="rtl"] .app-main{margin-left:0;margin-right:264px}
      html[dir="rtl"] .tabbar{left:auto;right:0;border-right:0;border-left:1px solid var(--border);box-shadow:inset 1px 0 0 rgba(255,255,255,.018)}
      html[dir="rtl"] .global-add{right:auto;left:34px}
    }
    #screen-loading.active { min-height:55vh; align-items:center; justify-content:center; text-align:center; }
    .launch-loader { width:min(280px,78vw); display:grid; justify-items:center; gap:10px; }
    .launch-mark { width:68px; height:68px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--gold) 48%,var(--border)); border-radius:22px; color:var(--gold-2); font-size:1.8rem; background:linear-gradient(145deg,var(--surface-2),var(--surface)); box-shadow:0 18px 55px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.08); animation:launchPulse 1.8s ease-in-out infinite; }
    .launch-wordmark { margin-top:8px; font-size:1.4rem; font-weight:760; letter-spacing:-.03em; }
    .launch-copy { color:var(--muted); font-size:.82rem; }
    .launch-track { width:112px; height:3px; margin-top:10px; overflow:hidden; border-radius:999px; background:var(--border); }
    .launch-track span { display:block; width:42%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--gold),var(--gold-2)); animation:launchTrack 1.25s ease-in-out infinite; }
    @keyframes launchPulse { 50% { transform:translateY(-4px); box-shadow:0 24px 68px rgba(212,175,55,.16); } }
    @keyframes launchTrack { 0% { transform:translateX(-120%); } 100% { transform:translateX(340%); } }

    .app-toast { position:fixed; left:50%; bottom:calc(var(--safe-bot) + 96px); transform:translate(-50%,16px) scale(.98); z-index:300; display:flex; align-items:center; gap:10px; width:max-content; max-width:min(92vw,560px); padding:11px 12px; border:1px solid var(--border-2); border-radius:16px; color:var(--text); background:color-mix(in srgb,var(--surface-2) 92%,transparent); box-shadow:0 18px 60px rgba(0,0,0,.38); backdrop-filter:blur(22px) saturate(1.2); opacity:0; pointer-events:none; transition:opacity .2s ease,transform .25s ease; }
    .app-toast.is-visible { opacity:1; transform:translate(-50%,0) scale(1); pointer-events:auto; }
    .app-toast.is-error { border-color:color-mix(in srgb,var(--neg) 55%,var(--border)); }
    .toast-symbol { flex:0 0 26px; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; color:#102015; background:#7ee2a8; font-weight:900; }
    .app-toast.is-error .toast-symbol { color:#fff; background:var(--neg); }
    .toast-message { min-width:0; line-height:1.35; font-size:.875rem; font-weight:650; }
    .toast-action { flex:none; min-height:36px; padding:0 12px; border:1px solid var(--border-2); border-radius:10px; color:var(--gold-2); background:var(--surface); font:inherit; font-weight:750; }

    .more-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:26px; margin-bottom:14px; border:1px solid var(--border); border-radius:var(--radius-lg); background:radial-gradient(circle at 100% 0,rgba(165,134,255,.18),transparent 38%),linear-gradient(145deg,var(--surface-2),var(--surface)); overflow:hidden; }
    .more-hero-copy { min-width:0; }
    .more-hero .view-title { margin-top:5px; font-size:clamp(2rem,5vw,3.4rem); }
    .more-hero .view-sub { max-width:590px; margin-top:5px; }
    .more-avatar { flex:0 0 64px; width:64px; height:64px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.12); border-radius:22px; color:#1b1503; background:linear-gradient(145deg,var(--gold-2),var(--gold)); box-shadow:0 16px 42px rgba(212,175,55,.18); font-size:1.45rem; font-weight:850; }
    .more-quick { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:24px; }
    .more-quick button { min-width:0; min-height:88px; display:flex; align-items:center; gap:12px; padding:16px; text-align:left; color:var(--text); border:1px solid var(--border); border-radius:17px; background:var(--surface); }
    .more-quick button:hover { border-color:var(--border-2); background:var(--surface-2); transform:translateY(-1px); }
    .more-quick-icon { flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; border-radius:13px; color:var(--gold-2); background:var(--gold-soft); font-size:1.05rem; }
    .more-quick strong,.more-quick small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .more-quick strong { font-size:.9rem; }
    .more-quick small { margin-top:3px; color:var(--muted); font-size:.72rem; }
    .more-people-head { margin-top:2px!important; }
    #view-more > .row { transition:border-color .18s ease,background .18s ease,transform .18s ease; }
    #view-more > .row:hover { border-color:var(--border-2); background:var(--surface-2); transform:translateY(-1px); }

    button,a,[onclick] { touch-action:manipulation; }
    .finance-card,.budget-card,.goal-card,.planning-panel,.activity-timeline,.account-wallet-card { contain:layout paint style; }
    .home-section,.planning-panel,#view-more > .row { content-visibility:auto; contain-intrinsic-size:auto 120px; }
    html { scroll-behavior:smooth; }
    body { overscroll-behavior-y:none; }
    /* var(--text) rather than a gold tone: the gold-family focus ring this
       used to be (color-mix toward white) measured 1.56:1 contrast against
       the light-theme page background — far under WCAG's 3:1 minimum for
       focus indicators (SC 1.4.11 / 2.4.11), effectively invisible to
       keyboard users in light theme. var(--text) is chosen to contrast
       against var(--bg) in both themes (16–17.5:1 either way). */
    :focus-visible { outline:3px solid var(--text); outline-offset:3px; }
    @media (max-width:700px) {
      .more-hero { align-items:center; padding:20px; }
      .more-avatar { width:52px; height:52px; flex-basis:52px; border-radius:18px; }
      .more-quick { grid-template-columns:1fr; gap:8px; }
      .more-quick button { min-height:68px; }
      .app-toast { bottom:calc(var(--safe-bot) + 92px); }
      html { scroll-behavior:auto; }
    }
    @media (pointer:coarse) { button,.row,[onclick],select,input { min-height:44px; } }
    @media (prefers-reduced-motion:reduce) {
      .launch-mark,.launch-track span { animation:none!important; }
      .app-toast,#view-more > .row,.more-quick button { transition:none!important; }
      html { scroll-behavior:auto; }
    }
    @media (prefers-contrast:more) {
      :root { --border:#555560; --border-2:#777784; --muted:#b6b6c0; }
      button,input,select,textarea,.row { border-width:2px; }
    }
    @media (forced-colors:active) {
      .launch-mark,.more-avatar,.toast-symbol { forced-color-adjust:none; }
      :focus-visible { outline:3px solid Highlight; }
    }

    /* ── S42 categories and inline transaction setup ───────── */
    #qr-container{min-height:256px;align-items:center}
    #qr-container img{display:block;width:min(240px,72vw);height:auto;aspect-ratio:1;border:12px solid #fff;border-radius:18px;background:#fff;image-rendering:auto;box-shadow:0 18px 50px rgba(0,0,0,.28)}
    .mfa-enroll-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .mfa-enroll-actions .btn{padding:11px 8px;font-size:.78rem}
    .mfa-secret{padding:11px;border:1px dashed var(--border-2);border-radius:12px;background:var(--bg-2);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.72rem!important;word-break:break-word!important;user-select:all}
    .mfa-note{font-size:.74rem;text-align:left;padding:10px 12px;border-left:3px solid var(--gold);background:var(--gold-soft);border-radius:0 10px 10px 0}

    /* ── S42 category experience ───────────────────────────── */
    #cat-overlay{
      background:
        radial-gradient(760px 420px at 82% -120px,rgba(216,184,90,.10),transparent 68%),
        var(--bg);
    }
    #cat-overlay .cat-head{
      min-height:68px;padding:12px clamp(16px,4vw,32px);
      background:color-mix(in srgb,var(--bg) 84%,transparent);
      backdrop-filter:blur(24px) saturate(1.35);
    }
    #cat-overlay .cat-head h2{font-size:1.2rem}
    #cat-overlay .cat-head-btn{min-height:40px;padding:8px 13px;border-radius:12px;background:rgba(255,255,255,.025)}
    #cat-body{width:100%;max-width:1180px;margin:0 auto;padding:24px clamp(14px,3vw,28px) 48px}
    .cat-dashboard{display:grid;gap:18px}
    .cat-overview{
      display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;
      padding:clamp(20px,4vw,34px);border:1px solid var(--border-2);border-radius:28px;
      background:radial-gradient(520px 230px at 100% 0,rgba(216,184,90,.16),transparent 70%),linear-gradient(145deg,var(--surface-2),var(--surface));
      box-shadow:var(--shadow-md);
    }
    .cat-overview-kicker{color:var(--gold-2);font-size:.68rem;font-weight:760;letter-spacing:.12em;text-transform:uppercase}
    .cat-overview h3{margin-top:7px;font-size:clamp(1.5rem,4vw,2.35rem);letter-spacing:-.045em}
    .cat-overview p{max-width:620px;margin-top:8px;color:var(--muted);font-size:.84rem;line-height:1.5}
    .cat-overview-stats{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
    .cat-stat{padding:8px 11px;border:1px solid var(--border);border-radius:999px;background:rgba(0,0,0,.12);color:var(--muted);font-size:.7rem}
    .cat-stat b{color:var(--text);font-size:.82rem}
    .cat-overview-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:270px}
    .cat-overview-actions .btn{padding-inline:14px;white-space:nowrap}
    .cat-section-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
    #cat-overlay .cat-section{padding:0}
    #cat-overlay .cat-sec-hd{padding:4px 2px 10px}
    #cat-overlay .cat-sec-hd h3{font-size:.72rem;color:var(--text)}
    #cat-overlay .cat-parent-list{display:grid;gap:10px}
    #cat-overlay .cat-parent-card{margin:0;border-radius:19px;background:linear-gradient(155deg,var(--surface),var(--bg-2));box-shadow:var(--shadow-sm)}
    #cat-overlay .cat-parent-row{padding:15px;gap:12px;cursor:default}
    #cat-overlay .cat-parent-ico{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,currentColor 12%,transparent)}
    #cat-overlay .cat-parent-ico svg{width:20px;height:20px}
    #cat-overlay .cat-color-dot{display:none}
    #cat-overlay .cat-parent-name{font-size:.96rem}
    #cat-overlay .cat-parent-meta{margin-top:3px;font-size:.68rem}
    #cat-overlay .cat-action-btn{min-height:34px;margin:0;padding:6px 9px;border-radius:10px}
    #cat-overlay .cat-action-btn.danger{font-size:0;width:34px}
    #cat-overlay .cat-action-btn.danger::after{content:'×';font-size:1rem}
    #cat-overlay .cat-subs{padding:10px 14px 14px 66px;background:rgba(0,0,0,.08)}
    #cat-overlay .cat-sub-row{min-height:40px;padding:8px 10px;border:0;background:transparent}
    #cat-overlay .cat-sub-row:hover{background:rgba(255,255,255,.035)}
    #cat-overlay .cat-add-sub-btn{min-height:38px;justify-content:center;border-radius:11px}
    .cat-utility{padding:16px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.018)}
    .cat-utility-row{display:flex;align-items:center;gap:14px}
    .cat-utility-copy{flex:1;min-width:0}.cat-utility-copy strong{display:block;font-size:.84rem}.cat-utility-copy span{display:block;margin-top:4px;color:var(--muted);font-size:.68rem;line-height:1.4}
    .cat-create-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .cat-add-kind{min-height:44px;padding:10px 12px;border:1px dashed rgba(216,184,90,.35);border-radius:12px;background:var(--gold-soft);color:var(--gold-2);font-size:.76rem;font-weight:700;cursor:pointer}
    .cat-add-kind:hover{border-color:var(--gold-2);background:rgba(216,184,90,.18)}
    .cat-inline-create{display:grid;gap:8px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--bg-2)}
    .cat-inline-create-title{font-size:.76rem;font-weight:720;color:var(--text)}
    .cat-inline-create-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:7px}
    .cat-inline-create-row .btn{min-height:44px;padding:8px 12px}
    @media(max-width:760px){
      #cat-body{padding-top:16px}
      .cat-overview{grid-template-columns:1fr;gap:18px;border-radius:22px}
      .cat-overview-actions{min-width:0;width:100%}
      .cat-section-grid{grid-template-columns:1fr}
      #cat-overlay .cat-subs{padding-left:16px}
      #cat-overlay .cat-parent-row{align-items:flex-start}
      #cat-overlay .cat-action-btn{margin-top:3px}
      .cat-utility-row{align-items:flex-start;flex-direction:column}
      .cat-utility-row .btn{width:100%}
    }
    @media(max-width:420px){
      #cat-overlay .cat-head{gap:8px;padding-inline:10px}
      #cat-overlay .cat-head h2{font-size:1rem}
      #cat-overlay .cat-head-btn{padding-inline:10px}
      .cat-overview-actions,.cat-create-actions{grid-template-columns:1fr}
      .cat-inline-create-row{grid-template-columns:1fr 1fr}
      .cat-inline-create-row input{grid-column:1/-1}
    }

    .txn-recurring-link{width:100%;min-height:72px;display:grid!important;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px!important;padding:12px!important;border:1px solid var(--border)!important;border-radius:17px!important;color:var(--text)!important;background:linear-gradient(145deg,var(--surface),var(--bg-2))!important;text-align:left!important;font-size:inherit!important}
    .txn-recurring-link:hover{border-color:var(--border-2)!important;background:var(--surface-2)!important}
    .txn-recurring-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;color:var(--gold-2);background:var(--gold-soft);font-size:1.25rem}
    .txn-recurring-link strong,.txn-recurring-link small{display:block}.txn-recurring-link strong{font-size:.86rem}.txn-recurring-link small{margin-top:4px;color:var(--muted);font-size:.7rem;line-height:1.35}.txn-recurring-arrow{color:var(--muted);font-size:1.45rem}
    #schedule-overlay .budget-card{overflow:hidden}.schedule-actions{flex-wrap:wrap}.schedule-actions button{min-width:76px;flex:1}
    #report-overlay{background:radial-gradient(720px 420px at 80% -100px,rgba(212,175,55,.1),transparent 70%),var(--bg)}
    #report-overlay .cat-head{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(24px) saturate(1.3)}
    #report-overlay .rep-controls,#report-overlay .rep-actions,#report-overlay .rep-body{width:100%;max-width:1120px;margin-inline:auto}
    .report-hero{padding:24px;border:1px solid var(--border);border-radius:26px;background:radial-gradient(460px 240px at 100% 0,rgba(212,175,55,.20),transparent 68%),linear-gradient(145deg,var(--surface-2),var(--surface));box-shadow:0 26px 64px -36px #000}
    .report-net{margin-top:8px;font-size:clamp(2.2rem,8vw,4.2rem);line-height:1;font-weight:780;letter-spacing:-.065em;font-variant-numeric:tabular-nums}.report-net small{font-size:.72rem;letter-spacing:.02em;color:var(--muted)}
    .report-hero-foot{display:flex;justify-content:space-between;gap:16px;margin-top:18px;padding-top:14px;border-top:1px solid var(--border);color:var(--muted);font-size:.75rem}
    #report-overlay .rep-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
    #report-overlay .rep-stat{min-width:0;border-radius:18px;padding:15px;background:linear-gradient(145deg,var(--surface),var(--bg-2))}
    #report-overlay .rs-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(.9rem,2.5vw,1.15rem)}
    .report-insight{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid color-mix(in srgb,var(--gold) 30%,var(--border));border-radius:18px;background:var(--gold-soft)}
    .report-insight-mark{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:13px;color:var(--gold-2);background:rgba(212,175,55,.14)}
    .report-insight strong,.report-insight small{display:block}.report-insight strong{font-size:.87rem}.report-insight small{margin-top:3px;color:var(--muted);font-size:.72rem}
    #report-overlay .rep-block{padding:18px;border:1px solid var(--border);border-radius:22px;background:var(--surface)}
    #report-overlay .rep-block h4{margin-bottom:12px;font-size:.9rem}.rep-empty{padding:18px;color:var(--muted);text-align:center}
    #report-overlay .rt-name i{display:block;width:min(180px,100%);height:3px;margin-top:6px;overflow:hidden;border-radius:99px;background:var(--border)}#report-overlay .rt-name i b{display:block;height:100%;border-radius:inherit}
    .rep-cat-group{padding:12px 0;border-top:1px solid var(--border)}
    .rep-cat-group:first-of-type{border-top:0}
    .rep-cat-parent{display:grid;grid-template-columns:10px minmax(0,1fr) 44px minmax(86px,auto);align-items:center;gap:10px}
    .rep-cat-parent .rt-dot{width:9px;height:9px;border-radius:3px}
    .rep-cat-parent .rt-name{min-width:0;font-size:.88rem;font-weight:720}
    .rep-sub-list{display:grid;gap:3px;margin:8px 0 0 20px;padding-left:12px;border-left:1px solid var(--border)}
    .rep-sub-row{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(86px,auto);align-items:center;gap:10px;min-height:34px;padding:4px 0;color:var(--muted);font-size:.76rem}
    .rep-sub-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .rep-sub-pct{color:var(--muted-2);text-align:right;font-variant-numeric:tabular-nums}
    .rep-sub-val{text-align:right;color:var(--text);font-weight:650;font-variant-numeric:tabular-nums}
    .rep-sub-empty{margin-top:7px;color:var(--muted-2);font-size:.7rem}
    /* ── S44 bank import and reconciliation ────────────────── */
    .import-hero{padding:20px;border:1px solid var(--border-2);border-radius:22px;background:radial-gradient(380px 180px at 100% 0,rgba(212,175,55,.16),transparent 70%),linear-gradient(145deg,var(--surface-2),var(--surface))}
    .import-hero h3{font-size:1.25rem;letter-spacing:-.03em}.import-hero p{margin-top:6px;color:var(--muted);font-size:.76rem;line-height:1.5}
    .import-drop{display:grid;place-items:center;min-height:116px;padding:18px;border:1px dashed var(--border-2);border-radius:17px;background:var(--bg-2);text-align:center;cursor:pointer}
    .import-drop:hover{border-color:var(--gold);background:var(--gold-soft)}.import-drop strong{font-size:.86rem}.import-drop small{display:block;margin-top:5px;color:var(--muted);font-size:.68rem}
    .import-drop input{position:absolute;inline-size:1px;block-size:1px;opacity:0}
    .import-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .import-map .field{margin:0}.import-map .field.wide{grid-column:1/-1}
    .import-preview{border:1px solid var(--border);border-radius:17px;overflow:hidden;background:var(--bg-2)}
    .import-preview-head{display:flex;justify-content:space-between;gap:10px;padding:11px 13px;border-bottom:1px solid var(--border);color:var(--muted);font-size:.68rem}
    .import-preview-scroll{max-height:250px;overflow:auto}
    .import-preview-row{display:grid;grid-template-columns:84px minmax(0,1fr) 90px;gap:10px;align-items:center;padding:10px 13px;border-top:1px solid var(--border);font-size:.72rem}
    .import-preview-row:first-child{border-top:0}.import-preview-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.import-preview-row b{text-align:right;font-variant-numeric:tabular-nums}
    .import-preview-row.is-duplicate{opacity:.5}.import-preview-row.is-duplicate span:first-child::before{content:'Duplicate · ';color:var(--neg)}
    .import-review-toolbar{display:grid;grid-template-columns:auto minmax(150px,1fr) auto;gap:8px;align-items:center;padding:11px 13px;border-bottom:1px solid var(--border)}
    .import-review-toolbar label{display:flex;align-items:center;gap:7px;font-size:.66rem}.import-review-toolbar input{width:auto}
    .import-review-toolbar select,.import-review-toolbar button{min-height:38px}
    .import-review-row{display:grid;grid-template-columns:28px 82px minmax(180px,1.4fr) 105px minmax(180px,1fr);gap:9px;align-items:center;padding:11px 13px;border-top:1px solid var(--border);font-size:.7rem}
    .import-review-row:first-child{border-top:0}.import-review-row>input{width:auto}.import-review-row .import-row-copy{min-width:0}.import-review-row .import-row-copy strong,.import-review-row .import-row-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .import-review-row .import-row-copy small{margin-top:3px;color:var(--muted)}.import-review-row .import-row-amount{text-align:right;font-variant-numeric:tabular-nums}
    .import-review-row select{min-width:0;padding:9px 10px;font-size:.68rem}.import-review-row.is-duplicate{opacity:.48}.import-review-row.needs-review{background:rgba(212,175,55,.055)}
    .import-context{display:grid;gap:5px}.import-context small{color:var(--muted);line-height:1.35}
    .import-review-row.suggested-transfer{background:rgba(212,175,55,.055)}
    .import-summary.import-summary-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    @media(max-width:620px){.import-review-toolbar{grid-template-columns:1fr 1fr}.import-review-toolbar label{grid-column:1/-1}.import-review-row{grid-template-columns:24px minmax(0,1fr) auto;padding:12px 10px}.import-review-row>span:nth-of-type(1){grid-column:2}.import-review-row .import-row-copy{grid-column:2/-1}.import-review-row .import-row-amount{grid-column:3;grid-row:1}.import-review-row .import-context{grid-column:2/-1}.import-review-row select{width:100%}.import-summary.import-summary-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
    .import-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
    .import-kpi{padding:11px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.import-kpi span{display:block;color:var(--muted);font-size:.6rem;text-transform:uppercase;letter-spacing:.07em}.import-kpi b{display:block;margin-top:5px;font-size:1rem}
    .reconcile-grid{display:grid;gap:10px}.reconcile-card{padding:15px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,var(--surface),var(--bg-2))}
    .reconcile-top{display:flex;justify-content:space-between;gap:12px;align-items:start}.reconcile-top strong{font-size:.9rem}.reconcile-top small{display:block;margin-top:3px;color:var(--muted);font-size:.68rem}
    .reconcile-balances{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:13px}.reconcile-metric{min-width:0;padding-top:9px;border-top:1px solid var(--border)}.reconcile-metric span{display:block;color:var(--muted-2);font-size:.58rem;text-transform:uppercase}.reconcile-metric b{display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;font-size:.78rem}
    .import-history{display:grid;gap:8px}.import-batch{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--border);border-radius:15px;background:var(--surface)}.import-batch strong{display:block;font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.import-batch small{display:block;margin-top:4px;color:var(--muted);font-size:.65rem}.import-batch .btn{min-height:36px;padding:6px 10px;font-size:.68rem}
    .money-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.money-kpi{padding:13px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.money-kpi span{display:block;color:var(--muted);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em}.money-kpi strong{display:block;margin-top:7px;font-size:.95rem}.money-kind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.money-kind{padding:13px 9px;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);text-align:left}.money-kind b,.money-kind small{display:block}.money-kind small{margin-top:5px;color:var(--muted);font-size:.62rem;line-height:1.35}.money-case-list{display:grid;gap:9px}.money-case{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center;padding:13px;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);text-align:left}.money-case-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--gold-dim);color:var(--gold)}.money-case-main b,.money-case-main small{display:block}.money-case-main small{margin-top:4px;color:var(--muted);font-size:.64rem}.money-case-value{text-align:right}.money-case-value strong,.money-case-value small{display:block}.money-case-value small{margin-top:3px;color:var(--muted);font-size:.6rem}.money-history{display:grid;gap:7px}.money-movement{display:flex;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.money-movement span,.money-movement small{display:block}.money-movement small{margin-top:3px;color:var(--muted);font-size:.61rem}
    @media(max-width:520px){.money-summary,.money-kind-grid{grid-template-columns:1fr}.money-kind-grid{gap:6px}.money-kind{padding:11px 12px}}
    @media(max-width:520px){#view-transactions .quick-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media(max-width:520px){.import-map{grid-template-columns:1fr}.import-map .field.wide{grid-column:auto}.import-preview-row{grid-template-columns:72px minmax(0,1fr) 78px;padding-inline:10px}.reconcile-balances{grid-template-columns:1fr 1fr}.reconcile-metric:last-child{grid-column:1/-1}.import-summary{gap:5px}.import-kpi{padding:9px}.import-kpi b{font-size:.86rem}}
    @media(max-width:700px){.mfa-enroll-actions{grid-template-columns:1fr}.report-hero{padding:20px}.report-hero-foot{flex-direction:column;gap:5px}#report-overlay .rep-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.txn-recurring-link{margin-bottom:2px}.rep-cat-parent{grid-template-columns:9px minmax(0,1fr) minmax(76px,auto)}.rep-cat-parent>.rt-pct{display:none}.rep-sub-row{grid-template-columns:minmax(0,1fr) minmax(76px,auto)}.rep-sub-pct{display:none}}
  

/* S71 — Smart Rules and Review Inbox */
.rule-list,.review-list{display:grid;gap:10px;margin-top:14px}.rule-card,.review-card{padding:15px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,var(--surface),var(--bg-2))}.rule-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}.rule-card.is-disabled{opacity:.55}.rule-card-main strong,.rule-card-main small,.rule-card-main span{display:block}.rule-card-main small{margin-top:5px;color:var(--muted);font-size:.7rem;line-height:1.45}.rule-card-main span{margin-top:7px;color:var(--muted-2);font-size:.63rem}.rule-card-actions{display:flex;gap:6px}.rule-card-actions .btn{min-height:36px;padding:6px 10px;font-size:.66rem}.review-card-top,.review-card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}.review-card-top{color:var(--muted);font-size:.64rem}.review-card>strong{display:block;margin-top:10px;font-size:.88rem}.review-card-meta{margin-top:9px;font-size:.72rem}.review-card>small{display:block;margin-top:7px;color:var(--muted);font-size:.66rem}.review-card .sheet-actions{margin-top:12px}.review-amount{margin:10px 0 4px;font-size:2rem;font-weight:780;letter-spacing:-.05em}@media(max-width:520px){.rule-card{grid-template-columns:1fr}.rule-card-actions{width:100%}.rule-card-actions .btn{flex:1}}
.receipt-status{margin:12px 0;padding:12px;border-radius:12px;background:var(--surface-2);color:var(--muted);font-size:13px}
.subscription-list{display:grid;gap:10px;margin-top:14px}
.subscription-card{display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}
.subscription-card small{display:block;margin-top:4px;color:var(--muted)}
.subscription-actions{grid-column:1/-1;display:flex;gap:8px}
.subscription-actions .btn{width:auto;min-height:38px;padding:8px 12px}
@media(max-width:520px){.subscription-card{grid-template-columns:1fr}.subscription-actions{flex-direction:column}.subscription-actions .btn{width:100%}}