*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg: #f7f5f0;
      --surface: #ffffff;
      --border: rgba(0,0,0,0.10);
      --border-strong: rgba(0,0,0,0.18);
      --text-primary: #1a1a18;
      --text-secondary: #6b6b65;
      --text-hint: #9b9b95;
      --accent: #1a6b4a;       --accent-rgb: 26, 107, 74;
      --accent-light: #e8f5ee;
      --accent-text: #0f4a30;
      --env-light: #eef3fe;
      --env-blue: #2a52b8;    --env-blue-rgb: 42, 82, 184;
      --acc-gold: #9a7a00;   --acc-gold-rgb: 154, 122, 0;
      --acc-light: #fef9e0;
      --txn-orange: #c04a15;  --txn-orange-rgb: 192, 74, 21;
      --txn-light: #fef0e6;
      --purple: #6b4fa8;      --purple-rgb: 107, 79, 168;
      --purple-light: #f3f0f8;
      --rpt-teal: #0e7490;    --rpt-teal-rgb: 14, 116, 144;
      --rpt-light: #ecfeff;
      --danger: #a32d2d;
      --danger-light: #fff5f5;
      --danger-border: rgba(200,0,0,0.15);
      --positive: #1a6b4a;
      --negative: #a32d2d;
      --shadow: 0 2px 12px rgba(0,0,0,0.07);
      --radius: 14px;
      --radius-sm: 9px;
    }
    body.dark-mode {
      --bg: #111113;
      --surface: #1c1c1f;
      --border: rgba(255,255,255,0.10);
      --border-strong: rgba(255,255,255,0.18);
      --text-primary: #f0f0ee;
      --text-secondary: #9b9b98;
      --text-hint: #6b6b68;
      --shadow: 0 2px 12px rgba(0,0,0,0.5);
      --accent-light: #0d2e1f;
      --accent-text: #5ebd95;
      --env-light: #111a3a;
      --env-blue: #6087e0;    --env-blue-rgb: 96, 135, 224;
      --acc-light: #2a2100;
      --acc-gold: #d4a800;    --acc-gold-rgb: 212, 168, 0;
      --txn-light: #2a1400;
      --txn-orange: #f06030;  --txn-orange-rgb: 240, 96, 48;
      --purple: #9b7fd4;      --purple-rgb: 155, 127, 212;
      --purple-light: #1e1530;
      --rpt-teal: #22b8d8;    --rpt-teal-rgb: 34, 184, 216;
      --rpt-light: #001d25;
      --danger-light: #2a0f0f;
      --danger-border: rgba(200,0,0,0.3);
      --positive: #2aad73;
      --negative: #e05555;
    }
    body.dark-mode select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%239b9b98' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    }
    body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text-primary); height: 100dvh; overflow: hidden; overscroll-behavior: none; }
    .hidden { display: none !important; }

    /* Loading */
    #loading-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 0.9rem; gap: 1rem; }
    .spinner { width: 28px; height: 28px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; }

    /* Auth */
    #auth-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; }
    .auth-card { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 3rem 2.5rem 2.5rem; width: 100%; max-width: 400px; text-align: center; animation: fadeUp 0.5s ease both; }
    .logo-mark { width: 64px; height: 64px; display: block; margin: 0 auto 1.5rem; }
    .auth-card h1 { font-family: 'DM Serif Display', serif; font-size: 1.75rem; font-weight: 400; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
    .auth-card > p { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 2rem; line-height: 1.6; }
    .divider { display: flex; align-items: center; gap: 12px; margin-bottom: 1.25rem; color: var(--text-hint); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
    .divider::before, .divider::after { content: ''; flex: 1; height: 0.5px; background: var(--border); }
    .google-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0.75rem 1rem; border: 0.5px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-primary); font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background 0.15s, transform 0.1s; }
    .google-btn:hover { background: var(--bg); }
    .google-btn:active { transform: scale(0.98); }
    .google-icon { width: 18px; height: 18px; flex-shrink: 0; }
    .auth-error { display: none; background: var(--danger-light); border: 0.5px solid var(--danger-border); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.8rem; color: var(--danger); margin-bottom: 1rem; text-align: left; }

    /* Onboarding (state 2) — request form / pending / locked views inside the auth card */
    .onb-view p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem; }
    .onb-beta { background: var(--danger-light); border: 0.5px solid var(--danger-border); border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.8rem !important; color: var(--text-secondary); text-align: left; }
    .onb-input { width: 100%; box-sizing: border-box; padding: 0.7rem 0.9rem; border: 0.5px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-primary); font-family: 'DM Sans', sans-serif; font-size: 0.95rem; margin-bottom: 1rem; }
    .onb-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12); }
    .onb-submit-btn { width: 100%; padding: 0.75rem 1rem; border: none; border-radius: 10px; background: var(--accent); color: #fff; font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: opacity 0.15s, transform 0.1s; }
    .onb-submit-btn:hover { opacity: 0.92; }
    .onb-submit-btn:active { transform: scale(0.98); }
    .onb-submit-btn:disabled { opacity: 0.5; cursor: default; }

    /* System Admin — household status badge + approve/lock buttons */
    .hh-status-badge { display: inline-block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 10px; margin-left: 6px; vertical-align: middle; }
    .hh-status-badge.pending { color: var(--txn-orange); background: var(--txn-light); }
    .hh-status-badge.locked { color: var(--danger); background: var(--danger-light); }
    .admin-status-btn { flex-shrink: 0; font-size: 0.72rem; padding: 3px 9px; border-radius: 6px; border: 0.5px solid var(--border); background: var(--surface); color: var(--text-secondary); cursor: pointer; font-family: inherit; transition: background 0.15s; }
    .admin-status-btn:hover { background: var(--bg); }
    .admin-status-btn.approve { color: var(--accent); border-color: var(--accent); }
    .admin-status-btn.lock { color: var(--danger); border-color: var(--danger-border); }
    .admin-status-btn.danger { color: var(--danger); border-color: var(--danger-border); }
    .admin-status-btn.danger:hover { background: var(--danger-light); }

    /* App */
    #app-screen { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; animation: fadeUp 0.4s ease both; }
    .app-header { background: var(--surface); border-bottom: 0.5px solid var(--border); padding: 0 2rem; height: 60px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; }
    .app-name { font-family: 'DM Serif Display', serif; font-size: 1.15rem; font-weight: 400; letter-spacing: -0.01em; user-select: none; }
    .app-version { font-family: 'DM Sans', sans-serif; font-size: 0.62rem; font-weight: 500; letter-spacing: 0; color: var(--text-hint); margin-left: 0.4rem; vertical-align: middle; }
    .header-right { display: flex; align-items: center; gap: 12px; }
    .avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 0.5px solid var(--border); cursor: pointer; }
    .avatar-fallback { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-light); color: var(--accent-text); font-size: 0.8rem; font-weight: 500; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
    /* User button (header) — mirrors .household-btn, with the avatar as its leading mark */
    .user-btn { display: flex; align-items: center; gap: 6px; background: none; border: 0.5px solid var(--border); border-radius: 8px; padding: 0.3rem 0.6rem 0.3rem 0.3rem; font-family: 'DM Sans', sans-serif; font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s; max-width: 180px; }
    .user-btn:hover { background: var(--bg); color: var(--text-primary); }
    .user-btn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .user-btn-avatar { display: flex; flex-shrink: 0; }
    .user-btn .avatar, .user-btn .avatar-fallback { width: 22px; height: 22px; font-size: 0.68rem; cursor: pointer; }
    /* Theme segmented control (in the profile modal) */
    .theme-seg { display: flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
    .theme-seg-opt { flex: 1; text-align: center; font-size: 0.82rem; padding: 0.5rem 0; cursor: pointer; color: var(--text-secondary); background: var(--surface); transition: background 0.15s, color 0.15s; user-select: none; }
    .theme-seg-opt:not(:last-child) { border-right: 1px solid var(--border-strong); }
    .theme-seg-opt:hover { background: var(--bg); }
    .theme-seg-opt.active, .theme-seg-opt.active:hover { background: var(--purple); color: #fff; }
    .sign-out-btn { background: none; border: 0.5px solid var(--border); border-radius: 8px; padding: 0.35rem 0.75rem; font-family: 'DM Sans', sans-serif; font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s; }
    .sign-out-btn:hover { background: var(--bg); color: var(--text-primary); }
    .admin-btn { display: flex; align-items: center; gap: 6px; background: #6b4fa8; color: #fff; border: none; border-radius: 8px; padding: 0.35rem 0.75rem; font-family: 'DM Sans', sans-serif; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: opacity 0.15s; }
    .admin-btn:hover { opacity: 0.88; }
    @media (max-width: 767px) {
      .admin-btn { padding: 0.3rem; width: 28px; height: 28px; justify-content: center; border-radius: 50%; }
      .admin-btn span { display: none; }
    }
    .household-btn { display: flex; align-items: center; gap: 6px; background: none; border: 0.5px solid var(--border); border-radius: 8px; padding: 0.35rem 0.75rem; font-family: 'DM Sans', sans-serif; font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s; max-width: 180px; }
    .household-btn:hover { background: var(--bg); color: var(--text-primary); }
    .household-btn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .household-btn-name.unnamed { font-style: italic; color: var(--text-hint); }
    .header-divider { width: 0.5px; height: 20px; background: var(--border); flex-shrink: 0; }

    .app-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }

    /* ── Tab bar ── */
    .tab-bar { display: flex; background: var(--surface); border-bottom: 0.5px solid var(--border); position: sticky; top: 60px; z-index: 9; }
    .left-tab-group { display: flex; width: 360px; flex-shrink: 0; padding-left: 1.25rem; }
    .tab-bar-spacer { width: 0.5px; background: var(--border); margin: 8px 0; flex-shrink: 0; }
    .tab-btn { display: flex; align-items: center; gap: 6px; padding: 0.7rem 1rem; background: none; border: none; border-bottom: 2px solid transparent; font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 500; color: var(--text-hint); cursor: pointer; transition: color 0.15s, border-color 0.15s; white-space: nowrap; margin-bottom: -0.5px; }
    .tab-btn.active { color: var(--text-primary); border-bottom-color: var(--accent); }
    .tab-btn.acc-tab.active { border-bottom-color: var(--acc-gold); }
    .tab-btn.env-tab.active { border-bottom-color: var(--env-blue); }
    .tab-btn.txn-tab.active { border-bottom-color: var(--txn-orange); }
    .tab-btn.rpt-tab.active { border-bottom-color: var(--rpt-teal); }
    @media (min-width: 768px) { .tab-btn.txn-tab { display: none; } .tab-btn.rpt-tab { display: none; } }

    /* Desktop right panel internal tab bar — now lives inside .tab-bar, hidden on mobile */
    .right-tab-group { display: none; }
    @media (min-width: 768px) { .right-tab-group { display: flex; } }
    .right-tab-btn { display: flex; align-items: center; gap: 6px; padding: 0.7rem 1rem; background: none; border: none; border-bottom: 2px solid transparent; font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 500; color: var(--text-hint); cursor: pointer; transition: color 0.15s, border-color 0.15s; white-space: nowrap; margin-bottom: -0.5px; }
    .right-tab-btn.active { color: var(--text-primary); border-bottom-color: var(--txn-orange); }
    .right-tab-btn.rpt-tab.active { border-bottom-color: var(--rpt-teal); }
    .mode-btn.rpt-mode.active { background: var(--rpt-teal); }
    .rpt-type-btn { font-size:0.7rem; padding:3px 8px; border-radius:var(--radius-sm); border:1px solid var(--rpt-teal); color:var(--rpt-teal); background:transparent; cursor:pointer; white-space:nowrap; }
    .rpt-type-btn:hover { background:var(--rpt-light); }
    .rpt-type-btn.active { background:var(--rpt-teal); color:#fff; }
    .rpt-type-btn.active:hover { background:var(--rpt-teal); }
    .reports-selector-area { padding: 0.4rem 1.5rem 0; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }
    .reports-selector-area .envelope-mode-toggle { margin-bottom: 0; }
    .rpt-custom-inputs { display: flex; align-items: center; gap: 0.5rem; padding-top: 2px; }
    .rpt-custom-inputs span { font-size: 0.82rem; color: var(--text-secondary); white-space: nowrap; }
    .rpt-custom-inputs input[type="date"] { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.3rem 0.4rem; font-family: 'DM Sans', sans-serif; font-size: 0.82rem; color: var(--text); background: var(--surface); outline: none; }
    .rpt-custom-inputs input[type="date"]:focus { border-color: var(--rpt-teal); box-shadow: 0 0 0 3px rgba(var(--rpt-teal-rgb), 0.12); }
    .reports-controls { display: flex; flex-direction: column; gap: 0.5rem; }
    .rpt-summary { padding: 0.3rem 1.5rem 0.15rem; font-size: 0.78rem; color: var(--text-hint); }
    .rpt-list { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 0 1.5rem 1.5rem; }
    .rpt-row { display: flex; align-items: center; padding: 0.55rem 0.85rem; border-bottom: 0.5px solid var(--border); font-size: 0.88rem; gap: 0.75rem; position: relative; overflow: hidden; cursor: pointer; }
    .rpt-row:last-child { border-bottom: none; }
    .rpt-row-selected { background: rgba(var(--env-blue-rgb), 0.07) !important; }
    .rpt-bar-bg { position: absolute; top: 0; left: 0; bottom: 0; background: var(--rpt-light); z-index: 0; transition: width 0.3s ease; }
    .rpt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; position: relative; z-index: 1; }
    .rpt-pct { color: var(--text-hint); font-size: 0.8rem; position: relative; z-index: 1; white-space: nowrap; }
    .rpt-amount { font-weight: 500; min-width: 80px; text-align: right; position: relative; z-index: 1; white-space: nowrap; }
    .rpt-uncategorised { color: var(--text-secondary); font-style: italic; font-weight: 400; }
    .rpt-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; position: relative; z-index: 1; }
    .rpt-chart-wrap { position: relative; height: 220px; padding: 0.5rem 1.5rem 0.25rem; }
    .rpt-sticky-header { position: sticky; top: 0; z-index: 2; background: var(--bg); border-bottom: 0.5px solid var(--border); }
    .rpt-row-header { font-size: 0.72rem; font-weight: 500; color: var(--text-hint); text-transform: uppercase; letter-spacing: 0.04em; border-bottom-color: var(--border-strong) !important; }
    .rpt-period { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; z-index: 1; }
    .rpt-income { min-width: 72px; text-align: right; position: relative; z-index: 1; white-space: nowrap; font-weight: 500; }
    .rpt-expense { min-width: 72px; text-align: right; position: relative; z-index: 1; white-space: nowrap; font-weight: 500; }
    .rpt-net { min-width: 72px; text-align: right; position: relative; z-index: 1; white-space: nowrap; font-weight: 500; }
    .rpt-row-data .rpt-income { color: var(--positive); }
    .rpt-row-data .rpt-expense { color: var(--negative); }
    .rpt-row-data .rpt-net.positive { color: var(--positive); }
    .rpt-row-data .rpt-net.negative { color: var(--negative); }

    @media (max-width: 767px) {
      .app-header { padding: 0 0.75rem; height: 52px; }
      .tab-bar { top: 52px; }
      .left-tab-group { width: 100%; padding-left: 0; }
      .tab-bar-spacer { display: none; }
      .app-name { font-size: 0.95rem; }
      .user-name { display: none; }
      .household-btn { max-width: 120px; padding: 0.3rem 0.5rem; font-size: 0.75rem; gap: 4px; }
      .sign-out-btn { padding: 0.3rem 0.5rem; font-size: 0.75rem; }
      /* Avatar-only on phones to save header space (household name stays as the primary context) */
      .user-btn { max-width: none; padding: 0.3rem; }
      .user-btn-name { display: none; }
      .header-divider { display: none; }
      .tab-bar { padding: 0; }
      .tab-btn { flex: 1; flex-direction: column; gap: 3px; padding: 0.5rem 0.25rem; font-size: 0.65rem; justify-content: center; }
      .tab-btn svg { width: 18px; height: 18px; }
      .tab-btn span { display: block; }
      /* Mobile transactions: full bleed, compact text */
      #transactions-container-m .txn-list,
      #upcoming-sched-m .txn-list { border-radius: 0; border-left: none; border-right: none; }
      #transactions-container-m .txn-row,
      #upcoming-sched-m .txn-row { font-size: 0.72rem; padding: 0.35rem 0.5rem; }
      #transactions-container-m .txn-middle-top,
      #upcoming-sched-m .txn-middle-top,
      #transactions-container-m .txn-middle-bottom,
      #upcoming-sched-m .txn-middle-bottom { font-size: 0.72rem; }
      #transactions-container-m .txn-envelope-pill,
      #upcoming-sched-m .txn-envelope-pill { font-size: 0.62rem; padding: 1px 5px; }
      #transactions-container-m .txn-col-middle .txn-envelope-pill,
      #upcoming-sched-m .txn-col-middle .txn-envelope-pill { background: none; color: var(--text-primary); font-size: inherit; padding: 0; border-radius: 0; display: inline; max-width: none; overflow: visible; vertical-align: baseline; }
      #transactions-container-m .txn-col-date,
      #upcoming-sched-m .txn-col-date { width: 36px; }
      #transactions-container-m .txn-pending-tag,
      #upcoming-sched-m .txn-pending-tag,
      #transactions-container-m .txn-manual-tag,
      #upcoming-sched-m .txn-manual-tag { font-size: 0.55rem; letter-spacing: -0.02em; }
      #upcoming-sched-m .reminder-tag, #upcoming-sched-m .fill-tag { font-size: 0.55rem; padding: 0 5px; }
      #transactions-container-m .txn-auto-tag { font-size: 0.5rem; padding: 0 5px; }
      #upcoming-sched-m .sched-dismiss { width: 22px; height: 22px; margin-left: 3px; }
      #transactions-container-m .txn-col-pill,
      #upcoming-sched-m .txn-col-pill { width: 28px; }
      #transactions-container-m .txn-col-amount,
      #upcoming-sched-m .txn-col-amount { width: 75px; }
      #add-txn-modal .modal-actions { flex-wrap: wrap; }
      #add-txn-modal .modal-actions .btn-primary,
      #add-txn-modal .modal-actions .btn-danger,
      #add-txn-modal .modal-actions .btn-cancel { padding: 0.5rem 0.65rem; font-size: 0.8rem; }
    }

    /* ── Content layout ── */
    .content-area { flex: 1; display: flex; min-height: 0; overflow: hidden; }
    .panel-left { width: 360px; flex-shrink: 0; overflow: hidden; border-right: 0.5px solid var(--border); display: none; flex-direction: column; }
    .panel-right { flex: 1; overflow: hidden; display: none; flex-direction: column; }
    .panel-mobile { flex: 1; overflow: hidden; display: none; flex-direction: column; }
    @media (min-width: 768px) { .panel-left { display: flex; } .panel-right { display: flex; } }
    @media (max-width: 767px) { .panel-mobile { display: flex; } }

    /* Tab panels inside left panel (desktop) and mobile panel */
    .tab-panel { display: none; }
    .tab-panel.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
    #right-panel-transactions { display: flex; flex-direction: column; flex: 1; min-height: 0; }
    #right-panel-reports { display: none; flex-direction: column; flex: 1; min-height: 0; }

    .panel-top { padding: 0.75rem 1.5rem; border-bottom: 0.5px solid var(--border); flex-shrink: 0; background: var(--surface); }
    .section-header { display: flex; align-items: center; justify-content: space-between; min-height: 32px; }
    .wk-total { font-size: 0.72rem; color: var(--text-hint); }
    .acc-header-right { display:flex; align-items:center; gap:8px; }
    .check-balances-btn { font-size:0.7rem; padding:3px 8px; border-radius:var(--radius-sm); border:1px solid var(--acc-gold); color:var(--acc-gold); background:transparent; cursor:pointer; white-space:nowrap; }
    .check-balances-btn:hover { background:var(--acc-light); }
    .check-balances-btn:disabled { opacity:0.6; cursor:default; }
    .fetch-txns-btn { font-size:0.7rem; padding:3px 8px; border-radius:var(--radius-sm); border:1px solid var(--txn-orange); color:var(--txn-orange); background:transparent; cursor:pointer; white-space:nowrap; }
    .fetch-txns-btn:hover { background:var(--txn-light); }
    .fetch-txns-btn:disabled { opacity:0.6; cursor:default; }
    .fetch-last-fetched { font-size:0.65rem; color:var(--text-hint); white-space:nowrap; font-style:italic; }
    .payee-list-row { display:flex; align-items:center; gap:6px; padding:5px 0; border-bottom:0.5px solid var(--border); }
    .payee-list-row:last-child { border-bottom:none; }
    .payee-list-name { flex:1; font-size:0.85rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
    .payee-list-input { flex:1; font-size:0.85rem; padding:3px 6px; border:1px solid var(--border); border-radius:var(--radius-sm); min-width:0; }
    .payee-row-btn { font-size:0.72rem; padding:2px 8px; border-radius:var(--radius-sm); cursor:pointer; background:none; border:1px solid var(--border); color:var(--text-secondary); white-space:nowrap; flex-shrink:0; }
    .payee-row-btn:hover { background:var(--bg); }
    .payee-row-btn.danger { color:var(--danger); border-color:var(--danger); }
    .rules-btn { font-size:0.7rem; padding:3px 8px; border-radius:var(--radius-sm); border:1px solid var(--env-blue); color:var(--env-blue); background:transparent; cursor:pointer; white-space:nowrap; }
    .rules-btn:hover { background:var(--env-light); }
    .approve-rule-btn { font-size:0.7rem; padding:1px 6px; border-radius:20px; border:1px solid var(--positive); color:var(--positive); background:transparent; cursor:pointer; white-space:nowrap; line-height:1.4; margin-left:4px; vertical-align:middle; }
    .approve-rule-btn:hover { background:var(--accent-light); }
    .approve-rule-btn:disabled { opacity:0.5; cursor:default; }
    .approve-rule-env { font-weight:600; max-width:9em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:bottom; }
    .approve-rule-caret { font-size:0.8rem; opacity:0.85; }
    /* Overlapping-rule chooser modal rows */
    .rule-chooser-row { display:flex; flex-direction:column; gap:4px; width:100%; text-align:left; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:8px; cursor:pointer; font-family:'DM Sans',sans-serif; }
    .rule-chooser-row:hover { border-color:var(--positive); background:var(--accent-light); }
    .rule-chooser-row.default { border-color:var(--positive); }
    .rule-chooser-row:disabled { opacity:0.5; cursor:default; }
    .rule-chooser-crit { font-size:0.8rem; color:var(--text-secondary); }
    .rule-chooser-best { font-size:0.62rem; font-weight:600; color:var(--positive); background:var(--accent-light); border:1px solid var(--positive); border-radius:20px; padding:1px 6px; margin-left:6px; vertical-align:middle; white-space:nowrap; }
    .rule-list-row { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:0.5px solid var(--border); }
    .rule-list-row:last-child { border-bottom:none; }
    .rule-list-info { flex:1; min-width:0; }
    .rule-list-payee { font-size:0.85rem; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .rule-list-meta { font-size:0.75rem; color:var(--text-secondary); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .rule-list-btns { display:flex; gap:4px; flex-shrink:0; }
    .akahu-match { color:var(--positive); font-size:0.85rem; margin-left:4px; }
    .akahu-mismatch { color:var(--negative); font-size:0.85rem; margin-left:4px; }
    /* Link-to-existing reconciliation panel (account modal) */
    .akahu-link-panel { margin-top:0.6rem; padding:0.7rem 0.85rem; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:0.85rem; background:var(--bg); }
    .akahu-link-panel.ok   { border-color:var(--positive); background:var(--accent-light); }
    .akahu-link-panel.warn { border-color:var(--danger); }
    .akahu-link-row { display:flex; justify-content:space-between; gap:1rem; padding:0.15rem 0; font-variant-numeric:tabular-nums; }
    .akahu-link-row span:first-child { color:var(--text-secondary); }
    .akahu-link-note { font-size:0.76rem; color:var(--text-hint); margin:0.1rem 0 0.2rem; }
    .modal-hint { font-size:0.82rem; color:var(--text-hint); margin:0.75rem 0 0; line-height:1.45; }
    .akahu-link-status { margin-top:0.45rem; font-weight:500; }
    .akahu-link-panel.ok .akahu-link-status { color:var(--positive); }
    .akahu-link-panel.warn .akahu-link-status { color:var(--danger); }
    .akahu-link-recheck { margin-left:0.5rem; font-size:0.78rem; padding:0.15rem 0.55rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); cursor:pointer; color:var(--text); }
    .akahu-link-recheck:hover { background:var(--bg); }
    .akahu-link-txns { max-height:11rem; overflow-y:auto; margin-top:0.25rem; border-top:1px solid var(--border); }
    .akahu-link-txn { display:flex; align-items:baseline; gap:0.6rem; padding:0.2rem 0; font-size:0.8rem; border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums; }
    .akahu-link-txn:last-child { border-bottom:none; }
    .akahu-link-txn-date { color:var(--text-hint); white-space:nowrap; }
    .akahu-link-txn-payee { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .akahu-link-txn-amt { white-space:nowrap; }
    .akahu-link-txn-amt.negative { color:var(--negative); }
    .akahu-link-txn-amt.positive { color:var(--positive); }
    .token-wrap { position:relative; flex:1; }
    .token-wrap input { width:100%; box-sizing:border-box; padding-right:2rem; }
    .token-wrap input.masked { -webkit-text-security:disc; }
    .token-eye { position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--text-hint); padding:0; line-height:1; }
    .section-title { font-family: 'DM Serif Display', serif; font-size: 1.3rem; font-weight: 400; letter-spacing: -0.02em; }

    /* Buttons */
    .add-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--accent); color: #fff; border: none; border-radius: 50%; padding: 0; cursor: pointer; transition: opacity 0.15s, transform 0.1s; flex-shrink: 0; }
    .add-btn.env { background: var(--env-blue); }
    .add-btn.acc { background: var(--acc-gold); }
    .add-btn.txn { background: var(--txn-orange); }
    .add-btn:hover { opacity: 0.88; }
    .add-btn:active { transform: scale(0.97); }

    /* Cards */
    #accounts-list, #envelopes-list, #accounts-list-m, #envelopes-list-m { display: flex; flex-direction: column; gap: 6px; flex: 1; overflow-y: auto; }
    #accounts-list, #envelopes-list { padding: 0 1.5rem 1.75rem; }
    #accounts-list-m, #envelopes-list-m { padding: 0 1.5rem 1.5rem; }
    #accounts-list:has(.empty-state), #envelopes-list:has(.empty-state) { padding-top: 1rem; }
    #accounts-list-m:has(.empty-state), #envelopes-list-m:has(.empty-state) { padding-top: 1rem; }
    .txn-scroll-area { flex: 1; overflow-y: auto; min-height: 0; }
    #upcoming-sched { padding: 0 1.5rem; }
    #transactions-container { padding: 0 1.5rem 1.75rem; }
    #transactions-container-m { padding-bottom: 1.5rem; }
    .account-card, .envelope-card { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.4rem; display: flex; align-items: center; justify-content: space-between; animation: fadeUp 0.3s ease both; transition: box-shadow 0.15s; }
    .envelope-card { padding: 0.45rem 0.75rem; border-radius: var(--radius-sm); }
    .account-card { padding: 0.45rem 0.75rem; border-radius: var(--radius-sm); }
    .account-card:hover, .envelope-card:hover { box-shadow: var(--shadow); }
    .account-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
    .account-name { font-size: 0.95rem; font-weight: 500; color: var(--text-primary); }
    .account-right { display: flex; align-items: center; gap: 0.75rem; }
    /* Envelopes have a second "…/wk" line under their balance; accounts don't. Pad the
       account balance equally top & bottom by ~one such line's worth so the card matches
       envelope height while the balance stays vertically centred (not top-aligned). */
    .account-balance { font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em; padding: 0.45rem 0; }
    .account-balance.positive { color: var(--positive); }
    .account-balance.negative { color: var(--negative); }
    .env-balance-block { text-align: right; }
    .env-balance-current { font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em; }
    .env-balance-current.positive { color: var(--positive); }
    .env-balance-current.negative { color: var(--negative); }
    .env-balance-weekly { font-size: 0.75rem; color: var(--text-hint); margin-top: 1px; }
    .delete-btn { background: none; border: none; padding: 6px; border-radius: 7px; cursor: pointer; color: var(--text-hint); display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
    .delete-btn:hover { background: var(--danger-light); color: var(--danger); }
    .delete-btn svg { width: 16px; height: 16px; }
    .edit-btn { background: none; border: none; padding: 6px; border-radius: 7px; cursor: pointer; color: var(--text-hint); display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
    .edit-btn:hover { background: var(--env-light); color: var(--env-blue); }
    .edit-btn.acc:hover { background: var(--acc-light); color: var(--acc-gold); }
    .edit-btn svg { width: 16px; height: 16px; }

    /* Empty state */
    .empty-state { text-align: center; padding: 3rem 2rem; color: var(--text-secondary); }
    .empty-state-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--accent-light); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; }
    .empty-state-icon svg { width: 24px; height: 24px; }
    .empty-state h3 { font-family: 'DM Serif Display', serif; font-size: 1.2rem; font-weight: 400; color: var(--text-primary); margin-bottom: 0.4rem; }
    .empty-state p { font-size: 0.88rem; line-height: 1.6; }

    /* Transactions section */
    .txn-header { display: flex; align-items: center; justify-content: space-between; position: relative; }
    .txn-filter-col { position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
    .txn-filter-btns { display: flex; align-items: center; gap: 4px; }
    .txn-list { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); overflow: hidden; }
    .txn-row { display: flex; align-items: center; padding: 0.6rem 0.85rem; border-bottom: 0.5px solid var(--border); font-size: 0.88rem; gap: 0; }
    .txn-row:last-child { border-bottom: none; }
    .txn-col-date { width: 86px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
    .txn-col-pill { width: 28px; flex-shrink: 0; text-align: center; }
    .txn-col-middle { flex: 1; min-width: 0; overflow: hidden; }
    .txn-col-amount { width: 108px; flex-shrink: 0; text-align: right; overflow: hidden; }
    .txn-running-balance { font-size: 0.72rem; color: var(--text-hint); text-align: right; white-space: nowrap; }
    .txn-middle-top { overflow: visible; white-space: nowrap; color: var(--text-primary); }
    .txn-payee { font-weight: 500; }
    .txn-middle-bottom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); margin-top: 1px; }
    .txn-middle-sep { color: var(--text-hint); margin: 0 4px; }
.txn-envelope-pill { display: inline-block; background: var(--bg); color: var(--text-primary); font-size: 0.75rem; padding: 2px 8px; border-radius: 20px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
    .txn-envelope-pill + .txn-envelope-pill { margin-left: 4px; }
    .txn-col-middle .txn-envelope-pill { background: none; color: var(--text-primary); font-size: inherit; padding: 0; border-radius: 0; display: inline; max-width: none; overflow: visible; vertical-align: baseline; }
    .txn-acc-name { color: var(--text-primary); }
    .txn-xfer-arrow { font-size: 0.7rem; margin-left: 4px; padding: 1px 5px; border-radius: 20px; display: inline-block; vertical-align: middle; }
    .txn-xfer-arrow.out { color: var(--danger); background: var(--danger-light); }
    .txn-xfer-arrow.in { color: var(--positive); background: var(--accent-light); }
    .txn-amount { font-weight: 500; text-align: right; white-space: nowrap; }
    .txn-amount.positive { color: var(--positive); }
    .txn-amount.negative { color: var(--negative); }

    /* Modals */
    .modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; padding: 1.5rem; animation: fadeIn 0.2s ease both; }
    /* The confirm dialog is always logically topmost — it can be opened OVER another modal
       (e.g. the connected-account warning over the txn modal). All overlays share z-index:100,
       so without this the later-in-DOM modal would render on top and block its clicks. */
    .modal-overlay#confirm-delete-modal { z-index: 110; }
    .modal { background: var(--surface); border-radius: var(--radius); box-shadow: 0 8px 40px rgba(0,0,0,0.18); padding: 2rem; width: 100%; max-width: 480px; animation: scaleUp 0.2s ease both; max-height: 90vh; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; }
    .modal h2 { font-family: 'DM Serif Display', serif; font-size: 1.35rem; font-weight: 400; letter-spacing: -0.02em; margin-bottom: 0.35rem; }
    /* Sticky title/footer for the plain (non-flex) modals: as the body scrolls, the
       title stays pinned at top and the action buttons at bottom. The trick is that
       the plain modal carries NO top/bottom padding (only horizontal) — the sticky
       title and footer own that 2rem vertical padding themselves, so their opaque
       background reaches the very top/bottom edge and content can't show through a
       gap above the title or below the buttons. Scoped with :not(.modal-flex) because
       the 3 flex modals (household, gb-import, rules) pin header/footer via their own
       flex layout and keep the standard all-round padding. */
    .modal:not(.modal-flex) { padding: 0 2rem; }
    .modal:not(.modal-flex) > h2 { position: sticky; top: 0; z-index: 3; background: var(--surface); margin: 0 -2rem; padding: 2rem 2rem 0.5rem; }
    .modal-subtitle { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.5; }
    .form-group { margin-bottom: 1.1rem; }
    .form-row { display: flex; gap: 10px; }
    .form-row .form-group { flex: 1; }
    /* When the amount field is hidden (budget-sync mode), keep the date at half width
       instead of letting it grow to fill the row. */
    .form-row.amount-hidden .form-group { flex: 0 1 calc(50% - 5px); }
    label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.4rem; letter-spacing: 0.02em; }
    input[type="text"], input[type="number"], input[type="date"], select {
      width: 100%; padding: 0.65rem 0.85rem;
      border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm);
      font-family: 'DM Sans', sans-serif; font-size: 0.95rem; color: var(--text-primary);
      background: var(--surface); outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
      appearance: none; -webkit-appearance: none;
    }
    select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%236b6b65' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; }
    input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12); }
    #account-modal input:focus, #account-modal select:focus { border-color: var(--acc-gold); box-shadow: 0 0 0 3px rgba(var(--acc-gold-rgb),0.12); }
    #envelope-modal input:focus, #envelope-modal select:focus { border-color: var(--env-blue); box-shadow: 0 0 0 3px rgba(var(--env-blue-rgb),0.12); }
    #add-txn-modal input:focus, #add-txn-modal select:focus, #add-txn-modal textarea:focus { border-color: var(--txn-orange); box-shadow: 0 0 0 3px rgba(var(--txn-orange-rgb),0.12); outline: none; }
    #add-txn-modal .modal-subtitle { margin-bottom: 0.75rem; }
    #add-txn-modal .form-group { margin-bottom: 0.65rem; }
    #add-txn-modal input[type="text"], #add-txn-modal input[type="number"], #add-txn-modal input[type="date"], #add-txn-modal select { padding: 0.45rem 0.75rem; }
    #add-txn-modal .modal-actions { margin-top: 0.75rem; }
    /* Trim the txn modal's frame a touch so the common expense view fits without scrolling
       (the sticky title's top padding, the footer's bottom padding, and the mode-toggle gap). */
    #add-txn-modal .modal > h2 { padding-top: 1.25rem; }
    #add-txn-modal .modal-actions { padding-bottom: 1.25rem; }
    #add-txn-modal .envelope-mode-toggle { margin-bottom: 0.6rem; }
    #add-txn-modal .schedule-toggle-row { padding: 0.45rem 0.75rem; margin-bottom: 0.75rem; }
    /* Bracket the schedule block: its expanded fields indent under a subtle left rail so
       Frequency/Reminder read as children of "Schedule for later". */
    #add-txn-modal #schedule-fields { margin-left: 0.6rem; padding-left: 0.85rem; border-left: 2px solid var(--border); }
    #add-txn-modal #schedule-fields .schedule-toggle-row:last-child { margin-bottom: 0; }
    #add-txn-modal .mode-btn { padding: 0.4rem; }
    #add-txn-modal textarea { font-family: inherit; font-size: 0.88rem; padding: 0.45rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); width: 100%; resize: vertical; min-height: 3.5rem; box-sizing: border-box; color: var(--text-primary); background: var(--surface); }
    #household-modal input:focus, #household-modal select:focus,
    #admin-modal input:focus, #admin-modal select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(var(--purple-rgb),0.12); }
    #expense-fields #txn-account:focus { border-color: var(--acc-gold); box-shadow: 0 0 0 3px rgba(var(--acc-gold-rgb),0.12); }
    #expense-fields #txn-envelope:focus,
    #expense-fields #split-rows select:focus,
    #expense-fields #split-rows input:focus { border-color: var(--env-blue); box-shadow: 0 0 0 3px rgba(var(--env-blue-rgb),0.12); }
    #account-transfer-fields select:focus { border-color: var(--acc-gold); box-shadow: 0 0 0 3px rgba(var(--acc-gold-rgb),0.12); }
    #envelope-transfer-fields select:focus,
    #envelope-transfer-fields input:focus { border-color: var(--env-blue); box-shadow: 0 0 0 3px rgba(var(--env-blue-rgb),0.12); }
    input::placeholder { color: var(--text-hint); }
    .modal-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 1.5rem; }
    .modal:not(.modal-flex) .modal-actions { position: sticky; bottom: 0; z-index: 3; background: var(--surface); margin-left: -2rem; margin-right: -2rem; padding: 0.5rem 2rem 2rem; }
    .btn-cancel { background: none; border: 0.5px solid var(--border); border-radius: 9px; padding: 0.55rem 1.1rem; font-family: 'DM Sans', sans-serif; font-size: 0.88rem; color: var(--text-secondary); cursor: pointer; transition: background 0.15s; }
    .btn-cancel:hover { background: var(--bg); }
    .btn-primary { background: var(--accent); color: #fff; border: none; border-radius: 9px; padding: 0.55rem 1.25rem; font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 500; cursor: pointer; transition: opacity 0.15s; }
    .btn-primary:hover { opacity: 0.88; }
    .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-primary.env-primary { background: var(--env-blue); }
    .btn-primary.acc-primary { background: var(--acc-gold); }
    .btn-primary.txn-primary { background: var(--txn-orange); }
    .btn-primary.purple-primary { background: var(--purple); }
    .btn-danger { background: var(--danger); color: #fff; border: none; border-radius: 9px; padding: 0.55rem 1.25rem; font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 500; cursor: pointer; transition: opacity 0.15s; }
    .btn-danger:hover { opacity: 0.88; }
    .btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }
    .delete-warning { display: flex; gap: 12px; align-items: flex-start; background: var(--danger-light); border: 0.5px solid var(--danger-border); border-radius: 9px; padding: 0.85rem 1rem; margin-bottom: 1.25rem; }
    .delete-warning svg { width: 18px; height: 18px; color: var(--danger); flex-shrink: 0; margin-top: 1px; }
    .delete-warning p { font-size: 0.85rem; color: var(--danger); line-height: 1.5; }
    /* When the error sits INSIDE a sticky .modal-actions footer (account/envelope/txn/rule/
       akahu-connect modals), flex-basis:100% makes it claim its own full-width line above the
       buttons — so it's pinned with the footer and always visible, never lost when the body is
       scrolled up. Harmless on the standalone .form-error uses (ignored outside a flex parent). */
    .form-error { display: none; flex-basis: 100%; font-size: 0.8rem; color: var(--danger); margin-top: 0.5rem; }

    /* Envelope allocation (split) */
    .envelope-mode-toggle { display: flex; gap: 0; margin-bottom: 1.1rem; border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
    .mode-btn { flex: 1; padding: 0.55rem; background: none; border: none; font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s; }
    .load-more-btn { display: block; width: 100%; margin-top: 8px; padding: 0.6rem; background: none; border: 0.5px solid var(--border); border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; transition: background 0.15s; }
    .load-more-btn:hover { background: var(--bg); }
    .amount-row { display: flex; }
    .amount-row input { flex: 1; min-width: 0; }
    .mode-btn.active { background: var(--txn-orange); color: #fff; font-weight: 500; }
    .mode-btn.active.acc-mode { background: var(--acc-gold); }
    .mode-btn.active.env-mode { background: var(--env-blue); }
    .mode-btn.active.expense-mode { background: var(--negative); }
    .mode-btn.active.income-mode { background: var(--accent); }
    .split-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
    .split-row select { flex: 1; }
    .split-row input { width: 110px; flex-shrink: 0; }
    .split-remove { background: none; border: none; color: var(--text-hint); cursor: pointer; padding: 4px; border-radius: 6px; font-size: 1.1rem; line-height: 1; transition: color 0.15s, background 0.15s; flex-shrink: 0; }
    .split-remove:hover { color: var(--danger); background: var(--danger-light); }
    .add-split-btn { background: none; border: 0.5px dashed var(--border-strong); border-radius: var(--radius-sm); width: 100%; padding: 0.5rem; font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s; margin-top: 4px; }
    .add-split-btn:hover { background: var(--env-light); color: var(--env-blue); border-color: var(--env-blue); }
    .add-note-btn { background: none; border: 0; padding: 2px 0; font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; text-align: left; }
    .add-note-btn:hover { color: var(--txn-orange); text-decoration: underline; }
    /* Same disclosure-link pattern in the envelope modal (the budget-period override) — envelope blue. */
    #envelope-modal .add-note-btn:hover { color: var(--env-blue); }
    .split-total-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 0.5px solid var(--border); font-size: 0.85rem; }
    .split-total-label { color: var(--text-secondary); }
    .split-total-value { font-weight: 500; }
    .split-total-value.ok { color: var(--positive); }
    .split-total-value.bad { color: var(--danger); }
    .split-allocate-row { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-size: 0.85rem; }

    /* Upcoming scheduled section */
    #upcoming-sched-m { padding-bottom: 8px; }
    .upcoming-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0 0.4rem; }
    #upcoming-sched-m .upcoming-header { padding-left: 1.5rem; padding-right: 1.5rem; }
    .upcoming-label { font-size: 0.72rem; font-weight: 500; color: var(--text-hint); text-transform: uppercase; letter-spacing: 0.06em; }
    .upcoming-toggle { font-size: 0.78rem; color: var(--purple); background: none; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; padding: 0; }
    .upcoming-toggle:hover { text-decoration: underline; }
    .stale-sched-warning { background: rgba(163,45,45,0.1); border: none; color: var(--danger); font-size: 0.7rem; font-weight: 600; cursor: pointer; padding: 2px 8px; border-radius: var(--radius-sm); letter-spacing: 0.02em; white-space: nowrap; font-family: 'DM Sans', sans-serif; }
    .stale-sched-warning:hover { background: rgba(163,45,45,0.18); }
    .stale-sched-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0; border-bottom: 1px solid var(--border); }
    .stale-sched-item:last-child { border-bottom: none; }
    .stale-sched-item-info { flex: 1; min-width: 0; }
    .stale-sched-item-payee { font-size: 0.9rem; font-weight: 500; color: var(--text-primary); }
    .stale-sched-item-meta { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }
    .stale-sched-item-amount { font-size: 0.9rem; font-weight: 500; white-space: nowrap; }
    .stale-sched-item-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
    .stale-sched-item .btn-cancel, .stale-sched-item .btn-primary { padding: 0.3rem 0.65rem; font-size: 0.78rem; }
    .txn-row.sched-row { opacity: 0.5; }
    /* User-facing "not yet cleared by the bank" signal — orange tag in the date column. */
    .txn-pending-tag { color: var(--txn-orange); font-size: 0.72rem; font-weight: 500; opacity: 0.6; }
    /* Manually-entered (not Akahu-imported) txn on a bank-connected account — same style as pending. */
    .txn-manual-tag { color: var(--txn-orange); font-size: 0.72rem; font-weight: 500; opacity: 0.6; }
    /* Reminder-only scheduled rows — orange pill so it stands out */
    .reminder-tag { display: inline-block; vertical-align: middle; font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--txn-orange); background: var(--txn-light); border: 1px solid var(--txn-orange); border-radius: 20px; padding: 0 6px; margin-right: 5px; white-space: nowrap; }
    .fill-tag { display: inline-block; vertical-align: middle; font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--env-blue); background: var(--env-light); border: 1px solid var(--env-blue); border-radius: 20px; padding: 0 6px; margin-right: 5px; white-space: nowrap; }
    /* Auto-categorised-by-rule marker — transient (shown the rest of the import day). Green ties it to the green apply-rule tick. */
    .txn-auto-tag { display: inline-block; vertical-align: middle; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent); background: var(--accent-light); border: 1px solid var(--accent); border-radius: 20px; padding: 0 6px; margin-left: 4px; white-space: nowrap; }
    /* Dismiss ✕ on a due-today reminder row — trailing flex item after the amount */
    .sched-dismiss { flex-shrink: 0; width: 26px; height: 26px; margin-left: 6px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; border: none; border-radius: 50%; color: var(--text-hint); font-size: 0.9rem; line-height: 1; cursor: pointer; }
    .sched-dismiss:hover { color: var(--danger); background: var(--danger-light); }
    .sched-dismiss:disabled { opacity: 0.4; cursor: default; }
    /* Offline / sync status banner (see CLAUDE.md "Offline handling") */
    .conn-banner { flex-shrink: 0; padding: 7px 12px; text-align: center; font-size: 0.8rem; font-weight: 600; color: #fff; }
    .conn-banner.offline { background: var(--negative); }
    .conn-banner.pending { background: var(--txn-orange); }
    /* Scheduled-backup "due" nudge (see CLAUDE.md "Scheduled backup to Google Drive") */
    .backup-banner { flex-shrink: 0; padding: 7px 12px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 0.8rem; font-weight: 600; color: #fff; background: var(--purple); }
    .backup-banner.backup-banner-failed { background: var(--danger); }
    .backup-banner button { font: inherit; font-weight: 600; cursor: pointer; border-radius: var(--radius-sm); padding: 3px 12px; border: 1px solid rgba(255,255,255,0.6); background: rgba(255,255,255,0.15); color: #fff; }
    .backup-banner button:hover { background: rgba(255,255,255,0.28); }
    .backup-banner #backup-banner-dismiss { border: none; background: none; padding: 3px 6px; font-size: 0.95rem; line-height: 1; opacity: 0.85; }
    /* New-household-request banner (admin only) — full-width on every width, like #conn-banner/#backup-banner.
       .hidden (display:none !important) hides it when there are no fresh requests. */
    .req-banner { flex-shrink: 0; padding: 7px 12px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 0.8rem; font-weight: 600; color: #fff; background: var(--danger); }
    .req-banner button { font: inherit; font-weight: 600; cursor: pointer; border-radius: var(--radius-sm); padding: 3px 12px; border: 1px solid rgba(255,255,255,0.6); background: rgba(255,255,255,0.15); color: #fff; }
    .req-banner button:hover { background: rgba(255,255,255,0.28); }
    .req-banner #req-banner-dismiss { border: none; background: none; padding: 3px 6px; font-size: 0.95rem; line-height: 1; opacity: 0.85; }
    /* Offline affordance — dim the "create new" + fetch entry points (saving is blocked anyway;
       reads/edits still open so cached data stays viewable). */
    body.offline .add-btn, body.offline .fetch-txns-btn, body.offline .check-balances-btn,
    body.offline .rpt-mode, body.offline .rpt-type-btn { opacity: 0.4; pointer-events: none; }
    .txn-no-envelope { display: inline-block; vertical-align: middle; font-size: 0.72rem; font-weight: 600; color: var(--danger); background: var(--danger-light,#fdeaea); border: 1px solid var(--danger); border-radius: 20px; padding: 1px 7px; white-space: nowrap; }
    .gb-placeholder-badge { font-size: 0.72rem; font-weight: 600; color: var(--purple); background: var(--purple-light); border: 1px dashed var(--purple); border-radius: 20px; padding: 1px 7px; white-space: nowrap; }
    .gb-review-item { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.25rem; border-bottom: 0.5px solid var(--border); font-size: 0.8rem; }
    .gb-review-item:last-child { border-bottom: none; }
    .gb-review-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gb-review-amt { font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; min-width: 5.5rem; text-align: right; font-size: 0.78rem; color: var(--text-secondary); }
    .gb-review-amt.positive { color: var(--positive); }
    .gb-review-amt.negative { color: var(--negative); }
    .gb-sched-label .positive { color: var(--positive); }
    .gb-sched-label .negative { color: var(--negative); }
    .gb-review-bud { color: var(--text-hint); }
    .gb-review-total { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.5rem; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); border: 0.5px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-bottom: 0.9rem; }
    .gb-review-total-top { border-top: 0.5px solid var(--border); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; margin-bottom: 0; }
    .gb-toggle-btn { font-size: 0.7rem; font-weight: 600; padding: 1px 8px; border-radius: 20px; border: 1px solid; cursor: pointer; background: none; flex-shrink: 0; margin-left: 0.5rem; min-width: 5.5rem; text-align: center; }
    .gb-toggle-btn.active { color: var(--positive); border-color: var(--positive); }
    .gb-toggle-btn.deleted { color: var(--text-hint); border-color: var(--border-strong); }
    .gb-toggle-btn.credit { color: var(--txn-orange); border-color: var(--txn-orange); }
    /* Mobile: stack the GB review rows — name on its own full-width line, then the
       amount column(s) + toggle on a second line. On phone widths the single-line
       layout can't fit name + 2 amount columns + toggle (envelopes), so the name
       collapsed to nothing and the toggle was clipped. */
    @media (max-width: 767px) {
      .gb-review-item, .gb-review-total { flex-wrap: wrap; row-gap: 0.15rem; }
      .gb-review-name { flex: 1 0 100%; white-space: normal; overflow: visible; }
      .gb-review-item > .gb-toggle-btn { margin-left: auto; }
    }
    /* Compact date input for the envelope-fill section (beats the global input[type=date] rule via attribute+class specificity) */
    input[type="date"].gb-fill-date { width: auto; min-width: 0; height: 28px; padding: 2px 7px; font-size: 0.8rem; box-sizing: border-box; }
    input[type="date"].gb-fill-date::-webkit-calendar-picker-indicator { width: 14px; height: 14px; padding: 0; cursor: pointer; }
    .gb-sched-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.25rem; border-bottom: 0.5px solid var(--border); font-size: 0.8rem; }
    .gb-sched-item:last-child { border-bottom: none; }
    .gb-sched-label { flex: 1; line-height: 1.5; }
    .gb-preview-section { border: 0.5px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; font-size: 0.78rem; margin-bottom: 0.75rem; }
    .gb-preview-row { display: flex; gap: 0.5rem; padding: 0.22rem 0.5rem; border-bottom: 0.5px solid var(--border); align-items: baseline; }
    .gb-preview-row:last-child { border-bottom: none; }
    .gb-preview-dim { opacity: 0.38; }
    .gb-preview-date { color: var(--text-hint); white-space: nowrap; flex-shrink: 0; min-width: 5.5rem; }
    .gb-preview-payee { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gb-preview-amt { white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
    .gb-preview-cutoff { text-align: center; font-size: 0.73rem; font-weight: 600; color: var(--text-hint); padding: 0.25rem 0.5rem; background: var(--bg); border-top: 0.5px solid var(--border); border-bottom: 0.5px solid var(--border); }
    .gb-preview-more { padding: 0.18rem 0.5rem; color: var(--text-hint); font-size: 0.73rem; font-style: italic; border-bottom: 0.5px solid var(--border); }
    body:not(.edits-disabled) .txn-row.sched-row { cursor: pointer; }
    body:not(.edits-disabled) .txn-row.sched-row:hover { opacity: 0.75; background: #f5f2ec; }
    .sched-freq { font-size: 0.68rem; color: var(--txn-orange); margin-top: 1px; white-space: nowrap; overflow: hidden; }
    /* Schedule toggle in modal */
    .schedule-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 0.85rem; background: var(--bg); border-radius: var(--radius-sm); margin-bottom: 1.1rem; border: 0.5px solid var(--border); cursor: pointer; user-select: none; }
    .schedule-toggle-label { font-size: 0.88rem; color: var(--text-secondary); }
    .toggle-switch { width: 36px; height: 20px; background: var(--border-strong); border-radius: 10px; position: relative; transition: background 0.2s; flex-shrink: 0; }
    .toggle-switch.on { background: var(--txn-orange); }
    .toggle-switch.on.purple { background: var(--purple); }
    .toggle-switch::after { content: ''; position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: transform 0.2s; }
    .toggle-switch.on::after { transform: translateX(16px); }
    /* Edits disabled mode */
    body.edits-disabled .edit-btn,
    body.edits-disabled .delete-btn { display: none !important; }
    body.edits-disabled .grip-handle { display: none !important; }
    body.edits-disabled #open-add-envelope-modal,
    body.edits-disabled #open-add-envelope-modal-m,
    body.edits-disabled #open-add-modal,
    body.edits-disabled #open-add-modal-m { visibility: hidden; pointer-events: none; }
    body.edits-disabled .deleted-section { display: none; }
    .txn-row { cursor: pointer; }
    body:not(.edits-disabled) .txn-row:hover { background: #f5f2ec; }

    /* Drag and drop */
    .grip-handle { display: flex; align-items: center; padding: 0 4px 0 0; color: var(--text-hint); cursor: grab; touch-action: none; flex-shrink: 0; }
    .grip-handle:active { cursor: grabbing; }
    .grip-handle svg { width: 14px; height: 14px; }
    .account-card.drag-over { border-color: var(--acc-gold); background: var(--acc-light); }
    .account-card.dragging { opacity: 0.4; }
    .envelope-card.drag-over { border-color: var(--env-blue); background: var(--env-light); }
    .envelope-card.dragging { opacity: 0.4; }
    .account-card.filter-active { border-color: var(--acc-gold); background: var(--acc-light); }
    .envelope-card.filter-active { border-color: var(--env-blue); background: var(--env-light); }
    .account-card, .envelope-card { cursor: pointer; }
    .txn-filter-indicator { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-secondary); overflow: hidden; min-width: 0; min-height: 18px; }
    .txn-filter-label { font-weight: 500; color: var(--acc-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .txn-filter-label.env { color: var(--env-blue); }
    .txn-filter-label.date { color: var(--txn-orange); }
    .txn-filter-label.kw { color: var(--purple); }
    .txn-filter-label.amt { color: var(--rpt-teal); }
    .txn-filter-label.type { color: var(--text-secondary); }
    .txn-filter-label.uncat { color: var(--danger); }
    .txn-filter-clear { background: none; border: none; cursor: pointer; color: var(--text-hint); font-size: 1.1rem; padding: 0; line-height: 1; flex-shrink: 0; }
    /* Filter funnel button (top-right of the txn header, desktop + mobile).
       Date pickers and all other filter controls live in #txn-filter-modal. */
    .filter-funnel-btn { background: none; border: none; cursor: pointer; padding: 2px; color: var(--text-secondary); display: flex; align-items: center; position: relative; border-radius: 6px; }
    .filter-funnel-btn:hover { color: var(--txn-orange); background: var(--txn-light); }
    .filter-funnel-dot { position: absolute; top: 0; right: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--txn-orange); border: 1.5px solid var(--surface); }
    .txn-filter-clear:hover { color: var(--danger); }
    .txn-filter-label.checked { color: var(--accent); }
    /* ── Reconcile mode (tick off transactions) ───────────────────────────── */
    .reconcile-btn { background: none; border: none; cursor: pointer; padding: 2px; color: var(--text-secondary); display: flex; align-items: center; border-radius: 6px; }
    .reconcile-btn:hover { color: var(--accent); background: var(--accent-light); }
    .reconcile-btn[aria-pressed="true"] { color: #fff; background: var(--accent); }
    /* Per-row check control — always in the DOM; revealed only in reconcile mode (pure CSS). */
    .txn-date-tags { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
    .txn-date-tags:empty { margin-top: 0; }
    .txn-col-check { display: none; }
    body.reconcile-mode .txn-col-check { display: block; }
    .txn-check { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: none; cursor: pointer; flex-shrink: 0; padding: 0; position: relative; }
    .txn-check::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1; color: transparent; }
    .txn-check:hover { border-color: var(--accent); }
    .txn-check.checked { background: var(--accent); border-color: var(--accent); }
    .txn-check.checked::after { color: #fff; }
    .txn-check:disabled { opacity: 0.5; cursor: default; }
    /* Static reconciled marker in the date column — shown everywhere EXCEPT reconcile mode
       (there the interactive control is the indicator). */
    .txn-checked-tag { color: var(--accent); font-size: 0.78rem; font-weight: 700; line-height: 1; }
    body.reconcile-mode .txn-checked-tag { display: none; }
    /* Summary bar — only in reconcile mode; sticky at the top of the txn scroll area. */
    .reconcile-summary { display: none; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--accent-light); border-bottom: 0.5px solid var(--border); font-size: 0.82rem; color: var(--text-secondary); position: sticky; top: 0; z-index: 2; }
    body.reconcile-mode .reconcile-summary { display: flex; }
    .reconcile-summary-info { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
    .reconcile-summary-count { font-weight: 500; color: var(--text-primary); }
    .reconcile-summary-totals { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .reconcile-total { color: var(--text-secondary); white-space: nowrap; }
    .reconcile-total b { font-weight: 700; margin-left: 3px; }
    .reconcile-total b.positive { color: var(--positive); }
    .reconcile-total b.negative { color: var(--negative); }
    .reconcile-summary-totals.partial { color: var(--text-hint); font-style: italic; }
    .reconcile-summary-filter { background: none; border: 1px solid var(--accent); color: var(--accent); border-radius: 20px; padding: 2px 10px; font-size: 0.78rem; cursor: pointer; font-family: inherit; white-space: nowrap; }
    .reconcile-summary-filter.active { background: var(--accent); color: #fff; }
    /* Filter modal — group headers, type pills, checkbox row */
    .filter-group-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-hint); margin: 1.1rem 0 0.5rem; }
    .filter-group-label:first-of-type { margin-top: 0.25rem; }
    .type-filter-row { display: flex; gap: 8px; }
    .type-pill { flex: 1; padding: 0.5rem; background: none; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
    .type-pill.active.expense { background: var(--negative); border-color: var(--negative); color: #fff; }
    .type-pill.active.income { background: var(--accent); border-color: var(--accent); color: #fff; }
    .type-pill.active.transfer { background: var(--txn-orange); border-color: var(--txn-orange); color: #fff; }
    .amount-mode-row { display: flex; gap: 8px; margin-bottom: 8px; }
    .amount-mode-btn { flex: 1; padding: 0.5rem; background: none; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
    .amount-mode-btn.active { background: var(--rpt-teal); border-color: var(--rpt-teal); color: #fff; }
    .filter-checkbox { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-primary); cursor: pointer; }
    .filter-checkbox input { width: auto; margin: 0; }
    [data-group-header].group-drag-over { color: var(--env-blue) !important; }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes scaleUp { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
    @keyframes spin { to { transform: rotate(360deg); } }