html, body { margin: 0; min-height: 100%; background: #FFFFFF; }
  html { height: 100%; }
  #ledger-root {
    --paper: #FAF8F3;
    --ink: #22291F;
    --ink-soft: #565F52;
    --moss: #4A6741;
    --moss-deep: #33472C;
    --rust: #B0512A;
    --line: #DAD5C6;
    --card: #FFFFFF;
    --chart-grid: #EFEAE0;
    font-family: 'Inter', -apple-system, sans-serif;
    background: var(--paper);
    color: var(--ink);
    padding: 28px 20px 40px;
    max-width: 960px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  #ledger-root * { box-sizing: border-box; }

  .lg-shell { display: flex; gap: 28px; align-items: flex-start; }
  /* max-height + overflow keep the tab list reachable when it's taller than the viewport —
     a phone in landscape is wider than the mobile breakpoint, so it gets this sidebar in a
     ~375px-tall window. Being sticky, it stays pinned once stuck, so the overflowing items
     could not be scrolled to at all. Only engages when it actually overflows. */
  .lg-sidebar { width: 152px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 20px;
    max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain; }
  /* Short viewports — a phone in landscape is wider than the mobile breakpoint, so it gets
     this sidebar inside a ~375px-tall window. Sticky positioning pinned it in place with
     the overflowing tabs stranded off-screen and no way to scroll to them. Below this
     height it just flows with the page, so ordinary page scrolling reaches every tab.
     (The max-height above still covers a list outgrowing a tall window.) */
  @media (max-height: 600px) {
    .lg-sidebar { position: static; max-height: none; overflow: visible; }
  }
  .lg-sidebar-item {
    background: none; border: none; font-family: inherit; font-size: 14px; font-weight: 600;
    color: var(--ink-soft); text-align: left; padding: 9px 12px; border-radius: 7px; cursor: pointer;
  }
  .lg-sidebar-item:hover { background: var(--line); }
  .lg-sidebar-item.active { background: var(--moss); color: white; }
  .lg-sidebar-group { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft);
    padding: 12px 12px 2px; opacity: 0.75; }
  .lg-main { flex: 1; min-width: 0; }

  .lg-bottom-nav { display: none; }
  /* Mobile-nav chrome. Hidden everywhere by default; the data-nav rules inside the mobile
     media query turn on whichever pieces the selected mode needs. */
  #lg-nav-menu-btn, #lg-title-switch { display: none; }
  .lg-drawer-scrim { display: none; }
  .lg-more-sheet-overlay {
    display: none; position: fixed; inset: 0; z-index: 900;
    background: rgba(34,41,31,0.55); align-items: flex-end;
  }
  .lg-more-sheet-overlay.active { display: flex; }
  .lg-more-sheet {
    background: var(--card); width: 100%; max-height: 70vh; overflow-y: auto;
    border-radius: 16px 16px 0 0; padding: 10px 8px calc(env(safe-area-inset-bottom,0px) + 12px);
  }
  .lg-more-sheet-handle { width: 36px; height: 4px; background: var(--line); border-radius: 2px; margin: 4px auto 10px; }
  .lg-sheet-group { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); padding: 10px 14px 4px; opacity: 0.75; }
  .lg-sheet-item { display: block; width: 100%; text-align: left; background: none; border: none; font: inherit; font-weight: 600; font-size: 15px; color: var(--ink); padding: 12px 14px; border-radius: 8px; }
  .lg-sheet-item.active { background: var(--moss); color: #fff; }

  .lg-collapsible-header {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    background: none; border: none; padding: 0; margin: 0 0 12px; font: inherit; color: inherit; cursor: default; text-align: left;
  }
  .lg-collapsible-header h3 { margin: 0; }
  .lg-collapsible-caret { display: none; }
  @media (max-width: 640px) {
    .lg-collapsible-header { cursor: pointer; }
    .lg-collapsible-caret { display: inline-block; transition: transform 0.15s; }
    .lg-collapsible.collapsed .lg-collapsible-body { display: none; }
    .lg-collapsible.collapsed .lg-collapsible-caret { transform: rotate(-90deg); }
  }
  /* Same collapse behavior as .lg-collapsible, but active at every viewport width —
     for optional detail sections (e.g. NSP's monthly breakdown) rather than mobile-only space-saving. */
  .lg-collapsible.lg-collapsible-any .lg-collapsible-header { cursor: pointer; }
  .lg-collapsible.lg-collapsible-any .lg-collapsible-caret { display: inline-block; transition: transform 0.15s; }
  .lg-collapsible.lg-collapsible-any.collapsed .lg-collapsible-body { display: none; }
  .lg-collapsible.lg-collapsible-any.collapsed .lg-collapsible-caret { transform: rotate(-90deg); }
  .lg-month-row { display: grid; grid-template-columns: 46px repeat(3, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
  .lg-month-row:last-child { border-bottom: none; }
  .lg-month-row-head { font-weight: 600; color: var(--ink-soft); font-size: 11px; text-transform: uppercase; }
  .lg-month-row .pos { color: var(--moss-deep); }
  .lg-month-row .neg { color: var(--rust); }
  @media (max-width: 560px) { .lg-month-row { grid-template-columns: 34px repeat(3, 1fr); font-size: 11px; } }

  .lg-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; flex-wrap: wrap; gap: 8px;}
  .lg-title { font-family: 'Fraunces', Georgia, serif; font-size: 30px; font-weight: 600; letter-spacing: -0.5px; }
  .lg-month-nav { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); }
  .lg-month-nav button { background: none; border: 1px solid var(--line); border-radius: 6px; width: 28px; height: 28px; cursor: pointer; color: var(--ink); font-size: 15px; }
  .lg-month-nav button:hover { background: var(--line); }
  .lg-month-label { font-weight: 600; color: var(--ink); min-width: 92px; text-align: center; }

  .lg-tape {
    display: flex;
    gap: 0;
    border-top: 1.5px dashed var(--line);
    border-bottom: 1.5px dashed var(--line);
    padding: 14px 0;
    margin: 18px 0 22px;
  }
  .lg-tape-item { flex: 1; text-align: center; border-right: 1px solid var(--line); }
  .lg-tape-item:last-child { border-right: none; }
  .lg-tape-num { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 600; }
  .lg-tape-num.neg { color: var(--rust); }
  .lg-tape-num.pos { color: var(--moss-deep); }
  .lg-tape-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-top: 2px; }

  .lg-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin-bottom: 16px; }
  .lg-card h3 { font-family: 'Fraunces', Georgia, serif; font-size: 16px; font-weight: 600; margin: 0 0 12px; }

  .lg-form-row { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
  .lg-form-row input, .lg-form-row select {
    font-family: inherit; font-size: 14px; padding: 9px 10px; border: 1px solid var(--line);
    border-radius: 6px; background: var(--paper); color: var(--ink);
  }
  .lg-amount { width: 110px; }
  .lg-vehicle-balance-row { align-items: center; }
  .lg-vehicle-balance-label { flex: 1; font-size: 13px; }
  .lg-vehicle-balance-input { max-width: 140px; }
  .lg-date { width: 140px; -webkit-appearance: none; appearance: none; }
  .lg-date::-webkit-datetime-edit-text,
  .lg-date::-webkit-datetime-edit-month-field,
  .lg-date::-webkit-datetime-edit-day-field,
  .lg-date::-webkit-datetime-edit-year-field { color: var(--ink); }
  .lg-date::-webkit-calendar-picker-indicator { filter: var(--date-icon-filter, none); }
  .lg-cat { flex: 1; min-width: 140px; }
  .lg-note { flex: 2; min-width: 160px; }
  .lg-submit {
    background: var(--moss); color: white; border: none; border-radius: 6px;
    padding: 9px 18px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
  }
  .lg-submit:hover { background: var(--moss-deep); }
  .lg-submit:disabled { opacity: 0.5; cursor: not-allowed; }

  .lg-chart-row { display: flex; gap: 16px; flex-wrap: wrap; }
  .lg-chart-box { flex: 1; min-width: 260px; }
  canvas { max-width: 100%; }

  .lg-sum-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
  .lg-sum-label { color: var(--ink-soft); }
  .lg-sum-val { font-weight: 600; font-variant-numeric: tabular-nums; }
  .lg-sum-val.pos { color: var(--moss-deep); }
  .lg-sum-val.neg { color: var(--rust); }
  .lg-sum-row.lg-sum-total { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; }
  .lg-sum-note { font-size: 11px; color: var(--ink-soft); margin-top: 6px; }
  .lg-cat-list { display: flex; flex-direction: column; gap: 8px; }
  .lg-cat-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
  .lg-cat-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
  .lg-cat-name { flex: 1; color: var(--ink-soft); }
  .lg-cat-name-block { flex: 1; min-width: 0; }

  .lg-goals-board { display: block; }
  .lg-goals-column { display: none; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
  .lg-goals-column.lg-goals-visible { display: block; }
  .lg-goals-column h3 { font-family: 'Fraunces', Georgia, serif; font-size: 14px; font-weight: 600; margin: 0 0 10px; color: var(--ink-soft); }
  .lg-goals-cards { display: flex; flex-direction: column; gap: 10px; }
  .lg-goal-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; cursor: pointer; background: var(--paper); }
  .lg-goal-card-title { font-family: 'Fraunces', Georgia, serif; font-size: 16px; font-weight: 700; line-height: 1.25; }
  .lg-goal-card-meta { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; }
  .lg-goal-progress-track { height: 6px; border-radius: 3px; background: var(--line); margin-top: 8px; overflow: hidden; }
  .lg-goal-progress-fill { height: 100%; background: var(--moss); }
  .lg-goal-card select.lg-goal-status-select { display: block; margin-top: 8px; margin-left: auto; width: auto; max-width: 150px; }
  .lg-goal-card-expanded { cursor: default; position: relative; }
  .lg-goal-card-expanded .lg-form-row { margin-bottom: 8px; }
  /* The title input sits in a .lg-form-row, so themes that paint form-row inputs with a
     full-width pill background (Aurora) render that pill right under the close-X — right-
     padding on the input alone doesn't stop the pill itself reaching the X. Push the row
     down clear of the X's 26px circle instead. */
  .lg-goal-card-expanded .lg-form-row:has(.lg-goal-title-input) { margin-top: 30px; }
  .lg-goal-title-input {
    font-family: 'Fraunces', Georgia, serif; font-size: 19px; font-weight: 700; color: var(--ink);
    background: none; border: none; border-bottom: 1px solid transparent; padding: 2px 34px 4px 0;
    width: 100%; box-sizing: border-box;
  }
  .lg-goal-title-input:hover, .lg-goal-title-input:focus { border-bottom-color: var(--line); outline: none; }
  .lg-card-close-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent; color: var(--ink-soft); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.15s, color 0.15s; transform: rotate(180deg); }
  .lg-card-close-x:hover { color: var(--ink); background: var(--line); }
  .lg-card-close-bottom { width: 100%; margin-top: 4px; }
  .lg-checklist-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .lg-checklist-row:last-child { border-bottom: none; }
  .lg-checklist-row input[type="checkbox"] { width: 16px; height: 16px; flex: none; }
  .lg-checklist-row-text { flex: 1; font-size: 13px; }
  .lg-checklist-row-text.lg-checklist-done { text-decoration: line-through; color: var(--ink-soft); }
  .lg-checklist-row-del { flex: none; background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 15px; padding: 2px 6px; }
  .lg-checklist-row-del:hover { color: var(--rust); }
  .lg-goal-section { padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--line); }
  .lg-goal-section:first-of-type { padding-top: 0; margin-top: 0; border-top: none; }
  .lg-goal-section-title { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--moss); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
  .lg-goal-section-title::before { content: ""; width: 3px; height: 13px; border-radius: 2px;
    background: var(--moss); flex: none; }
  .lg-goal-progress-summary { font-size: 15px; font-weight: 600; }
  .lg-goal-progress-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
  .lg-goal-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 4px 0 12px; overflow-x: auto; }
  .lg-goal-tab { font-size: 12px; font-weight: 600; color: var(--ink-soft); background: none; border: none;
    padding: 6px 10px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
  .lg-goal-tab:hover { color: var(--ink); }
  .lg-goal-tab.active { color: var(--ink); border-bottom-color: var(--moss); }
  .lg-goal-tabpanel { display: none; }
  .lg-goal-tabpanel.active { display: block; }

  .lg-avgtable-row { display: grid; grid-template-columns: 1.5fr 0.9fr 0.9fr 0.9fr; gap: 8px; align-items: center;
    padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; font-variant-numeric: tabular-nums; }
  .lg-avgtable-row:last-child { border-bottom: none; }
  .lg-avgtable-row > div:not(.lg-avgtable-name) { text-align: right; }
  .lg-avgtable-name { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); }
  .lg-avgtable-head { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft);
    font-weight: 600; border-bottom: 2px solid var(--line); opacity: 0.85; }
  @media (max-width: 560px) { .lg-avgtable-row { grid-template-columns: 1.3fr 0.85fr 0.85fr 0.85fr; font-size: 11.5px; gap: 5px; } }

  .lg-currency-toggle { display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; flex-shrink: 0; }
  .lg-currency-toggle button { background: var(--card); border: none; font-family: inherit; font-size: 12px; font-weight: 600;
    color: var(--ink-soft); padding: 6px 12px; cursor: pointer; }
  .lg-currency-toggle button.active { background: var(--moss); color: white; }

  #lg-privacy-toggle.active { background: var(--moss); border-color: var(--moss); }
  #lg-privacy-toggle.active svg { stroke: white; }

  .lg-header-icon-btn { background: var(--card); border: 1px solid var(--line); border-radius: 8px; width: 34px; height: 30px;
    cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-soft); transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s; }
  .lg-header-icon-btn:hover { background: var(--line); color: var(--ink); }
  .lg-header-icon-btn:active { transform: scale(0.94); }
  .lg-header-icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; }
  .lg-header-icon-btn:disabled { opacity: 0.5; cursor: default; transform: none; }

  .lg-back-to-top {
    position: fixed; right: 20px; bottom: 24px; z-index: 600;
    width: 42px; height: 42px; border-radius: 50%; background: var(--card); border: 1px solid var(--line);
    color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25); opacity: 0; pointer-events: none; transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.12s ease;
  }
  .lg-back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .lg-back-to-top:hover { background: var(--line); }
  .lg-back-to-top svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round; }
  #lg-refresh-btn.lg-spinning svg { animation: lg-spin 0.7s linear infinite; }
  @keyframes lg-spin { to { transform: rotate(360deg); } }

  .lg-app-content { display: none; }
  .lg-app-content.ready { display: block; }
  .lg-auth-input { width: 100%; margin-bottom: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px;
    font-family: inherit; font-size: 14px; background: var(--paper); color: var(--ink); box-sizing: border-box; }
  .lg-auth-password-row { position: relative; }
  .lg-auth-pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none;
    padding: 4px; cursor: pointer; color: var(--ink-soft); display: flex; align-items: center; }
  .lg-auth-pw-toggle:hover { color: var(--ink); }
  .lg-auth-pw-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; }
  .lg-auth-link { background: none; border: none; padding: 0; font-size: 12px; color: var(--moss); cursor: pointer;
    text-decoration: underline; font-family: inherit; }
  .lg-auth-link:hover { color: var(--moss-deep); }
  .lg-submit:disabled, .lg-auth-link:disabled { opacity: 0.6; cursor: default; }

  /* position:fixed + inset:0 pins every modal to the viewport regardless of page scroll —
     previously this was position:absolute with JS computing top/height from the scroll
     position at the moment the modal opened, which drifted out of sync (modal stayed put,
     background kept scrolling) the instant the user scrolled while it was open. That JS
     positioning existed to work around how an old embedding (Claude's artifact iframe)
     handled scroll; not needed now, and fixed is simpler and correct on every device. */
  .lg-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(34,41,31,0.55); z-index: 9999;
    align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
  .lg-modal-overlay.active { display: flex; }
  .lg-modal { background: var(--card); border-radius: 12px; padding: 20px; width: 100%; max-width: 480px;
    overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.35); border: 1px solid var(--line); }
  .lg-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
  .lg-modal-header h3 { font-family: 'Fraunces', Georgia, serif; font-size: 18px; margin: 0; }
  #lg-modal-close { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink-soft); padding: 0 4px; }
  #lg-modal-close:hover { color: var(--ink); }

  .lg-month-label { cursor: pointer; border-radius: 6px; padding: 2px 4px; }
  .lg-month-label:hover { background: var(--line); }
  .lg-year-label { cursor: pointer; border-radius: 6px; padding: 2px 4px; }
  .lg-year-label:hover { background: var(--line); }
  #lg-datepick-close {
    background: none; border: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink-soft);
    width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
  }
  #lg-datepick-close:hover { color: var(--ink); background: var(--line); }
  .lg-datepick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
  .lg-datepick-cell {
    font-family: inherit; font-size: 14.5px; font-weight: 600; padding: 14px 6px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--paper); color: var(--ink); cursor: pointer; text-align: center;
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  }
  .lg-datepick-cell:hover { background: var(--line); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.18); }
  .lg-datepick-cell:active { transform: translateY(0); }
  .lg-datepick-cell.active {
    background: var(--moss); color: #fff; border-color: var(--moss);
    box-shadow: 0 6px 16px rgba(0,0,0,0.28);
  }
  .lg-cat-row, .lg-avgtable-row:not(.lg-avgtable-head) { cursor: pointer; }
  .lg-cat-row:hover, .lg-avgtable-row:not(.lg-avgtable-head):hover { background: var(--line); }
  .lg-cat-amt { font-weight: 600; font-variant-numeric: tabular-nums; }
  .lg-cat-amt-block { text-align: right; }
  .lg-cat-bar-track { flex: 1; height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
  .lg-cat-bar-fill { height: 100%; background: var(--moss); }

  .lg-entries { display: flex; flex-direction: column; }
  .lg-show-more-btn {
    margin-top: 10px; padding: 9px; width: 100%; background: var(--paper); border: 1px solid var(--line);
    border-radius: 8px; color: var(--ink-soft); font-family: inherit; font-size: 12.5px; font-weight: 600;
    cursor: pointer; transition: background 0.12s ease, color 0.12s ease;
  }
  .lg-show-more-btn:hover { background: var(--line); color: var(--ink); }
  .lg-entry { display: flex; flex-wrap: wrap; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; gap: 6px 10px; }
  .lg-entry:last-child { border-bottom: none; }
  .lg-entry-date { color: var(--ink-soft); width: 84px; flex-shrink: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .lg-entry-cat { flex-shrink: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 2px 9px; font-size: 11.5px; color: var(--ink-soft); }
  .lg-entry-note { flex: 1; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lg-entry-amt { font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
  .lg-entry-del { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 16px; flex-shrink: 0; padding: 0 2px; }
  .lg-entry-del:hover { color: var(--rust); }
  .lg-entry-edit { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 14px; flex-shrink: 0; padding: 0 2px; }
  .lg-entry-edit:hover { color: var(--moss-deep); }

  .lg-cash-row { display: flex; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--line); gap: 12px; }
  .lg-cash-row:last-child { border-bottom: none; }
  .lg-cash-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--moss); color: var(--paper); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex-shrink: 0; }
  .lg-cash-name { flex: 1; font-size: 14px; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lg-cash-note { color: var(--ink-soft); font-size: 11px; font-weight: 400; }
  .lg-cash-amt { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
  .lg-cash-actions { display: flex; gap: 6px; flex-shrink: 0; opacity: 0; transition: opacity .12s; }
  .lg-cash-row:hover .lg-cash-actions, .lg-cash-row:focus-within .lg-cash-actions { opacity: 1; }
  .lg-cash-edit, .lg-cash-del { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 14px; padding: 2px; }
  .lg-cash-edit:hover { color: var(--moss-deep); }
  .lg-cash-del:hover { color: var(--rust); }

  /* Hidden by default (desktop always has #lg-auth-logout in the header) — only shown by
     the drawer-mode override inside the mobile media query below. Without this base rule
     the button fell back to unstyled browser-default <button> chrome at desktop widths,
     since nothing outside the media query ever set its display. */
  .lg-drawer-logout { display: none; }

  .lg-empty { color: var(--ink-soft); font-size: 13px; text-align: center; padding: 20px 0; }
  .lg-status { font-size: 12px; color: var(--ink-soft); text-align: center; margin-top: 10px; }

  .lg-log-type-switch { display: flex; gap: 6px; margin-bottom: 14px; }
  .lg-log-type {
    flex: 1; padding: 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--paper);
    color: var(--ink-soft); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  }
  .lg-log-type.active { background: var(--moss); border-color: var(--moss); color: white; }
  .lg-log-amount-row { display: flex; gap: 8px; margin-bottom: 12px; }
  .lg-log-amount {
    flex: 1; font-size: 28px; font-weight: 700; padding: 9px 10px; border-radius: 6px;
    border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-family: inherit;
    font-variant-numeric: tabular-nums;
  }
  .lg-log-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .lg-log-chip {
    padding: 7px 13px; border-radius: 20px; border: 1px solid var(--line); background: var(--paper);
    color: var(--ink-soft); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  }
  .lg-log-chip.active { background: var(--moss); border-color: var(--moss); color: white; }
  .lg-log-submit { width: 100%; margin-top: 12px; padding: 9px 18px; font-size: 14px; }

  .lg-view { display: none; }
  /* Most views open with a .lg-tape stat row whose own margin-top provides breathing
     room under the header. Goals and Settings don't have one, so their first card sat
     flush against the header icons/currency toggle — give them the same gap directly. */
  #lg-view-goals > .lg-card:first-child, #lg-view-settings > .lg-card:first-child, #lg-view-log > .lg-card:first-child { margin-top: 18px; }
  .lg-view.active { display: block; }

  .lg-year-nav { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); justify-content: flex-end; margin-bottom: 12px; }
  .lg-year-nav button { background: none; border: 1px solid var(--line); border-radius: 6px; width: 28px; height: 28px; cursor: pointer; color: var(--ink); font-size: 15px; }
  .lg-year-nav button:hover { background: var(--line); }
  .lg-year-label { font-weight: 600; color: var(--ink); min-width: 50px; text-align: center; }
  .lg-year-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 560px) { .lg-year-grid { grid-template-columns: 1fr; } }

  .lg-crypto-row { display: grid; grid-template-columns: 70px 1fr 1fr 1fr; gap: 10px; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
  .lg-crypto-row:last-child { border-bottom: none; }
  .lg-crypto-coin { font-weight: 600; }
  .lg-crypto-sub { color: var(--ink-soft); font-size: 11.5px; }
  .lg-crypto-pnl-pos { color: var(--moss-deep); font-weight: 600; }
  .lg-crypto-pnl-neg { color: var(--rust); font-weight: 600; }
  @media (max-width: 560px) { .lg-crypto-row { grid-template-columns: 60px 1fr 1fr; font-size: 12px; } .lg-crypto-row > div:nth-child(3) { display:none; } }
  .lg-crypto-price-input {
    width: 90px; font-family: inherit; font-size: 12px; padding: 5px 7px; border: 1px solid var(--line);
    border-radius: 5px; background: var(--paper); color: var(--ink);
  }

  .lg-currency { font-family: inherit; font-size: 14px; padding: 9px 8px; border: 1px solid var(--line);
    border-radius: 6px; background: var(--paper); color: var(--ink); width: 78px; }
  .lg-rate-widget { font-size: 11.5px; color: var(--ink-soft); margin-top: 10px; display: flex; align-items: center;
    gap: 6px; flex-wrap: wrap; }
  .lg-rate-value { font-weight: 600; color: var(--ink); }
  .lg-rate-status { opacity: 0.75; }
  .lg-rate-input, .lg-rate-input-usd-eur, .lg-rate-input-usd-aud { width: 116px; font-family: inherit; font-size: 11.5px; padding: 4px 6px; border: 1px solid var(--line);
    border-radius: 5px; background: var(--card); color: var(--ink); }
  .lg-rate-refresh { background: none; border: 1px solid var(--line); border-radius: 5px; font-family: inherit;
    font-size: 11px; padding: 3px 9px; cursor: pointer; color: var(--ink-soft); }
  .lg-rate-refresh:hover { background: var(--line); }
  #lg-trend-chart, #lg-dash-cashflow-chart, #lg-merc-trend-chart { cursor: pointer; }

  .lg-avg-widget { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
  .lg-avg-line { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; gap: 8px; flex-wrap: wrap; }
  .lg-avg-label { color: var(--ink-soft); }
  .lg-avg-vals { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

  .lg-tax-nav { display: flex; justify-content: space-between; align-items: center; margin: 12px 0; flex-wrap: wrap; gap: 10px; }
  .lg-tax-toggle { display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
  .lg-tax-toggle-btn { background: var(--card); border: none; font-family: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--ink-soft); padding: 6px 14px; cursor: pointer; }
  .lg-tax-toggle-btn.active { background: var(--moss); color: white; }
  #lg-goals-mobile-toggle {
    width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto;
    border-radius: 9px; padding: 3px; border-color: var(--line); background: var(--card);
  }
  #lg-goals-mobile-toggle .lg-tax-toggle-btn {
    padding: 7px 18px; border-radius: 7px; transition: background-color 0.12s, color 0.12s;
  }
  .lg-ytd-quarter-row { display: grid; grid-template-columns: 60px repeat(4, 1fr); gap: 8px; padding: 8px 0;
    border-bottom: 1px solid var(--line); font-size: 12.5px; align-items: center; }
  .lg-ytd-quarter-row:last-child { border-bottom: none; }
  .lg-ytd-quarter-head { font-weight: 600; color: var(--ink-soft); font-size: 11px; text-transform: uppercase; }
  @media (max-width: 560px) { .lg-ytd-quarter-row { grid-template-columns: 44px repeat(4, 1fr); font-size: 11px; } }


  /* ---- Dark mode -------------------------------------------------------
     Orthogonal to the paper/dense/vivid skin above: overrides the same
     custom properties each skin sets, so it layers on top of whichever skin
     is active rather than being a fourth skin. data-dark on <html> is
     "light" (no override), "dark" (forced), or "system" (follows the OS).
     The combined html[data-dark]+#ledger-root selector out-specifies the
     plain #ledger-root[data-theme] rules above regardless of source order,
     so this always wins once active. Chart colours (grid lines, legend/axis
     text, categorical palette) are driven separately from JS — see
     THEME_CHART_COLORS_DARK and isDarkActive() — since Chart.js can't read
     CSS custom properties. */
  /* Aurora and Vector commit to a dark world regardless of the Dark-mode toggle (see the
     skin blocks below), so the page margins around #ledger-root need to go dark too even
     when data-dark is "light" — data-theme is mirrored onto <html> in applyTheme() just for
     this. */
  html[data-theme="aurora"], html[data-theme="aurora"] body {
    background: #1A1440;
    background-image: radial-gradient(circle at 15% 0%, #2B2560 0%, #1A1440 45%, #0F0C28 100%);
    background-attachment: fixed;
  }
  html[data-theme="vector"], html[data-theme="vector"] body { background: #0B131D; }
  html[data-dark="dark"], html[data-dark="dark"] body { background: #14170F; }
  html[data-dark="dark"] #ledger-root:not([data-theme="aurora"]):not([data-theme="vector"]) {
    --paper: #14170F; --card: #1D2116; --ink: #ECE9DD; --ink-soft: #A2A896;
    --moss: #7FBE6B; --moss-deep: #8FCB7C; --rust: #E2724B; --line: #333B29;
  }
  html[data-dark="dark"] #ledger-root[data-theme="dense"] {
    --paper: #14171C; --card: #1C2128; --ink: #E9EDF2; --ink-soft: #99A3AD;
    --moss: #4C8DFF; --moss-deep: #35C089; --rust: #E5583F; --line: #2B323B;
  }
  html[data-dark="dark"] #ledger-root[data-theme="vivid"] {
    --paper: #17131F; --card: #201A2C; --ink: #EBE7F5; --ink-soft: #A79DC4;
    --moss: #9481EA; --moss-deep: #4FC79B; --rust: #E56A50; --line: #322A45;
  }
  html[data-dark="dark"] #ledger-root[data-theme="nightdesk"] {
    --paper: #1C1712; --card: #241E17; --ink: #EDE6D8; --ink-soft: #A69B85;
    --moss: #C9946A; --moss-deep: #E2B489; --rust: #D97C55; --line: #3A3226;
  }
  html[data-dark="dark"] #ledger-root[data-theme="terminal"] {
    --paper: #0A0C0A; --card: #0F120E; --ink: #C9D4C4; --ink-soft: #5A6656;
    --moss: #7FE07A; --moss-deep: #5FBE5A; --rust: #E0755A; --line: #232B20;
  }
  html[data-dark="dark"] #ledger-root[data-theme="bold"] {
    --paper: #14140F; --card: #1D1D16; --ink: #FFF8E8; --ink-soft: #B8B29A;
    --moss: #FF7A52; --moss-deep: #FF5D3A; --rust: #E2543A; --line: #FFF8E8;
  }
  html[data-dark="dark"] #ledger-root[data-theme="vector"] {
    --paper: #040810; --card: #0A121B; --ink: #DCF0F7; --ink-soft: #4E7C93;
    --moss: #4FD1E8; --moss-deep: #2A8DA3; --rust: #F26E6E; --line: #12222F;
  }
  @media (prefers-color-scheme: dark) {
    html[data-dark="system"], html[data-dark="system"] body { background: #14170F; }
    html[data-dark="system"] #ledger-root:not([data-theme="aurora"]):not([data-theme="vector"]) {
      --paper: #14170F; --card: #1D2116; --ink: #ECE9DD; --ink-soft: #A2A896;
      --moss: #7FBE6B; --moss-deep: #8FCB7C; --rust: #E2724B; --line: #333B29;
    }
    html[data-dark="system"] #ledger-root[data-theme="dense"] {
      --paper: #14171C; --card: #1C2128; --ink: #E9EDF2; --ink-soft: #99A3AD;
      --moss: #4C8DFF; --moss-deep: #35C089; --rust: #E5583F; --line: #2B323B;
    }
    html[data-dark="system"] #ledger-root[data-theme="vivid"] {
      --paper: #17131F; --card: #201A2C; --ink: #EBE7F5; --ink-soft: #A79DC4;
      --moss: #9481EA; --moss-deep: #4FC79B; --rust: #E56A50; --line: #322A45;
    }
    html[data-dark="system"] #ledger-root[data-theme="nightdesk"] {
      --paper: #1C1712; --card: #241E17; --ink: #EDE6D8; --ink-soft: #A69B85;
      --moss: #C9946A; --moss-deep: #E2B489; --rust: #D97C55; --line: #3A3226;
    }
    html[data-dark="system"] #ledger-root[data-theme="terminal"] {
      --paper: #0A0C0A; --card: #0F120E; --ink: #C9D4C4; --ink-soft: #5A6656;
      --moss: #7FE07A; --moss-deep: #5FBE5A; --rust: #E0755A; --line: #232B20;
    }
    html[data-dark="system"] #ledger-root[data-theme="bold"] {
      --paper: #14140F; --card: #1D1D16; --ink: #FFF8E8; --ink-soft: #B8B29A;
      --moss: #FF7A52; --moss-deep: #FF5D3A; --rust: #E2543A; --line: #FFF8E8;
    }
    html[data-dark="system"] #ledger-root[data-theme="vector"] {
      --paper: #040810; --card: #0A121B; --ink: #DCF0F7; --ink-soft: #4E7C93;
      --moss: #4FD1E8; --moss-deep: #2A8DA3; --rust: #F26E6E; --line: #12222F;
    }
  }
  html[data-dark="dark"] .lg-modal, html[data-dark="system"] .lg-modal { box-shadow: 0 12px 40px rgba(0,0,0,0.6); }
  html[data-dark="dark"] input, html[data-dark="dark"] select,
  html[data-dark="system"] input, html[data-dark="system"] select { color-scheme: dark; }

  /* ---- General polish ---------------------------------------------------
     Subtle depth + smoother state changes across every skin/mode. */
  .lg-card { box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; }
  html[data-dark="dark"] .lg-card, html[data-dark="system"] .lg-card { box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
  .lg-submit, .lg-sidebar-item, .lg-month-nav button, .lg-year-nav button,
  .lg-currency-toggle button, .lg-form-row input, .lg-form-row select {
    transition: background-color 0.12s, color 0.12s, border-color 0.12s, transform 0.08s;
  }
  .lg-submit:active { transform: translateY(1px); }
  /* Mobile overrides — kept last in source order so these win the cascade over the
     base rules above (which share equal selector specificity for several properties). */
  @media (max-width: 640px) {
    #ledger-root { padding: 16px 12px calc(76px + env(safe-area-inset-bottom, 0px)); }
    .lg-shell { flex-direction: column; }
    .lg-sidebar { display: none; }
    /* .lg-main is a flex item of the now-column .lg-shell; without an explicit width its
       cross-axis stretch can lose out to a descendant's intrinsic content width (e.g. a
       <select>'s widest option), silently widening the whole page past the viewport. */
    .lg-main { width: 100%; }

    .lg-bottom-nav {
      display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
      background: var(--card); border-top: 1px solid var(--line);
      padding: 6px 4px calc(env(safe-area-inset-bottom, 0px) + 4px); justify-content: space-around;
    }
    /* Clears the bottom tab bar; Title mode has no bottom bar, so it sits lower. */
    .lg-back-to-top { right: 14px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); width: 40px; height: 40px; }
    #ledger-root[data-nav="title"] .lg-back-to-top { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
    .lg-bottom-nav-item {
      flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
      background: none; border: none; font-family: inherit; color: var(--ink-soft);
      font-size: 10.5px; font-weight: 600; padding: 6px 2px; border-radius: 8px; cursor: pointer;
    }
    /* These buttons also carry .lg-sidebar-item, whose .active rule paints a solid accent
       pill. In the bottom bar that pill sat behind an accent-coloured label — unreadable,
       and exactly the same colour as the background in the Dense and Vivid themes. The bar
       marks the active tab by colour alone, so clear the inherited background. */
    .lg-bottom-nav-item.active { color: var(--moss); background: none; }

    .lg-title { font-size: 24px; }
    .lg-header { gap: 10px; }
    .lg-header-controls { gap: 8px; }
    .lg-currency-label-text { display: none; }
    .lg-currency-toggle button { padding: 6px 9px; font-size: 11px; }
    /* Log out moved into the More sheet on mobile (see openMoreSheet()) — the compact
       icon row has no room for a text button once it's fighting the currency toggle. */
    #lg-auth-logout { display: none; }

    .lg-card { padding: 14px; }

    .lg-tape { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
    .lg-tape-item { border-right: none; text-align: center; padding: 6px 0; }
    .lg-tape-item.primary {
      grid-column: 1 / -1; order: -1;
      padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px dashed var(--line);
    }
    .lg-tape-item.primary .lg-tape-num { font-size: 30px; }
    .lg-tape-item.wide { grid-column: 1 / -1; }
    .lg-tape-num { font-size: 18px; }

    .lg-form-row { flex-direction: column; align-items: stretch; }
    .lg-form-row input, .lg-form-row select, .lg-form-row .lg-submit { width: 100%; min-width: 0; }
    .lg-date, .lg-amount, .lg-cat, .lg-note, .lg-currency { width: 100%; min-width: 0; flex: none; }
    .lg-log-amount-row { flex-direction: column; align-items: stretch; }
    .lg-log-amount-row select { width: 100%; min-width: 0; }
    .lg-rename-row { flex-direction: row; align-items: center; }
    .lg-rename-row input { width: auto; flex: 1; }
    .lg-rename-row .lg-entry-del { width: auto; flex-shrink: 0; }
    /* On desktop this row sits label-left/input-right with align-items:center for vertical
       centering; stacked into a column on mobile, that same center alignment instead centers
       everything horizontally, and the desktop 140px input cap left a narrow, oddly-placed
       box instead of a normal full-width field like every other mobile input. */
    .lg-vehicle-balance-row { align-items: flex-start; }
    .lg-vehicle-balance-label { font-size: 13.5px; font-weight: 600; }
    .lg-vehicle-balance-input { max-width: none; }

    .lg-entry { font-size: 12.5px; gap: 6px; }
    .lg-entry-note { flex: 1 1 32px; min-width: 24px; }
    .lg-entry-date { width: 78px; }
    .lg-entries .lg-entry-del {
      min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
      font-size: 20px; margin: -6px -4px -6px 2px;
    }
    .lg-entries .lg-entry-edit {
      min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
      font-size: 18px; margin: -6px -4px -6px 2px;
    }

    .lg-rate-input, .lg-rate-input-usd-eur, .lg-rate-input-usd-aud { width: 120px; }

    .lg-cash-row { padding: 9px 2px; gap: 8px; }
    .lg-cash-actions { opacity: 1; }
    .lg-cash-edit, .lg-cash-del {
      min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; font-size: 18px;
    }

    .lg-cat-row { flex-wrap: wrap; }
    .lg-avgtable-name { min-width: 0; }

    /* ---- Mobile navigation modes -------------------------------------------
       Chosen in Settings, applied via data-nav on #ledger-root. Both drive off
       the same .lg-sidebar list and switchTab(), so a new tab or side-income
       stream appears in either mode automatically.

       These live INSIDE the mobile media query on purpose: nav mode is a
       mobile-only concern, and keeping them here means the id-scoped selectors
       can't out-specify the mobile rules the way the theme blocks would. */

    #ledger-root[data-nav="drawer"], #ledger-root[data-nav="title"] {
      padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }
    #ledger-root[data-nav="drawer"] .lg-bottom-nav,
    #ledger-root[data-nav="title"] .lg-bottom-nav { display: none; }

    /* A — off-canvas drawer holding the full grouped list. */
    #ledger-root[data-nav="drawer"] .lg-sidebar {
      display: flex; position: fixed; top: 0; left: 0; bottom: 0; z-index: 920;
      width: 78%; max-width: 300px; background: var(--card); border-right: 1px solid var(--line);
      border-radius: 0 18px 18px 0; box-shadow: 8px 0 32px rgba(0,0,0,0.28);
      padding: 18px 12px calc(18px + env(safe-area-inset-bottom, 0px)); overflow-y: auto;
      /* top/bottom already size this to the full viewport; the base rule's max-height
         would otherwise clamp it and leave a gap along the bottom edge. */
      max-height: none;
      transform: translateX(-102%); transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    #ledger-root[data-nav="drawer"].lg-drawer-open .lg-sidebar { transform: none; }
    #ledger-root[data-nav="drawer"] .lg-drawer-scrim {
      position: fixed; inset: 0; z-index: 910; background: rgba(0,0,0,0.5);
      backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    }
    #ledger-root[data-nav="drawer"].lg-drawer-open .lg-drawer-scrim { display: block; }

    /* Modernized nav items, drawer only: crisper inactive text (was var(--ink-soft), read as
       "smaller" purely from low contrast against the same 14px size), a bolder gradient pill
       for the active tab instead of a flat fill, breathing room between section groups via a
       hairline divider instead of just whitespace. */
    #ledger-root[data-nav="drawer"] .lg-sidebar-item {
      font-size: 15px; padding: 11px 14px; border-radius: 10px; color: var(--ink); opacity: 0.68;
      transition: opacity 0.14s ease, background 0.14s ease, transform 0.14s ease;
    }
    #ledger-root[data-nav="drawer"] .lg-sidebar-item:hover { opacity: 1; background: var(--line); }
    #ledger-root[data-nav="drawer"] .lg-sidebar-item:active { transform: scale(0.98); }
    #ledger-root[data-nav="drawer"] .lg-sidebar-item.active {
      opacity: 1; font-weight: 700; background: linear-gradient(135deg, var(--moss), var(--moss-deep));
      color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    }
    #ledger-root[data-nav="drawer"] .lg-sidebar-group {
      margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line);
    }
    #ledger-root[data-nav="drawer"] .lg-sidebar-group:first-child { margin-top: 0; padding-top: 0; border-top: none; }

    /* Drawer mode never opens the "More" sheet where logout normally lives (that's only
       wired from the bottom-tab-bar's More button and the title-switch dropdown) — without
       this, drawer mode had no reachable logout control at all. Base hide rule lives outside
       this media query (see above) so desktop doesn't fall back to unstyled button chrome. */
    #ledger-root[data-nav="drawer"] .lg-drawer-logout {
      display: block; width: 100%; text-align: left; font-family: inherit;
      font-size: 15px; padding: 11px 14px; border-radius: 10px; color: var(--ink-soft);
      opacity: 0.68; background: none; border: none; cursor: pointer;
      transition: opacity 0.14s ease, background 0.14s ease;
    }
    #ledger-root[data-nav="drawer"] .lg-drawer-logout:hover { opacity: 1; background: var(--line); }

    #ledger-root[data-theme="aurora"][data-nav="drawer"] .lg-sidebar {
      background: rgba(20,23,15,0.86); border-right: 1px solid rgba(255,255,255,0.12);
      backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
    }
    #ledger-root[data-theme="aurora"][data-nav="drawer"] .lg-drawer-scrim {
      background: rgba(10,11,7,0.58); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    }
    #ledger-root[data-theme="aurora"][data-nav="drawer"] .lg-sidebar-item:hover { background: rgba(255,255,255,0.08); }
    #ledger-root[data-theme="aurora"][data-nav="drawer"] .lg-sidebar-item.active {
      background: rgba(255,255,255,0.14); box-shadow: none;
    }
    #ledger-root[data-theme="aurora"][data-nav="drawer"] .lg-sidebar-group { border-top-color: rgba(255,255,255,0.1); }
    #ledger-root[data-nav="drawer"] #lg-nav-menu-btn {
      display: inline-flex; align-items: center; justify-content: center;
      background: none; border: 1px solid var(--line); border-radius: 8px;
      width: 36px; height: 32px; font-size: 16px; color: var(--ink); cursor: pointer; flex-shrink: 0;
    }

    /* B — the header title itself is the switcher; opens the existing sheet. */
    #ledger-root[data-nav="title"] .lg-title { display: none; }
    #ledger-root[data-nav="title"] #lg-title-switch {
      display: inline-flex; align-items: center; gap: 5px; background: none; border: none;
      padding: 0; font-family: 'Fraunces', Georgia, serif; font-size: 24px; font-weight: 600;
      letter-spacing: -0.5px; color: var(--ink); cursor: pointer; text-align: left;
      max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    #ledger-root[data-theme="dense"][data-nav="title"] #lg-title-switch,
    #ledger-root[data-theme="vivid"][data-nav="title"] #lg-title-switch {
      font-family: 'Inter', -apple-system, sans-serif;
    }
  }

  /* ---- "Dense" theme --------------------------------------------------------
     An alternative skin selected in Settings, applied via data-theme on #ledger-root.
     The default "paper" theme is everything above this block and is untouched.

     This block sits AFTER the mobile media query on purpose: its selectors are
     id-scoped, so they'd out-specify the mobile rules wherever the two overlap.
     To keep that from silently undoing the mobile design, everything structural
     lives inside @media (min-width: 641px) below — desktop-only, so it can never
     collide — and only colour/typography changes are declared unconditionally. */

  #ledger-root[data-theme="dense"] {
    --paper: #F6F8FA;
    --ink: #24303C;
    --ink-soft: #68737D;
    --moss: #1F6FEB;
    --moss-deep: #1A7F5A;
    --rust: #C0392B;
    --line: #D8DEE4;
    --card: #FFFFFF;
    --chart-grid: #EAEEF2;
    background: var(--card);
  }
  #ledger-root[data-theme="dense"] .lg-title,
  #ledger-root[data-theme="dense"] .lg-card h3,
  #ledger-root[data-theme="dense"] .lg-tape-num,
  #ledger-root[data-theme="dense"] .lg-goals-column h3,
  #ledger-root[data-theme="dense"] .lg-modal-header h3 {
    font-family: 'Inter', -apple-system, sans-serif;
    letter-spacing: -0.2px;
  }
  #ledger-root[data-theme="dense"] .lg-card h3,
  #ledger-root[data-theme="dense"] .lg-goals-column h3 {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft);
  }
  #ledger-root[data-theme="dense"] .lg-tape-label {
    font-size: 10px; letter-spacing: 0.05em;
  }
  #ledger-root[data-theme="dense"] .lg-card,
  #ledger-root[data-theme="dense"] .lg-goals-column,
  #ledger-root[data-theme="dense"] .lg-goal-card,
  #ledger-root[data-theme="dense"] .lg-modal { border-radius: 4px; }
  #ledger-root[data-theme="dense"] .lg-form-row input,
  #ledger-root[data-theme="dense"] .lg-form-row select,
  #ledger-root[data-theme="dense"] .lg-currency,
  #ledger-root[data-theme="dense"] .lg-auth-input,
  #ledger-root[data-theme="dense"] .lg-submit,
  #ledger-root[data-theme="dense"] .lg-currency-toggle,
  #ledger-root[data-theme="dense"] .lg-tax-toggle { border-radius: 4px; background-color: var(--card); }
  #ledger-root[data-theme="dense"] .lg-submit { background: var(--moss); }
  #ledger-root[data-theme="dense"] .lg-submit:hover { background: #1657BC; }
  #ledger-root[data-theme="dense"] .lg-goal-progress-track,
  #ledger-root[data-theme="dense"] .lg-cat-bar-track { border-radius: 0; }
  #ledger-root[data-theme="dense"] .lg-goal-progress-fill,
  #ledger-root[data-theme="dense"] .lg-cat-bar-fill { background: var(--moss); }
  #ledger-root[data-theme="dense"] .lg-bottom-nav-item.active { color: var(--moss); }
  /* Zebra-striped rows in place of hairline separators — the table look. */
  #ledger-root[data-theme="dense"] .lg-entry { border-bottom: none; padding: 6px 8px; }
  #ledger-root[data-theme="dense"] .lg-entry:nth-child(even) { background: var(--paper); }
  #ledger-root[data-theme="dense"] .lg-entry-cat {
    background: none; border: none; border-radius: 0; padding: 0; font-size: 12px;
  }
  #ledger-root[data-theme="dense"] .lg-avgtable-head,
  #ledger-root[data-theme="dense"] .lg-ytd-quarter-head { border-bottom-color: var(--ink); }

  @media (min-width: 641px) {
    /* Sidebar becomes a horizontal tab strip under the header. */
    #ledger-root[data-theme="dense"] .lg-shell { flex-direction: column; gap: 0; }
    #ledger-root[data-theme="dense"] .lg-sidebar {
      width: 100%; flex-direction: row; flex-wrap: wrap; position: static;
      border-bottom: 2px solid var(--ink); margin-bottom: 16px;
    }
    #ledger-root[data-theme="dense"] .lg-sidebar-group { display: none; }
    #ledger-root[data-theme="dense"] .lg-sidebar-item {
      font-size: 12.5px; padding: 7px 11px; border-radius: 0;
    }
    #ledger-root[data-theme="dense"] .lg-sidebar-item.active {
      background: none; color: var(--moss); box-shadow: inset 0 -2px 0 var(--moss);
    }
    #ledger-root[data-theme="dense"] .lg-main { width: 100%; }

    #ledger-root[data-theme="dense"] .lg-card { padding: 14px 16px; margin-bottom: 12px; }
    #ledger-root[data-theme="dense"] .lg-tape {
      border-top: none; border-bottom: 1px solid var(--line); padding: 10px 0; margin: 14px 0 18px;
    }
    #ledger-root[data-theme="dense"] .lg-tape-item {
      text-align: left; border-right: none; padding-right: 24px; flex: 0 1 auto;
    }
    #ledger-root[data-theme="dense"] .lg-tape-num { font-size: 19px; }
  }

  /* ---- "Vivid" theme --------------------------------------------------------
     Soft, rounded, phone-app feel: violet accent, tinted page, borderless cards,
     an oversized hero number. Same discipline as the Dense block above — colour
     and radius unconditionally, anything structural behind min-width: 641px. */

  #ledger-root[data-theme="vivid"] {
    --paper: #F3F0FB;
    --ink: #2C2247;
    --ink-soft: #6E6690;
    --moss: #6C4FD8;
    --moss-deep: #227A5E;
    --rust: #B83E2A;
    --line: #E7E2F5;
    --card: #FFFFFF;
    --chart-grid: #EDE9F7;
  }
  #ledger-root[data-theme="vivid"] .lg-title,
  #ledger-root[data-theme="vivid"] .lg-card h3,
  #ledger-root[data-theme="vivid"] .lg-tape-num,
  #ledger-root[data-theme="vivid"] .lg-goals-column h3,
  #ledger-root[data-theme="vivid"] .lg-modal-header h3 {
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 600; letter-spacing: -0.6px;
  }
  #ledger-root[data-theme="vivid"] .lg-card,
  #ledger-root[data-theme="vivid"] .lg-goals-column {
    border: none; border-radius: 18px;
  }
  #ledger-root[data-theme="vivid"] .lg-goal-card {
    border: none; border-radius: 14px; background: var(--paper);
  }
  #ledger-root[data-theme="vivid"] .lg-modal { border: none; border-radius: 20px; }
  #ledger-root[data-theme="vivid"] .lg-form-row input,
  #ledger-root[data-theme="vivid"] .lg-form-row select,
  #ledger-root[data-theme="vivid"] .lg-currency,
  #ledger-root[data-theme="vivid"] .lg-auth-input {
    border-radius: 12px; border-color: var(--line); background: var(--paper);
  }
  #ledger-root[data-theme="vivid"] .lg-submit { border-radius: 12px; }
  #ledger-root[data-theme="vivid"] .lg-submit:hover { background: #5A3FC0; }
  #ledger-root[data-theme="vivid"] .lg-currency-toggle,
  #ledger-root[data-theme="vivid"] .lg-tax-toggle { border-radius: 20px; border-color: var(--line); }
  #ledger-root[data-theme="vivid"] .lg-sidebar-item { border-radius: 20px; }
  /* The tape's dashed receipt rules don't suit the soft look — drop them entirely. */
  #ledger-root[data-theme="vivid"] .lg-tape { border-top: none; border-bottom: none; }
  #ledger-root[data-theme="vivid"] .lg-tape-item { border-right: none; }
  #ledger-root[data-theme="vivid"] .lg-tape-item.primary .lg-tape-num { color: var(--moss); }
  #ledger-root[data-theme="vivid"] .lg-goal-progress-track,
  #ledger-root[data-theme="vivid"] .lg-cat-bar-track { height: 8px; border-radius: 5px; }
  #ledger-root[data-theme="vivid"] .lg-entry { border-bottom-color: var(--line); }
  #ledger-root[data-theme="vivid"] .lg-entry-cat { background: var(--paper); border-color: var(--line); }
  #ledger-root[data-theme="vivid"] .lg-bottom-nav-item.active { color: var(--moss); }

  @media (min-width: 641px) {
    #ledger-root[data-theme="vivid"] .lg-card { padding: 20px 22px; margin-bottom: 14px; }
    #ledger-root[data-theme="vivid"] .lg-tape {
      background: var(--card); border-radius: 18px; padding: 18px 20px; margin: 18px 0 16px;
    }
    #ledger-root[data-theme="vivid"] .lg-tape-item.primary { text-align: left; }
    #ledger-root[data-theme="vivid"] .lg-tape-item.primary .lg-tape-num { font-size: 34px; }
  }

  /* ---- "Night Desk" theme ----------------------------------------------------
     Private-banking statement register: warm cream stock, italic serif brand mark
     (kept, not dropped like Dense/Vivid do), a rust-brown accent instead of moss
     green. Sharper corners than Paper — a statement, not an app. */

  #ledger-root[data-theme="nightdesk"] {
    --paper: #F6F2EA; --ink: #2B2620; --ink-soft: #8A7F6A;
    --moss: #7A4B2E; --moss-deep: #5C3A22; --rust: #A2472A;
    --line: #E4DCCB; --card: #FBF8F2; --chart-grid: #EFE7D6;
  }
  #ledger-root[data-theme="nightdesk"] .lg-title { font-style: italic; font-weight: 500; }
  #ledger-root[data-theme="nightdesk"] .lg-card, #ledger-root[data-theme="nightdesk"] .lg-goals-column,
  #ledger-root[data-theme="nightdesk"] .lg-goal-card, #ledger-root[data-theme="nightdesk"] .lg-modal { border-radius: 3px; }
  #ledger-root[data-theme="nightdesk"] .lg-form-row input, #ledger-root[data-theme="nightdesk"] .lg-form-row select,
  #ledger-root[data-theme="nightdesk"] .lg-currency, #ledger-root[data-theme="nightdesk"] .lg-auth-input,
  #ledger-root[data-theme="nightdesk"] .lg-submit { border-radius: 3px; }
  #ledger-root[data-theme="nightdesk"] .lg-submit:hover { background: #5C3A22; }
  #ledger-root[data-theme="nightdesk"] .lg-goal-progress-track, #ledger-root[data-theme="nightdesk"] .lg-cat-bar-track { border-radius: 0; }
  #ledger-root[data-theme="nightdesk"] .lg-sidebar-item.active { border-radius: 3px; }
  #ledger-root[data-theme="nightdesk"] .lg-bottom-nav-item.active { color: var(--moss); }

  /* ---- "Terminal" theme -------------------------------------------------------
     Bloomberg-desk register: full monospace, sharp corners, printout-green ink on
     cream by default — flips to true phosphor green-on-black under Dark mode
     (see the data-dark block below), rather than being always-black itself. */

  #ledger-root[data-theme="terminal"] {
    --paper: #F5F3EC; --ink: #1B1F1B; --ink-soft: #5A6656;
    --moss: #3F6B3A; --moss-deep: #2C4A29; --rust: #A6432B;
    --line: #D8D3C2; --card: #FBFAF4; --chart-grid: #E7E2D2;
    font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  }
  #ledger-root[data-theme="terminal"] .lg-title, #ledger-root[data-theme="terminal"] .lg-card h3,
  #ledger-root[data-theme="terminal"] .lg-tape-num, #ledger-root[data-theme="terminal"] .lg-goals-column h3,
  #ledger-root[data-theme="terminal"] .lg-modal-header h3 {
    font-family: inherit; letter-spacing: -0.2px;
  }
  #ledger-root[data-theme="terminal"] .lg-card, #ledger-root[data-theme="terminal"] .lg-goals-column,
  #ledger-root[data-theme="terminal"] .lg-goal-card, #ledger-root[data-theme="terminal"] .lg-modal,
  #ledger-root[data-theme="terminal"] .lg-form-row input, #ledger-root[data-theme="terminal"] .lg-form-row select,
  #ledger-root[data-theme="terminal"] .lg-currency, #ledger-root[data-theme="terminal"] .lg-auth-input,
  #ledger-root[data-theme="terminal"] .lg-submit { border-radius: 0; }
  #ledger-root[data-theme="terminal"] .lg-submit:hover { background: #2C4A29; }
  #ledger-root[data-theme="terminal"] .lg-goal-progress-track, #ledger-root[data-theme="terminal"] .lg-cat-bar-track { border-radius: 0; }
  #ledger-root[data-theme="terminal"] .lg-entry:nth-child(even) { background: var(--paper); }
  #ledger-root[data-theme="terminal"] .lg-bottom-nav-item.active { color: var(--moss); }

  /* ---- "Aurora" theme -----------------------------------------------------
     Frosted glass over a deep violet ground — a committed dark world by design
     (like a real consumer-fintech night mode), independent of the Dark mode
     toggle. Cards are translucent with a blur so the gradient shows through. */

  #ledger-root[data-theme="aurora"] {
    --paper: #1C1F16; --ink: #EDEBFA; --ink-soft: #A79ADB;
    --moss: #6E5FD1; --moss-deep: #4A3F9E; --rust: #E0729A;
    --line: rgba(255,255,255,0.10); --card: #23261D; --chart-grid: #352C6E;
    background: transparent;
  }
  #ledger-root[data-theme="aurora"] .lg-title, #ledger-root[data-theme="aurora"] .lg-card h3,
  #ledger-root[data-theme="aurora"] .lg-tape-num, #ledger-root[data-theme="aurora"] .lg-goals-column h3,
  #ledger-root[data-theme="aurora"] .lg-modal-header h3 { font-family: 'Inter', -apple-system, sans-serif; font-weight: 700; }
  #ledger-root[data-theme="aurora"] .lg-card, #ledger-root[data-theme="aurora"] .lg-goals-column {
    border-radius: 18px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); backdrop-filter: blur(8px);
  }
  #ledger-root[data-theme="aurora"] .lg-goal-card { border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); }
  #ledger-root[data-theme="aurora"] .lg-back-to-top {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff;
  }
  #ledger-root[data-theme="aurora"] .lg-back-to-top:hover { background: rgba(255,255,255,0.16); }
  #ledger-root[data-theme="aurora"] .lg-modal {
    border-radius: 20px; background: rgba(36,29,87,0.78); border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  }
  #ledger-root[data-theme="aurora"] .lg-modal-overlay { background: rgba(10,8,28,0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
  #ledger-root[data-theme="aurora"] .lg-datepick-cell {
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12);
  }
  #ledger-root[data-theme="aurora"] .lg-datepick-cell:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); }
  #ledger-root[data-theme="aurora"] .lg-datepick-cell.active {
    background: rgba(255,255,255,0.14); border: 1px solid transparent; color: #fff;
  }
  #ledger-root[data-theme="aurora"] .lg-form-row input, #ledger-root[data-theme="aurora"] .lg-form-row select,
  #ledger-root[data-theme="aurora"] .lg-currency, #ledger-root[data-theme="aurora"] .lg-auth-input,
  #ledger-root[data-theme="aurora"] .lg-log-amount, #ledger-root[data-theme="aurora"] .lg-log-type,
  #ledger-root[data-theme="aurora"] .lg-log-chip {
    border-radius: 12px; background: rgba(255,255,255,0.06);
  }
  /* Inactive segmented-control buttons (skin picker, currency toggle, tax/status toggles)
     used var(--card) directly — a saturated violet hex, standing out against the otherwise
     neutral rgba(255,255,255,0.06) surfaces everywhere else in the skin. Neutralized to match. */
  #ledger-root[data-theme="aurora"] .lg-tax-toggle-btn,
  #ledger-root[data-theme="aurora"] .lg-currency-toggle button {
    background: rgba(255,255,255,0.06); color: var(--ink-soft);
  }
  #ledger-root[data-theme="aurora"] .lg-submit {
    border-radius: 12px; background: linear-gradient(135deg, var(--moss), var(--moss-deep));
    border: 1px solid transparent; background-clip: padding-box;
  }
  #ledger-root[data-theme="aurora"] .lg-submit:hover { background: var(--moss); }
  /* border-color:transparent alone (a 1px transparent border under a gradient background)
     is the classic trigger for WebKit's rounded-corner gradient seam bug — a hairline of
     whatever's behind the element shows through at the curve, reading as a stray colored
     line down one edge on iOS Safari specifically (not reproducible in Chrome/desktop).
     background-clip: padding-box confines the gradient inside the border edge and stops it. */
  #ledger-root[data-theme="aurora"] .lg-log-chip.active {
    background: rgba(255,255,255,0.14); border: 1px solid transparent; color: #fff;
  }
  #ledger-root[data-theme="aurora"] .lg-log-type.active {
    background: rgba(255,255,255,0.14); border: 1px solid transparent; color: #fff;
  }
  #ledger-root[data-theme="aurora"] .lg-goal-progress-track, #ledger-root[data-theme="aurora"] .lg-cat-bar-track { height: 8px; border-radius: 5px; }
  #ledger-root[data-theme="aurora"] .lg-goal-progress-fill, #ledger-root[data-theme="aurora"] .lg-cat-bar-fill {
    background: linear-gradient(90deg, var(--moss), #4FD1C5);
  }
  #ledger-root[data-theme="aurora"] .lg-sidebar-item.active {
    background: rgba(255,255,255,0.14); border: 1px solid transparent; border-radius: 20px; color: #fff;
  }
  #ledger-root[data-theme="aurora"] .lg-bottom-nav-item.active { color: var(--moss); }
  #ledger-root[data-theme="aurora"] input, #ledger-root[data-theme="aurora"] select { color-scheme: dark; }
  /* Unified "selected" language for every segmented-control pill (currency, dark mode,
     theme picker, nav mode, tax toggle, sidebar, datepicker, log chips, etc.) — was a
     violet tint that competed with .lg-submit's own violet gradient; now a neutral
     recessed-track highlight (translucent white, no border/glow) so "selected" reads as
     a lit-up state on the dark ground rather than another shade of the brand color, and
     .lg-submit stays the only actually-colored/gradient button in the skin. */
  #ledger-root[data-theme="aurora"] .lg-currency-toggle button.active,
  #ledger-root[data-theme="aurora"] .lg-tax-toggle-btn.active {
    background: rgba(255,255,255,0.14); color: #fff;
  }
  #ledger-root[data-theme="aurora"] #lg-privacy-toggle.active {
    background: rgba(255,255,255,0.14); border-color: transparent;
  }

  /* ---- "Ledger/BOLD" theme ------------------------------------------------
     Neo-brutalist: thick black rule instead of a hairline, flat poster colour,
     zero radius, zero shadow. --line doubles as the border stroke here. */

  #ledger-root[data-theme="bold"] {
    --paper: #FFF8E8; --ink: #14140F; --ink-soft: #4A4738;
    --moss: #FF5D3A; --moss-deep: #C43F22; --rust: #B0301B;
    --line: #14140F; --card: #FFF8E8; --chart-grid: #EDE4C8;
  }
  #ledger-root[data-theme="bold"] .lg-title, #ledger-root[data-theme="bold"] .lg-card h3,
  #ledger-root[data-theme="bold"] .lg-tape-num, #ledger-root[data-theme="bold"] .lg-goals-column h3,
  #ledger-root[data-theme="bold"] .lg-modal-header h3 { font-family: 'Inter', -apple-system, sans-serif; font-weight: 800; letter-spacing: -0.3px; }
  #ledger-root[data-theme="bold"] .lg-card, #ledger-root[data-theme="bold"] .lg-goals-column,
  #ledger-root[data-theme="bold"] .lg-goal-card, #ledger-root[data-theme="bold"] .lg-modal {
    border-radius: 0; border: 2px solid var(--line);
  }
  #ledger-root[data-theme="bold"] .lg-form-row input, #ledger-root[data-theme="bold"] .lg-form-row select,
  #ledger-root[data-theme="bold"] .lg-currency, #ledger-root[data-theme="bold"] .lg-auth-input {
    border-radius: 0; border: 2px solid var(--line);
  }
  #ledger-root[data-theme="bold"] .lg-submit { border-radius: 0; font-weight: 800; }
  #ledger-root[data-theme="bold"] .lg-submit:hover { background: #C43F22; }
  #ledger-root[data-theme="bold"] .lg-goal-progress-track, #ledger-root[data-theme="bold"] .lg-cat-bar-track { border-radius: 0; border: 2px solid var(--line); }
  #ledger-root[data-theme="bold"] .lg-sidebar-item.active { border-radius: 0; }
  #ledger-root[data-theme="bold"] .lg-bottom-nav-item.active { color: var(--moss); }
  #ledger-root[data-theme="bold"] .lg-entry-cat { border-radius: 0; }

  /* ---- "Vector" theme -----------------------------------------------------
     HUD / command-deck register: deep navy, cyan hairlines, tracked uppercase
     headings. Committed dark by design, same as Aurora — see the note there. */

  #ledger-root[data-theme="vector"] {
    --paper: #0B131D; --ink: #C6E4F2; --ink-soft: #4E7C93;
    --moss: #4FD1E8; --moss-deep: #2A8DA3; --rust: #F26E6E;
    --line: #163041; --card: #0F1B27; --chart-grid: #163041;
  }
  #ledger-root[data-theme="vector"] .lg-title, #ledger-root[data-theme="vector"] .lg-card h3,
  #ledger-root[data-theme="vector"] .lg-tape-num, #ledger-root[data-theme="vector"] .lg-goals-column h3,
  #ledger-root[data-theme="vector"] .lg-modal-header h3 {
    font-family: "SF Mono", ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: #EAF6FB;
  }
  #ledger-root[data-theme="vector"] .lg-card, #ledger-root[data-theme="vector"] .lg-goals-column,
  #ledger-root[data-theme="vector"] .lg-goal-card, #ledger-root[data-theme="vector"] .lg-modal { border-radius: 2px; }
  #ledger-root[data-theme="vector"] .lg-form-row input, #ledger-root[data-theme="vector"] .lg-form-row select,
  #ledger-root[data-theme="vector"] .lg-currency, #ledger-root[data-theme="vector"] .lg-auth-input,
  #ledger-root[data-theme="vector"] .lg-submit { border-radius: 2px; }
  #ledger-root[data-theme="vector"] .lg-submit { text-transform: uppercase; letter-spacing: 0.06em; }
  #ledger-root[data-theme="vector"] .lg-submit:hover { background: #2A8DA3; }
  #ledger-root[data-theme="vector"] .lg-goal-progress-track, #ledger-root[data-theme="vector"] .lg-cat-bar-track { border-radius: 0; }
  #ledger-root[data-theme="vector"] .lg-goal-progress-fill, #ledger-root[data-theme="vector"] .lg-cat-bar-fill { box-shadow: 0 0 6px rgba(79,209,232,0.6); }
  #ledger-root[data-theme="vector"] .lg-sidebar-item.active { border-radius: 2px; }
  #ledger-root[data-theme="vector"] .lg-bottom-nav-item.active { color: var(--moss); }
  #ledger-root[data-theme="vector"] input, #ledger-root[data-theme="vector"] select { color-scheme: dark; }

  /* ---- Background effects (Settings → Appearance → Background effects) ----------------
     Purely decorative, gated behind [data-fx="on"] so it's toggle-able independent of the
     skin itself. Fixed + pointer-events:none so it never intercepts clicks or shifts layout;
     solid card backgrounds naturally occlude it everywhere except the page's own gutters,
     which is the intended "atmosphere in the margins" effect. Off by default has no CSS
     footprint at all — data-fx="off" simply matches nothing below. */

  html[data-theme="vector"][data-fx="on"] {
    background-image:
      repeating-linear-gradient(0deg, rgba(79,209,232,0.05) 0px, rgba(79,209,232,0.05) 1px, transparent 1px, transparent 28px),
      repeating-linear-gradient(90deg, rgba(79,209,232,0.05) 0px, rgba(79,209,232,0.05) 1px, transparent 1px, transparent 28px);
  }
  #ledger-root[data-theme="vector"][data-fx="on"] {
    background-image:
      repeating-linear-gradient(0deg, rgba(79,209,232,0.05) 0px, rgba(79,209,232,0.05) 1px, transparent 1px, transparent 28px),
      repeating-linear-gradient(90deg, rgba(79,209,232,0.05) 0px, rgba(79,209,232,0.05) 1px, transparent 1px, transparent 28px);
    background-attachment: fixed;
  }

  #ledger-root[data-theme="aurora"][data-fx="on"]::before,
  #ledger-root[data-theme="aurora"][data-fx="on"]::after {
    content: ""; position: fixed; border-radius: 50%; filter: blur(70px);
    pointer-events: none; z-index: 0;
  }
  #ledger-root[data-theme="aurora"][data-fx="on"]::before {
    width: 380px; height: 380px; background: rgba(124,108,240,0.35);
    top: -100px; left: 8%; animation: lg-aurora-drift-a 24s ease-in-out infinite alternate;
  }
  #ledger-root[data-theme="aurora"][data-fx="on"]::after {
    width: 320px; height: 320px; background: rgba(79,209,197,0.28);
    bottom: -80px; right: 6%; animation: lg-aurora-drift-b 28s ease-in-out infinite alternate;
  }
  @keyframes lg-aurora-drift-a { from { transform: translate(0, 0); } to { transform: translate(50px, 35px); } }
  @keyframes lg-aurora-drift-b { from { transform: translate(0, 0); } to { transform: translate(-35px, -30px); } }
  @media (prefers-reduced-motion: reduce) {
    #ledger-root[data-theme="aurora"][data-fx="on"]::before,
    #ledger-root[data-theme="aurora"][data-fx="on"]::after { animation: none; }
  }