:root {
  /* Light theme — warm "off-white + deep teal" system shared with the
     marketing site (control-plane/static/site.css). Keep hues in sync. */
  --bg: #faf7f2;
  --panel: #ffffff;
  --ink: #1f2d38;
  --muted: #5d6b76;
  --line: rgba(31, 45, 56, 0.13);
  --accent: #0f8a8f;
  --accent-strong: #0b6e72;
  --accent-soft: rgba(15, 138, 143, 0.10);
  --accent-soft-strong: rgba(15, 138, 143, 0.18);
  --warn: #b95f00;
  --danger: #c84f42;
  --ok: #2e9960;
  --radius: 10px;
  --font-family-base: "Inter", "Avenir Next", "Segoe UI", sans-serif;
  --font-size-panel-title: clamp(1.22rem, 2.2vw, 1.8rem);
  --font-size-panel-subtitle: 0.92rem;
  --font-size-section-title: 1rem;
  --font-size-subsection-title: 0.86rem;

  /* Derived surface / form / table tokens.
     Each token has both a light default here and a dark override below, so
     component rules can use the token name and theme-switch automatically. */
  --surface-elevated: var(--panel);       /* dark: slightly lifted vs --panel */
  --surface-hover: rgba(31, 45, 56, 0.05);
  --tooltip-bg: #243641;
  --tooltip-fg: #faf7f2;
  --tooltip-border: rgba(122, 200, 198, 0.35);
  --row-zebra-even: #f5fafa;
  --text-strong: #41525d;        /* field/section titles */
  --input-bg: #ffffff;
  --input-border: var(--line);
  --input-placeholder: #a0a8ad;
  --input-focus-border: var(--accent);
  --input-focus-ring: rgba(15, 138, 143, 0.15);
  --table-border: rgba(31, 45, 56, 0.08);
  --table-header-bg: #ecf6f6;
  --table-header-fg: #4c5a64;
  --table-sort-indicator: #9aa5ac;
  --table-sort-indicator-active: #1f2d38;
  --chart-grid: #e7eeee;
  --chart-line: var(--accent);
  --chart-axis-label: #75828c;
  --donut-track: #e7eeee;
  /* Success surfaces use the teal accent — green is reserved for positive amounts. */
  --status-ok-bg: #e6f4f4;
  --status-ok-border: #bcdedf;
  --status-ok-fg: #0b6e72;
  --status-err-bg: #fdf0ee;
  --status-err-border: #f1c8c2;
  --status-err-fg: #8c3a31;
  /* Soft button / chip surfaces (generic buttons, .icon-btn, chips).
     Single teal tint scale (tint-1 surface, tint-2 hover, tint-3 primary,
     one teal line) derived from --accent so no surface drifts off-hue. */
  --btn-bg: #ecf6f6;
  --btn-border: #bcddde;
  --btn-fg: #2c3c47;
  --btn-hover-bg: #ddefef;
  --btn-primary-bg: #d4eaeb;
  --btn-primary-border: #aed4d5;
  --warn-soft-bg: #fdf1e3;
  --warn-soft-border: #f0d2ab;
  --warn-soft-fg: #92560a;
  --danger-soft-bg: #fceae7;
  --danger-soft-border: #f0c6bf;
  --danger-soft-fg: #a8402f;
  /* Filter bar surfaces (toggle pills, multi-select triggers, active chips). */
  --filter-surface-bg: #ffffff;
  --filter-surface-fg: #2c3c47;
  --filter-chip-bg: #ddefef;
  --filter-chip-border: #bcddde;
  --filter-chip-fg: #1f444a;
  /* Toggle switches (theme switch, recurring-buy enable). */
  --toggle-track: #cdd8d8;
  --toggle-knob: #ffffff;
  /* Tinted review-card surface (sync/import review panels). */
  --surface-accent: #ecf6f6;
  --toast-bg: rgba(31, 45, 56, 0.94);
  --toast-fg: #ffffff;
  --toast-shadow: 0 10px 24px rgba(31, 45, 56, 0.22);
  --shadow-panel: 0 10px 28px -14px rgba(31, 45, 56, 0.18);
}

:root[data-theme="dark"] {
  /* Dark theme — brand dark tile (#0d1117, see brand/BRAND.md) with the
     bright brand teal (#2ec4c9) as accent. */
  --bg: #0d1117;
  --panel: #161f28;
  --ink: #e6eef7;
  --muted: #94a8b8;
  --line: #2b3947;
  --accent: #2ec4c9;
  --accent-strong: #4ed5d9;
  --accent-soft: rgba(46, 196, 201, 0.12);
  --accent-soft-strong: rgba(46, 196, 201, 0.28);
  --warn: #f59e0b;
  --danger: #f87171;
  --ok: #34d399;

  --surface-elevated: #1c2731;
  --surface-hover: #273543;
  --tooltip-bg: #0b1219;
  --tooltip-fg: #e6eef7;
  --tooltip-border: rgba(46, 196, 201, 0.4);
  --row-zebra-even: #1a242e;
  --text-strong: #d3e1ec;
  --input-bg: #0f161e;
  --input-border: #344455;
  --input-placeholder: #67798a;
  --input-focus-border: #2ec4c9;
  --input-focus-ring: rgba(46, 196, 201, 0.22);
  --table-border: #222e3a;
  --table-header-bg: #1c2731;
  --table-header-fg: #b3c4d3;
  --table-sort-indicator: #67798a;
  --table-sort-indicator-active: #d3e1ec;
  --chart-grid: #28343f;
  --chart-line: #38c0c8;
  --chart-axis-label: #94a8b8;
  --donut-track: #28343f;
  --status-ok-bg: #0e3233;
  --status-ok-border: #1d6a6d;
  --status-ok-fg: #b0eeef;
  --status-err-bg: #3a1414;
  --status-err-border: #8a3a36;
  --status-err-fg: #f8c6c0;
  --btn-bg: rgba(46, 196, 201, 0.08);
  --btn-border: rgba(46, 196, 201, 0.24);
  --btn-fg: #cfe0f0;
  --btn-hover-bg: rgba(46, 196, 201, 0.15);
  --btn-primary-bg: rgba(46, 196, 201, 0.22);
  --btn-primary-border: rgba(46, 196, 201, 0.34);
  --warn-soft-bg: rgba(245, 158, 11, 0.12);
  --warn-soft-border: rgba(245, 158, 11, 0.30);
  --warn-soft-fg: #f0c280;
  --danger-soft-bg: rgba(248, 113, 113, 0.12);
  --danger-soft-border: rgba(248, 113, 113, 0.30);
  --danger-soft-fg: #f6a8a3;
  --filter-surface-bg: var(--surface-elevated);
  --filter-surface-fg: var(--ink);
  --filter-chip-bg: rgba(46, 196, 201, 0.15);
  --filter-chip-border: rgba(46, 196, 201, 0.28);
  --filter-chip-fg: var(--ink);
  --toggle-track: #344455;
  --toggle-knob: #e6eef7;
  --surface-accent: #18242a;
  --toast-bg: rgba(222, 236, 246, 0.96);
  --toast-fg: #1f2d38;
  --toast-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  --shadow-panel: 0 8px 20px rgba(0, 0, 0, 0.45);
}

/* ---- Dark mode: a small set of targeted overrides for things the tokens
   above can't fully express (filters, chart strokes, generic button bg). ---- */
:root[data-theme="dark"] body { color-scheme: dark; }

:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
}

:root[data-theme="dark"] .app-modal {
  background: rgba(0, 0, 0, 0.6);
}

:root[data-theme="dark"] .tab-btn:hover {
  background: rgba(46, 196, 201, 0.1);
}
:root[data-theme="dark"] .tab-btn.active {
  background: rgba(46, 196, 201, 0.16);
}

:root[data-theme="dark"] .status-action-btn {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
}

/* Buttons that draw their own light surfaces — keep them readable. */
:root[data-theme="dark"] button:not(.primary):not(.danger):not(.tab-btn):not(.trade-subtab):not(.taxonomy-kind-btn):not(.import-tab-btn):not(.icon-btn):not(.status-action-btn):not(.sidebar-pin):not(.split-arrow):not(.split-dropdown button):not(.subnav-item):not(.balance-table-link):not(.net-worth-range-chip):not(.custom-select-option):not(.link-btn) {
  background: var(--surface-elevated);
  color: var(--ink);
  border-color: var(--input-border);
}

:root[data-theme="dark"] .chart-card {
  border-color: var(--line);
}
:root[data-theme="dark"] .chart-title {
  color: var(--text-strong);
}

/* Filter bar icon button — flat surface look, distinct from row icon chips. */
:root[data-theme="dark"] .filter-bar .icon-btn-filter {
  background: var(--surface-elevated);
  border-color: var(--input-border);
  color: var(--ink);
}
:root[data-theme="dark"] .filter-bar .icon-btn-filter:hover {
  background: var(--surface-hover);
}

/* Icon button hovers — light mode has no hover bg change, dark does. */
:root[data-theme="dark"] .icon-btn:hover {
  background: rgba(46, 196, 201, 0.22);
}
:root[data-theme="dark"] .icon-btn.primary:hover {
  background: rgba(46, 196, 201, 0.22);
}
/* Save-trade split arrow shares the tinted surface with the Save button it
   sits next to, so the joined control reads as a single pill. */
:root[data-theme="dark"] .split-arrow.primary {
  background: rgba(46, 196, 201, 0.14);
  border-color: rgba(46, 196, 201, 0.30);
  border-left-color: rgba(46, 196, 201, 0.30);
  color: var(--accent-strong);
}
:root[data-theme="dark"] .split-arrow.primary:hover {
  background: rgba(46, 196, 201, 0.22);
}
:root[data-theme="dark"] .icon-btn.danger:hover {
  background: rgba(248, 113, 113, 0.20);
}
:root[data-theme="dark"] .icon-btn.warn:hover {
  background: rgba(245, 158, 11, 0.20);
}

/* Primary buttons: deeper teal in dark mode so white text reads cleanly. */
:root[data-theme="dark"] button.primary {
  background: #0f8a8f;
  border-color: #0b6e72;
  color: #ffffff;
}
:root[data-theme="dark"] button.primary:hover {
  filter: brightness(1.12);
}

/* Generic button hover lift — replace the light cool-blue shadow with a deep
   shadow that actually shows on dark surfaces. */
:root[data-theme="dark"] button:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}

/* ---- Theme toggle (Appearance subtab) ---- */
.appearance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}
.appearance-row-text { display: flex; flex-direction: column; gap: 4px; }
.account-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.account-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  text-transform: uppercase;
}
/* Dark accent is the bright brand teal — use the brand's dark ink on it. */
:root[data-theme="dark"] .account-avatar {
  color: #04282a;
}
.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.account-avatar:has(> svg) {
  background: var(--surface-elevated);
  padding: 6px;
}
.account-avatar > svg {
  width: 100%;
  height: 100%;
  display: block;
}
.appearance-row-title { font-size: 0.92rem; font-weight: 580; color: var(--text-strong); }
.appearance-row-help { font-size: var(--font-size-panel-subtitle); color: var(--muted); }

/* Allocation targets panel (8.3) */
.band-field { display: inline-flex; align-items: center; gap: 6px; }
.band-field input { width: 56px; text-align: right; }

/* The mix is only a few short rows — keep it compact rather than letting it
   stretch the full settings width. */
.alloc-panel { max-width: 340px; }
#alloc-targets-table { width: 100%; }
#alloc-targets-table th {
  position: static;
  background: transparent;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-weight: 600;
  padding: 0 0 6px;
}
#alloc-targets-table td {
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
#alloc-targets-table tbody tr { background: transparent; }
#alloc-targets-table tr:last-child td { border-bottom: none; }
/* Asset class (left) · Target input (right) · Now (right). */
#alloc-targets-table th:nth-child(2),
#alloc-targets-table td:nth-child(2) { text-align: right; width: 92px; }
#alloc-targets-table th:nth-child(3),
#alloc-targets-table td:nth-child(3) { text-align: right; width: 50px; white-space: nowrap; color: var(--muted); }

.alloc-input { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.alloc-input input {
  width: 46px;
  text-align: right;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.alloc-input input:focus { outline: none; border-color: var(--accent); }

.alloc-total-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
}
#alloc-total.invalid { color: var(--danger); }
.theme-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex: 0 0 auto;
}
.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.theme-switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--toggle-track);
  border-radius: 999px;
  transition: background 0.18s ease;
}
.theme-switch-slider::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px;
  background: var(--toggle-knob);
  border-radius: 50%;
  transition: transform 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.theme-switch input:checked + .theme-switch-slider {
  background: var(--accent);
}
.theme-switch input:checked + .theme-switch-slider::before {
  transform: translateX(20px);
}
.theme-switch input:focus-visible + .theme-switch-slider {
  box-shadow: 0 0 0 3px rgba(46, 196, 201, 0.35);
}

* {
  box-sizing: border-box;
}

html,
body {
  /* Off-screen-right elements (e.g. hidden hover tooltips on the right-edge
     filter buttons, which stay laid out while invisible) must not give the
     page a horizontal scrollbar. `clip` — not `hidden` — leaves overflow-y
     visible so position:sticky (sidebar, table headers) keeps working. Both
     html and body need it: setting it on one alone propagates the other's
     overflow to the viewport in Chromium. */
  overflow-x: clip;
}

html {
  /* Reserve space for the vertical scrollbar so switching between short
     and long tabs (e.g. inside Help) doesn't snap content horizontally
     when the scrollbar appears/disappears. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  background-color: var(--bg);
  /* Same gentle warm wash as the marketing site, toned down for data UI. */
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(246, 231, 216, 0.16) 42%, rgba(255, 255, 255, 0) 72%);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.45;
}

:root[data-theme="dark"] body {
  background-image: linear-gradient(135deg, rgba(46, 196, 201, 0.05), rgba(13, 17, 23, 0) 48%);
}

.shell {
  width: min(1600px, calc(100vw - 64px));
  margin: 24px auto 40px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  gap: 16px;
}

.sidebar {
  width: 64px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  transition: width 0.22s ease;
  overflow: hidden;
  position: sticky;
  top: 24px;
  align-self: start;
  max-height: calc(100vh - 48px);
}

.sidebar.is-wide {
  width: 220px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
  min-height: 32px;
}

.sidebar-logo {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: block;
  /* Light theme uses the K tile in the app's accessible accent teal so the mark
     matches the surrounding UI; dark theme swaps to the canonical brand mark. */
  background: center / contain no-repeat url("/krosos-k-light.svg");
}
:root[data-theme="dark"] .sidebar-logo {
  background-image: url("/krosos-k-mark.svg");
}

.sidebar-title {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.sidebar.is-wide .sidebar-title {
  opacity: 1;
}

.tabs {
  list-style: none;
  margin: 0;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-spacer {
  flex: 1 1 auto;
}

.tab-btn[hidden] {
  display: none;
}
.tab-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius);
  padding: 9px 12px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: var(--font-family-base);
  position: relative;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
}

.tab-btn .tab-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tab-btn .tab-label {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.sidebar.is-wide .tab-btn .tab-label {
  opacity: 1;
}

.tab-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tab-btn:hover {
  color: var(--ink);
  background: rgba(15, 138, 143, 0.06);
}

.tab-btn.active {
  color: var(--accent);
  font-weight: 600;
  background: rgba(15, 138, 143, 0.1);
}

.tab-btn.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.sidebar-pin {
  margin: 10px 8px 0;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 0;
  font-size: 0.82rem;
  font-family: var(--font-family-base);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-pin:hover {
  color: var(--ink);
}

.sidebar-pin .pin-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.sidebar.pinned .sidebar-pin {
  color: var(--accent);
}

.sidebar.pinned .sidebar-pin .pin-icon {
  transform: rotate(45deg);
}

.sidebar-pin .pin-label {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.sidebar.is-wide .sidebar-pin .pin-label {
  opacity: 1;
}

.content-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tab-panel {
  display: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-panel);
}

.tab-panel.active {
  display: block;
  animation: reveal 0.1s ease;
}

@keyframes reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}

.field {
  grid-column: span 3;
  min-width: 0;
}

.field.full {
  grid-column: span 12;
}

.field.half {
  grid-column: span 6;
}

/* Add-holding modal: 3 fields per row (the full-width type toggle stays full). */
#holding-form .field:not(.full) {
  grid-column: span 4;
}

.field label {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 500;
}

.field-title {
  margin-top: 6px;
  font-size: var(--font-size-subsection-title);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-strong);
}

input,
select,
textarea,
button {
  font: inherit;
}

input,
select,
textarea {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--input-border);
  padding: 8px 10px;
  background: var(--input-bg);
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.3;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Checkboxes shouldn't inherit the text-input box above; render a custom
   rounded box (app accent when checked) app-wide for consistency. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 1px solid var(--input-border);
  border-radius: 5px;
  background: var(--input-bg);
  cursor: pointer;
  position: relative;
  box-shadow: none;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 3px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}
input[type="radio"] {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  accent-color: var(--accent);
  cursor: pointer;
}

.amount-input-wrap {
  position: relative;
  display: block;
}
.amount-input-wrap input {
  padding-right: 46px;
}
.amount-all-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 3px 6px;
  width: auto;
  min-height: 0;
}
.amount-all-btn:hover {
  text-decoration: underline;
  transform: translateY(-50%);
  box-shadow: none;
}

.datepicker-wrap {
  position: relative;
  display: block;
}
.datepicker-wrap input.datepicker-input {
  cursor: pointer;
  padding-right: 32px;
  background: var(--input-bg);
}
.datepicker-wrap input.datepicker-input:read-only {
  background: var(--input-bg);
}
.datepicker-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.datepicker-toggle:hover {
  background: rgba(15, 138, 143, 0.1);
  color: var(--accent);
  transform: translateY(-50%);
  box-shadow: none;
}
.datepicker-toggle svg { width: 14px; height: 14px; }

.datepicker-popover {
  position: absolute;
  z-index: 1300;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(31, 45, 56, 0.14);
  padding: 8px;
  font-family: var(--font-family-base);
  color: var(--ink);
  box-sizing: border-box;
}
.datepicker-popover[hidden] { display: none; }
.datepicker-popover button {
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.datepicker-popover button:hover {
  transform: none;
  box-shadow: none;
}
.dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  gap: 2px;
}
.dp-nav {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dp-nav:hover { background: rgba(15, 138, 143, 0.1); color: var(--accent); }
.dp-nav svg { width: 12px; height: 12px; }
.dp-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  text-align: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}
.dp-title:hover { background: rgba(15, 138, 143, 0.08); }
.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.dp-weekday {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  padding: 2px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dp-day {
  height: 26px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 400;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.dp-day:hover { background: var(--accent-soft); }
.dp-day.dp-outside { color: var(--muted); opacity: 0.45; }
.dp-day.dp-today {
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent);
}
.dp-day.dp-selected {
  background: var(--accent-soft-strong);
  color: var(--accent-strong);
}
.dp-day.dp-selected:hover { background: var(--accent-soft-strong); }
.dp-month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.dp-month-cell, .dp-year-cell {
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 400;
  font-family: inherit;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.dp-month-cell:hover, .dp-year-cell:hover { background: rgba(15, 138, 143, 0.12); }
.dp-month-cell.dp-selected, .dp-year-cell.dp-selected {
  background: var(--accent-soft-strong);
  color: var(--accent-strong);
}
.dp-footer {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.dp-footer button {
  background: transparent;
  border: 0;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background-color 0.12s ease;
}
.dp-footer button:hover { background: rgba(15, 138, 143, 0.1); }

.datepicker-wrap.has-prefix {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--input-bg);
  min-height: 40px;
  padding: 8px 36px 8px 12px;
  cursor: pointer;
  position: relative;
  gap: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.datepicker-wrap.has-prefix:focus-within {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}
.datepicker-prefix {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.92rem;
  white-space: nowrap;
  margin-right: 4px;
}
.datepicker-wrap.has-prefix input.datepicker-input {
  border: none;
  background: transparent;
  padding: 0;
  min-height: 0;
  height: auto;
  box-shadow: none;
  flex: 1;
  min-width: 0;
  color: var(--ink);
  font-weight: 500;
}
.datepicker-wrap.has-prefix input.datepicker-input:read-only {
  background: transparent;
}
.datepicker-wrap.has-prefix input.datepicker-input:focus {
  border: none;
  box-shadow: none;
  outline: none;
}
:root[data-theme="dark"] .datepicker-wrap.has-prefix {
  background: var(--surface-elevated);
}
:root[data-theme="dark"] .datepicker-wrap.has-prefix input.datepicker-input {
  background: transparent;
}
.filter-bar .field:has(input[data-prefix]) > label[for] {
  display: none;
}
:root[data-theme="dark"] .datepicker-popover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] .dp-day:hover,
:root[data-theme="dark"] .dp-month-cell:hover,
:root[data-theme="dark"] .dp-year-cell:hover,
:root[data-theme="dark"] .dp-nav:hover,
:root[data-theme="dark"] .dp-title:hover,
:root[data-theme="dark"] .dp-footer button:hover,
:root[data-theme="dark"] .datepicker-toggle:hover {
  background: rgba(46, 196, 201, 0.18);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}

input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder);
  opacity: 0.7;
  font-weight: 400;
}

select[multiple] {
  min-height: 110px;
}

select.custom-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  padding: 0;
  margin: 0;
  border: 0;
}

.custom-select-wrap {
  position: relative;
}
.custom-select-trigger {
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--ink);
  font-family: var(--font-family-base);
  font-size: 0.92rem;
  line-height: 1.3;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.custom-select-trigger:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--input-placeholder);
}
.custom-select-trigger[aria-expanded="true"],
.custom-select-trigger:focus-visible {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}
.custom-select-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.custom-select-label.is-placeholder {
  color: var(--muted);
  opacity: 0.7;
}

/* Combobox trigger input — leaves room for the caret and shows a typed query. */
.custom-select-input {
  display: block;
  padding-right: 30px;
  cursor: pointer;
  text-overflow: ellipsis;
}
.custom-select-input:focus { cursor: text; }
.custom-select-input::placeholder { color: var(--input-placeholder); opacity: 1; }
.custom-select-caret {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  pointer-events: none;
  color: var(--muted);
}
.custom-select-caret svg { width: 16px; height: 16px; }
.custom-select-wrap.is-compact .custom-select-caret { right: 7px; }
.custom-select-empty {
  padding: 8px 10px;
  color: var(--muted);
  font-size: 0.85rem;
}

.custom-select-wrap.is-compact .custom-select-trigger {
  padding: 5px 8px;
  min-height: 32px;
}

.custom-select-panel {
  position: absolute;
  z-index: 1300;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(31, 45, 56, 0.14);
  padding: 4px;
  font-family: var(--font-family-base);
  color: var(--ink);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: 280px;
}
.custom-select-search {
  flex-shrink: 0;
  margin-bottom: 4px;
  padding: 5px 8px;
  font-size: 0.85rem;
  border: 1px solid var(--input-border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--input-bg);
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}
.custom-select-search:focus {
  outline: none;
  border-color: var(--input-focus-border);
}
.custom-select-list {
  overflow-y: auto;
  flex: 1 1 auto;
}
.custom-select-option {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  min-height: 0;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 400;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
  box-shadow: none;
}
.custom-select-option + .custom-select-option {
  margin-top: 1px;
}
.custom-select-option:hover {
  background: var(--accent-soft);
  transform: none;
  box-shadow: none;
}
.custom-select-option.is-selected {
  background: var(--accent-soft-strong);
  color: var(--accent-strong);
}
.custom-select-option.is-selected:hover {
  background: var(--accent-soft-strong);
}

:root[data-theme="dark"] .custom-select-trigger {
  background: var(--input-bg);
}
:root[data-theme="dark"] .custom-select-option:hover {
  background: rgba(46, 196, 201, 0.18);
}

select.filter-native-multi {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.quick-line-search {
  margin-bottom: 6px;
}

textarea {
  min-height: 130px;
  resize: vertical;
}

.inline {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}

.inline.tight {
  margin-top: 4px;
  gap: 8px;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 12px;
  align-items: end;
  gap: 10px;
}

.filter-bar .field {
  /* Dimension dropdowns divide the leftover space evenly; their count varies
     (e.g. the account filter appears only in business mode). */
  flex: 1 1 120px;
  min-width: 0;
}

.filter-bar .field:has(select.js-filter-multi) > label[for] {
  display: none;
}

.filter-bar .field.filter-toggle-field > label[for]:not(.filter-toggle) {
  display: none;
}

.filter-bar .field.filter-reset-field > label[for] {
  display: none;
}

.filter-toggle span.filter-toggle-dimension {
  color: var(--muted);
  font-weight: 500;
  margin-right: 4px;
}

.filter-bar .field.filter-toggle-field label.filter-toggle {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

.multi-filter-trigger-dimension {
  color: var(--muted);
  font-weight: 500;
  margin-right: 4px;
}

.filter-bar .field.filter-toggle-field {
  grid-column: auto;
}

.filter-bar .field.filter-reset-field {
  /* Fixed-width cluster pinned to the end of the bar. */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.filter-bar .field.filter-reset-field label {
  margin-bottom: 4px;
}

.filter-toggle {
  min-height: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--input-border);
  background: var(--filter-surface-bg);
  color: var(--filter-surface-fg);
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  padding: 8px 12px;
  cursor: pointer;
  width: 100%;
  box-shadow: none;
  transform: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  margin-bottom: 0;
  position: relative;
}

.filter-bar .field label.filter-toggle {
  margin-bottom: 0;
  font-size: inherit;
  color: inherit;
  font-weight: 500;
}

.filter-toggle:hover {
  box-shadow: 0 4px 10px rgba(31, 45, 56, 0.1);
  transform: none;
}

.filter-toggle:focus-within {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}

.filter-toggle input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.filter-toggle span {
  font-size: 0.84rem;
  color: var(--filter-surface-fg);
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-reset-btn {
  min-height: 40px;
  height: 40px;
  width: 100%;
  min-width: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  /* Match the neutral filter dropdowns, not the teal --btn-bg default. */
  background: var(--filter-surface-bg);
  border: 1px solid var(--input-border);
  color: var(--filter-surface-fg);
}

.filter-reset-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 5.1 default-view cluster: four 40px square icons at the end of the bar —
   hide-empty toggle · save default · reset to default · show all. */
.filter-actions-row {
  display: flex;
  gap: 6px;
}

.filter-actions-row .filter-reset-btn,
.filter-actions-row .filter-toggle.icon-toggle {
  flex: 0 0 40px;
  width: 40px;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-toggle.icon-toggle .filter-toggle-icon {
  display: inline-flex;
}

.filter-toggle.icon-toggle .filter-toggle-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The button looks identical to its siblings in every state — the icon alone
   (plain zero vs. slashed zero) signals whether empty rows are hidden. */
.filter-actions-row .filter-toggle.icon-toggle:focus-within {
  border-color: var(--input-border);
  box-shadow: none;
}

.filter-actions-row .filter-toggle.icon-toggle:has(input:focus-visible) {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}

/* Themed tooltip for the filter action icons (reuses the app's tooltip pill,
   matching .kpi-toggle-value). Native title= is dropped to avoid a duplicate. */
.filter-actions-row [data-tip] {
  position: relative;
}

.filter-actions-row [data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  z-index: 1200;
  white-space: nowrap;
  padding: 6px 9px;
  border-radius: var(--radius);
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  border: 1px solid var(--tooltip-border);
  font-size: 0.78rem;
  font-weight: 500;
  box-shadow: var(--toast-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}

.filter-actions-row [data-tip]:hover::after,
.filter-actions-row [data-tip]:focus-visible::after,
.filter-actions-row .filter-toggle.icon-toggle[data-tip]:focus-within::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.multi-filter {
  position: relative;
}

.multi-filter-trigger {
  width: 100%;
  border: 1px solid var(--input-border);
  background: var(--filter-surface-bg);
  color: var(--filter-surface-fg);
  border-radius: var(--radius);
  min-height: 40px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 500;
  text-align: left;
  box-shadow: none;
  transform: none;
}

.multi-filter-trigger:hover {
  box-shadow: 0 4px 10px rgba(31, 45, 56, 0.1);
  transform: none;
}

.multi-filter-trigger:focus-visible,
.multi-filter.is-open .multi-filter-trigger {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}

.multi-filter-trigger-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.84rem;
}

.multi-filter-trigger-icon {
  font-size: 0.72rem;
  color: var(--muted);
  flex: 0 0 auto;
}

.multi-filter-panel {
  position: absolute;
  z-index: 90;
  top: calc(100% + 6px);
  left: 0;
  width: min(330px, calc(100vw - 36px));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-elevated);
  box-shadow: 0 14px 28px rgba(31, 45, 56, 0.18);
  padding: 8px;
  display: none;
}

.multi-filter.is-open .multi-filter-panel {
  display: block;
  animation: reveal 0.16s ease;
}

.multi-filter-search {
  margin-bottom: 6px;
  font-size: 0.84rem;
}

.multi-filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}

.multi-filter-actions-left {
  display: inline-flex;
  gap: 6px;
}

.multi-filter-action-btn {
  min-height: 28px;
  border-radius: var(--radius);
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 500;
  border: 1px solid var(--line);
  background: var(--table-header-bg);
  color: var(--table-header-fg);
}

.multi-filter-list {
  max-height: 260px;
  overflow: auto;
  border-top: 1px solid var(--table-border);
  padding-top: 6px;
}

.multi-filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: var(--radius);
  padding: 2px;
}

.multi-filter-option:hover {
  background: var(--accent-soft);
}

.multi-filter-option-toggle {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 3px 6px;
  border-radius: var(--radius);
  border: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  transform: none;
  text-align: left;
  font-weight: 400;
}

.multi-filter-option-toggle:hover {
  box-shadow: none;
  transform: none;
}

.multi-filter-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--input-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: transparent;
  flex: 0 0 auto;
}

.multi-filter-check.is-selected {
  background: var(--accent);
  border-color: var(--accent-strong);
  color: #fff;
}
/* Dark accent is the bright brand teal — use the brand's dark ink on it. */
:root[data-theme="dark"] .multi-filter-check.is-selected {
  color: #04282a;
}

.multi-filter-option-label {
  font-size: 0.81rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-filter-option-value {
  font-size: 0.72rem;
  color: var(--muted);
  margin-left: auto;
  padding-left: 8px;
  white-space: nowrap;
}

.multi-filter-only-btn {
  min-height: 24px;
  padding: 2px 7px;
  font-size: 0.66rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--table-header-bg);
  color: var(--table-header-fg);
}

.multi-filter-empty {
  font-size: 0.79rem;
  color: var(--muted);
  padding: 6px 4px;
}

.search-picker {
  position: relative;
}

.search-picker-panel {
  position: absolute;
  z-index: 1300;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(31, 45, 56, 0.14);
  padding: 4px;
  display: none;
}

.search-picker.is-open .search-picker-panel {
  display: block;
  animation: reveal 0.16s ease;
}

.search-picker-list {
  max-height: 280px;
  overflow: auto;
}

.search-picker-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 0;
  padding: 6px 10px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  transform: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-weight: 400;
}

.search-picker-option:hover {
  background: var(--accent-soft);
  box-shadow: none;
  transform: none;
}

.search-picker-option.is-active {
  background: var(--accent-soft-strong);
  color: var(--accent-strong);
}

.search-picker-option.is-selected {
  background: var(--accent-soft-strong);
  color: var(--accent-strong);
}

.search-picker-option.is-active.is-selected {
  background: var(--accent-soft-strong);
}

.search-picker-option-label {
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.search-picker-empty {
  font-size: 0.79rem;
  color: var(--muted);
  padding: 6px 4px;
}


@media (min-width: 961px) {
  #dashboard-page-filters,
  #dashboard-filters,
  #interest-filters {
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
  }

  #price-filters {
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto auto;
  }

  #history-filters {
    grid-template-columns: repeat(8, minmax(0, 1fr)) auto;
  }

  /* The hide-empty toggle field is folded into the reset cluster and removed
     from the DOM at runtime (see setupFilterUis), so each bar renders one fewer
     flexible column than its static markup. The trailing track is `auto` so the
     action cluster sizes to its buttons instead of leaving an empty fixed slot. */
  /* Personal mode also hides the account filter, dropping one more column. */
  :root[data-user-mode="personal"] #dashboard-page-filters,
  :root[data-user-mode="personal"] #dashboard-filters,
  :root[data-user-mode="personal"] #interest-filters {
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  }

  :root[data-user-mode="personal"] #price-filters {
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto auto;
  }

  :root[data-user-mode="personal"] #history-filters {
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
  }
}

@media (min-width: 641px) and (max-width: 960px) {
  #dashboard-page-filters,
  #dashboard-filters,
  #interest-filters,
  #price-filters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #history-filters {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #dashboard-page-filters,
  #dashboard-filters,
  #interest-filters,
  #price-filters,
  #history-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#interest-kpi-cards {
  margin-top: 12px;
}

button {
  border-radius: var(--radius);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  padding: 9px 14px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
  min-height: 40px;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(31, 45, 56, 0.13);
}

.save-trade-split button:hover {
  transform: none;
  box-shadow: none;
  filter: brightness(1.08);
}

button.primary {
  background: var(--btn-primary-bg);
  color: var(--accent-strong);
  border-color: var(--btn-primary-border);
}

button.warn {
  background: var(--warn-soft-bg);
  color: var(--warn);
  border-color: var(--warn-soft-border);
}

button.danger {
  background: var(--danger-soft-bg);
  color: var(--danger);
  border-color: var(--danger-soft-border);
}

.subgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

/* KPI rows hold 4 cards; between full-width (4 across) and mobile (stacked),
   wrap 2x2 instead of leaving an orphan card on its own row. */
@media (min-width: 641px) and (max-width: 1045px) {
  #dashboard-kpi-cards,
  #interest-kpi-cards,
  #forecast-kpi-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

#totals-cards {
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 14px;
}

#totals-cards .card {
  grid-column: span 3;
}

.card,
.chart-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-elevated);
}

.card strong,
.chart-title {
  display: block;
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}

.card-value,
.value {
  font-size: 1.25rem;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

/* Assets / Liabilities KPI cards — theme-based positive (teal) and negative (red). */
.card--assets .card-value { color: var(--accent); }
.card--liabilities .card-value { color: var(--danger); }

/* Balance Sheet Asset / Liability grouping */
.balance-group-head td {
  font-weight: 600;
  color: var(--muted);
  background: var(--accent-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}
.balance-group-subtotal td,
.balance-group-net td {
  font-weight: 600;
  background: var(--surface-elevated);
}
.balance-group-net td { border-top: 2px solid var(--line); }
.balance-group-subtotal .subtotal-value,
.balance-group-net .subtotal-value { float: right; font-variant-numeric: tabular-nums; }
tr.is-liability .current-value-cell { color: var(--danger); }

/* Click-to-flip KPI value (Interest annual/monthly, Current Value €/$) — reads as text. */
.kpi-toggle-value {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  outline: none;
}

.kpi-toggle-value .kpi-unit {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
}

.kpi-toggle-value:hover .value,
.kpi-toggle-value:focus-visible .value {
  color: var(--accent);
}

/* Hint reuses the app's tooltip pill (chart-tooltip look). */
.kpi-toggle-value::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 1200;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  font-size: 0.78rem;
  font-weight: 500;
  box-shadow: var(--toast-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
  pointer-events: none;
}

.kpi-toggle-value:hover::after,
.kpi-toggle-value:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ok {
  color: var(--ok);
}

.error {
  color: var(--danger);
}

/* Signed monetary amounts: green gain / red loss (P/L, gains). */
.amt-pos { color: var(--ok); font-variant-numeric: tabular-nums; }
.amt-neg { color: var(--danger); font-variant-numeric: tabular-nums; }

.muted {
  color: var(--muted);
  font-size: var(--font-size-panel-subtitle);
}

.status {
  position: fixed;
  right: 16px;
  top: 16px;
  z-index: 1000;
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--toast-bg);
  color: var(--toast-fg);
  font-size: 0.9rem;
  font-weight: 500;
  min-height: 0;
  max-width: min(760px, calc(100vw - 24px));
  box-shadow: var(--toast-shadow);
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.status:not(:empty) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.status.hiding {
  opacity: 0;
  transform: translateY(-6px);
}

.status.ok {
  background: var(--status-ok-bg);
  border-color: var(--status-ok-border);
  color: var(--status-ok-fg);
}

.status.error {
  background: var(--status-err-bg);
  border-color: var(--status-err-border);
  color: var(--status-err-fg);
}

.status-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.status-message {
  flex: 1 1 auto;
  min-width: 160px;
}

.status-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.status-action-btn {
  min-height: 30px;
  padding: 4px 10px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  box-shadow: none;
  transform: none;
}

.status-action-btn:hover {
  box-shadow: none;
  transform: none;
  background: rgba(255, 255, 255, 0.28);
}

.app-modal[hidden] {
  display: none;
}

.app-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(31, 45, 56, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 16px;
}

.app-modal-card {
  width: min(720px, calc(100vw - 20px));
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 18px 44px rgba(31, 45, 56, 0.24);
  padding: 14px;
}

/* Trade entry holds a 12-col grid + advanced leg fields — give it room and let
   it scroll if the viewport is short. */
.app-modal-card-wide {
  width: min(880px, calc(100vw - 20px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

/* Simple Add/Edit modals (amortization, forecast) read best narrow. */
.app-modal-card-narrow {
  width: min(460px, calc(100vw - 20px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

/* ── Unified modal form layout ───────────────────────────────────────────
   One system for every Add/Edit modal so labels, inputs, fonts and spacing
   are identical. Single-column stacked by default; .field-kv is a compact
   label → value row for config-style lists (forecast). */
.modal-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* The class display would otherwise override the `hidden` attribute used to
   toggle steps/forms — keep `hidden` authoritative. */
.modal-form[hidden],
.conn-type-list[hidden] {
  display: none;
}
.modal-form .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.modal-form .field label {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 500;
  margin: 0;
}
.modal-form .field input,
.modal-form .field select:not(.custom-select-native),
.modal-form .field textarea,
.modal-form .field .custom-select-wrap {
  width: 100%;
  box-sizing: border-box;
}
.modal-form .field-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}
.modal-form .field-kv > label,
.modal-form .field-kv > .kv-label {
  font-size: 0.85rem;
  color: var(--ink);
  font-weight: 500;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-form .field-kv input,
.modal-form .field-kv select {
  flex: 0 0 130px;
  width: 130px;
  text-align: right;
  box-sizing: border-box;
}
/* Section header inside a modal form — an "eyebrow" with a hairline divider so
   it reads clearly as a group heading, not another field label. */
.modal-form .group-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 18px 0 4px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}
.modal-form .group-title:first-child { margin-top: 0; }
.modal-form .group-title .muted { font-weight: 500; text-transform: none; letter-spacing: 0; }
/* A JS-rendered list of .field-kv rows (forecast expenses / growth rates). */
.modal-form-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Add-connection step 1 — type picker list. */
.conn-type-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.conn-type-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.conn-type-option:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.conn-type-option.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.conn-type-option.is-disabled:hover {
  background: var(--panel);
  border-color: var(--line);
}
.conn-type-label { font-weight: 600; color: var(--ink); font-size: 0.92rem; }
.conn-type-sub { font-size: 0.78rem; color: var(--muted); }

/* Details step: method explanation + read-only confirmation. */
.conn-method-note { margin: 0; font-size: 0.83rem; }
.conn-readonly-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.4;
  cursor: pointer;
}
.conn-readonly-check input { flex: 0 0 auto; margin-top: 2px; }
.conn-readonly-check[hidden] { display: none; }

/* Add-connection step 2 — back arrow + chosen-type heading. */
.conn-step2-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.conn-step2-head .conn-chosen {
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--text-strong);
}
.icon-btn.back-btn { width: 28px; height: 28px; min-height: 28px; }
.icon-btn.back-btn svg { width: 16px; height: 16px; }

/* Dashboard "+" add menu (reuses the existing .panel-header layout). */
.add-menu { position: relative; flex: 0 0 auto; }
.icon-btn.add-menu-btn { width: 40px; height: 40px; }
.icon-btn.add-menu-btn svg { width: 22px; height: 22px; }
.add-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  min-width: 160px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(31, 45, 56, 0.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.add-menu-dropdown[hidden] { display: none; }
.add-menu-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-size: 0.9rem;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.add-menu-dropdown button:hover { background: var(--accent-soft); }

.app-modal-title {
  margin: 0 0 4px;
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--text-strong);
}

.app-modal-help {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.88rem;
}

/* The encryption-unavailable note under this title is hidden on configured
   instances, leaving the heading flush against the inputs — restore the
   modal's usual title→content gap. */
#credentials-modal-form {
  margin-top: 10px;
}

/* First-run onboarding overlay (3.12) — full-screen Monarch-style welcome.
   Builds on .app-modal/.app-modal-card; a darker scrim and a roomier card
   make it read as a step flow rather than a confirm dialog. */
.onboarding-overlay {
  background: rgba(20, 30, 38, 0.62);
}
.onb-card {
  width: min(540px, calc(100vw - 24px));
  padding: 28px 26px 24px;
  text-align: center;
}
.onb-progress {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-bottom: 22px;
}
.onb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.2s, transform 0.2s;
}
.onb-dot.active {
  background: var(--accent);
  transform: scale(1.25);
}
.onb-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--btn-primary-bg);
  color: var(--accent-strong);
}
.onb-mark svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.onb-title {
  margin: 0 0 6px;
  font-size: 1.28rem;
  font-weight: 650;
  color: var(--text-strong);
}
.onb-sub {
  margin: 0 auto 22px;
  max-width: 38ch;
  color: var(--muted);
  font-size: 0.92rem;
}
.onb-choices {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  text-align: left;
}
.onb-choice {
  display: flex;
  align-items: flex-start;
  text-align: left;
  gap: 13px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s;
}
.onb-choice:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.onb-choice:active {
  transform: translateY(1px);
}
.onb-choice-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--btn-primary-bg);
  color: var(--accent-strong);
}
.onb-choice-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.onb-choice-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.onb-choice-title {
  font-weight: 600;
  color: var(--text-strong);
}
.onb-choice-desc {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.35;
}
.onb-actions {
  display: flex;
  justify-content: center;
}
.onb-primary {
  min-height: 40px;
  padding: 8px 26px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius);
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  cursor: pointer;
}
.onb-primary:hover {
  filter: brightness(1.05);
}
/* Quiet, no-underline "Skip for now" / "Back" — a low-emphasis escape hatch. */
.onb-skip {
  background: none;
  border: none;
  padding: 4px 8px;
  color: var(--muted);
  font-size: 0.84rem;
  cursor: pointer;
}
.onb-skip:hover {
  color: var(--ink);
}
/* Quiet text link — opt out of the global button:hover lift/shadow popup. */
.onb-skip:hover {
  transform: none;
  box-shadow: none;
}
/* In-flow spreadsheet import: numbered copy-prompt → upload, no trip to Settings. */
.onb-import {
  counter-reset: onbi;
  list-style: none;
  margin: 20px 0 6px;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 12px;
}
.onb-import li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.onb-import li::before {
  counter-increment: onbi;
  content: counter(onbi);
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--btn-primary-bg);
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.onb-import li > span {
  flex: 1;
  font-size: 0.88rem;
}
.onb-act-btn {
  flex: 0 0 auto;
  min-width: 142px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--radius);
  background: var(--btn-primary-bg);
  color: var(--accent-strong);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.onb-act-btn:hover {
  transform: none;
  box-shadow: none;
}
.onb-act-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
/* A global input rule sets display, overriding [hidden] — force the file input
   hidden so only its styled label (Upload CSV) shows. */
#onb-import-file {
  display: none;
}

.ledger-edit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ledger-edit-form .field {
  grid-column: span 1;
  min-width: 0;
}

.ledger-edit-form .field.full {
  grid-column: span 2;
}

.ledger-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.save-trade-split {
  position: relative;
  display: inline-flex;
}

.save-trade-split #save-trade {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.save-trade-split .split-arrow {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid rgba(255,255,255,0.35);
  padding: 0 9px;
  min-width: 0;
  min-height: 37px;
  height: 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* This split button sits at the bottom of the trade modal, so its menu opens
   upward — otherwise it pokes past the card and the modal grows a scrollbar. */
.save-trade-split .split-dropdown {
  top: auto;
  bottom: calc(100% + 4px);
}

.split-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--surface-elevated);
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  z-index: 50;
  min-width: 170px;
  overflow: hidden;
}

.split-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 9px 14px;
  background: none;
  border: none;
  border-radius: 0;
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
  box-shadow: none;
  transform: none;
}

.split-dropdown button svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  color: var(--accent);
}

.split-dropdown button:hover {
  /* Match `.search-picker-option:hover` so every menu surface in the app
     shares the same hover treatment. */
  background: var(--accent-soft);
  transform: none;
  box-shadow: none;
}

/* Destructive menu item (e.g. Delete) — red label and icon. */
.split-dropdown button.danger,
.split-dropdown button.danger svg { color: var(--danger); }
.split-dropdown button.danger:hover { background: var(--danger-soft-bg); }

.recurring-buy-section {
  padding: 12px 14px 10px;
  background: var(--surface-elevated);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  margin-top: 4px;
}

.recurring-buy-section .grid {
  margin-bottom: 0;
}

/* prevent grid display from overriding [hidden] on individual fields */
#rb-inline-dow-wrap[hidden],
#rb-inline-dom-wrap[hidden],
#rb-inline-daily-hint[hidden] {
  display: none !important;
}

#rb-inline-daily-hint {
  grid-column: span 6;
  align-self: flex-end;
  padding-bottom: 9px;
  font-size: 0.82rem;
  color: var(--muted);
}

.panel-title {
  margin: 0 0 14px;
  font-size: var(--font-size-panel-title);
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 12px;
}

.panel-title::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  align-self: stretch;
  min-height: 1.1em;
  border-radius: 3px;
  background: var(--accent);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}

.panel-header .panel-title,
.panel-header .section-title,
.panel-header .section-subtitle {
  margin: 0;
}

.section-title {
  margin: 16px 0 8px;
  font-size: var(--font-size-section-title);
  font-weight: 580;
  letter-spacing: 0.01em;
  color: var(--text-strong);
}

.section-subtitle {
  margin: 16px 0 8px;
  font-size: var(--font-size-subsection-title);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-strong);
}

/* Every settings panel leads flush at the top, whether its first element is a
   .panel-header or a bare heading. */
.settings-subtab-panel > :first-child {
  margin-top: 0;
}

.form-title-primary {
  margin-top: 2px;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-strong);
}

td.empty-row {
  text-align: center;
  color: var(--muted);
  padding: 28px 10px;
}

/* Adjustment rows (sync/amortization bookkeeping) recede so trades stand out. */
#history-table tr.history-adjustment-row td {
  color: var(--muted);
}

.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  background: var(--panel);
  margin-top: 10px;
}

/* Always-visible horizontal scrollbar so overflowing tables are obviously
   scrollable (macOS hides overlay scrollbars until first scroll). */
.table-wrap::-webkit-scrollbar {
  height: 8px;
}
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--table-sort-indicator);
  border-radius: 4px;
}
.table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid var(--table-border);
  padding: 8px 10px;
  text-align: left;
  font-size: 0.86rem;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

th {
  background: var(--table-header-bg);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--table-header-fg);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 10px;
}

table tbody tr:nth-child(even) {
  background: var(--row-zebra-even);
}

th.sortable-th {
  cursor: pointer;
  user-select: none;
}

th.sortable-th::after {
  content: "↕";
  margin-left: 6px;
  color: var(--table-sort-indicator);
  font-size: 0.76rem;
}

th.sortable-th[data-sort-direction="asc"]::after {
  content: "↑";
  color: var(--table-sort-indicator-active);
}

th.sortable-th[data-sort-direction="desc"]::after {
  content: "↓";
  color: var(--table-sort-indicator-active);
}

td .mini {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 2px;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.split > div {
  min-width: 0;
}

#ticker-table {
  min-width: 620px;
}

#ticker-table th,
#ticker-table td {
  white-space: nowrap;
}

/* 1 Ticker */
#ticker-table th:nth-child(1),
#ticker-table td:nth-child(1) { min-width: 70px; }

/* 2 Qty */
#ticker-table th:nth-child(2),
#ticker-table td:nth-child(2) { width: 88px; min-width: 88px; max-width: 88px; }

/* 3 Cost Basis / Unit */
#ticker-table th:nth-child(3),
#ticker-table td:nth-child(3) { min-width: 130px; }

/* 4 Value  5 Invested  6 Realized  7 P/L */
#ticker-table th:nth-child(4),
#ticker-table td:nth-child(4),
#ticker-table th:nth-child(5),
#ticker-table td:nth-child(5),
#ticker-table th:nth-child(6),
#ticker-table td:nth-child(6),
#ticker-table th:nth-child(7),
#ticker-table td:nth-child(7) { width: 88px; min-width: 88px; max-width: 88px; }

#detailed-table,
#dashboard-detail-table {
  min-width: 1050px;
}

#detailed-table th,
#detailed-table td,
#dashboard-detail-table th,
#dashboard-detail-table td {
  white-space: nowrap;
}

#detailed-table th:nth-child(1),
#detailed-table td:nth-child(1),
#dashboard-detail-table th:nth-child(1),
#dashboard-detail-table td:nth-child(1) {
  width: 1%;
  min-width: 0;
  max-width: none;
  white-space: nowrap;
}

#detailed-table th:nth-child(2),
#detailed-table td:nth-child(2),
#detailed-table th:nth-child(4),
#detailed-table td:nth-child(4),
#detailed-table th:nth-child(5),
#detailed-table td:nth-child(5),
#dashboard-detail-table th:nth-child(2),
#dashboard-detail-table td:nth-child(2),
#dashboard-detail-table th:nth-child(4),
#dashboard-detail-table td:nth-child(4),
#dashboard-detail-table th:nth-child(5),
#dashboard-detail-table td:nth-child(5) {
  width: 122px;
  min-width: 122px;
  max-width: 122px;
}

#detailed-table th:nth-child(3),
#detailed-table td:nth-child(3),
#detailed-table th:nth-child(6),
#detailed-table td:nth-child(6),
#dashboard-detail-table th:nth-child(3),
#dashboard-detail-table td:nth-child(3),
#dashboard-detail-table th:nth-child(6),
#dashboard-detail-table td:nth-child(6) {
  min-width: 50px;
}

#detailed-table th:nth-child(7),
#detailed-table td:nth-child(7),
#dashboard-detail-table th:nth-child(7),
#dashboard-detail-table td:nth-child(7) {
  min-width: 190px;
  max-width: 240px;
}

#detailed-table th:nth-child(8),
#detailed-table td:nth-child(8),
#detailed-table th:nth-child(9),
#detailed-table td:nth-child(9),
#detailed-table th:nth-child(10),
#detailed-table td:nth-child(10),
#detailed-table th:nth-child(11),
#detailed-table td:nth-child(11),
#detailed-table th:nth-child(12),
#detailed-table td:nth-child(12),
#detailed-table th:nth-child(13),
#detailed-table td:nth-child(13),
#dashboard-detail-table th:nth-child(8),
#dashboard-detail-table td:nth-child(8),
#dashboard-detail-table th:nth-child(9),
#dashboard-detail-table td:nth-child(9),
#dashboard-detail-table th:nth-child(10),
#dashboard-detail-table td:nth-child(10),
#dashboard-detail-table th:nth-child(11),
#dashboard-detail-table td:nth-child(11),
#dashboard-detail-table th:nth-child(12),
#dashboard-detail-table td:nth-child(12),
#dashboard-detail-table th:nth-child(13),
#dashboard-detail-table td:nth-child(13) {
  width: 88px;
  min-width: 88px;
  max-width: 88px;
}

#detailed-table th:nth-child(14),
#detailed-table td:nth-child(14),
#dashboard-detail-table th:nth-child(14),
#dashboard-detail-table td:nth-child(14) {
  min-width: 44px;
}

/* Right-align numeric / amount columns so figures line up by magnitude and are
   easy to compare down a column (desktop + mobile). Text columns stay left. */
#detailed-table th:nth-child(n+8):nth-child(-n+13),
#detailed-table td:nth-child(n+8):nth-child(-n+13),
#dashboard-detail-table th:nth-child(n+8):nth-child(-n+13),
#dashboard-detail-table td:nth-child(n+8):nth-child(-n+13),
#ticker-table th:nth-child(n+2),
#ticker-table td:nth-child(n+2),
#interest-table th:nth-child(n+6),
#interest-table td:nth-child(n+6),
#prices-table th:nth-child(4),  #prices-table td:nth-child(4),
#prices-table th:nth-child(5),  #prices-table td:nth-child(5),
#history-table th:nth-child(4), #history-table td:nth-child(4) {
  text-align: right;
}

#interest-table {
  min-width: 640px;
}

#interest-table th,
#interest-table td {
  white-space: nowrap;
}

/* 1 Asset */
#interest-table th:nth-child(1),
#interest-table td:nth-child(1) { min-width: 80px; }

/* 2 Category */
#interest-table th:nth-child(2),
#interest-table td:nth-child(2) { min-width: 120px; }

/* 3 Provider */
#interest-table th:nth-child(3),
#interest-table td:nth-child(3) { min-width: 90px; }

/* 4 Ticker */
#interest-table th:nth-child(4),
#interest-table td:nth-child(4) { width: 110px; min-width: 110px; max-width: 110px; }

/* 5 Description */
#interest-table th:nth-child(5),
#interest-table td:nth-child(5) { min-width: 150px; max-width: 220px; }

/* 6 Value */
#interest-table th:nth-child(6),
#interest-table td:nth-child(6) { width: 88px; min-width: 88px; max-width: 88px; }

/* 7 Monthly interest  8 Interest rate (%) */
#interest-table th:nth-child(7),
#interest-table td:nth-child(7),
#interest-table th:nth-child(8),
#interest-table td:nth-child(8) { min-width: 110px; }

#interest-table th {
  padding: 12px 10px;
  line-height: 1.2;
}

#interest-table td {
  padding: 8px 10px;
  line-height: 1.2;
}

#interest-table input[data-action="change-interest-rate"] {
  padding: 4px 6px;
  min-height: 28px;
}

.desc-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qty-cell .mini {
  margin-top: 3px;
}

#balance-th-price {
  cursor: pointer;
}

#prices-table {
  min-width: 646px;
  table-layout: fixed;
}

#prices-table th {
  padding: 12px 10px;
  line-height: 1.2;
}

#prices-table td {
  padding: 8px 10px;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* These classes now live on the hidden native <select> behind a custom-select
   trigger; only size the real inputs, never the 1px visually-hidden select
   (otherwise it inflates to 28px, position:absolute, and spills below the last
   row — adding a phantom vertical scrollbar to the table). */
#prices-table .price-inline-input,
#prices-table .price-class-select:not(.custom-select-native),
#prices-table .price-currency-select:not(.custom-select-native),
#prices-table .price-method-select:not(.custom-select-native) {
  padding: 3px 5px;
  min-height: 28px;
  font-size: 0.82rem;
  line-height: 1.3;
  width: 100%;
}

/* 1 Ticker */
#prices-table th:nth-child(1),
#prices-table td:nth-child(1) {
  width: 96px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 2 Quote Ccy */
#prices-table th:nth-child(2),
#prices-table td:nth-child(2) {
  width: 90px;
}

/* 3 Method */
#prices-table th:nth-child(3),
#prices-table td:nth-child(3) {
  width: 110px;
}

/* 4 Quote Price */
#prices-table th:nth-child(4),
#prices-table td:nth-child(4) {
  width: 90px;
}

/* 5 EUR Price */
#prices-table th:nth-child(5),
#prices-table td:nth-child(5) {
  width: 90px;
}

/* 6 Updated */
#prices-table th:nth-child(6),
#prices-table td:nth-child(6) {
  width: 82px;
  white-space: nowrap;
}

/* 7 Action — fixed px so buttons always fit */
#prices-table th:nth-child(7),
#prices-table td:nth-child(7) {
  width: 88px;
  white-space: nowrap;
}

#prices-table .method-manual .icon-btn[data-action='refresh-price'] {
  opacity: 0.35;
  pointer-events: none;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.row-actions .icon-btn {
  width: 30px;
  height: 30px;
  min-height: 30px;
}

.row-actions .icon-btn svg {
  width: 14px;
  height: 14px;
}

.icon-btn {
  width: 37px;
  height: 37px;
  min-height: 37px;
  flex: none; /* never let flex layouts squish icon buttons into ovals */
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  /* Single teal treatment for every icon button — no neutral/primary split. */
  background: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
  color: var(--accent-strong);
}

.icon-btn.primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--accent-strong);
}

.icon-btn.danger {
  background: var(--danger-soft-bg);
  border-color: var(--danger-soft-border);
  color: var(--danger-soft-fg);
}

.icon-btn.warn {
  background: var(--warn-soft-bg);
  border-color: var(--warn-soft-border);
  color: var(--warn-soft-fg);
}

/* Consistent hover feedback for all icon buttons (light mode previously had
   none — dark-theme overrides above keep their tuned tints). Uses the same
   --surface-hover / --accent-soft language as dropdowns, datepickers, filters. */
.icon-btn {
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.icon-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.icon-btn.primary:hover { background: var(--accent-soft); border-color: var(--accent); }
.icon-btn.danger:hover { background: var(--danger-soft-bg); filter: brightness(0.96); }
.icon-btn.warn:hover { background: var(--warn-soft-bg); filter: brightness(0.96); }

.icon-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Vertical kebab (⋮) trigger for per-row actions. The menu inside is just a
   `.split-dropdown` element so it inherits the same visual treatment as the
   Trade form's Save ▾ dropdown (consistency across all menu surfaces). */
.row-kebab {
  position: relative;
  display: inline-block;
}
.row-kebab > summary {
  list-style: none;
  cursor: pointer;
  padding: 4px 9px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  border-radius: var(--radius);
  user-select: none;
  color: var(--accent-strong);
}
.row-kebab > summary::-webkit-details-marker { display: none; }
.row-kebab > summary:hover { background: var(--surface-hover); }

/* Make the "Link to asset" picker comfortable to read inside the Zerion
   review table — the input holds long composite labels like
   "Personal / Ledger 11f9 / APYUSD / 129,379". */
.zerion-review-table .zerion-link-col { min-width: 320px; }
.zerion-review-table td:last-child { width: 360px; }
.zerion-review-table input[data-zerion-link] { width: 100%; }

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

.icon-btn.is-loading svg {
  animation: icon-spin 0.9s linear infinite;
  transform-origin: 50% 50%;
}

.icon-btn[disabled] {
  opacity: 0.7;
  cursor: progress;
}

.icon-btn-filter {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
}


.account-icon-cell {
  width: 1%;
  white-space: nowrap;
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}

.account-icon svg {
  width: 15px;
  height: 15px;
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.account-icon.work svg {
  stroke: var(--warn);
}

/* Account is a business-only dimension (see applyUserMode in app.js). In
   personal mode the account column, every account input/filter, the account
   allocation donut, and the accounts config tab are hidden — each line is
   filed under one "Personal" account. Turning on business mode reveals them. */
:root[data-user-mode="personal"] .account-icon-cell,
:root[data-user-mode="personal"] .account-field,
:root[data-user-mode="personal"] .chart-card[data-dimension="account"],
:root[data-user-mode="personal"] .taxonomy-kind-btn[data-taxonomy-kind="account"] {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.price-class-select {
  min-width: 140px;
  max-width: 100%;
  padding: 5px 8px;
  font-size: 0.92rem;
  line-height: 1.3;
}

.price-inline-input {
  width: 120px;
  min-height: 32px;
  padding: 5px 8px;
  font-size: 0.92rem;
  line-height: 1.3;
}

.import-demo-panel {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.import-demo-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 580;
  color: var(--text-strong);
}

.import-demo-panel .muted {
  margin-top: 4px;
}

/* "Coming from a spreadsheet?" hint row with an inline copy-prompt button. */
.import-csv-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#connections-review-host {
  margin-top: 16px;
}

/* ---- Import method sub-tabs ---- */
.import-type-tabs {
  display: flex;
  gap: 0;
  margin: 4px 0 0;
  border-bottom: 1px solid var(--line);
}

.import-tab-btn {
  text-align: center;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 16px;
  margin-bottom: -1px;
  background: transparent;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-family-base);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.import-tab-btn:hover {
  color: var(--ink);
  border-bottom-color: var(--line);
}

.import-tab-btn.active {
  color: var(--accent);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.import-tab-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 4px;
}

.import-method-panel {
  padding-top: 16px;
}

.import-method-panel[hidden] {
  display: none !important;
}

input[type="file"] {
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.86rem;
  height: 40px;
  display: flex;
  align-items: center;
}

input[type="file"]::file-selector-button {
  height: 100%;
  padding: 0 14px;
  margin-right: 10px;
  border: none;
  border-right: 1px solid var(--btn-border);
  border-radius: 0;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 500;
  font-size: 0.86rem;
  font-family: var(--font-family-base);
  cursor: pointer;
  transition: background-color 0.12s ease;
}

input[type="file"]::file-selector-button:hover {
  background: var(--btn-hover-bg);
}

#history-table {
  table-layout: fixed;
  width: 100%;
  min-width: 700px;
}

#history-table th,
#history-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 1 Date */
#history-table th:nth-child(1),
#history-table td:nth-child(1) { width: 96px; }

/* 2 From  3 To — share remaining space equally */
#history-table th:nth-child(2),
#history-table td:nth-child(2),
#history-table th:nth-child(3),
#history-table td:nth-child(3) { width: 22%; }

/* 4 EUR Value */
#history-table th:nth-child(4),
#history-table td:nth-child(4) { width: 100px; }

/* 5 Note */
#history-table th:nth-child(5),
#history-table td:nth-child(5) { width: 18%; }

/* 6 Actions */
#history-table th:nth-child(6),
#history-table td:nth-child(6) { width: 60px; }

.balance-table-nav {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  margin: 8px 0 0;
  border-bottom: 1px solid var(--line);
}

.balance-table-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 9px 14px;
  margin-bottom: -1px;
  text-decoration: none;
  color: var(--muted);
  background: transparent;
  font-size: 0.84rem;
  font-weight: 500;
  font-family: var(--font-family-base);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  min-width: 9rem;
  text-align: center;
}

.balance-table-link:hover {
  color: var(--ink);
  border-bottom-color: var(--line);
}

.balance-table-link.active {
  color: var(--accent);
  font-weight: 600;
  border-bottom-color: var(--accent);
  background: transparent;
}

.balance-table-panel {
  display: none;
}

.balance-table-panel.active {
  display: block;
}

.balance-table-panel .table-wrap {
  margin-top: 0;
  border-top: none;
  border-radius: 0 0 12px 12px;
}

.balance-table-content {
  margin-bottom: 12px;
}

#detailed-table th:nth-child(1),
#detailed-table td:nth-child(1) {
  width: 9%;
  max-width: 130px;
}

.current-value-cell {
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

#historical-table {
  min-width: 1080px;
}

#historical-table th,
#historical-table td {
  white-space: nowrap;
}

/* 1 ID */
#historical-table th:nth-child(1),
#historical-table td:nth-child(1) { width: 50px; min-width: 50px; max-width: 50px; }

/* 2 Account */
#historical-table th:nth-child(2),
#historical-table td:nth-child(2) { width: 1%; min-width: 0; max-width: none; }

/* 3 Provider  6 Category  7 Asset */
#historical-table th:nth-child(3),
#historical-table td:nth-child(3),
#historical-table th:nth-child(6),
#historical-table td:nth-child(6),
#historical-table th:nth-child(7),
#historical-table td:nth-child(7) { width: 100px; min-width: 100px; max-width: 100px; }

/* 4 Ticker */
#historical-table th:nth-child(4),
#historical-table td:nth-child(4) { width: 80px; min-width: 80px; max-width: 80px; }

/* 5 Risk */
#historical-table th:nth-child(5),
#historical-table td:nth-child(5) { width: 58px; min-width: 58px; max-width: 58px; }

/* 8 Description */
#historical-table th:nth-child(8),
#historical-table td:nth-child(8) { min-width: 150px; }

/* 9 Qty  10 Invested  11 Realized */
#historical-table th:nth-child(9),
#historical-table td:nth-child(9),
#historical-table th:nth-child(10),
#historical-table td:nth-child(10),
#historical-table th:nth-child(11),
#historical-table td:nth-child(11) { width: 88px; min-width: 88px; max-width: 88px; }

/* 12 Action */
#historical-table th:nth-child(12),
#historical-table td:nth-child(12) { width: 50px; min-width: 50px; max-width: 50px; }

#amortization-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 16px;
}

.db-import-row {
  display: flex;
  align-items: end;
  gap: 8px;
  margin-top: 12px;
}

.db-import-row .db-import-field {
  flex: 0 1 360px;
  min-width: 0;
}

.db-import-row .db-import-field label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 3px;
}

.db-import-row .db-import-field input[type="file"] {
  width: 100%;
}


.csv-import-row {
  display: flex;
  align-items: end;
  gap: 8px;
  margin-top: 12px;
}

.csv-import-row .csv-import-field {
  flex: 0 1 200px;
  min-width: 0;
}

.csv-import-row .csv-import-field label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 3px;
}

.csv-import-row .csv-import-field select {
  width: 100%;
}


.csv-import-textarea {
  margin-top: 12px;
}

.csv-import-textarea label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 3px;
}

.csv-import-textarea textarea {
  width: 100%;
}

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

input[type="number"] {
  -moz-appearance: textfield;
}

#amortization-form label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 3px;
}

#amortization-table {
  min-width: 640px;
  width: 100%;
  table-layout: fixed;
}

#amortization-table th:nth-child(1),
#amortization-table td:nth-child(1) { width: 26%; }
#amortization-table th:nth-child(2),
#amortization-table td:nth-child(2) { width: 11%; }
#amortization-table th:nth-child(3),
#amortization-table td:nth-child(3) { width: 12%; }
#amortization-table th:nth-child(4),
#amortization-table td:nth-child(4) { width: 10%; }
#amortization-table th:nth-child(5),
#amortization-table td:nth-child(5) { width: 12%; }
#amortization-table th:nth-child(6),
#amortization-table td:nth-child(6) { width: 13%; }
#amortization-table th:nth-child(7),
#amortization-table td:nth-child(7) { width: 10%; }
#amortization-table th:nth-child(8),
#amortization-table td:nth-child(8) { width: 6%; }

/* ── Recurring-buy rules table ─────────────────────────────────────────────
   Full-width; proportional column widths spread the slack across every column
   instead of ballooning one. Per-row actions live in the shared .row-kebab
   menu, so the last column only needs room for the trigger. Mirrors the
   amortization table's fixed-layout approach. */
#recurring-buy-table {
  min-width: 700px;
  width: 100%;
  table-layout: fixed;
}

#recurring-buy-table th:nth-child(1),
#recurring-buy-table td:nth-child(1) { width: 24%; }   /* Label */
#recurring-buy-table th:nth-child(2),
#recurring-buy-table td:nth-child(2),
#recurring-buy-table th:nth-child(3),
#recurring-buy-table td:nth-child(3) { width: 16%; }   /* From / To */
#recurring-buy-table th:nth-child(4),
#recurring-buy-table td:nth-child(4) { width: 12%; }   /* Amount */
#recurring-buy-table th:nth-child(5),
#recurring-buy-table td:nth-child(5) { width: 17%; }   /* Schedule */
#recurring-buy-table th:nth-child(6),
#recurring-buy-table td:nth-child(6) { width: 11%; }   /* Last run */

/* Actions: just the kebab trigger, pinned to the right edge. */
#recurring-buy-table th:last-child,
#recurring-buy-table td.row-kebab-cell { width: 4%; text-align: right; padding-right: 14px; }

#rb-dow-wrap[hidden], #rb-dom-wrap[hidden], #rb-daily-hint[hidden] { display: none !important; }

#rb-daily-hint {
  align-self: flex-end;
  padding-bottom: 9px;
  font-size: 0.82rem;
  color: var(--muted);
}

.chip {
  border-radius: 999px;
  padding: 2px 8px;
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 500;
}

.chip.warn {
  background: var(--warn-soft-bg);
  color: var(--warn-soft-fg);
  border: 1px solid var(--warn-soft-border);
}

.chip.ok {
  background: var(--status-ok-bg);
  color: var(--status-ok-fg);
  border: 1px solid var(--status-ok-border);
}

.chip.info {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid var(--accent-soft-strong);
}

.chip.neutral {
  background: var(--btn-bg);
  color: var(--muted);
  border: 1px solid var(--btn-border);
}

/* Connected Sources panel cards */
.connection-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--surface-elevated);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.connection-card-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--text-strong);
}
.connection-card-header svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  opacity: 0.6;
}
.connection-card-address {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 0.84rem;
  color: var(--muted);
}
.connection-card-meta {
  margin-top: 4px;
  font-size: 0.81rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.connection-card-sep { opacity: 0.4; }

.copy-addr-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 3px;
  min-height: 0;
  border-radius: 4px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  box-shadow: none;
  transform: none;
  line-height: 0;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.connection-card-address:hover .copy-addr-btn,
.copy-addr-btn:focus-visible {
  opacity: 1;
}
.copy-addr-btn:hover {
  color: var(--accent);
  background: var(--accent-soft);
}
.copy-addr-btn svg {
  width: 12px;
  height: 12px;
}

#trade-validation {
  min-height: 1.2em;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--danger);
}

.trade-subtabs {
  display: flex;
  gap: 0;
  margin: 6px 0 0;
  border-bottom: 1px solid var(--line);
}

.trade-subtab {
  text-align: center;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 16px;
  margin-bottom: -1px;
  background: transparent;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-family-base);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.trade-subtab:hover {
  color: var(--ink);
  border-bottom-color: var(--line);
}

.trade-subtab.active {
  color: var(--accent);
  font-weight: 600;
  border-bottom-color: var(--accent);
  background: transparent;
}

.trade-subtab:focus-visible,
.balance-table-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 4px;
}

/* ---- Settings left-nav layout ---- */
/* Generic sub-navigation chrome. Used by Settings, Help, and any future
   panel that needs a left-side category list. Keep these style-only — the
   panel-specific content classes (e.g. .settings-subtab-panel) live next to
   the feature that owns them. */
.subnav-layout {
  display: flex;
  gap: 0;
  margin-top: 20px;
  min-height: 400px;
}

.subnav {
  width: 176px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 18px;
  border-right: 1px solid var(--line);
}

.subnav-group {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  padding: 16px 8px 6px;
}

.subnav-group:first-child {
  padding-top: 4px;
}

.subnav-group + .subnav-item {
  /* Tighten the gap right after a group label so the first item visually
     belongs to the section above it. */
  margin-top: -2px;
}

.subnav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px 8px 18px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-family-base);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}

.subnav-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.subnav-item:hover {
  background: rgba(15, 138, 143, 0.07);
  color: var(--ink);
}

.subnav-item.active {
  background: rgba(15, 138, 143, 0.1);
  color: var(--accent);
  font-weight: 600;
}

.subnav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

:root[data-theme="dark"] .subnav-item:hover {
  background: rgba(15, 138, 143, 0.15);
}

:root[data-theme="dark"] .subnav-item.active {
  background: rgba(15, 138, 143, 0.2);
}

.subnav-content {
  flex: 1;
  min-width: 0;
  padding-left: 28px;
}

.trade-mode-section[hidden] {
  display: none !important;
}

.dashboard-chart-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.net-worth-history-card {
  margin-bottom: 14px;
}

.net-worth-kpi-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
  font-variant-numeric: tabular-nums;
}

.net-worth-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.net-worth-stat-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
}

.net-worth-stat-value {
  font-size: 0.85rem;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

.net-worth-stat-pct {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
}

.net-worth-stat--pos .net-worth-stat-value,
.net-worth-stat--pos .net-worth-stat-pct { color: var(--ok); }
.net-worth-stat--neg .net-worth-stat-value,
.net-worth-stat--neg .net-worth-stat-pct { color: var(--danger); }

.net-worth-chart-wrap {
  position: relative;
  width: 100%;
  cursor: grab;
  user-select: none;
}
.net-worth-chart-wrap.dragging {
  cursor: grabbing;
}

.net-worth-chart {
  width: 100%;
  min-width: 0;
  height: auto;
  display: block;
}

.net-worth-axis-label {
  fill: var(--chart-axis-label);
  font-size: 11px;
  font-weight: 500;
}

.net-worth-grid-line {
  stroke: var(--chart-grid);
  stroke-width: 1;
}

.net-worth-line {
  fill: none;
  stroke: var(--chart-line);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.net-worth-point {
  fill: transparent;
  stroke: transparent;
  stroke-width: 0;
  cursor: crosshair;
}

.net-worth-point:hover,
.net-worth-point:focus-visible {
  r: 6;
  outline: none;
}

.net-worth-hover-point {
  opacity: 0;
  fill: var(--chart-line);
  stroke: var(--panel);
  stroke-width: 2;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.net-worth-hover-point.visible {
  opacity: 1;
}

.net-worth-tooltip {
  position: fixed;
  z-index: 22;
  pointer-events: none;
  opacity: 0;
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  border-radius: var(--radius);
  border: 1px solid var(--tooltip-border);
  font-size: 0.78rem;
  line-height: 1.3;
  padding: 7px 9px;
  white-space: nowrap;
  transition: opacity 120ms ease;
}

.net-worth-tooltip.visible {
  opacity: 1;
}

.net-worth-head-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  row-gap: 6px;
}

.net-worth-range-chips {
  display: inline-flex;
  gap: 2px;
}

.net-worth-range-chip {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 10px 4px;
  min-height: 0;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}

.net-worth-range-chip:hover {
  transform: none;
  box-shadow: none;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.net-worth-range-chip.active,
.net-worth-range-chip.active:hover {
  background: var(--accent-soft-strong);
  color: var(--accent);
}

.chart-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.chart-head--split {
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 6px;
}


.donut-wrap {
  display: grid;
  /* Donut shrinks before the legend: labels keep ~110px of room. */
  grid-template-columns: minmax(140px, 220px) minmax(110px, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 220px;
}

.donut-svg {
  width: 100%;
  max-width: 220px;
  height: auto;
}

.donut-track {
  fill: none;
  stroke: var(--donut-track);
  stroke-width: 70;
}

.donut-segment {
  fill: none;
  stroke-width: 70;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-linecap: butt;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.donut-segment:hover,
.donut-segment:focus-visible,
.donut-segment:focus {
  outline: none;
}

.donut-segment.is-dimmed {
  opacity: 0.28;
}

.donut-segment.is-selected {
  opacity: 1;
}

.chart-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Allocation targets (8.3): inner target ring + drift caption + edit pencil. */
.donut-target-track {
  fill: none;
  stroke: var(--donut-track);
}
.donut-target-arc {
  fill: none;
  stroke-linecap: butt;
  opacity: 0.85;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.chart-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.chart-edit-btn:hover { opacity: 1; background: var(--accent-soft); color: var(--accent); }
.chart-edit-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.alloc-drift-caption {
  font-size: 0.78rem;
  font-weight: 560;
  color: var(--danger);
  text-decoration: none;
}
.alloc-drift-caption:hover { text-decoration: underline; }

.chart-meta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
  max-height: 180px;
  overflow: auto;
}

.chart-meta-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  font-size: 0.78rem;
}

.chart-meta-item span:last-child {
  overflow-wrap: break-word;
}

.chart-meta-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

code {
  background: var(--surface-elevated);
  color: var(--ink);
  padding: 1px 5px;
  border-radius: 4px;
}

.dashboard-tooltip {
  position: fixed;
  z-index: 1200;
  pointer-events: none;
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 0.78rem;
  box-shadow: var(--toast-shadow);
  max-width: min(320px, 70vw);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
  white-space: normal;
}

.dashboard-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 960px) {
  .field,
  .field.half {
    grid-column: span 6;
  }

  #totals-cards .card {
    grid-column: span 6;
  }

  .split {
    grid-template-columns: 1fr;
  }

  .dashboard-chart-grid {
    grid-template-columns: 1fr;
  }

  .donut-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .chart-meta {
    width: 100%;
  }
}

/* ---- Mobile bottom navigation (PWA) — hidden on desktop, shown ≤640px ---- */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--panel);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
  z-index: 200;
}

.bottom-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  border: none;
  background: none;
  border-radius: 0;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 500;
  cursor: pointer;
}

.bottom-nav-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bottom-nav-btn:hover,
.bottom-nav-btn:active {
  transform: none;
  box-shadow: none;
}

.bottom-nav-btn.active {
  color: var(--accent-strong);
}

.bottom-nav-add {
  color: var(--accent-strong);
}

.bottom-nav-add svg {
  width: 24px;
  height: 24px;
  padding: 5px;
  box-sizing: content-box;
  background: var(--accent);
  border-radius: 999px;
  stroke: #fff;
}

/* ---- ➕ Actions sheet (mobile) ---- */
.action-sheet {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
}

.action-sheet[hidden] {
  display: none;
}

.action-sheet-card {
  width: 100%;
  max-width: 520px;
  background: var(--panel);
  border-radius: 16px 16px 0 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)) 16px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
  animation: action-sheet-up 0.18s ease;
}

@keyframes action-sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.action-sheet-grip {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  margin: 6px auto 14px auto;
}

.action-sheet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  margin-bottom: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.action-sheet-item svg {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: var(--accent-strong);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.action-sheet-item:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--accent);
}

.action-sheet-cancel {
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.action-sheet-cancel:hover {
  transform: none;
  box-shadow: none;
}

/* ---- Quick balance update sheet ---- */
.quick-balance-title {
  margin: 0 0 12px 2px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}

.quick-balance-list {
  max-height: 50vh;
  overflow-y: auto;
  margin-bottom: 4px;
}

.quick-balance-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  margin-bottom: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.quick-balance-item:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--accent);
}

.quick-balance-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-balance-item-value {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.quick-balance-empty {
  padding: 10px 4px 16px;
}

@media (max-width: 640px) {
  /* ---- PWA mobile shell: sidebar → bottom nav, full-width content ---- */
  .shell {
    grid-template-columns: 1fr;
    width: 100%;
    margin: 0;
    gap: 0;
    padding: 8px 10px calc(64px + env(safe-area-inset-bottom, 0px)) 10px;
  }

  /* The desktop sidebar is replaced by the bottom nav on phones. */
  .sidebar {
    display: none;
  }

  .bottom-nav {
    display: flex;
  }

  /* Read-first: drop the filter bar on phones — the saved default view still
     applies, the screen just opens straight to the numbers. */
  .filter-bar {
    display: none;
  }

  /* ---- Full-screen modals on phones ----
     Add/edit modals fill the viewport instead of floating as a centered card
     over a blurred backdrop — far more comfortable to fill in on a phone. */
  .app-modal {
    padding: 0;
    place-items: stretch;
  }
  .app-modal-card,
  .app-modal-card-wide,
  .app-modal-card-narrow {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px
             calc(16px + env(safe-area-inset-bottom, 0px)) 16px;
  }

  /* The row-actions column is trimmed on phones, so a tap anywhere on a holding
     row opens the edit modal (wired up in app.js). */
  #detailed-table tbody tr:not(.balance-group-head),
  #dashboard-detail-table tbody tr:not(.balance-group-head) {
    cursor: pointer;
  }
  #detailed-table tbody tr:not(.balance-group-head):active,
  #dashboard-detail-table tbody tr:not(.balance-group-head):active {
    background: var(--line);
  }

  /* Read-first balance tables: trim to essentials (Asset · Ticker · Value) so
     they fit without horizontal scroll. Detailed Ledger columns:
     1 Account · 2 Asset · 3 Risk · 4 Category · 5 Provider · 6 Ticker ·
     7 Description · 8 Qty · 9 Price · 10 Value · 11 Invested · 12 Realized ·
     13 P/L · 14 actions. */
  #detailed-table th:nth-child(1),  #detailed-table td:nth-child(1),
  #detailed-table th:nth-child(3),  #detailed-table td:nth-child(3),
  #detailed-table th:nth-child(4),  #detailed-table td:nth-child(4),
  #detailed-table th:nth-child(5),  #detailed-table td:nth-child(5),
  #detailed-table th:nth-child(7),  #detailed-table td:nth-child(7),
  #detailed-table th:nth-child(8),  #detailed-table td:nth-child(8),
  #detailed-table th:nth-child(9),  #detailed-table td:nth-child(9),
  #detailed-table th:nth-child(11), #detailed-table td:nth-child(11),
  #detailed-table th:nth-child(12), #detailed-table td:nth-child(12),
  #detailed-table th:nth-child(13), #detailed-table td:nth-child(13),
  #detailed-table th:nth-child(14), #detailed-table td:nth-child(14) {
    display: none;
  }

  /* The dashboard shows the same ledger table — trim it identically so it fits
     full-width like the cards above it instead of scrolling sideways. */
  #dashboard-detail-table th:nth-child(1),  #dashboard-detail-table td:nth-child(1),
  #dashboard-detail-table th:nth-child(3),  #dashboard-detail-table td:nth-child(3),
  #dashboard-detail-table th:nth-child(4),  #dashboard-detail-table td:nth-child(4),
  #dashboard-detail-table th:nth-child(5),  #dashboard-detail-table td:nth-child(5),
  #dashboard-detail-table th:nth-child(7),  #dashboard-detail-table td:nth-child(7),
  #dashboard-detail-table th:nth-child(8),  #dashboard-detail-table td:nth-child(8),
  #dashboard-detail-table th:nth-child(9),  #dashboard-detail-table td:nth-child(9),
  #dashboard-detail-table th:nth-child(11), #dashboard-detail-table td:nth-child(11),
  #dashboard-detail-table th:nth-child(12), #dashboard-detail-table td:nth-child(12),
  #dashboard-detail-table th:nth-child(13), #dashboard-detail-table td:nth-child(13),
  #dashboard-detail-table th:nth-child(14), #dashboard-detail-table td:nth-child(14) {
    display: none;
  }

  /* By Ticker columns: 1 Ticker · 2 Qty · 3 Cost · 4 Value · 5 Invested ·
     6 Realized · 7 P/L → keep Ticker + Value. */
  #ticker-table th:nth-child(2), #ticker-table td:nth-child(2),
  #ticker-table th:nth-child(3), #ticker-table td:nth-child(3),
  #ticker-table th:nth-child(5), #ticker-table td:nth-child(5),
  #ticker-table th:nth-child(6), #ticker-table td:nth-child(6),
  #ticker-table th:nth-child(7), #ticker-table td:nth-child(7) {
    display: none;
  }

  /* Drop the desktop min-width so the trimmed tables shrink to fit (no scroll). */
  #detailed-table,
  #dashboard-detail-table,
  #ticker-table {
    min-width: 0;
  }

  /* Keep the "Assets" / "Liabilities" group-header rows visible (their single
     spanning cell sits in column 1, which the trim above hides). */
  #detailed-table tr.balance-group-head td,
  #dashboard-detail-table tr.balance-group-head td {
    display: table-cell;
  }

  .field,
  .field.half {
    grid-column: span 12;
  }

  /* Add-holding modal stacks one field per row on phones (desktop is 3-up). */
  #holding-form .field:not(.full) {
    grid-column: span 12;
  }

  #totals-cards .card {
    grid-column: span 12;
  }

  .ledger-edit-form .field,
  .ledger-edit-form .field.full {
    grid-column: span 2;
  }

  .tab-panel {
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 8px;
  }

  .panel-title {
    font-size: 1.15rem;
    margin-bottom: 12px;
  }

  .donut-svg {
    width: 220px;
    height: 220px;
  }

  .donut-wrap {
    min-height: 220px;
  }

  .import-demo-panel {
    align-items: stretch;
  }

  .import-demo-panel button {
    width: 100%;
  }

  /* Settings subnav stacks above its content */
  .subnav-layout {
    flex-direction: column;
    min-height: unset;
    margin-top: 10px;
  }

  .subnav {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 8px;
    margin-bottom: 12px;
    gap: 4px;
  }

  .subnav-content {
    padding-left: 0;
  }

  /* Tables: don't squeeze columns — let .table-wrap scroll horizontally */
  th {
    white-space: nowrap;
    padding: 10px 8px;
  }

  td {
    min-width: 64px;
    padding: 7px 8px;
  }

  td:last-child {
    min-width: unset;
  }

  /* Lift the support FAB clear of the bottom nav. */
  .support-fab {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 14px);
  }
}

/* ---- Help tab (per-feature docs viewer) ---------------------------------- */
/* Reuses the generic .subnav-* chrome. Only doc-rendering styles live here. */

.help-subnav-status {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 400;
}
.subnav-item.is-stub { color: var(--muted); }

.help-content {
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.55;
}
.help-content h1 { font-size: 1.25rem; margin: 0 0 12px; color: var(--text-strong); }
.help-content h2 { font-size: 1.05rem; margin: 22px 0 8px; color: var(--text-strong); }
.help-content h3 { font-size: 0.95rem; margin: 16px 0 6px; color: var(--text-strong); }
.help-content p { margin: 0 0 10px; }
.help-content ul, .help-content ol { margin: 0 0 12px; padding-left: 22px; }
.help-content li { margin-bottom: 4px; }
.help-content code {
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.85em;
}
.help-content pre {
  background: var(--surface-hover);
  padding: 10px 12px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0 0 12px;
}
.help-content pre code { background: transparent; padding: 0; color: inherit; }
.help-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 14px;
  font-size: 0.88rem;
}
.help-content th, .help-content td {
  border: 1px solid var(--table-border);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}
.help-content th { background: var(--table-header-bg); color: var(--table-header-fg); }
.help-content a { color: var(--accent-strong); }
.help-content strong { color: var(--text-strong); }
.help-content em { color: var(--text-strong); font-style: italic; }
.help-empty { color: var(--muted); font-style: italic; }

.help-overview-intro {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 18px;
}
.help-overview-section { margin-bottom: 22px; }
.help-overview-section:last-child { margin-bottom: 0; }
.help-overview-group {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.help-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.help-overview-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  padding: 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-elevated);
  color: inherit;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.help-overview-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-panel);
}
.help-overview-card:focus-visible {
  outline: 2px solid var(--input-focus-border);
  outline-offset: 2px;
}
.help-overview-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.help-overview-icon svg { width: 18px; height: 18px; }
.help-overview-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.help-overview-title {
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text-strong);
}
.help-overview-tagline {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ── Forecast tab ─────────────────────────────────────────────────────────── */
.forecast-chart-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.forecast-empty-state {
  display: flex;
  justify-content: center;
  padding: 3rem 1rem;
}

.forecast-empty-state[hidden],
.forecast-chart-panel[hidden],
#forecast-kpi-cards[hidden],
#forecast-config-open-btn[hidden] { display: none; }

/* Forecast chart (reuses net-worth-* CSS variables) */
.forecast-chart-wrap { overflow: hidden; }
.forecast-chart {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.forecast-grid-line {
  stroke: var(--chart-grid);
  stroke-width: 1;
  fill: none;
}
/* Stacked area bands: same palette, filled with a vertical gradient fade
   (defined per-band in the SVG) plus a crisp full-colour top edge. The fill
   opacity is controlled by the gradient stops, not here. */
.forecast-area-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  /* butt cap so the top edge ends flush with the band rather than overshooting
     past the chart's right edge. */
  stroke-linecap: butt;
}
.forecast-axis-label {
  fill: var(--chart-axis-label);
  font-size: 11px;
  font-weight: 500;
}
.forecast-hover-point {
  fill: var(--chart-line);
  stroke: var(--panel);
  stroke-width: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.forecast-hover-point.visible { opacity: 1; }
.forecast-chart-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.forecast-real-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 10px 4px;
  min-height: 0;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: background 120ms ease, color 120ms ease;
}
.forecast-real-toggle:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.forecast-real-toggle.active,
.forecast-real-toggle.active:hover {
  background: var(--accent-soft-strong);
  color: var(--accent);
}
.forecast-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  margin-top: 12px;
}
.forecast-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.forecast-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.forecast-legend-label {
  font-size: 0.78rem;
  color: var(--muted);
}

/* Loading / empty placeholder inside a chart card. */
.chart-empty {
  padding: 1rem;
}
/* Gain-sources proportion bar (segments = each source's share of total gain). */
.fc-gain-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--accent-soft);
  margin: 4px 0 12px;
}
.fc-gain-seg { height: 100%; }
.fc-seg-existing { background: var(--accent-strong); }
.fc-seg-savings { background: var(--accent); }
.fc-seg-capital { background: color-mix(in srgb, var(--accent) 45%, var(--panel)); }
.fc-gain-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 7px;
  flex-shrink: 0;
}
.forecast-attribution-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.forecast-attr-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.84rem;
  color: var(--muted);
}
.forecast-attr-row span:first-child {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.forecast-attr-total {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  font-weight: 600;
  color: var(--ink);
}
.fc-gain-pos { color: var(--ok); font-variant-numeric: tabular-nums; }
.fc-gain-neg { color: var(--danger); font-variant-numeric: tabular-nums; }

#forecast-tooltip {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  border: 1px solid var(--tooltip-border);
  border-radius: var(--radius);
  padding: 7px 9px;
  font-size: 0.78rem;
  line-height: 1.3;
  white-space: nowrap;
  display: none;
}
.fc-tt-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 5px;
}
.fc-tt-head .fc-tt-total {
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}
.fc-tt-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fc-tt-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.fc-tt-label {
  margin-right: auto;
  opacity: 0.85;
}
.fc-tt-val {
  font-variant-numeric: tabular-nums;
  padding-left: 14px;
}
#forecast-tooltip.visible { display: block; }

/* Settings → Lists (editable taxonomy). Underline tabs mirror .trade-subtab
   but use their own class so the global setTradeMode() handler ignores them. */
.taxonomy-kind-switch {
  display: flex;
  gap: 0;
  margin-top: 12px;
  border-bottom: 1px solid var(--line);
}
.taxonomy-kind-btn {
  text-align: center;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 16px;
  margin-bottom: -1px;
  background: transparent;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-family-base);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.taxonomy-kind-btn:hover {
  color: var(--ink);
  border-bottom-color: var(--line);
}
.taxonomy-kind-btn.active {
  color: var(--accent);
  font-weight: 600;
  border-bottom-color: var(--accent);
  background: transparent;
}
.taxonomy-kind-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 4px;
}
.taxonomy-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 14px 0 10px;
}
.taxonomy-search {
  margin-left: auto;
  min-width: 160px;
  max-width: 280px;
}
#taxonomy-table .taxonomy-count {
  text-align: right;
  white-space: nowrap;
}

/* App-wide demo-data banner */
.demo-banner[hidden] {
  display: none;
}
.demo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  border: 1px solid var(--accent-soft-strong);
  border-radius: var(--radius);
  padding: 8px 14px;
  margin-bottom: 14px;
}
.demo-banner-btn {
  min-height: 30px;
  padding: 4px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: var(--radius);
  /* Solid panel bg, not a teal tint — the banner itself is a teal wash, so a
     tinted button would blend into it (light-on-light). */
  background: var(--panel);
  border: 1px solid var(--btn-primary-border);
  color: var(--accent-strong);
}
.demo-banner-btn:hover {
  background: var(--btn-primary-bg);
}

/* Inline text-link button (e.g. "Copy the AI conversion prompt") */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  min-height: 0;
  color: var(--accent-strong);
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  font-weight: inherit;
}
.link-btn:hover {
  transform: none;
  box-shadow: none;
}

/* Empty-state CTA buttons —
   compact variant of the standard primary button. */
.empty-cta {
  display: inline-flex;
  gap: 8px;
  margin-left: 12px;
  vertical-align: middle;
}
.empty-cta-btn {
  min-height: 30px;
  padding: 4px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: var(--radius);
  background: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
  color: var(--accent-strong);
}

/* Always-accessible "Report an issue" button (bottom-right) + its modal box. */
.support-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  z-index: 40;
  transition: color .15s, border-color .15s, transform .15s;
}
.support-fab:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.support-fab svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#support-message {
  width: 100%;
  resize: vertical;
  font: inherit;
}