*,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      :root {
        --grass: #cfaa7d;
        --thicket: #b9af5f;
        --blossom: #8f944c;
        --berry: #cc7c72;
        --sky: #8096ad;
        --accent: #8096ad;
        --accent-light: #edf1f6;
        --accent-text: #3a4f63;
        --bg: #f5f3ef;
        --surface: #ffffff;
        --surface2: #f0ede7;
        --surface3: #e7e3db;
        --border: #ddd8cf;
        --border2: #c9c4ba;
        --text: #1e1c18;
        --text2: #6a665e;
        --text3: #9e9a93;
        --green: #1f5c3a;
        --red: #8a2318;
        --blue: #8096ad;
        --amber: #cfaa7d;
        --pink: #cc7c72;
        --teal: #b9af5f;
        --sidebar: 220px;
        --font-mono: 'DM Sans', sans-serif;
        --font-mono-features: 'zero' 1;
      }
      body {
        font-family: 'DM Sans', sans-serif;
        background: var(--bg);
        color: var(--text);
        font-size: 14px;
        line-height: 1.5;
        display: flex;
        min-height: 100vh;
      }

      /* SIDEBAR */
      #sidebar {
        width: var(--sidebar);
        background: var(--surface);
        border-right: 1px solid var(--border);
        transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        overflow: hidden;
        z-index: 200;
      }
      .sidebar-nav-scroll {
        flex: 1;
        overflow-y: auto;
      }
      .sidebar-logo {
        padding: 0 16px;
        height: 60px;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        font-family: 'DM Mono', monospace;
        font-size: 14px;
        font-weight: 500;
        color: var(--accent);
        letter-spacing: -0.02em;
        border-bottom: 1px solid var(--border);
      }
      .sidebar-logo span {
        color: var(--text3);
        font-weight: 300;
      }
      .sidebar-section {
        padding: 10px 10px 4px;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text3);
        font-family: 'DM Mono', monospace;
      }
      .nav-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 12px;
        cursor: pointer;
        border-radius: 6px;
        margin: 1px 6px;
        font-size: 13px;
        color: var(--text2);
        transition:
          background 0.12s,
          color 0.12s;
        position: relative;
      }
      .nav-item:hover {
        background: var(--surface2);
        color: var(--text);
      }
      .nav-item.active {
        background: var(--accent-light);
        color: var(--accent-text);
        font-weight: 500;
      }
      .nav-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .sidebar-bottom {
        flex-shrink: 0;
        padding: 12px;
        border-top: 1px solid var(--border);
      }

      /* SIDEBAR COLLAPSE BUTTON (desktop only) */
      #sidebar-collapse-btn {
        position: fixed;
        top: 50%;
        left: calc(var(--sidebar) - 1px);
        transform: translateY(-50%);
        width: 16px;
        height: 36px;
        border-radius: 0 6px 6px 0;
        background: var(--surface);
        border: 1px solid var(--border);
        border-left: none;
        cursor: pointer;
        z-index: 201;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        color: var(--text3);
        padding: 0;
        transition: left 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.12s, background 0.12s;
      }
      #sidebar-collapse-btn:hover {
        color: var(--text);
        background: var(--surface2);
      }
      body.sidebar-collapsed #sidebar {
        transform: translateX(calc(-1 * var(--sidebar)));
      }
      body.sidebar-collapsed #sidebar-collapse-btn {
        left: 0;
        border-left: 1px solid var(--border);
        border-radius: 0 6px 6px 0;
      }

      /* MAIN */
      #main {
        margin-left: var(--sidebar);
        flex: 1;
        min-height: 100vh;
        transition: margin-left 0.22s cubic-bezier(0.4, 0, 0.2, 1);
      }
      body.sidebar-collapsed #main {
        margin-left: 0;
      }
      .topbar {
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        padding: 0 24px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 100;
      }
      .topbar-title {
        font-size: 16px;
        font-weight: 500;
        color: var(--text);
      }
      .topbar-actions {
        display: flex;
        gap: 8px;
        align-items: center;
      }
      .page {
        display: none;
        padding: 24px 24px 80px;
      }
      .page.active {
        display: block;
      }

      /* DENSITY SCALING — scales text & spacing, leaves layout widths intact */
      body.density-comfortable,
      body.density-large {
        --ds-nav:     15px;
        --ds-base:    14px;
        --ds-sm:      12px;
        --ds-xs:      11px;
        --ds-metric:  22px;
        --ds-topbar:  18px;
        --ds-logo:    16px;
      }
      body.density-large {
        --ds-nav:     18px;
        --ds-base:    16px;
        --ds-sm:      14px;
        --ds-xs:      13px;
        --ds-metric:  26px;
        --ds-topbar:  21px;
        --ds-logo:    18px;
      }
      body.density-comfortable .nav-item,
      body.density-large       .nav-item       { font-size: var(--ds-nav); }
      body.density-comfortable .sidebar-section,
      body.density-large       .sidebar-section { font-size: var(--ds-xs); }
      body.density-comfortable .sidebar-logo,
      body.density-large       .sidebar-logo   { font-size: var(--ds-logo); }
      body.density-comfortable .topbar-title,
      body.density-large       .topbar-title   { font-size: var(--ds-topbar); }
      body.density-comfortable .card-title,
      body.density-large       .card-title     { font-size: var(--ds-base); }
      body.density-comfortable .metric-value,
      body.density-large       .metric-value   { font-size: var(--ds-metric); }
      body.density-comfortable .metric-label,
      body.density-comfortable .metric-sub,
      body.density-large       .metric-label,
      body.density-large       .metric-sub     { font-size: var(--ds-sm); }
      body.density-comfortable .overview-metric-value,
      body.density-large       .overview-metric-value { font-size: var(--ds-metric); }
      body.density-comfortable .overview-metric-label,
      body.density-large       .overview-metric-label { font-size: var(--ds-sm); }
      body.density-comfortable .btn,
      body.density-large       .btn            { font-size: var(--ds-base); }
      body.density-comfortable .field label,
      body.density-large       .field label    { font-size: var(--ds-base); }
      body.density-comfortable .field input,
      body.density-comfortable .field select,
      body.density-large       .field input,
      body.density-large       .field select   { font-size: var(--ds-base); }
      body.density-comfortable .pva-table td,
      body.density-large       .pva-table td   { font-size: var(--ds-sm); }
      body.density-comfortable .pva-table td:first-child,
      body.density-large       .pva-table td:first-child { font-size: var(--ds-base); }
      body.density-comfortable .year-table td,
      body.density-comfortable .year-table th,
      body.density-large       .year-table td,
      body.density-large       .year-table th  { font-size: var(--ds-sm); }
      body.density-comfortable .bva-label,
      body.density-large       .bva-label      { font-size: var(--ds-sm); }
      body.density-comfortable .bva-amounts,
      body.density-large       .bva-amounts    { font-size: var(--ds-sm); }
      body.density-comfortable .tab-btn,
      body.density-large       .tab-btn        { font-size: var(--ds-sm); }

      /* BUTTONS */
      .btn {
        font-family: 'DM Sans', sans-serif;
        font-size: 13px;
        font-weight: 500;
        padding: 7px 14px;
        border-radius: 6px;
        border: 1px solid var(--border2);
        background: var(--surface);
        color: var(--text);
        cursor: pointer;
        transition:
          background 0.12s,
          transform 0.1s;
      }
      .btn:hover {
        background: var(--surface2);
      }
      .btn:active {
        transform: scale(0.97);
      }
      .btn.primary {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
      }
      .btn.primary:hover {
        opacity: 0.88;
      }
      .btn.danger {
        background: #fdf0ed;
        border-color: #f0c4b4;
        color: #8b3010;
      }
      .btn.danger:hover {
        background: #f9e0d9;
      }
      .btn.sm {
        font-size: 12px;
        padding: 4px 10px;
      }
      .btn.active {
        background: var(--accent-light);
        border-color: var(--accent);
        color: var(--accent-text);
        font-weight: 500;
      }

      /* FORMS */
      input,
      select,
      textarea {
        font-family: 'DM Sans', sans-serif;
        font-size: 13px;
        padding: 7px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface);
        color: var(--text);
        outline: none;
        transition: border-color 0.15s;
        width: 100%;
      }
      input:focus,
      select:focus,
      textarea:focus {
        border-color: var(--accent);
      }
      label {
        font-size: 12px;
        font-weight: 500;
        color: var(--text2);
        margin-bottom: 3px;
        display: block;
      }
      /* Module toggle labels override the global block label */
      .settings-toggle {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px;
        width: max-content;
        max-width: 100%;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 400;
        color: var(--text);
        cursor: pointer;
        margin-bottom: 0;
      }
      /* Details/summary arrow rotation */
      details[open] .details-arrow { display: inline-block; transform: rotate(90deg); }
      .details-arrow { display: inline-block; transition: transform 0.15s; }
      /* Blur/reveal for sensitive 2FA content */
      .reveal-wrap {
        position: relative;
        cursor: pointer;
        margin-bottom: 4px;
      }
      .reveal-wrap > *:not(.reveal-hint) {
        filter: blur(6px);
        transition: filter 0.2s;
        user-select: none;
      }
      .reveal-wrap.revealed > *:not(.reveal-hint) {
        filter: none;
        user-select: text;
      }
      .reveal-hint {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        color: var(--text2);
        pointer-events: none;
        transition: opacity 0.2s;
      }
      .reveal-wrap.revealed .reveal-hint { opacity: 0; pointer-events: none; }
      /* Backup code items */
      .backup-code-item {
        font-size: 12px;
        font-family: var(--font-mono);
        background: var(--surface2);
        padding: 4px 8px;
        border-radius: 4px;
        display: block;
      }
      .field {
        display: flex;
        flex-direction: column;
        gap: 3px;
        margin-bottom: 12px;
      }
      .form-row {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      }

      /* CARDS */
      .card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 16px 18px;
        margin-bottom: 14px;
      }
      .card-title {
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--text3);
        font-family: 'DM Mono', monospace;
        margin-bottom: 12px;
      }

      /* SETTINGS ACCORDION SECTIONS */
      .settings-section {
        border-top: 1px solid var(--border);
        margin: 0;
      }
      .settings-section > summary {
        padding: 11px 2px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        color: var(--text1);
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        user-select: none;
      }
      .settings-section > summary::-webkit-details-marker { display: none; }
      .settings-section > summary::after {
        content: '›';
        font-size: 16px;
        color: var(--text3);
        transition: transform 0.15s;
        display: inline-block;
      }
      .settings-section[open] > summary::after {
        transform: rotate(90deg);
      }
      .settings-section > summary:hover { color: var(--accent); }
      .settings-section-body {
        padding: 0 0 14px;
      }

      /* TAG CHIPS (settings categories/payment methods) */
      .tag-input-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px;
        border: 1px solid var(--border);
        border-radius: 8px;
        min-height: 44px;
        align-items: center;
        background: var(--bg);
        cursor: text;
        transition: border-color 0.15s;
      }
      .tag-input-wrap:focus-within { border-color: var(--accent); }
      .tag-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 3px 6px 3px 10px;
        font-size: 13px;
        color: var(--text1);
        user-select: none;
      }
      .tag-chip-remove {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text3);
        font-size: 14px;
        padding: 0 2px;
        line-height: 1;
        display: flex;
        align-items: center;
        border-radius: 50%;
      }
      .tag-chip-remove:hover { color: var(--red); }
      .tag-chip-color {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 1.5px solid transparent;
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
        margin-right: 2px;
      }
      .tag-chip-color:hover { opacity: 0.75; }
      .cat-color-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1100;
      }
      .cat-color-backdrop.open { display: block; }
      .cat-color-popover {
        display: none;
        position: fixed;
        z-index: 1101;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 8px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        display: none;
        grid-template-columns: repeat(6, 24px);
        gap: 5px;
      }
      .cat-color-popover.open { display: grid; }
      .cat-color-swatch {
        width: 24px;
        height: 24px;
        border-radius: 6px;
        border: 2px solid transparent;
        cursor: pointer;
        padding: 0;
      }
      .cat-color-swatch:hover, .cat-color-swatch.active { border-color: var(--accent); }
      .tag-add-input {
        border: none;
        outline: none;
        background: transparent;
        font-size: 13px;
        color: var(--text1);
        min-width: 100px;
        flex: 1;
        padding: 3px 4px;
      }
      .tag-add-input::placeholder { color: var(--text3); }

      /* METRICS */
      .metrics {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 10px;
        margin-bottom: 16px;
      }
      .metric {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 13px 15px;
      }
      .metric-label {
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--text3);
        font-family: 'DM Mono', monospace;
        margin-bottom: 5px;
      }
      .metric-value {
        font-size: 18px;
        font-weight: 600;
        font-family: var(--font-mono);
        letter-spacing: -0.02em;
        font-feature-settings: var(--font-mono-features, 'normal');
      }
      .metric-sub {
        font-size: 11px;
        color: var(--text3);
        margin-top: 2px;
      }
      .metric-value.pos {
        color: var(--green);
      }
      .metric-value.neg {
        color: var(--red);
      }

      /* TABLE */
      .table-wrap {
        overflow-x: auto;
        border-radius: 8px;
        border: 1px solid var(--border);
      }
      table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
      }
      th {
        background: var(--surface2);
        padding: 8px 12px;
        text-align: left;
        font-weight: 500;
        font-size: 11px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--text3);
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
      }
      td {
        padding: 8px 12px;
        border-bottom: 1px solid var(--border);
        color: var(--text);
        vertical-align: middle;
      }
      tr:last-child td {
        border-bottom: none;
      }
      tr:hover td {
        background: var(--surface2);
      }
      .flag-row td {
        background: color-mix(in srgb, var(--surface) 85%, var(--red) 15%) !important;
      }
      .uncat-row td {
        background: color-mix(in srgb, var(--surface) 80%, #d4a200 20%) !important;
      }
      .selected-row td {
        background: color-mix(in srgb, var(--surface) 82%, var(--accent) 18%) !important;
      }
      .rec-table th, .rec-table td { padding: 8px 10px; }
      /* ── Inline add row ───────────────────────────────── */
      .inline-add-row td {
        padding: 5px 4px;
        vertical-align: middle;
        background: var(--surface2);
      }
      .inline-add-row input[type='text'],
      .inline-add-row input[type='number'],
      .inline-add-row input[type='date'],
      .inline-add-row select {
        width: 100%;
        font-size: 12px;
        padding: 4px 6px;
        border: 1px solid var(--border);
        border-radius: 5px;
        background: var(--surface);
        color: var(--text);
        font-family: var(--font-ui);
      }
      .inline-add-row input[type='number'] {
        width: 90px;
        font-family: var(--font-mono);
      }
      .inline-add-row input[type='text']#iat-date-0,
      .inline-add-row input[type='text'][id^='iat-date-'] {
        width: 62px;
      }
      .inline-add-row input:focus,
      .inline-add-row select:focus {
        outline: none;
        border-color: var(--accent);
      }

      .amount-cell {
        font-family: var(--font-mono);
        font-size: 13px;
        text-align: right;
        white-space: nowrap;
        font-feature-settings: var(--font-mono-features, 'normal');
      }
      .badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 500;
      }

      /* SORTABLE TABLE HEADERS */
      .th-sortable {
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
      }
      .sort-icon       { color: var(--text3); font-size: 11px; }
      .sort-icon.active { color: var(--accent); }

      /* ASSET TABLE INPUTS */
      .asset-input     { font-size: 12px; padding: 3px 6px; }
      .asset-input-num { font-size: 12px; font-family: var(--font-mono); padding: 3px 6px; text-align: right; }

      /* CARD HEADER ROW (title + action button) */
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }

      /* BULK EDIT BAR */
      #tx-bulk-bar {
        position: fixed;
        bottom: -80px;
        left: 50%;
        transform: translateX(-50%);
        transition: bottom 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        background: var(--surface);
        border: 1px solid var(--border2);
        border-radius: 12px;
        box-shadow: 0 4px 24px rgba(0,0,0,0.13);
        padding: 10px 14px;
        display: flex;
        align-items: center;
        gap: 10px;
        z-index: 500;
        white-space: nowrap;
        font-size: 13px;
      }
      #tx-bulk-bar.open { bottom: 24px; }
      .bulk-bar-count {
        font-weight: 500;
        color: var(--text);
        padding-right: 6px;
        border-right: 1px solid var(--border);
      }
      .bulk-bar-fields {
        display: flex;
        gap: 8px;
        align-items: center;
      }
      .bulk-bar-field {
        display: flex;
        flex-direction: column;
        gap: 2px;
        cursor: pointer;
      }
      .bulk-bar-label {
        font-size: 10px;
        color: var(--text3);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding-left: 2px;
      }
      .bulk-bar-fields select {
        font-size: 12px;
        padding: 4px 8px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface);
        color: var(--text);
        cursor: pointer;
      }
      .bulk-bar-actions {
        display: flex;
        gap: 6px;
        padding-left: 6px;
        border-left: 1px solid var(--border);
      }

      /* FLOATING ADD BUTTON */
      #globalAddPicker {
        position: fixed;
        bottom: 86px;
        right: 28px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        z-index: 299;
        overflow: hidden;
        display: none;
        flex-direction: column;
        min-width: 200px;
      }
      #globalAddPicker.open {
        display: flex;
      }
      #globalAddPicker button {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 13px 16px;
        font-size: 13px;
        font-weight: 500;
        font-family: var(--font-ui);
        background: none;
        border: none;
        color: var(--text);
        cursor: pointer;
        text-align: left;
        transition: background 0.1s;
      }
      #globalAddPicker button span {
        font-size: 16px;
        color: var(--accent);
        width: 20px;
        text-align: center;
      }
      #globalAddPicker button:hover {
        background: var(--surface2);
      }
      #globalAddPicker button + button {
        border-top: 1px solid var(--border);
      }
      #globalAddBtn {
        position: fixed;
        bottom: 28px;
        right: 28px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--sky);
        border: none;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        z-index: 300;
        box-shadow: 0 3px 12px rgba(128, 150, 173, 0.45);
        display: none; /* DISABLED — re-enable if global add proves useful, see NOTES.md */
        align-items: center;
        justify-content: center;
        transition:
          transform 0.15s,
          opacity 0.15s;
        line-height: 1;
      }
      #globalAddBtn:hover {
        transform: scale(1.08);
        opacity: 0.92;
      }
      #globalAddBtn:active {
        transform: scale(0.95);
      }

      /* MODAL */
      .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 1000;
        display: none;
        align-items: center;
        justify-content: center;
      }
      .modal-overlay.open {
        display: flex;
      }
      .modal {
        position: relative;
        background: var(--surface);
        border-radius: 12px;
        padding: 22px 24px;
        width: 100%;
        max-width: 480px;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
      }
      .modal-title {
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 16px;
        color: var(--text);
      }
      .modal-actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        margin-top: 16px;
      }

      /* CLICKABLE TX ITEM CELL */
      .tx-item-cell {
        cursor: pointer;
      }
      .tx-item-cell:hover div:first-child {
        text-decoration: underline;
        text-decoration-color: var(--text3);
        text-underline-offset: 2px;
      }

      /* TX DETAIL PANE (view mode) */
      .tx-detail-item {
        font-size: 18px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 4px;
      }
      .tx-detail-amount {
        font-size: 26px;
        font-weight: 700;
        color: var(--accent);
        margin-bottom: 18px;
        letter-spacing: -0.5px;
      }
      .tx-detail-divider {
        height: 1px;
        background: var(--border);
        margin-bottom: 14px;
      }
      .tx-detail-grid {
        display: grid;
        grid-template-columns: 78px 1fr;
        gap: 10px 12px;
      }
      .tx-detail-label {
        font-size: 12px;
        color: var(--text3);
        font-weight: 500;
        padding-top: 3px;
      }
      .tx-detail-value {
        font-size: 13px;
        color: var(--text);
      }
      .tx-detail-note {
        background: var(--surface2);
        border-radius: 7px;
        padding: 7px 10px;
        font-size: 12px;
        color: var(--text2);
        line-height: 1.5;
      }
      .modal-detail { max-width: 320px !important; }

      .tx-detail-action-btn {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: none;
        color: var(--text3);
        cursor: pointer;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.12s, color 0.12s;
      }
      .tx-detail-action-btn:hover { background: var(--surface2); color: var(--text); }
      .tx-detail-action-btn.accent { background: var(--accent); color: #fff; border-color: var(--accent); }
      .tx-detail-action-btn.accent:hover { filter: brightness(1.1); }

      /* ADD BUTTON DROPDOWN */
      .bulk-add-menu {
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 8px;
        min-width: 140px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        z-index: 200;
        overflow: hidden;
      }
      .bulk-add-menu.open { display: block; }
      .bulk-menu-item {
        display: block;
        width: 100%;
        padding: 9px 14px;
        background: none;
        border: none;
        text-align: left;
        font-size: 13px;
        color: var(--text);
        cursor: pointer;
      }
      .bulk-menu-item:hover { background: var(--surface2); }

      /* BULK ADD MODAL */
      .modal-bulk {
        max-width: 820px !important;
        width: calc(100vw - 32px);
      }
      .bulk-apply-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        background: var(--surface2);
        border-radius: 8px;
        margin-bottom: 14px;
        flex-wrap: wrap;
      }
      .bulk-apply-label {
        font-size: 12px;
        font-weight: 500;
        color: var(--text2);
        white-space: nowrap;
      }
      .bulk-apply-fields {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        flex: 1;
      }
      .bulk-apply-field {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--text2);
      }
      .bulk-apply-field select {
        font-size: 12px;
        padding: 3px 6px;
        border-radius: 5px;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
        max-width: 160px;
      }
      .bulk-table-wrap {
        overflow-x: auto;
        border: 1px solid var(--border);
        border-radius: 8px;
        max-height: 55vh;
        overflow-y: auto;
      }
      .bulk-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
      }
      .bulk-table thead th {
        position: sticky;
        top: 0;
        background: var(--surface2);
        padding: 8px 10px;
        text-align: left;
        font-weight: 500;
        font-size: 12px;
        color: var(--text2);
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
      }
      .bulk-table tbody tr:not(:last-child) td {
        border-bottom: 1px solid var(--border);
      }
      .bulk-table tbody tr:hover { background: var(--surface2); }
      .bulk-num {
        padding: 6px 10px;
        color: var(--text3);
        font-size: 11px;
        width: 24px;
        text-align: right;
      }
      .bulk-cell-input {
        width: 100%;
        min-width: 80px;
        padding: 5px 7px;
        border: 1px solid transparent;
        border-radius: 5px;
        background: transparent;
        color: var(--text);
        font-size: 13px;
        box-sizing: border-box;
      }
      .bulk-cell-input:focus {
        outline: none;
        border-color: var(--accent);
        background: var(--surface);
      }
      .bulk-cell-input[data-field="date"] { min-width: 110px; }
      .bulk-cell-input[data-field="amount"] { min-width: 90px; }
      .bulk-cell-select {
        width: 100%;
        min-width: 110px;
        padding: 5px 6px;
        border: 1px solid transparent;
        border-radius: 5px;
        background: transparent;
        color: var(--text);
        font-size: 12px;
        cursor: pointer;
      }
      .bulk-cell-select:focus {
        outline: none;
        border-color: var(--accent);
        background: var(--surface);
      }
      .bulk-table td { padding: 4px 6px; vertical-align: middle; }
      .bulk-remove-btn {
        background: none;
        border: none;
        color: var(--text3);
        cursor: pointer;
        font-size: 13px;
        padding: 4px 6px;
        border-radius: 4px;
        line-height: 1;
      }
      .bulk-remove-btn:hover { color: var(--red); background: var(--surface2); }

      /* COLLAPSIBLE SETTINGS SECTIONS (Account tab) */
      .settings-section {
        border-top: 1px solid var(--border);
      }
      .settings-section summary {
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 13px 0;
        font-size: 13px;
        font-weight: 500;
        color: var(--text);
        cursor: pointer;
        user-select: none;
      }
      .settings-section summary::-webkit-details-marker { display: none; }
      .settings-section summary::after {
        content: '›';
        font-size: 18px;
        color: var(--text3);
        transition: transform 0.15s;
        display: inline-block;
        line-height: 1;
      }
      .settings-section[open] summary::after {
        transform: rotate(90deg);
      }
      .settings-section-body {
        padding-bottom: 16px;
      }
      .settings-section-footer {
        border-top: 1px solid var(--border);
        padding: 16px 0 4px;
      }

      /* TABS */
      .tab-bar {
        display: flex;
        gap: 2px;
        border-bottom: 1px solid var(--border);
        margin-bottom: 18px;
      }
      .tab-btn {
        padding: 7px 14px;
        border: none;
        background: none;
        cursor: pointer;
        font-size: 13px;
        color: var(--text2);
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        font-family: 'DM Sans', sans-serif;
        transition: color 0.12s;
      }
      .tab-btn.active {
        color: var(--accent);
        border-bottom-color: var(--accent);
        font-weight: 500;
      }
      .tab-pane {
        display: none;
      }
      .tab-pane.active {
        display: block;
      }

      /* PROGRESS BAR */
      .pbar {
        height: 5px;
        background: var(--surface3);
        border-radius: 3px;
        overflow: hidden;
        margin-top: 5px;
      }
      .pbar-fill {
        height: 100%;
        border-radius: 3px;
        transition: width 0.5s ease;
      }

      /* MONTH OVERVIEW CHARTS */
      .overview-metrics {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-bottom: 20px;
      }
      .overview-metric {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 14px 16px;
      }
      .toggle-pill {
        display: inline-flex;
        border: 1px solid var(--border);
        border-radius: 20px;
        overflow: hidden;
        background: var(--surface2);
      }
      .toggle-pill button {
        background: none;
        border: none;
        padding: 4px 14px;
        font-size: 12px;
        color: var(--text2);
        cursor: pointer;
        transition: background 0.15s, color 0.15s;
      }
      .toggle-pill button.active {
        background: var(--accent);
        color: #fff;
        border-radius: 20px;
      }
      .overview-metric-label {
        font-size: 11px;
        color: var(--text3);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 6px;
      }
      .overview-metric-value {
        font-family: var(--font-mono);
        font-size: 18px;
        font-weight: 400;
        letter-spacing: -0.02em;
        color: var(--text);
      }
      .overview-charts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }
      .overview-tables {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-top: 16px;
      }
      .overview-chart-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 16px;
      }
      .overview-chart-card .card-title {
        margin-bottom: 14px;
      }
      .overview-donut-wrap {
        position: relative;
      }
      .overview-bar-wrap {
        position: relative;
        height: 220px;
      }
      .overview-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px;
        color: var(--text3);
        font-size: 13px;
      }
      /* ==================== MOBILE ==================== */

      /* Hamburger button — hidden on desktop */
      #mobile-menu-btn {
        display: none;
      }
      /* Collapse button — desktop only */
      @media (max-width: 768px) {
        #sidebar-collapse-btn { display: none; }
      }

      /* Sidebar backdrop — hidden on desktop */
      #sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 250;
        backdrop-filter: blur(2px);
      }
      #sidebar-backdrop.open {
        display: block;
      }

      @media (max-width: 768px) {
        /* Sidebar becomes a slide-in drawer */
        #sidebar {
          transform: translateX(-100%);
          transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
          z-index: 300;
          /* widen slightly so nav labels don't squeeze */
          width: 240px;
        }
        #sidebar.open {
          transform: translateX(0);
          box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
        }

        /* Main fills full width */
        #main {
          margin-left: 0;
        }

        /* Hamburger button */
        #mobile-menu-btn {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 4px;
          position: fixed;
          top: 11px;
          left: 14px;
          z-index: 150;
          width: 36px;
          height: 36px;
          padding: 0;
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: 7px;
          cursor: pointer;
        }
        #mobile-menu-btn span {
          display: block;
          width: 16px;
          height: 1.5px;
          background: var(--text2);
          border-radius: 2px;
          transition: opacity 0.15s;
        }
        #mobile-menu-btn:hover span {
          background: var(--text);
        }

        /* Topbar: shift title right to clear the hamburger */
        .topbar {
          padding-left: 62px;
        }

        /* Page padding */
        .page {
          padding: 16px 14px 80px;
        }

        /* Topbar title slightly smaller */
        .topbar-title {
          font-size: 14px;
        }

        /* Tables scroll horizontally */
        .table-wrap {
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
        }

        /* Modals: near full-screen */
        .modal-overlay .modal {
          max-width: calc(100vw - 24px) !important;
          max-height: 90vh;
          overflow-y: auto;
          margin: 0 12px;
        }

        /* Settings modal tabs scroll */
        .settings-tabs {
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          flex-wrap: nowrap !important;
        }
        .settings-tab {
          white-space: nowrap;
          flex-shrink: 0;
        }

        /* Month tabs scroll */
        .tabs {
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          flex-wrap: nowrap !important;
        }
        .tab-btn {
          white-space: nowrap;
          flex-shrink: 0;
        }

        /* Dashboard */
        .db-charts-grid { grid-template-columns: 1fr; }
        .bva-row { grid-template-columns: 100px 1fr auto; }

        /* Overview charts */
        .overview-metrics {
          grid-template-columns: repeat(2, 1fr);
        }
        .overview-charts {
          grid-template-columns: 1fr;
        }
        .overview-tables {
          grid-template-columns: 1fr !important;
        }

        /* Year overview monthly grid */
        .yearly-grid {
          grid-template-columns: repeat(2, 1fr) !important;
        }

        /* Budget page controls */
        .budget-controls {
          flex-wrap: wrap;
          gap: 6px;
        }

        /* CSV preview table */
        #csv-preview-overlay .modal {
          max-width: 100vw !important;
          max-height: 100dvh !important;
          margin: 0 !important;
          border-radius: 0 !important;
        }

        /* Inline add row — simplify on mobile */
        .inline-add-row td {
          padding: 6px 4px;
        }
        .inline-add-row input,
        .inline-add-row select {
          font-size: 13px;
        }
      }

      @media (max-width: 480px) {
        .overview-metrics {
          grid-template-columns: repeat(2, 1fr);
          gap: 8px;
        }
        .overview-metric-value {
          font-size: 15px;
        }
        .yearly-grid {
          grid-template-columns: 1fr !important;
        }
      }

      /* Stack spending/income tables when container is too narrow for 2/3 + 1/3 */
      @container (max-width: 700px) {
        .month-tables-grid {
          grid-template-columns: 1fr !important;
        }
      }

      /* PLANNED vs ACTUAL TABLE */
      .pva-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
      }
      .pva-table th {
        padding: 7px 10px;
        text-align: right;
        font-weight: 500;
        font-size: 11px;
        color: var(--text3);
        letter-spacing: 0.05em;
        background: var(--surface2);
        border-bottom: 1px solid var(--border);
      }
      .pva-table th:first-child {
        text-align: left;
      }
      .pva-table td {
        padding: 7px 10px;
        border-bottom: 1px solid var(--border);
        text-align: right;
        font-family: var(--font-mono);
        font-size: 12px;
      }
      .pva-table td:first-child {
        text-align: left;
        font-family: 'DM Sans', sans-serif;
        font-weight: 500;
        font-size: 13px;
      }
      .pva-table tr:last-child td {
        border-bottom: none;
      }
      .pva-table .pos {
        color: var(--green);
      }
      .pva-table .neg {
        color: var(--red);
      }
      .pva-table thead tr:first-child th {
        border-bottom: none;
        padding-bottom: 3px;
      }
      .pva-table .total-row th {
        background: var(--surface2);
        border-bottom: 1px solid var(--border);
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 400;
        font-style: italic;
        color: var(--text2);
        text-align: right;
        padding: 0 10px 7px;
      }
      .pva-table .total-row th:first-child {
        text-align: left;
        font-family: var(--font-sans);
      }
      .pva-table .total-row .pos { color: var(--green); }
      .pva-table .total-row .neg { color: var(--red); }

      /* CATEGORY INSIGHT LINK */
      .cat-insight-link { cursor: pointer; }
      .cat-insight-link:hover { color: var(--accent); }

      /* TREND INFO POPOVER */
      #trend-info-popover {
        position: fixed;
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--text1);
        font-size: 12px;
        white-space: pre;
        padding: 8px 24px 8px 12px;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0,0,0,.3);
        z-index: 999;
      }

      /* COLOR PICKER */
      .color-swatch {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid transparent;
        transition: transform 0.1s;
      }
      .color-swatch.selected {
        border-color: var(--text);
        transform: scale(1.15);
      }
      .swatches {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
      }

      /* DASHBOARD */
      .db-header {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        margin-bottom: 12px;
      }
      .db-header .toggle-pill button {
        font-size: 11px;
        padding: 4px 10px;
      }
      .db-customize-btn {
        font-size: 11px;
        color: var(--text3);
        background: none;
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 4px 10px;
        cursor: pointer;
        transition: color 0.12s, border-color 0.12s;
      }
      .db-customize-btn:hover {
        color: var(--text2);
        border-color: var(--border2);
      }
      .db-customize-popover {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px 14px;
        z-index: 310;
        width: 220px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.10);
      }
      .db-customize-popover.open { display: block; }
      .db-customize-title {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--text3);
        margin-bottom: 8px;
      }
      .db-customize-row {
        display: grid;
        grid-template-columns: 14px 1fr;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: var(--text2);
        padding: 4px 0;
        cursor: pointer;
        user-select: none;
      }
      .db-customize-row input[type="checkbox"] {
        margin: 0;
      }
      #db-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 309;
      }
      #db-backdrop.open { display: block; }
      #spending-backdrop { display: none; position: fixed; inset: 0; z-index: 309; }
      #spending-backdrop.open { display: block; }
      .db-widget { margin-bottom: 16px; }
      .db-charts-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 16px;
      }

      /* BUDGET VS ACTUAL BARS */
      .bva-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
      .bva-row {
        display: grid;
        grid-template-columns: 160px 1fr auto;
        align-items: center;
        gap: 12px;
      }
      .bva-label { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .bva-track {
        height: 6px;
        background: var(--surface2);
        border-radius: 3px;
        overflow: hidden;
      }
      .bva-bar {
        height: 100%;
        border-radius: 3px;
        transition: width 0.4s ease;
      }
      .bva-bar.ok        { background: var(--green); opacity: 0.7; }
      .bva-bar.over      { background: var(--red);   opacity: 0.8; }
      .bva-bar.no-budget { background: var(--border2); }
      .bva-amounts {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--text);
        white-space: nowrap;
        text-align: right;
      }
      .bva-budget-lbl { color: var(--text3); margin-left: 4px; }

      /* YEARLY */
      .year-table-wrap {
        overflow-x: auto;
        border-bottom: 1px solid var(--border);
      }
      .year-table {
        border-collapse: collapse;
        font-size: 12px;
        width: 100%;
      }
      .year-table th,
      .year-table td {
        padding: 6px 10px;
        border: 1px solid var(--border);
        white-space: nowrap;
      }
      .year-table th {
        background: var(--surface2);
        font-weight: 500;
        font-size: 11px;
        color: var(--text2);
      }
      .year-table td {
        font-family: var(--font-mono);
        text-align: right;
      }
      .year-table td:first-child,
      .year-table th:first-child {
        text-align: left;
        font-family: 'DM Sans', sans-serif;
        position: sticky;
        left: 0;
        background: var(--surface2);
        z-index: 1;
      }
      .year-table .total-row td {
        background: color-mix(in srgb, var(--surface2) 70%, var(--text) 8%);
        font-weight: 600;
      }
      .year-table .total-row td:first-child {
        background: color-mix(in srgb, var(--surface2) 70%, var(--text) 8%);
      }

      .filter-backdrop {
        position: fixed;
        inset: 0;
        z-index: 99;
      }
      .filter-popover {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        z-index: 100;
        background: var(--surface);
        border: 1px solid var(--border2);
        border-radius: 8px;
        padding: 10px;
        min-width: 200px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .filter-popover-row {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .filter-popover-label {
        font-size: 11px;
        color: var(--text3);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .empty-state {
        text-align: center;
        padding: 3rem;
        color: var(--text3);
        font-size: 13px;
      }
      .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
      }
      .section-header h3 {
        font-size: 14px;
        font-weight: 500;
      }
      .month-tables-grid {
        container-type: inline-size;
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: 14px;
      }
      @container (max-width: 700px) {
        .month-tables-grid { grid-template-columns: 1fr !important; }
      }

      /* BUDGET TABLE */
      .budget-copy-banner {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        background: var(--accent-light);
        border: 1px solid var(--border);
        border-radius: 8px;
        font-size: 13px;
        color: var(--text2);
      }
      .budget-year-table {
        table-layout: fixed;
        width: 100%;
      }
      .budget-cat-row td:first-child {
        background: var(--surface2);
      }
      .budget-cat-row td:first-child {
        font-family: 'DM Sans', sans-serif;
      }
      .budget-expand-btn {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 10px;
        color: var(--text3);
        padding: 0 6px 0 0;
        line-height: 1;
        vertical-align: middle;
      }
      .budget-year-table .amount-cell {
        font-size: 12px;
        font-weight: 400;
      }
      .budget-year-table .total-row .amount-cell {
        font-weight: 600;
        color: var(--text);
      }
      .budget-person-row td {
        font-size: 11px;
        color: var(--text2);
      }
      .budget-person-row.hidden {
        display: none;
      }
      .budget-person-cell {
        padding-left: 28px !important;
        font-family: 'DM Sans', sans-serif !important;
        color: var(--text3) !important;
      }
      .budget-edit-cell {
        padding: 3px 6px !important;
        background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%) !important;
      }
      .budget-edit-cell .budget-cell-input {
        border-bottom: 1px solid var(--accent);
      }

      /* CSV import preview modal table */
      #csv-preview-overlay table th {
        background: var(--surface2);
        font-size: 10px;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--text2);
        padding: 8px 10px;
        text-align: left;
        position: sticky;
        top: 0;
      }
      #csv-preview-overlay table td {
        padding: 7px 10px;
        border-bottom: 1px solid var(--border);
        font-size: 12px;
        vertical-align: middle;
      }
      #csv-preview-overlay table tr:last-child td { border-bottom: none; }
      #csv-preview-overlay table tr:hover td { background: var(--surface2); }
      .csv-cell-input, .csv-cell-select {
        width: 100%;
        border: none;
        background: transparent;
        font-size: 12px;
        color: var(--text);
        font-family: var(--font-ui);
        padding: 0;
        cursor: text;
      }
      .csv-cell-select { cursor: pointer; }
      .csv-cell-select:has(option[value=""]:checked) {
        color: var(--text3);
        font-style: italic;
      }
      .csv-cell-input:focus, .csv-cell-select:focus {
        outline: 2px solid var(--accent);
        border-radius: 3px;
        background: var(--surface);
      }

      /* Budget table inputs — no box, no spinners */
      .budget-cell-input {
        width: 82px;
        font-size: 12px;
        font-family: var(--font-mono);
        text-align: right;
        background: transparent;
        border: none;
        outline: none;
        padding: 3px 5px;
        color: var(--text);
        cursor: text;
      }
      .budget-cell-input:focus {
        background: var(--surface2);
        border-radius: 4px;
        outline: 2px solid var(--accent);
      }
      .budget-cell-input::-webkit-outer-spin-button,
      .budget-cell-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      .budget-cell-input[type=number] {
        -moz-appearance: textfield;
      }

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