/* ══════════════════════════════════════════════════
   AU TAX DASHBOARD — Design System
   Light + Dark · Novated Lease FBT Analysis
   ══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..700;1,14..32,300..700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ═══ LIGHT THEME ═══ */
:root,
[data-theme="light"] {
  /* Dimmed warm-paper palette (prior brighter set: #F8F7F4 / #FFFFFF / #F1EFEB / #EEECE7) */
  --bg:               #EDEBE4;
  --bg-raised:        #F6F4EE;
  --bg-hover:         #E6E3DB;
  --bg-subtle:        #E2DFD6;

  --text-primary:     #1A1A1A;
  --text-secondary:   #6B6560;
  --text-tertiary:    #9C9590;
  --text-inverse:     #FFFFFF;

  /* Berry accent (prior green palette: #5B7F6E / #D9E8E0 / #E8F0EC / #3F5E4F) */
  --accent:           #A85F82;
  --accent-soft:      #E2CCD7;
  --accent-muted:     #EDDEE6;
  --accent-dark:      #7E3F5E;

  /* "Salary sacrifice" accent (Payroll comparison) — currently berry; prior teal: #3E9A92 / #2C7A74 / #E2F0EE */
  --sacrifice:        #A85F82;
  --sacrifice-dark:   #7E3F5E;
  --sacrifice-muted:  #EDDEE6;

  --border:           #D9D5CC;
  --border-light:     #E1DDD4;

  --shadow-sm:        0 1px 2px rgba(0,0,0,.04);
  --shadow-md:        0 4px 12px rgba(0,0,0,.06);
  --shadow-lg:        0 8px 30px rgba(0,0,0,.08);

  --bracket-0:        #8FAAAB;
  --bracket-1:        #7EA88E;
  --bracket-2:        #C4A96A;
  --bracket-3:        #C08A6E;
  --bracket-4:        #B06B6B;

  --pretax-tag-bg:    #D8E4F4;
  --pretax-tag-color: #3B6EC7;
  --posttax-tag-bg:   #F2DFCC;
  --posttax-tag-color:#B86230;

  --good:             #3F7A56;
  --good-bg:          #DEEBE2;
  --warn:             #B06B6B;
  --warn-bg:          #F1E0E0;

  --exempt-bg:        #DEEBE2;
  --exempt-border:    #BBD6C2;
  --exempt-header:    #2D6A3E;
  --standard-bg:      #F2EAE1;
  --standard-border:  #E5CFBF;
  --standard-header:  #8B4F30;

  color-scheme: light;
}

/* ═══ DARK THEME ═══ */
[data-theme="dark"] {
  --bg:               #131312;
  --bg-raised:        #1C1B19;
  --bg-hover:         #252420;
  --bg-subtle:        #222120;

  --text-primary:     #E8E5DF;
  --text-secondary:   #A09A93;
  --text-tertiary:    #706B65;
  --text-inverse:     #131312;

  /* Berry accent (prior green palette: #7DA893 / #2B3D34 / #1E2D26 / #A3CCBA) */
  --accent:           #C77FA3;
  --accent-soft:      #3D2A33;
  --accent-muted:     #2A1A23;
  --accent-dark:      #D99AB8;

  /* "Salary sacrifice" accent (Payroll comparison) — currently berry; prior teal: #4FA89E / #5FB8AE / #16302D */
  --sacrifice:        #C77FA3;
  --sacrifice-dark:   #D99AB8;
  --sacrifice-muted:  #2A1A23;

  --border:           #2E2D2A;
  --border-light:     #252422;

  --shadow-sm:        0 1px 2px rgba(0,0,0,.2);
  --shadow-md:        0 4px 12px rgba(0,0,0,.3);
  --shadow-lg:        0 8px 30px rgba(0,0,0,.4);

  --bracket-0:        #7D9E9F;
  --bracket-1:        #6E977D;
  --bracket-2:        #B99B5A;
  --bracket-3:        #B37D62;
  --bracket-4:        #A35E5E;

  --pretax-tag-bg:    #1E2A3D;
  --pretax-tag-color: #6FA3E0;
  --posttax-tag-bg:   #2D1F15;
  --posttax-tag-color:#D49060;

  --good:             #7DC096;
  --good-bg:          #162419;
  --warn:             #C07070;
  --warn-bg:          #2A1818;

  --exempt-bg:        #162419;
  --exempt-border:    #2B3D34;
  --exempt-header:    #7DC096;
  --standard-bg:      #231A14;
  --standard-border:  #3D2A1E;
  --standard-header:  #D49060;

  color-scheme: dark;
}

/* ═══ DRACULA THEME ═══ */
/* Official Dracula palette: bg #282A36 · current-line #44475A · fg #F8F8F2 ·
   comment #6272A4 · cyan #8BE9FD · green #50FA7B · orange #FFB86C ·
   pink #FF79C6 · purple #BD93F9 · red #FF5555 · yellow #F1FA8C */
[data-theme="dracula"] {
  --bg:               #282A36;
  --bg-raised:        #343746;
  --bg-hover:         #3C3F52;
  --bg-subtle:        #21222C;

  --text-primary:     #F8F8F2;
  --text-secondary:   #C7C8DA;
  --text-tertiary:    #6272A4;
  --text-inverse:     #282A36;

  /* Pink accent (keeps the app's berry/pink character) */
  --accent:           #FF79C6;
  --accent-soft:      #45304A;
  --accent-muted:     #382A3C;
  --accent-dark:      #FF92D0;

  --sacrifice:        #FF79C6;
  --sacrifice-dark:   #FF92D0;
  --sacrifice-muted:  #382A3C;

  --border:           #44475A;
  --border-light:     #383B4A;

  --shadow-sm:        0 1px 2px rgba(0,0,0,.25);
  --shadow-md:        0 4px 12px rgba(0,0,0,.35);
  --shadow-lg:        0 8px 30px rgba(0,0,0,.45);

  --bracket-0:        #8BE9FD;
  --bracket-1:        #50FA7B;
  --bracket-2:        #F1FA8C;
  --bracket-3:        #FFB86C;
  --bracket-4:        #FF5555;

  --pretax-tag-bg:    #2B3A52;
  --pretax-tag-color: #8BE9FD;
  --posttax-tag-bg:   #3D2E1E;
  --posttax-tag-color:#FFB86C;

  --good:             #50FA7B;
  --good-bg:          #1E3326;
  --warn:             #FF5555;
  --warn-bg:          #3A1E1E;

  --exempt-bg:        #1E3326;
  --exempt-border:    #2D4A38;
  --exempt-header:    #50FA7B;
  --standard-bg:      #3D2E1E;
  --standard-border:  #5A4530;
  --standard-header:  #FFB86C;

  color-scheme: dark;
}

/* ═══ GLOBAL TOKENS ═══ */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-pill: 100px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --layout-max-width: 1380px;
  --ease-out:  cubic-bezier(.22,1,.36,1);
  --duration:  220ms;
}

/* ═══ RESET ═══ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background 400ms var(--ease-out), color 400ms var(--ease-out);
}

/* ═══ TITLE BAR (legacy Electron hook, hidden on web) ═══ */
.titlebar-drag {
  display: none;
}

/* ═══ LAYOUT SHELL & CONTAINER RAILS ═══ */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.app-header {
  width: 100%;
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding: var(--space-xl) var(--space-2xl) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.app-header__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}
.app-header__left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.app-header__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-dark); background: var(--accent-muted);
  padding: 4px 10px; border-radius: var(--radius-pill); width: fit-content;
}
.app-header__badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
.app-header h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.app-header__salary,
.app-header__subtitle {
  font-size: 13.5px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  line-height: 1.4;
}
.salary-inline {
  font-family: var(--font-mono); font-weight: 700; font-size: 15px;
  color: var(--text-primary); background: var(--bg-subtle);
  border: 1.5px solid var(--border-light); border-radius: var(--radius-sm);
  padding: 2px 10px; outline: none; width: 136px;
  transition: all var(--duration) var(--ease-out);
}
.salary-inline:not([readonly]):hover { border-color: var(--border); }
.salary-inline:not([readonly]):focus { border-color: var(--accent); background: var(--bg-raised); box-shadow: 0 0 0 3px rgba(91,127,110,.12); }
.salary-inline[readonly] {
  cursor: default;
  background: var(--bg-subtle);
  border-color: transparent;
  width: auto;
  max-width: 130px;
}

/* ═══ HEADER RIGHT ═══ */
.app-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  -webkit-app-region: no-drag;
}

/* ═══ HEADER NAV BAR (profiles + pages) ═══ */
.header-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  min-height: 52px;
  padding: 0 0 var(--space-md);
  border-bottom: 1px solid var(--border-light);
  -webkit-app-region: no-drag;
}
.header-nav-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.header-nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-left: auto;
  max-width: 100%;
}

/* ═══ NAV ═══ */
.app-nav {
  display: flex;
  align-items: center;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}
.app-nav::-webkit-scrollbar { display: none; }
.nav-link {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  padding: 7px 16px; border-radius: var(--radius-pill);
  border: none; background: transparent; cursor: pointer;
  color: var(--text-secondary); text-decoration: none;
  white-space: nowrap;
  transition: all var(--duration) var(--ease-out);
}
.nav-link:hover { color: var(--text-primary); }
.nav-link.active {
  background: var(--bg-raised); color: var(--text-primary);
  box-shadow: var(--shadow-sm); font-weight: 600;
}

/* ═══ PROFILE SWITCHER ═══ */
.profile-switcher {
  display: flex;
  align-items: center;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}
.profile-btn {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  padding: 7px 16px; border-radius: var(--radius-pill); border: none;
  background: transparent; color: var(--text-secondary); cursor: pointer;
  transition: all var(--duration) var(--ease-out);
  display: flex; align-items: center; gap: 6px;
}
.profile-btn:hover { color: var(--text-primary); }
.profile-btn.active {
  background: var(--accent-dark); color: var(--text-inverse);
  box-shadow: var(--shadow-sm); font-weight: 600;
}
/* Dark theme's --accent-dark is a light pink (text tone), so keep the mid-berry
   fill here where it sits behind white text. */
:is([data-theme="dark"], [data-theme="dracula"]) .profile-btn.active { background: var(--accent); }
.profile-btn__icon { font-size: 14px; }



/* ═══ NO LEASE PLACEHOLDER ═══ */
.no-lease-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-2xl); text-align: center; gap: var(--space-md);
  min-height: 300px;
}
.no-lease-icon { font-size: 48px; opacity: .4; }
.no-lease-title { font-size: 18px; font-weight: 600; color: var(--text-secondary); }
.no-lease-desc { font-size: 14px; color: var(--text-tertiary); max-width: 360px; line-height: 1.6; }

/* ═══ TOGGLE SWITCH ═══ */
.toggle-switch {
  position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-subtle); border: 1.5px solid var(--border);
  border-radius: 12px; transition: all 300ms var(--ease-out);
}
.toggle-slider::before {
  content: ''; position: absolute; height: 18px; width: 18px;
  left: 2px; bottom: 1.5px; background: white;
  border-radius: 50%; transition: all 300ms var(--ease-out);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--accent); border-color: var(--accent);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* ═══ DEDUCTION TOGGLES ═══ */
.deduction-toggles {
  padding: var(--space-md) var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm);
}

.deduction-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  transition: all 300ms var(--ease-out);
}
.deduction-toggle-row.active {
  background: var(--accent-muted); border-color: var(--accent-soft);
}
.deduction-toggle-left { display: flex; align-items: center; gap: var(--space-md); }
.deduction-toggle-icon { font-size: 20px; flex-shrink: 0; }
.deduction-toggle-info { display: flex; flex-direction: column; gap: 2px; }
.deduction-toggle-label { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.deduction-toggle-sub { font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono); }
.lease-picker {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-primary);
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  cursor: pointer;
  max-width: 220px;
}
.lease-picker:focus { outline: none; border-color: var(--accent); }
.hh-lease-picker {
  font-size: 11px;
  color: var(--text-primary);
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  cursor: pointer;
  max-width: 200px;
  margin-top: 2px;
}
.hh-lease-picker:focus { outline: none; border-color: var(--accent); }

/* Deduction summary */
.deduction-summary {
  margin: 0; padding: var(--space-md) var(--space-lg);
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}
.deduction-summary-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; color: var(--text-secondary); }
.ds-value { font-family: var(--font-mono); font-weight: 600; color: var(--text-primary); }
.deduction-summary-row.ds-total { border-top: 1px solid var(--border); padding-top: var(--space-sm); margin-top: var(--space-xs); font-weight: 700; color: var(--text-primary); }
.deduction-summary-row.ds-total .ds-value { color: var(--accent-dark); }

/* Deduction row actions */
.deduction-toggle-actions { display: flex; align-items: center; gap: var(--space-sm); }
.deduction-delete-btn {
  width: 28px; height: 28px; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-tertiary); cursor: pointer;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
  transition: all var(--duration) var(--ease-out); flex-shrink: 0;
}
.deduction-delete-btn:hover { background: rgba(176,107,107,.15); color: var(--bracket-5); }

/* Add deduction button */
.add-deduction-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: var(--space-md);
  background: transparent; border: 1.5px dashed var(--border);
  border-radius: var(--radius-md); color: var(--text-tertiary);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all var(--duration) var(--ease-out);
}
.add-deduction-btn:hover {
  border-color: var(--accent); color: var(--accent-dark); background: var(--accent-muted);
}
.add-deduction-btn .add-icon { font-size: 16px; }

/* Deduction form */
.deduction-form {
  padding: var(--space-lg);
  background: var(--bg); border: 1.5px solid var(--accent-soft);
  border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-md);
}
.deduction-form-row { display: flex; gap: var(--space-md); align-items: end; }
.deduction-form-field { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.deduction-form-field label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-tertiary);
}
.deduction-form-input {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  padding: 8px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-raised); color: var(--text-primary); outline: none;
  transition: all var(--duration) var(--ease-out);
}
.deduction-form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,127,110,.1); }
.deduction-form-input::placeholder { color: var(--text-tertiary); }

/* Type selector pills */
.type-selector { display: flex; gap: 2px; background: var(--bg-subtle); border-radius: var(--radius-pill); padding: 3px; }
.type-pill {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  padding: 6px 14px; border-radius: var(--radius-pill); border: none;
  background: transparent; color: var(--text-secondary); cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}
.type-pill.active { background: var(--bg-raised); color: var(--text-primary); box-shadow: var(--shadow-sm); font-weight: 600; }

/* Form actions */
.deduction-form-actions { display: flex; gap: var(--space-sm); justify-content: flex-end; }
.form-btn {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  padding: 8px 20px; border-radius: var(--radius-md); border: none;
  cursor: pointer; transition: all var(--duration) var(--ease-out);
}
.form-btn--save { background: var(--accent); color: var(--text-inverse); }
.form-btn--save:hover { background: var(--accent-dark); }
.form-btn--save:disabled { opacity: .4; cursor: not-allowed; }
.form-btn--cancel { background: var(--bg-subtle); color: var(--text-secondary); }
.form-btn--cancel:hover { background: var(--bg-hover); }

/* ═══ THEME TOGGLE ═══ */
.theme-toggle {
  -webkit-app-region: no-drag; position: relative;
  width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-raised); cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 18px; transition: all var(--duration) var(--ease-out); flex-shrink: 0;
}
.theme-toggle:hover { background: var(--bg-hover); box-shadow: var(--shadow-md); transform: scale(1.05); }
.theme-toggle:active { transform: scale(.95); }
.theme-icon { position: absolute; transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
.theme-icon { opacity: 0; transform: rotate(-90deg); }
:root .theme-icon--light,
[data-theme="light"] .theme-icon--light       { opacity:1; transform:rotate(0) }
[data-theme="dark"] .theme-icon--dark         { opacity:1; transform:rotate(0) }
[data-theme="dracula"] .theme-icon--dracula   { opacity:1; transform:rotate(0) }

.main-content {
  flex: 1;
  width: 100%;
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding: var(--space-lg) var(--space-2xl) var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
/* Prevent empty dynamic placeholders from creating phantom 24px flex gaps */
.main-content > :empty {
  display: none !important;
}
/* Enforce uniform vertical rhythm (24px via gap) across all direct sections */
.main-content > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ═══ SHARED ═══ */
.section-header {
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-light);
}
.section-header h2 { font-size: 16px; font-weight: 600; line-height: 1.3; }
.info-tag { font-size: 11px; font-weight: 500; color: var(--text-tertiary); background: var(--bg-subtle); padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; }

/* ═══ SUMMARY CARDS ═══ */
.summary-row { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-md); }
.summary-card {
  background: var(--bg-raised); border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs);
  transition: all var(--duration) var(--ease-out); position: relative; overflow: hidden;
}
.summary-card::before { content:''; position:absolute; top:0;left:0;right:0; height:3px; background:var(--card-accent,var(--accent)); opacity:0; transition:opacity var(--duration) var(--ease-out); }
.summary-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.summary-card:hover::before { opacity: 1; }
.summary-card.highlight { background: var(--accent-muted); border-color: var(--accent-soft); }
.summary-card__label { font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.06em; color:var(--text-tertiary); }
.summary-card__value { font-size:24px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; font-family:var(--font-mono); }
.summary-card__value.accent { color: var(--accent-dark); }
.summary-card__sub { font-size:12px; color:var(--text-secondary); }

/* Deductions split */
.deductions-split { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.deduction-line { display:flex; align-items:center; gap:8px; font-size:12px; }
.deduction-tag { font-size:9px; font-weight:700; letter-spacing:.06em; padding:2px 6px; border-radius:4px; flex-shrink:0; }
.pretax-tag { background:var(--pretax-tag-bg); color:var(--pretax-tag-color); }
.posttax-tag { background:var(--posttax-tag-bg); color:var(--posttax-tag-color); }
.deduction-name { color:var(--text-secondary); font-weight:500; }
.deduction-val { font-family:var(--font-mono); font-weight:600; font-size:12px; color:var(--text-primary); margin-left:auto; }

/* ═══ DUAL PANEL ═══ */
.dual-panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; }
.panel-card {
  background: var(--bg-raised); border: 1px solid var(--border-light); border-radius: var(--radius-xl);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--duration) var(--ease-out);
}

/* ═══ STACKED BAR ═══ */
.stacked-bar-container { padding: var(--space-xl); padding-bottom: var(--space-sm); }
.stacked-bar { display:flex; height:48px; border-radius:var(--radius-md); overflow:hidden; gap:2px; }
.stacked-segment { display:flex; align-items:center; justify-content:center; position:relative; transition:flex-basis 600ms var(--ease-out),opacity var(--duration); cursor:default; overflow:hidden; }
.stacked-segment:hover { opacity:.85; }
.stacked-segment-inner { display:flex; flex-direction:column; align-items:center; gap:1px; white-space:nowrap; pointer-events:none; }
.stacked-segment-amount { font-size:11px; font-weight:700; color:white; text-shadow:0 1px 3px rgba(0,0,0,.3); }
.stacked-segment-rate { font-size:9px; font-weight:600; color:rgba(255,255,255,.8); text-shadow:0 1px 2px rgba(0,0,0,.2); }
.stacked-bar-labels { display:flex; gap:2px; padding:var(--space-sm) 0 0; }
.stacked-bar-label { text-align:center; font-size:10px; color:var(--text-tertiary); font-weight:500; transition:flex-basis 600ms var(--ease-out); }
.bracket-legend { display:flex; flex-wrap:wrap; gap:var(--space-sm) var(--space-lg); padding:var(--space-md) var(--space-xl) var(--space-lg); }
.legend-item { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-secondary); }
.legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.legend-item strong { font-weight:600; color:var(--text-primary); }

/* ═══ TAX TABLE ═══ */
.tax-table { width:100%; border-collapse:collapse; }
.tax-table thead th { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-tertiary); padding:var(--space-md) var(--space-lg); text-align:left; background:var(--bg); border-bottom:1px solid var(--border-light); }
.tax-table thead th:nth-child(4), .tax-table thead th:nth-child(5) { text-align:right; }
.tax-table tbody tr { transition:background var(--duration) var(--ease-out); cursor:default; }
.tax-table tbody tr:hover { background:var(--bg-hover); }
.tax-table tbody td { padding:var(--space-sm) var(--space-lg); font-size:13px; border-bottom:1px solid var(--border-light); vertical-align:middle; }
.tax-table tbody tr:last-child td { border-bottom:none; }
.tax-table tbody td:nth-child(4), .tax-table tbody td:nth-child(5) { text-align:right; }
.tax-table tfoot td { padding:var(--space-sm) var(--space-lg); font-size:13px; font-weight:700; border-top:2px solid var(--border); background:var(--bg); }
.tax-table tfoot td:nth-child(2), .tax-table tfoot td:nth-child(3) { text-align:right; }
.bracket-indicator { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.bracket-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.rate-pill { display:inline-block; font-family:var(--font-mono); font-size:12px; font-weight:500; padding:3px 10px; border-radius:var(--radius-pill); }
.income-range,.income-amount,.tax-amount { font-variant-numeric:tabular-nums; font-family:var(--font-mono); font-size:12px; }
.income-amount { color:var(--text-primary); font-weight:600; }
.tax-amount { color:var(--bracket-4); font-weight:600; }
.tax-amount.nil { color:var(--text-tertiary); font-weight:400; }

/* ═══ PRE-TAX SPENDING ═══ */
.pretax-card { background:var(--bg-raised); border:1px solid var(--border-light); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-sm); }
.pretax-intro { padding:var(--space-lg) var(--space-xl) var(--space-sm); font-size:14px; color:var(--text-secondary); line-height:1.7; }
.pretax-intro strong { color:var(--text-primary); }

/* Comparison columns */
.pretax-comparison { display:grid; grid-template-columns:1fr auto 1fr; gap:0; margin:0 var(--space-xl) var(--space-xl); border:1px solid var(--border-light); border-radius:var(--radius-lg); overflow:hidden; }
.pretax-col { padding:var(--space-lg); display:flex; flex-direction:column; gap:var(--space-md); }
.pretax-col--before { background:var(--bg); }
.pretax-col--after { background:var(--sacrifice-muted); }
.pretax-col-header { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-tertiary); padding-bottom:var(--space-sm); border-bottom:1px solid var(--border-light); }
.pretax-col-header.accent { color:var(--sacrifice-dark); }
.pretax-stat { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-sm); }
.pretax-stat.total { padding-top:var(--space-sm); border-top:1px solid var(--border-light); }
.pretax-stat-label { font-size:13px; color:var(--text-secondary); }
.pretax-stat-value { font-family:var(--font-mono); font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
.pretax-stat-value.accent { color:var(--sacrifice-dark); }
.pretax-col-divider { display:flex; align-items:center; justify-content:center; width:120px; background:var(--bg-raised); border-left:1px solid var(--border-light); border-right:1px solid var(--border-light); }
.pretax-savings-badge { display:flex; flex-direction:column; align-items:center; gap:4px; padding:var(--space-md); }
.savings-arrow { font-size:20px; color:var(--sacrifice); animation:arrowBounce 1.5s ease-in-out infinite; }
@keyframes arrowBounce { 0%,100%{transform:translateX(0)} 50%{transform:translateX(4px)} }
.savings-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-tertiary); }
.savings-value { font-family:var(--font-mono); font-size:18px; font-weight:700; color:var(--sacrifice-dark); }

/* Bracket shave-off */
.pretax-bracket-visual { padding:var(--space-lg) var(--space-xl) var(--space-xl); }
.pretax-bracket-visual h4 { font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:var(--space-md); }
.shave-bars { display:flex; flex-direction:column; gap:var(--space-sm); }
.shave-row { display:flex; align-items:center; gap:var(--space-md); }
.shave-label { width:56px; font-size:12px; font-weight:600; color:var(--text-secondary); text-align:right; flex-shrink:0; }
.shave-track { flex:1; height:24px; background:var(--bg-subtle); border-radius:var(--radius-sm); overflow:hidden; position:relative; }
.shave-fill { height:100%; border-radius:var(--radius-sm); transition:width 600ms var(--ease-out); position:absolute; top:0; left:0; }
.shave-fill.original { opacity:.3; }
.shave-fill.adjusted { opacity:1; }
.shave-amount { width:80px; font-size:11px; font-family:var(--font-mono); font-weight:500; color:var(--text-secondary); flex-shrink:0; }
.shave-amount .diff { color:var(--sacrifice-dark); font-weight:700; }

/* ═══ LEASE BUILDER ═══ */

/* Lease tabs */
.lease-tabs-bar {
  display: flex; align-items: center; gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.lease-tab {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  padding: 8px 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--border);
  background: transparent; color: var(--text-secondary); cursor: pointer;
  transition: all var(--duration) var(--ease-out);
  display: flex; align-items: center; gap: 6px;
}
.lease-tab:hover { border-color: var(--accent-soft); color: var(--text-primary); }
.lease-tab.active {
  background: var(--accent); color: var(--text-inverse); border-color: var(--accent);
  font-weight: 600; box-shadow: var(--shadow-sm);
}
.lease-tab-add {
  font-family: var(--font-sans); font-size: 16px; font-weight: 500;
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px dashed var(--border);
  background: transparent; color: var(--text-tertiary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--duration) var(--ease-out);
}
.lease-tab-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-muted); }

/* Lease actions */
.lease-actions { display: flex; gap: var(--space-sm); margin-left: auto; }
.lease-action-btn {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  padding: 5px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: transparent; color: var(--text-tertiary); cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}
.lease-action-btn:hover { border-color: var(--warn); color: var(--warn); }
.lease-action-btn.danger:hover { background: var(--warn-bg); }

/* Vehicle bar — editable */
.lease-vehicle-bar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg-raised); border: 1px solid var(--border-light); border-radius: var(--radius-xl);
  padding: var(--space-md) var(--space-xl); box-shadow: var(--shadow-sm); margin-bottom: var(--space-lg);
}
.vbar-left { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.vbar-name-input {
  font-family: var(--font-sans); font-size: 15px; font-weight: 700;
  color: var(--text-primary); background: transparent;
  border: 1.5px solid transparent; border-radius: var(--radius-sm);
  padding: 2px 8px; outline: none; width: 100%; max-width: 400px;
  transition: all var(--duration) var(--ease-out);
}
.vbar-name-input:hover { border-color: var(--border); }
.vbar-name-input:focus { border-color: var(--accent); background: var(--bg-raised); box-shadow: 0 0 0 3px rgba(91,127,110,.12); }
.vbar-detail { font-size: 12px; color: var(--text-secondary); display: flex; gap: var(--space-sm); align-items: center; }

.vbar-right { display: flex; gap: var(--space-lg); align-items: stretch; }
.vbar-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.vbar-stat-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-tertiary); }
.vbar-stat-value { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--text-primary); }
.vbar-stat-input {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  color: var(--text-primary); background: transparent;
  border: 1.5px solid transparent; border-radius: var(--radius-sm);
  padding: 2px 6px; outline: none; width: 80px; text-align: center;
  transition: all var(--duration) var(--ease-out);
}
.vbar-stat-input:hover { border-color: var(--border); }
.vbar-stat-input:focus { border-color: var(--accent); background: var(--bg-raised); box-shadow: 0 0 0 3px rgba(91,127,110,.12); }
.vbar-stat-input.narrow { width: 60px; }

/* Term selector pills */
.term-selector {
  display: flex; background: var(--bg-subtle); border-radius: var(--radius-pill);
  padding: 2px; gap: 1px;
}
.term-btn {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  padding: 4px 8px; border-radius: var(--radius-pill); border: none;
  background: transparent; color: var(--text-tertiary); cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}
.term-btn:hover { color: var(--text-primary); }
.term-btn.active { background: var(--bg-raised); color: var(--text-primary); box-shadow: var(--shadow-sm); }

/* Two-column grid */
.lease-builder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; }
.lease-impact-card { grid-column: 2; grid-row: 1 / 3; }

/* Selector card */
.lease-selector-card {
  background: var(--bg-raised); border: 1px solid var(--border-light); border-radius: var(--radius-xl);
  overflow: hidden; box-shadow: var(--shadow-sm);
}

/* Component groups */
.component-group { padding: 0 var(--space-xl); }
.component-group:last-child { padding-bottom: var(--space-xl); }
.component-group-header {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-md) 0; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-light);
}
.component-group-icon { font-size: 14px; }
.component-group-title { flex: 1; }
.group-toggle-btn {
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: transparent; color: var(--text-tertiary); cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}
.group-toggle-btn:hover { background: var(--accent-muted); color: var(--accent-dark); border-color: var(--accent-soft); }

/* Component rows */
.component-items { display: flex; flex-direction: column; }
.comp-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px var(--space-sm); border-bottom: 1px solid var(--border-light);
  transition: all var(--duration) var(--ease-out); cursor: default;
  border-radius: var(--radius-sm); margin: 0 calc(var(--space-sm) * -1);
  padding-left: var(--space-sm); padding-right: var(--space-sm);
}
.comp-row:last-child { border-bottom: none; }
.comp-row[data-key] { cursor: pointer; }
.comp-row[data-key]:hover { background: var(--bg-hover); }
.comp-row.active { background: var(--accent-muted); }
.comp-row.locked { opacity: .7; cursor: default; }
.comp-row.computed { opacity: .5; }
.comp-left { display: flex; align-items: center; gap: var(--space-sm); flex: 1; }
.comp-label { font-size: 13px; color: var(--text-primary); }
.comp-label.dim { color: var(--text-tertiary); }
.comp-amount { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.comp-amount.dimmed { color: var(--text-tertiary); }

/* Editable component amount */
.comp-amount-input {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--text-primary); background: transparent;
  border: 1.5px solid transparent; border-radius: var(--radius-sm);
  padding: 2px 6px; outline: none; width: 80px; text-align: right;
  transition: all var(--duration) var(--ease-out);
}
.comp-amount-input:hover { border-color: var(--border); }
.comp-amount-input:focus { border-color: var(--accent); background: var(--bg-raised); box-shadow: 0 0 0 3px rgba(91,127,110,.12); }
.comp-amount-input.dimmed { color: var(--text-tertiary); }

.comp-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.comp-annual-hint { font-size: 10px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; white-space: nowrap; }

/* Custom checkbox */
.comp-checkbox-wrap { display: flex; align-items: center; cursor: pointer; }
.comp-checkbox { display: none; }
.comp-check-custom {
  width: 18px; height: 18px; border: 2px solid var(--border); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--duration) var(--ease-out); font-size: 11px; color: transparent;
}
.comp-checkbox:checked + .comp-check-custom {
  background: var(--accent); border-color: var(--accent); color: var(--text-inverse);
}
.comp-checkbox:checked + .comp-check-custom::after { content: '✓'; }
.comp-check.locked { font-size: 12px; color: var(--text-tertiary); width: 18px; text-align: center; }

/* Impact card */
.lease-impact-card {
  background: var(--bg-raised); border: 1px solid var(--border-light); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); position: sticky; top: var(--space-lg);
  overflow-x: hidden; /* keep sides clean; don't clip bottom */
}
.live-tag { color: var(--good); }

/* Impact hero */
.impact-hero {
  padding: var(--space-xl); text-align: center;
  background: linear-gradient(135deg, var(--accent-muted), var(--bg-raised));
  border-bottom: 1px solid var(--border-light);
}
.impact-hero-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-tertiary); margin-bottom: 4px; }
.impact-hero-value { font-family: var(--font-mono); font-size: 36px; font-weight: 800; color: var(--accent-dark); }
.impact-hero-sub { font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

/* Waterfall */
.impact-waterfall { padding: var(--space-lg) var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); border-bottom: 1px solid var(--border-light); }
.wf-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--text-secondary); padding: 3px 0; }
.wf-row.subtract { color: var(--text-tertiary); }
.wf-row.result { border-top: 2px solid var(--border); padding-top: var(--space-sm); margin-top: var(--space-xs); font-weight: 700; color: var(--text-primary); }
.wf-val { font-family: var(--font-mono); font-weight: 600; color: var(--text-primary); }
.wf-row.subtract .wf-val { color: var(--bracket-4); }
.wf-row.result .wf-val { color: var(--accent-dark); font-size: 15px; }

/* Comparison boxes */
.impact-comparison {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl); border-bottom: 1px solid var(--border-light);
}
.impact-compare-box {
  flex: 1; padding: var(--space-md); border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
}
.impact-compare-box.without { background: var(--bg-subtle); border: 1px solid var(--border-light); }
.impact-compare-box.with { background: var(--good-bg); border: 1px solid var(--accent-soft); }
.compare-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-tertiary); }
.compare-value { font-family: var(--font-mono); font-size: 20px; font-weight: 800; color: var(--text-primary); }
.impact-compare-box.with .compare-value { color: var(--accent-dark); }
.compare-sub { font-size: 10px; color: var(--text-tertiary); }
.compare-detail { font-size: 10px; color: var(--text-tertiary); line-height: 1.4; margin-top: 2px; }
.compare-detail.green { color: var(--good); font-weight: 500; }
.impact-compare-arrow { font-size: 20px; color: var(--text-tertiary); flex-shrink: 0; }

/* Metrics grid */
.impact-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm);
  padding: var(--space-lg) var(--space-xl); border-bottom: 1px solid var(--border-light);
}
.metric-item {
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg);
}
.metric-item.highlight { grid-column: 1 / -1; background: var(--accent-muted); border: 1px solid var(--accent-soft); }
.metric-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); }
.metric-value { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--text-primary); }
.metric-value.good { color: var(--good); }
.metric-value.accent { color: var(--accent-dark); font-size: 22px; }

/* Marginal rate indicator */
.marginal-indicator {
  padding: var(--space-lg) var(--space-xl); display: flex; flex-direction: column;
  align-items: center; gap: 4px; text-align: center;
}
.mi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); }
.mi-value { font-family: var(--font-mono); font-size: 28px; font-weight: 800; color: var(--accent-dark); }
.mi-desc { font-size: 11px; color: var(--text-tertiary); line-height: 1.4; max-width: 280px; }

/* No lease placeholder (shared) */
.novated-card {
  background: var(--bg-raised); border: 1px solid var(--border-light);
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm);
}




/* ═══ MEDICARE NOTICE ═══ */
.medicare-notice {
  display:flex; align-items:flex-start; gap:var(--space-md);
  background:var(--accent-muted); border:1px solid var(--accent-soft); border-radius:var(--radius-md);
  padding:var(--space-md) var(--space-lg); font-size:13px; color:var(--accent-dark); line-height:1.6;
}
.medicare-notice .icon { font-size:18px; flex-shrink:0; }

/* ═══ HOUSEHOLD PAGE ═══ */

.hh-hero {
  margin-bottom: var(--space-lg);
}
.hh-hero-inner {
  background: linear-gradient(135deg, var(--accent-muted) 0%, var(--bg-raised) 100%);
  border: 1px solid var(--border-light); border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-2xl); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl);
}
.hh-hero-main { display: flex; flex-direction: column; gap: 4px; }
.hh-hero-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-tertiary);
}
.hh-hero-value {
  font-family: var(--font-mono); font-size: 42px; font-weight: 800;
  color: var(--accent-dark); line-height: 1;
}
.hh-hero-freq {
  font-size: 16px; font-weight: 500; color: var(--text-tertiary); margin-left: 4px;
}
.hh-hero-sub {
  font-size: 13px; color: var(--text-secondary); margin-top: 4px;
}
.hh-hero-stats {
  display: flex; gap: var(--space-xl);
}
.hh-hero-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--space-sm) var(--space-lg);
  background: var(--bg); border-radius: var(--radius-md);
}
.hh-hero-stat-label {
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-tertiary); white-space: nowrap;
}
.hh-hero-stat-value {
  font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--text-primary);
}

/* Side-by-side grid */
.hh-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* Profile card */
.hh-profile-card {
  background: var(--bg-raised); border: 1px solid var(--border-light);
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm);
}
.hh-card-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-subtle);
}
/* min-height matches .card-add-btn's box, so every card header is the same height
   whether or not it carries an action button — side-by-side cards then line up. */
.hh-card-name {
  font-size: 16px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; min-height: 32px;
}
.hh-card-salary {
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  color: var(--text-secondary);
}
.hh-card-body { padding: var(--space-lg) var(--space-xl); }

/* Waterfall */
.hh-waterfall { display: flex; flex-direction: column; gap: 1px; }
.hh-wf-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--text-secondary); padding: 6px 0;
}
.hh-wf-row.subtract { color: var(--text-tertiary); }
.hh-wf-row--off { opacity: .4; }
.hh-wf-row--off .hh-wf-val { text-decoration: line-through; }
.hh-wf-row--off em { font-style: normal; font-size: 10px; }
.hh-wf-row.subtotal {
  border-top: 1px solid var(--border-light); padding-top: var(--space-sm);
  margin-top: var(--space-xs); font-weight: 600; color: var(--text-primary);
}
.hh-wf-row.result {
  border-top: 2px solid var(--border); padding-top: var(--space-sm);
  margin-top: var(--space-sm); font-weight: 700; color: var(--text-primary); font-size: 14px;
}
.hh-wf-val {
  font-family: var(--font-mono); font-weight: 600; color: var(--text-primary);
}
.hh-wf-row.subtract .hh-wf-val { color: var(--bracket-4); }
.hh-wf-row.result .hh-wf-val { color: var(--accent-dark); font-size: 16px; }

/* Lease component breakdown — collapsible, indented sub-rows */
.hh-wf-row--toggle { cursor: pointer; user-select: none; }
.hh-wf-row--toggle:hover { color: var(--text-secondary); }
.hh-wf-chevron {
  display: inline-block; font-size: 12px; color: var(--text-tertiary);
  transition: transform var(--duration) var(--ease-out);
}
.hh-wf-chevron.open { transform: rotate(90deg); }
.hh-wf-breakdown {
  margin: -2px 0 4px var(--space-md);
  padding-left: var(--space-sm);
  border-left: 1px solid var(--border-light);
}
.hh-wf-sub {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; color: var(--text-tertiary); padding: 2px 0;
}
.hh-wf-sub-val { font-family: var(--font-mono); }

/* Stats row */
.hh-stats-row {
  display: flex; gap: var(--space-sm); margin-top: var(--space-lg);
  padding-top: var(--space-lg); border-top: 1px solid var(--border-light);
}
.hh-stat-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--space-sm); background: var(--bg); border-radius: var(--radius-md);
}
.hh-stat-label {
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-tertiary); white-space: nowrap;
}
.hh-stat-value {
  font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--text-primary);
}
.hh-stat-value.good { color: var(--good); }

/* Frequency bar */
.hh-freq-bar {
  display: flex; align-items: center; justify-content: center; gap: var(--space-md);
  padding: var(--space-md) 0;
}
.hh-freq-label {
  font-size: 12px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: .06em;
}

/* ═══ HOME LOANS ═══ */
/* Half-width row: loan card on the left, room for a sibling card on the right */
.hh-loans-container {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg);
  align-items: start; margin-top: var(--space-lg);
}
/* Cards are stacked per column rather than flowed through the grid: with an odd card count
   a plain grid locks row 2 to the tallest row-1 card, leaving a dead gap under the short one. */
.hh-loans-col {
  display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0;
}
.hh-net-container { margin-top: var(--space-lg); }
.sb-gross-info {
  font-size: 11px; color: var(--text-tertiary);
  cursor: help; margin-left: 3px;
  vertical-align: middle; opacity: .7;
}
.sb-gross-info:hover { opacity: 1; color: var(--text-secondary); }

/* ── Vehicle Expenses card ── */
#hhVehicleContainer { margin-top: var(--space-lg); }
.hh-vehicle-card { width: 100%; --row-inset: 17px; } /* rows sit inside .vx-group: 1px border + 16px .vx-items padding */
.vx-add-btns { display: flex; gap: var(--space-xs); }

.vx-group {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  overflow: hidden;
}
.vx-group-header {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-light);
}
.vx-cat-icon { font-size: 16px; flex-shrink: 0; }
.vx-name-input { flex: 1; font-weight: 600; }
.vx-group-total {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-secondary); font-weight: 600; flex-shrink: 0;
}
.vx-items { padding: var(--space-xs) var(--space-md) var(--space-sm); }

/* Lease comparison */
.vx-lease-compare {
  margin-top: var(--space-md);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-md); overflow: hidden;
}
.vx-lc-title {
  padding: var(--space-sm) var(--space-md);
  background: var(--accent-muted);
  font-size: 12px; font-weight: 700; color: var(--text-primary);
}
.vx-lc-rows { padding: var(--space-sm) var(--space-md) 0; }
.vx-lc-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 3px 0; font-size: 12px; color: var(--text-secondary);
}
.vx-lc-row--subtract .hh-wf-val { color: var(--good); }
.vx-lc-row--result {
  border-top: 1px solid var(--border-light);
  margin-top: var(--space-xs); padding-top: var(--space-xs);
  font-weight: 600; color: var(--text-primary);
}
.vx-lc-delta {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-sm);
  font-size: 12px; font-weight: 600;
  border-top: 1px solid var(--border-light);
}
.vx-lc-delta--good { background: var(--good-bg); color: var(--good); }
.vx-lc-delta--warn { background: var(--warn-bg); color: var(--warn); }
.vx-lc-delta-val { font-family: var(--font-mono); font-size: 14px; font-weight: 700; }
.wf-freq { font-size: 12px; font-weight: 500; color: var(--text-tertiary); margin-left: 4px; }
.loan-list { display: flex; flex-direction: column; }
.loan-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-light);
}
.loan-row:last-child { border-bottom: none; }

/* A loan groups its repayment row + optional rent-offset sub-row under one divider */
.loan-group { border-bottom: 1px solid var(--border-light); }
.loan-group:last-child { border-bottom: none; }
.loan-group .loan-row { border-bottom: none; }
.loan-subrow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: 0 0 var(--space-sm) var(--space-lg);
}
.loan-subrow-label { font-size: 12px; font-weight: 600; color: var(--good); white-space: nowrap; }
.loan-amount-wrap.rent, .loan-amount-wrap.rent .loan-amount { color: var(--good); }
.loan-add-rent {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  padding: 2px 10px; border: 1px dashed var(--border); border-radius: var(--radius-pill);
  background: transparent; color: var(--text-tertiary); cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}
.loan-add-rent:hover { border-color: var(--good); color: var(--good); }
.loan-name { max-width: 300px; flex: 1; font-size: 14px; }
.loan-row-controls { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }
.loan-freq {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  color: var(--text-secondary); background: var(--bg-subtle);
  border: 1px solid var(--border-light); border-radius: var(--radius-pill);
  padding: 5px 12px; cursor: pointer; outline: none;
  transition: all var(--duration) var(--ease-out);
}
.loan-freq:hover { border-color: var(--accent-soft); }
.loan-freq:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,127,110,.12); }
.loan-amount-wrap {
  display: flex; align-items: center; gap: 2px;
  color: var(--text-tertiary); font-family: var(--font-mono); font-weight: 600;
}
.loan-amount { width: 96px; text-align: right; }
.loan-empty {
  text-align: center; color: var(--text-tertiary); font-size: 13px;
  padding: var(--space-lg) 0;
}
.loan-summary { margin-top: var(--space-lg); }
/* An editable row keeps its text inside inputs (1.5px border + inner padding) and ends with
   a 28px delete button, so the row's label and figure sit inset from the row box. The summary
   row is plain text — inset it by the same amounts so the total lines up with the column of
   figures above it. --row-inset accounts for any wrapper the rows sit in (0 at card-body
   level; the Vehicle card boxes its rows inside .vx-group). */
.loan-summary .hh-wf-row > span:first-child {
  margin-left: calc(var(--row-inset, 0px) + 9.5px);   /* .vbar-name-input: 8px padding + 1.5px border */
}
.loan-summary .hh-wf-row > .hh-wf-val {
  margin-right: calc(var(--row-inset, 0px) + 28px + var(--space-sm) + 7.5px); /* × btn + gap + .loan-amount inset */
}

/* Compact "+ Add" button that lives in a card header */
.card-add-btn {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); cursor: pointer; flex-shrink: 0;
  transition: all var(--duration) var(--ease-out);
}
.card-add-btn:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-muted); }

/* Subtle warm/orange tint so the cards have a little life.
   rgba layered over --bg-raised so it reads consistently in both themes.
   Applied consistently across ALL page cards in the application. */
.hh-profile-card,
.hh-loans-card,
.hh-expenses-card,
.hh-yearly-card,
.hh-vehicle-card,
.hh-property-card,
.hh-net-card,
.summary-card,
.panel-card,
.pretax-card,
.novated-card,
.super-controls-card,
.super-impact-card,
.lease-selector-card,
.lease-impact-card,
.prop-card,
.prop-hero-stat,
.acct-card,
.acct-ledger-card,
.acct-panel-card,
.tf-hero-card,
.tf-card,
.ui-card,
.ui-stat-card {
  background: linear-gradient(160deg, rgba(192,138,110,.10) 0%, var(--bg-raised) 55%);
  border-color: rgba(192,138,110,.26);
}
.hh-profile-card .hh-card-header,
.section-header,
.prop-card__header,
.tf-card-header {
  background: transparent;
  border-bottom-color: rgba(192,138,110,.20);
}
/* Net Pay highlight tile: a touch stronger so it still stands out, but warm */
.summary-card.highlight {
  background: linear-gradient(160deg, rgba(192,138,110,.24) 0%, var(--bg-raised) 60%);
  border-color: rgba(192,138,110,.42);
}
:is([data-theme="dark"], [data-theme="dracula"]) .hh-profile-card,
:is([data-theme="dark"], [data-theme="dracula"]) .hh-loans-card,
:is([data-theme="dark"], [data-theme="dracula"]) .hh-expenses-card,
:is([data-theme="dark"], [data-theme="dracula"]) .hh-yearly-card,
:is([data-theme="dark"], [data-theme="dracula"]) .hh-vehicle-card,
:is([data-theme="dark"], [data-theme="dracula"]) .hh-property-card,
:is([data-theme="dark"], [data-theme="dracula"]) .hh-net-card,
:is([data-theme="dark"], [data-theme="dracula"]) .summary-card,
:is([data-theme="dark"], [data-theme="dracula"]) .panel-card,
:is([data-theme="dark"], [data-theme="dracula"]) .pretax-card,
:is([data-theme="dark"], [data-theme="dracula"]) .novated-card,
:is([data-theme="dark"], [data-theme="dracula"]) .super-controls-card,
:is([data-theme="dark"], [data-theme="dracula"]) .super-impact-card,
:is([data-theme="dark"], [data-theme="dracula"]) .lease-selector-card,
:is([data-theme="dark"], [data-theme="dracula"]) .lease-impact-card,
:is([data-theme="dark"], [data-theme="dracula"]) .prop-card,
:is([data-theme="dark"], [data-theme="dracula"]) .prop-hero-stat,
:is([data-theme="dark"], [data-theme="dracula"]) .acct-card,
:is([data-theme="dark"], [data-theme="dracula"]) .acct-ledger-card,
:is([data-theme="dark"], [data-theme="dracula"]) .acct-panel-card,
:is([data-theme="dark"], [data-theme="dracula"]) .tf-hero-card,
:is([data-theme="dark"], [data-theme="dracula"]) .tf-card,
:is([data-theme="dark"], [data-theme="dracula"]) .ui-card,
:is([data-theme="dark"], [data-theme="dracula"]) .ui-stat-card {
  background: linear-gradient(160deg, rgba(212,144,96,.14) 0%, var(--bg-raised) 55%);
  border-color: rgba(212,144,96,.28);
}
:is([data-theme="dark"], [data-theme="dracula"]) .summary-card.highlight {
  background: linear-gradient(160deg, rgba(212,144,96,.28) 0%, var(--bg-raised) 60%);
  border-color: rgba(212,144,96,.44);
}
:is([data-theme="dark"], [data-theme="dracula"]) .hh-profile-card .hh-card-header,
:is([data-theme="dark"], [data-theme="dracula"]) .section-header,
:is([data-theme="dark"], [data-theme="dracula"]) .prop-card__header,
:is([data-theme="dark"], [data-theme="dracula"]) .tf-card-header {
  border-bottom-color: rgba(212,144,96,.22);
}
:is([data-theme="dark"], [data-theme="dracula"]) .hh-profile-card .hh-card-name { color: var(--posttax-tag-color); }

/* ═══ COMPARE PAGE — CONTROL BAR ═══ */

.hh-control-bar {
  display: flex; align-items: center; gap: var(--space-lg);
  padding: var(--space-md) 0;
  flex-wrap: wrap; justify-content: center;
  margin-bottom: var(--space-xs);
}
.hh-control-group { display: flex; align-items: center; gap: var(--space-md); }
.hh-control-sep { width: 1px; height: 24px; background: var(--border-light); }

/* Option description chip */
.option-desc-row { display: flex; justify-content: center; margin-bottom: var(--space-lg); }
.option-desc-chip {
  display: flex; align-items: baseline; gap: var(--space-sm);
  background: var(--bg-subtle); border: 1px solid var(--border-light);
  border-radius: var(--radius-pill); padding: 6px var(--space-lg);
  font-size: 12px; color: var(--text-secondary); max-width: 680px;
}
.option-desc-label {
  font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent-dark); white-space: nowrap; flex-shrink: 0;
}

/* ═══ COMPARE PAGE — SPENDING LANDSCAPE BAR ═══ */

.sb-card { margin-bottom: var(--space-lg); }
.sb-bar {
  display: flex; height: 36px; border-radius: var(--radius-md);
  overflow: hidden; gap: 1px; background: var(--border-light);
  margin: var(--space-md) 0;
}
.sb-seg {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-width: 2px; transition: opacity .18s, filter .18s, box-shadow .18s; cursor: default;
}
.sb-seg-label {
  font-size: 10px; font-weight: 700; color: rgba(255,255,255,.9);
  letter-spacing: .03em; pointer-events: none; white-space: nowrap;
}
/* Hover cross-highlight states (set via JS) */
.sb-seg--dimmed  { opacity: .22; }
.sb-seg--active  {
  filter: brightness(1.22);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
}
.sb-over-budget {
  font-size: 12px; font-weight: 600; color: var(--warn);
  background: var(--warn-bg); border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-sm);
}
/* Vertical legend */
.sb-legend {
  display: flex; flex-direction: column; gap: 1px;
  margin-top: var(--space-md);
}
/* Each item is a column so the breakdown can slide below the main row */
.sb-legend-item {
  display: flex; flex-direction: column;
  border-radius: var(--radius-sm);
  cursor: default; transition: background .12s;
  user-select: none; overflow: hidden;
}
.sb-legend-item:hover,
.sb-legend-item--active { background: var(--bg-subtle); }
/* Main row: dot + name + value + pct */
.sb-legend-main {
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: 12px; color: var(--text-secondary);
  padding: 5px var(--space-sm);
}
.sb-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.sb-legend-name { flex: 1; }
.sb-legend-val {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--text-primary); min-width: 72px; text-align: right;
}
.sb-legend-pct {
  font-size: 11px; color: var(--text-tertiary);
  min-width: 40px; text-align: right;
}
/* Chevron hint on expandable rows */
.sb-legend-expand-hint {
  font-size: 14px; color: var(--text-tertiary); margin-left: 4px;
  transition: transform .18s; line-height: 1;
}
.sb-legend-item--expanded .sb-legend-expand-hint { transform: rotate(90deg); }
/* Breakdown sub-list: hidden by default, slides open on expand */
.sb-legend-breakdown {
  max-height: 0; overflow: hidden;
  transition: max-height .22s ease-out, padding .22s ease-out;
  /* indent to align with name, past dot + gap */
  padding: 0 var(--space-sm) 0 calc(10px + var(--space-sm) + var(--space-sm));
}
.sb-legend-item--expanded .sb-legend-breakdown {
  max-height: 400px;  /* generous ceiling */
  padding-bottom: var(--space-sm);
}
.sb-legend-sub {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0; border-bottom: 1px solid var(--border-light);
  font-size: 11px; color: var(--text-tertiary);
}
.sb-legend-sub:last-child { border-bottom: none; }
.sb-legend-sub-name { }
.sb-legend-sub-val {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--text-secondary);
}

/* ═══ COMPARE PAGE — TWO-TIER WATERFALL (Option A / B) ═══ */

/* Available cash — enlarged result block */
.hh-available-result {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: var(--space-md) calc(-1 * var(--space-xl));
  padding: var(--space-md) var(--space-xl);
  background: var(--accent-muted); border-top: 2px solid var(--accent-soft);
  border-bottom: 2px solid var(--accent-soft);
}
.hh-available-result--warn {
  background: var(--warn-bg); border-color: rgba(176,107,107,.3);
}
.hh-available-label {
  font-size: 15px; font-weight: 700; color: var(--text-primary);
}
.hh-available-val {
  font-family: var(--font-mono); font-size: 26px; font-weight: 800;
  color: var(--accent-dark); line-height: 1;
}
.hh-available-result--warn .hh-available-val { color: var(--warn); }

/* Separator between tier 1 and tier 2 */
.hh-provisions-sep {
  display: flex; align-items: center; gap: var(--space-md);
  margin: var(--space-lg) 0 var(--space-md);
}
.hh-provisions-sep::before,
.hh-provisions-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--border-light);
}
.hh-provisions-sep-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-tertiary); white-space: nowrap;
  padding: 4px var(--space-md);
  background: var(--bg-subtle); border-radius: var(--radius-pill);
  border: 1px solid var(--border-light);
}

/* Provisions section — dimmer, advisory */
.hh-provisions { opacity: .80; }
.hh-provisions .hh-wf-row { font-size: 12px; }
.hh-provisions .hh-wf-row.subtotal { font-size: 13px; }

/* "Set aside" advisory pill */
.hh-provisions-setaside {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--space-md); padding: var(--space-sm) var(--space-md);
  background: var(--bg-subtle); border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  font-size: 12px; color: var(--text-secondary);
}
.hh-provisions-setaside strong {
  font-family: var(--font-mono); font-size: 14px; color: var(--text-primary);
}

/* After provisions — soft secondary line */
.hh-after-provisions {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--space-md); padding-top: var(--space-md);
  border-top: 1px dashed var(--border-light);
  font-size: 12px; color: var(--text-tertiary);
}
.hh-after-provisions .hh-wf-val {
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  color: var(--text-secondary);
}
.hh-after-provisions--warn .hh-wf-val { color: var(--warn); }

/* ═══ BRACKET EFFICIENCY (Lease Builder) ═══ */

.bracket-efficiency {
  margin-top: var(--space-lg); padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-top: 1px solid var(--border-light);
}
.be-section { display: flex; flex-direction: column; gap: var(--space-sm); }
.be-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-xs);
}
.be-title { font-size: 12px; font-weight: 700; color: var(--text-primary); }

/* Reuse .app-nav pill but scaled down */
.be-toggle { gap: 2px; }
.be-toggle .nav-link { font-size: 11px; padding: 4px 10px; }

.be-sources {
  font-size: 13px; color: var(--text-secondary);
  padding: var(--space-sm) var(--space-md);
  background: var(--accent-muted); border-radius: var(--radius-md);
  border: 1px solid var(--accent-soft);
  line-height: 1.5;
}
.be-sources strong { color: var(--text-primary); font-weight: 700; font-size: 14px; }
.be-src-label { font-weight: 700; font-size: 13px; }
.be-src-esssp { color: var(--bracket-2); }
.be-src-lease  { color: var(--bracket-4); }

/* Bar */
.be-bar {
  display: flex; height: 24px; border-radius: var(--radius-md);
  overflow: hidden; gap: 1px; background: var(--border-light);
}
.be-seg {
  display: flex; align-items: center; justify-content: center;
  min-width: 2px; transition: opacity .15s; cursor: default;
}
.be-seg:hover { opacity: .80; }
.be-seg-label {
  font-size: 10px; font-weight: 700; color: rgba(255,255,255,.9);
  pointer-events: none; white-space: nowrap; letter-spacing: .02em;
}

/* Split rows */
.be-rows { display: flex; flex-direction: column; gap: var(--space-xs); }
.be-row-group { display: flex; flex-direction: column; }
.be-row {
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: 11px; padding: 4px var(--space-xs);
  border-radius: var(--radius-sm);
}
.be-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.be-row-label { flex: 1; font-weight: 600; color: var(--text-secondary); }
.be-row-desc  { font-weight: 400; font-size: 10px; color: var(--text-tertiary); margin-left: 4px; }
.be-row-amount {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--text-primary); min-width: 68px; text-align: right;
}
.be-row-saved {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  min-width: 72px; text-align: right;
}

/* Per-bracket tax/cash breakdown */
.be-row-breakdown {
  /* indent to align with label text: dot(8px) + gap(8px) + row-pad-left(4px) */
  padding: 3px var(--space-xs) var(--space-sm) 24px;
}
.be-bd-bar {
  display: flex; height: 3px; border-radius: 100px;
  overflow: hidden; margin-bottom: 5px;
  background: var(--bg-subtle);
}
.be-bd-seg--tax  { height: 100%; background: var(--good); border-radius: 100px 0 0 100px; }
.be-bd-seg--cash { height: 100%; background: var(--text-tertiary); opacity: .25; flex: 1; border-radius: 0 100px 100px 0; }
.be-bd-labels { display: flex; justify-content: space-between; }
.be-bd-item { display: flex; flex-direction: column; gap: 1px; }
.be-bd-item--right { text-align: right; align-items: flex-end; }
.be-bd-label { font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
.be-bd-val   { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-primary); }

/* Total rows */
.be-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--text-secondary);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--border-light);
  margin-top: var(--space-xs);
}
.be-total--cash { border-top: none; margin-top: 0; padding-top: 2px; }
.be-total-val { font-family: var(--font-mono); font-size: 14px; font-weight: 700; }

/* Efficiency gap (negative mode) */
.be-bleed {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--space-sm) var(--space-md);
  background: var(--warn-bg); border: 1px solid rgba(176,107,107,.22);
  border-radius: var(--radius-md);
  font-size: 12px; color: var(--text-secondary);
}
.be-bleed-label { font-weight: 600; }
.be-bleed-val {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  color: var(--warn);
}
.be-bleed-desc {
  font-size: 11px; color: var(--text-tertiary); margin: 0;
  line-height: 1.5;
}

/* All-in-one-bracket badge */
.be-efficient {
  font-size: 11px; color: var(--good);
  padding: var(--space-sm) var(--space-md);
  background: var(--good-bg); border-radius: var(--radius-md);
}

/* ═══ SUPER OPTIMISER PAGE ═══ */
.super-intro { margin-bottom: var(--space-lg); }
.super-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; }

.super-controls-card {
  background: var(--bg-raised); border: 1px solid var(--border-light); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); padding: var(--space-xl); overflow: hidden;
}
.super-impact-card {
  background: var(--bg-raised); border: 1px solid var(--border-light); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); position: sticky; top: var(--space-lg); overflow-x: hidden;
}
.super-controls-card .section-header,
.super-impact-card  .section-header {
  padding: var(--space-lg) var(--space-xl);
  margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-xl)) var(--space-lg);
  border-bottom: 1px solid var(--border-light);
}
.super-impact-card .section-header {
  margin: 0;
}

/* Sacrifice control */
.super-sacrifice-control { margin-bottom: var(--space-lg); }
.ssc-amount-row { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.ssc-label { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; }
.ssc-per { color: var(--text-tertiary); font-size: 13px; }
.super-slider { width: 100%; accent-color: var(--accent); cursor: pointer; height: 6px; }
.ssc-sub { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-tertiary); margin-top: 4px; font-family: var(--font-mono); }
.ssc-presets { display: flex; gap: var(--space-xs); margin-top: var(--space-sm); }
.ssc-presets .card-add-btn { flex: 1; text-align: center; }

/* Concessional cap tracker */
.super-cap { margin: var(--space-lg) 0; padding-top: var(--space-lg); border-top: 1px solid var(--border-light); }
.super-cap-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-sm); }
.super-cap-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.super-cap-total { font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); }
.super-cap-of { color: var(--text-tertiary); font-weight: 500; font-size: 12px; }
.super-cap-bar { position: relative; display: flex; height: 14px; border-radius: var(--radius-pill); overflow: hidden; background: var(--bg-subtle); }
.super-cap-seg { height: 100%; transition: width var(--duration) var(--ease-out); }
.super-cap-seg--room { background: repeating-linear-gradient(45deg, var(--bg-subtle), var(--bg-subtle) 4px, var(--bg-hover) 4px, var(--bg-hover) 8px); }
.super-cap-marker { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--warn); }
.super-cap-legend { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); margin-top: var(--space-sm); }
.super-cap-leg { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); }
.super-cap-leg-val { font-family: var(--font-mono); color: var(--text-primary); font-weight: 600; }
.super-cap .adj-status { margin-top: var(--space-md); }

/* Balance + carry-forward inputs */
.super-extra-inputs { padding-top: var(--space-lg); border-top: 1px solid var(--border-light); display: flex; flex-direction: column; gap: var(--space-sm); }
.super-input-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.super-input-row label { font-size: 12px; color: var(--text-secondary); }
.super-carry-note { font-size: 11px; line-height: 1.4; }
.super-carry-note .good { color: var(--good); }
.super-carry-note .warn { color: var(--warn); }

/* Div 293 callout */
.super-d293 { margin: var(--space-md) var(--space-xl) var(--space-xl); padding: var(--space-md); border-radius: var(--radius-md); font-size: 12px; line-height: 1.5; display: flex; flex-direction: column; gap: 3px; }
.super-d293--ok   { background: var(--good-bg); color: var(--text-secondary); }
.super-d293--warn { background: var(--warn-bg); color: var(--text-secondary); }
.super-d293-title { font-weight: 700; color: var(--text-primary); }

/* How-to-contribute note */
.super-method { margin: 0 var(--space-xl) var(--space-xl); padding: var(--space-md); border-radius: var(--radius-md); background: var(--accent-muted); border: 1px solid var(--accent-soft); }
.super-method-title { font-size: 12.5px; font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-sm); }
.super-method-lead { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 var(--space-sm); }
.super-method-list { margin: 0; padding-left: 18px; font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.super-method-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.super-method-col { background: var(--bg-raised); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); }
.super-method-col p { font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; margin: 6px 0 0; }
.smc-head { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.smc-tag { display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: var(--radius-pill); margin-top: 4px; }
.smc-tag--now   { background: var(--good-bg); color: var(--good); }
.smc-tag--later { background: var(--standard-bg); color: var(--standard-header); }
.super-method-warn { font-size: 11px; line-height: 1.5; color: var(--text-secondary); background: var(--warn-bg); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); }
@media (max-width: 1100px) { .super-method-cols { grid-template-columns: 1fr; } }

@media (max-width: 1100px) { .super-grid { grid-template-columns: 1fr; } .super-impact-card { position: static; } }

/* ═══ CAR RUNNING COSTS ═══ */
#carCostsSection { margin-top: 0; }
.ccp-card { width: 100%; }
.ccp-tabs { margin-bottom: var(--space-md); }

.ccp-profile-header {
  display: flex; align-items: center; gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.ccp-name { flex: 1; font-size: 15px; font-weight: 700; }

.ccp-rows { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-sm); }
.ccp-row {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 4px 0;
}
.ccp-label { flex: 1; min-width: 80px; }
.ccp-freq  { flex-shrink: 0; }
.ccp-annual {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-tertiary); min-width: 72px; text-align: right; flex-shrink: 0;
}

.ccp-add-item-btn { margin-bottom: var(--space-md); }

.ccp-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--border-light);
  font-size: 13px; color: var(--text-secondary);
}
.ccp-total-val {
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  color: var(--text-primary);
}

/* ═══ FOOTER ═══ */
.app-footer {
  width: 100%;
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding: var(--space-lg) var(--space-2xl);
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
  border-top: 1px solid var(--border-light);
}
.app-footer a { color:var(--accent-dark); text-decoration:none; }

/* ═══ ANIMATIONS ═══ */
@keyframes fadeInUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.animate-in { animation: fadeInUp 500ms var(--ease-out) both; }
.delay-1 { animation-delay:60ms; } .delay-2 { animation-delay:120ms; } .delay-3 { animation-delay:200ms; } .delay-4 { animation-delay:280ms; } .delay-5 { animation-delay:360ms; }

.summary-card,.panel-card,.pretax-card,.novated-card,.medicare-notice,.app-footer,.theme-toggle,.lease-selector-card,.lease-impact-card,.lease-vehicle-bar,.hh-profile-card,.hh-hero-inner,.super-controls-card,.super-impact-card {
  transition: background var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}

/* ═══ RESPONSIVE ═══ */
@media (max-width:1100px) { .dual-panel { grid-template-columns:1fr; } .lease-builder-grid { grid-template-columns:1fr; } .hh-grid { grid-template-columns:1fr; } .hh-loans-container { grid-template-columns:1fr; } .hh-hero-inner { flex-direction:column; text-align:center; } .hh-hero-stats { justify-content:center; } }
@media (max-width:900px) { .summary-row { grid-template-columns:repeat(2,1fr); } .pretax-comparison { grid-template-columns:1fr; } .pretax-col-divider { width:auto; border-left:none;border-right:none; border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); padding:var(--space-md); } .app-header,.main-content { padding-left:var(--space-lg);padding-right:var(--space-lg); } }

::-webkit-scrollbar { width:6px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; } ::-webkit-scrollbar-thumb:hover { background:var(--text-tertiary); }

/* ═══ Agent Panel ═══ */

.agent-trigger {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-inverse);
  border: none;
  font-size: 20px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  z-index: 1000;
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
}
.agent-trigger:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-lg);
}
.agent-trigger--badge::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  background: #E87B4A;
  border-radius: 50%;
  border: 2px solid var(--bg-base);
}

.agent-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  height: 100vh;
  background: var(--bg-raised);
  border-left: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
  z-index: 999;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s var(--ease-out);
}
.agent-panel--open {
  transform: translateX(0);
}

.agent-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border-light);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  flex-shrink: 0;
}
.agent-panel-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-tertiary);
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.agent-panel-close:hover { background: var(--bg-subtle); }

.agent-analyse-btn {
  margin: 10px 12px 0;
  padding: 8px 14px;
  background: var(--accent-muted);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-md);
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.agent-analyse-btn:hover:not(:disabled) { background: var(--accent-soft); }
.agent-analyse-btn:disabled { opacity: 0.6; cursor: default; }

.agent-insights {
  padding: 8px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.agent-insight-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.agent-insight-card--error { color: #C0392B; }

.agent-thread {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.agent-msg {
  max-width: 88%;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.agent-msg--user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--text-inverse);
  border-bottom-right-radius: 4px;
}
.agent-msg--assistant {
  align-self: flex-start;
  background: var(--bg-subtle);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}

.agent-mutation-card {
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--accent-muted);
  font-size: 13px;
}
.agent-mutation-desc {
  color: var(--text-primary);
  margin-bottom: 8px;
  font-weight: 500;
}
.agent-mutation-actions {
  display: flex;
  gap: 8px;
}
.agent-mutation-confirm,
.agent-mutation-dismiss {
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
}
.agent-mutation-confirm {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
}
.agent-mutation-confirm:hover { background: var(--accent-dark); }
.agent-mutation-dismiss {
  background: none;
  color: var(--text-secondary);
  border-color: var(--border-light);
}
.agent-mutation-dismiss:hover { background: var(--bg-subtle); }
.agent-mutation-done {
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
}

.agent-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 12px;
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}
.agent-input {
  flex: 1;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  resize: none;
  line-height: 1.4;
  transition: border-color 0.15s;
}
.agent-input:focus {
  outline: none;
  border-color: var(--accent);
}
.agent-send {
  padding: 8px 12px;
  background: var(--accent);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s;
  align-self: flex-end;
  flex-shrink: 0;
}
.agent-send:hover { background: var(--accent-dark); }

/* ═══ Agent Overlay V2 ═══ */

.agent-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #0d0d0c;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-out);
}
.agent-overlay--open { opacity: 1; pointer-events: all; }

.agent-overlay__topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px 10px 90px; background: #111; border-bottom: 1px solid #222; flex-shrink: 0;
  -webkit-app-region: drag;
}
.agent-overlay__topbar button { -webkit-app-region: no-drag; }
.agent-overlay__title { font-size: 14px; font-weight: 600; color: #f0f0ee; }
.agent-overlay__actions { display: flex; align-items: center; gap: 10px; }
.agent-overlay__analyse-btn {
  background: #1e1e1d; border: 1px solid #2a2a29; border-radius: 6px;
  padding: 5px 14px; font-size: 12px; color: #888; cursor: pointer;
}
.agent-overlay__analyse-btn:hover:not(:disabled) { background: #2a2a29; color: #ccc; }
.agent-overlay__analyse-btn:disabled { opacity: 0.5; cursor: default; }
.agent-overlay__close-btn {
  background: none; border: none; font-size: 20px; color: #8a8a87; cursor: pointer;
  padding: 2px 6px; border-radius: 4px;
}
.agent-overlay__close-btn:hover { background: #1e1e1d; color: #ccc; }

.agent-overlay__body { flex: 1; display: flex; min-height: 0; }

/* ─ Snapshot panel ─ */
.agent-snapshot {
  width: 260px; min-width: 200px; background: #111; border-right: 1px solid #1e1e1d;
  padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0;
}
.agent-snapshot__label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #757572;
}
.agent-snapshot__stat { background: #1a1a19; border-radius: 8px; padding: 10px 12px; }
.agent-snapshot__stat-name {
  font-size: 9px; color: #8a8a87; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px;
}
.agent-snapshot__value {
  font-size: 20px; font-weight: 700; color: #f0f0ee;
  font-family: 'JetBrains Mono', monospace; line-height: 1.2;
}
.agent-snapshot__value--positive { color: #4ade80; }
.agent-snapshot__value--negative { color: #f87171; }
.agent-snapshot__unit { font-size: 11px; color: #8a8a87; font-weight: 400; }
.agent-snapshot__stat-sub { font-size: 10px; color: #888; font-family: 'JetBrains Mono', monospace; margin-top: 2px; }
.agent-snapshot__stat-detail { font-size: 9px; color: #757572; margin-top: 2px; }
.agent-snapshot__footer { font-size: 9px; color: #6b6b69; text-align: center; margin-top: auto; padding-top: 8px; }

/* ─ Chat panel ─ */
.agent-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.agent-chat__thread {
  flex: 1; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.agent-msg-status {
  font-size: 11px; color: #8a8a87; font-style: italic;
  border-left: 2px solid #2a2a29; padding-left: 10px; line-height: 1.5;
}
.agent-msg-usage {
  font-size: 10px; color: #6b6b69; font-family: 'JetBrains Mono', monospace;
  align-self: flex-start; padding-left: 2px; margin-top: -6px;
}
.agent-msg--user {
  align-self: flex-end; background: var(--accent); color: var(--text-inverse);
  border-radius: 12px 2px 12px 12px; padding: 10px 14px;
  font-size: 13px; max-width: 70%; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.agent-msg--agent {
  align-self: flex-start; background: #1e1e1d; color: #e8e8e6;
  border-radius: 2px 12px 12px 12px; padding: 14px 16px;
  font-size: 13px; max-width: 92%; line-height: 1.7; word-break: break-word;
}
.agent-msg--agent p { margin: 0 0 10px; }
.agent-msg--agent p:last-child { margin-bottom: 0; }
.agent-msg--agent strong { color: #f5f5f3; font-weight: 600; }
.agent-msg--agent em { color: #999; }
.agent-msg--agent table {
  width: 100%; border-collapse: collapse;
  font-size: 12px; font-family: 'JetBrains Mono', monospace;
  margin: 10px 0; border-radius: 6px; overflow: hidden;
}
.agent-msg--agent thead { background: #252524; }
.agent-msg--agent th {
  text-align: left; padding: 7px 10px; color: #777;
  font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid #333;
}
.agent-msg--agent td { padding: 6px 10px; border-bottom: 1px solid #252524; color: #d0d0ce; }
.agent-msg--agent tbody tr:last-child td { border-bottom: none; }
.agent-msg--agent tbody tr:hover { background: #252524; }
.agent-msg--agent ul { margin: 0 0 10px; padding-left: 20px; }
.agent-msg--agent ol { margin: 0 0 10px; padding-left: 20px; }
.agent-msg--agent li { margin-bottom: 5px; line-height: 1.6; }
.agent-msg--agent code {
  background: #141413; border-radius: 4px; padding: 2px 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #c4b5fd;
  border: 1px solid #2a2a29;
}
.agent-msg--agent pre {
  background: #141413; border-radius: 6px; padding: 12px 14px;
  margin: 8px 0; overflow-x: auto; border: 1px solid #2a2a29;
}
.agent-msg--agent pre code { background: none; border: none; padding: 0; color: #e8e8e6; }
.agent-msg--agent h1, .agent-msg--agent h2, .agent-msg--agent h3 {
  color: #f0f0ee; margin: 12px 0 6px; font-size: 14px; font-weight: 600;
}
.agent-msg--agent h1:first-child, .agent-msg--agent h2:first-child, .agent-msg--agent h3:first-child { margin-top: 0; }
.agent-msg--agent blockquote {
  border-left: 3px solid #3a3a39; margin: 8px 0; padding: 4px 12px; color: #888;
}
.agent-msg--agent hr { border: none; border-top: 1px solid #2a2a29; margin: 10px 0; }
.agent-chat__input-row {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 12px 16px; border-top: 1px solid #1e1e1d; flex-shrink: 0;
}
.agent-chat__input {
  flex: 1; background: #1a1a19; border: 1px solid #2a2a29; border-radius: 8px;
  padding: 9px 12px; font-size: 13px; color: #e8e8e6; font-family: inherit;
  resize: none; min-height: 40px; max-height: 120px; line-height: 1.4;
  transition: border-color 0.15s;
}
.agent-chat__input:focus { outline: none; border-color: var(--accent); }
.agent-chat__send {
  background: var(--accent); border: none; border-radius: 8px;
  padding: 10px 14px; font-size: 16px; color: var(--text-inverse); cursor: pointer;
  transition: background 0.15s; flex-shrink: 0; align-self: flex-end;
}
.agent-chat__send:hover { background: var(--accent-dark); }

/* ─ Cost chip inside agent bubble ─ */
.agent-msg-cost {
  font-size: 9px; font-family: 'JetBrains Mono', monospace;
  color: #6b6b69; background: #141413; border: 1px solid #222;
  border-radius: 4px; padding: 2px 7px; display: inline-block;
  margin-bottom: 8px; letter-spacing: .02em;
}
.agent-msg-content { line-height: inherit; }

/* ─ Snapshot today cost ─ */
.agent-snapshot__cost-stat { border-top: 1px solid #1e1e1d; margin-top: 4px; }
.agent-snapshot__value--cost { font-size: 14px; color: #7c3aed; font-weight: 600; }

/* ─ Usage button ─ */
.agent-overlay__usage-btn {
  background: none; border: 1px solid #2a2a29; border-radius: 6px;
  padding: 5px 10px; font-size: 14px; color: #8a8a87; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.agent-overlay__usage-btn:hover { background: #1e1e1d; color: #ccc; }
.agent-overlay__usage-btn.active { color: var(--accent); border-color: var(--accent); background: #1a1a19; }

/* ─ Usage view ─ */
.agent-usage-header { flex-shrink: 0; margin-bottom: 4px; }
.agent-usage-tabs { display: flex; gap: 6px; }
.agent-usage-tab {
  background: #1a1a19; border: 1px solid #2a2a29; border-radius: 6px;
  padding: 5px 16px; font-size: 12px; color: #8a8a87; cursor: pointer; transition: all 0.15s;
}
.agent-usage-tab.active { background: #2a2a29; color: #f0f0ee; border-color: #6b6b69; }
.agent-usage-tab:hover:not(.active) { color: #888; }
.agent-usage-rows { display: flex; flex-direction: column; gap: 3px; }
.agent-usage-row {
  display: flex; align-items: center; gap: 10px;
  background: #1a1a19; border-radius: 6px; padding: 8px 12px;
}
.agent-usage-row-key { font-family: 'JetBrains Mono', monospace; color: #888; font-size: 12px; flex: 1; }
.agent-usage-row-turns { color: #757572; font-size: 11px; white-space: nowrap; }
.agent-usage-row-cost {
  font-family: 'JetBrains Mono', monospace; color: #f0f0ee;
  font-size: 12px; min-width: 72px; text-align: right;
}
.agent-usage-total {
  font-size: 11px; color: #757572; font-family: 'JetBrains Mono', monospace;
  padding: 10px 12px 0; border-top: 1px solid #1e1e1d;
}
.agent-usage-empty { color: #6b6b69; font-size: 12px; padding: 32px 12px; text-align: center; }

/* ═══ Property Portfolio Page ═══ */

/* ─ Hero row ─ */
.prop-hero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.prop-hero-stat {
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 16px 20px;
}
.prop-hero-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-tertiary); margin-bottom: 6px;
}
.prop-hero-value {
  font-size: 24px; font-weight: 700; color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace; line-height: 1.2;
}
.prop-hero-value--income { color: #4a7c5a; }
:is([data-theme="dark"], [data-theme="dracula"]) .prop-hero-value--income { color: #6abf7e; }
.prop-hero-value--out { color: var(--bracket-4); }
.prop-hero-unit { font-size: 12px; font-weight: 400; color: var(--text-tertiary); margin-left: 2px; }
.prop-hero-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }

/* ─ Property card grid ─ */
.prop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

/* ─ Property drill-in (single-property view) ─ */
.prop-grid--single { grid-template-columns: 1fr; }
.prop-card.is-viewing { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-muted); }
.prop-card__open {
  margin-left: auto; border: 1px solid var(--border-light); background: var(--bg-subtle);
  cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700;
  color: var(--text-secondary); padding: 4px 10px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.prop-card__open:hover { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }

/* Position strip — owed / cost base / equity-at-cost / yield.
   Flex, not grid auto-fit: auto-fit keeps empty tracks at wide viewports, and
   with a 1px gap over a border-coloured background those render as stray
   divider lines past the last cell. Flex wraps with no phantom tracks. */
.prop-pos {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.prop-pos-cell { flex: 1 1 150px; min-width: 0; background: var(--bg-raised); padding: 12px 16px; }
.prop-pos-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-tertiary); margin-bottom: 5px;
}
.prop-pos-caveat { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .75; }
.prop-pos-value {
  font-family: var(--font-mono); font-size: 17px; font-weight: 600;
  color: var(--text-primary); display: flex; align-items: baseline; gap: 1px;
}
.prop-pos-value--out { color: #B06B6B; }
.prop-pos-value--in  { color: #3D7A55; }
:is([data-theme="dark"], [data-theme="dracula"]) .prop-pos-value--out { color: #D98C8C; }
:is([data-theme="dark"], [data-theme="dracula"]) .prop-pos-value--in  { color: #6ABF7E; }
.prop-pos-currency { font-size: 13px; color: var(--text-tertiary); }
.prop-pos-input {
  font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--text-primary);
  border: 1px solid transparent; background: transparent; border-radius: var(--radius-sm);
  padding: 0 2px; width: 100%; min-width: 0;
}
.prop-pos-input:hover { border-color: var(--border-light); }
.prop-pos-input:focus { outline: none; border-color: var(--accent); background: var(--bg-subtle); }
.prop-pos-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
.prop-pos-date {
  font-family: inherit; font-size: 11px; color: var(--text-tertiary);
  border: 1px solid transparent; background: transparent; border-radius: var(--radius-sm); padding: 0;
}
.prop-pos-date:hover { border-color: var(--border-light); }
.prop-pos-date:focus { outline: none; border-color: var(--accent); }

/* Cashflow block — labelled so it can't be read as the tax position above it.
   Zero padding on the section so .prop-pl keeps bleeding to the card edges as
   it did before it was wrapped; the header and note carry their own padding. */
.prop-pl-section { padding: 0; border-top: 1px solid var(--border-light); border-bottom: none; }
.prop-pl-section .prop-section__header { padding: 12px 16px 0; margin-bottom: 8px; }
.prop-pl-note {
  font-size: 11px; line-height: 1.5; color: var(--text-tertiary);
  padding: 10px 16px 12px; margin: 0;
}

/* ─ Property card ─ */
.prop-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background-image: linear-gradient(135deg, rgba(192,138,110,.04) 0%, transparent 60%);
}
.prop-card__header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
}
.prop-card__title-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap;
}
.prop-card__icon { font-size: 16px; }
.prop-name-large {
  font-size: 15px; font-weight: 700; color: var(--text-primary);
  border: none; background: transparent; outline: none;
  border-bottom: 1px solid transparent; flex: 1; min-width: 80px;
}
.prop-name-large:hover { border-bottom-color: var(--border-light); }
.prop-name-large:focus { border-bottom-color: var(--accent); }
.prop-type-select {
  font-size: 10px; border: 1px solid var(--border-light); border-radius: 4px;
  padding: 2px 6px; color: var(--text-secondary); background: var(--bg-subtle); cursor: pointer;
}
.prop-badge {
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  border-radius: 4px; padding: 2px 7px;
}
.prop-badge--investment { background: #fef3e2; color: #b07000; }
.prop-badge--primary    { background: #e8f0ff; color: #2d5299; }
.prop-badge--other      { background: var(--bg-subtle); color: var(--text-tertiary); }
:is([data-theme="dark"], [data-theme="dracula"]) .prop-badge--investment { background: #3a2800; color: #c9a020; }
:is([data-theme="dark"], [data-theme="dracula"]) .prop-badge--primary    { background: #0d1e40; color: #6b9af0; }
.prop-card__addr-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.prop-address-input {
  font-size: 11px; color: var(--text-tertiary); border: none; background: transparent;
  outline: none; border-bottom: 1px dashed transparent; flex: 1;
}
.prop-address-input:hover { border-bottom-color: var(--border-light); }
.prop-address-input:focus { border-bottom-color: var(--accent); color: var(--text-secondary); }
.prop-remove-prop-btn {
  font-size: 11px; color: var(--bracket-4); background: none; border: none; cursor: pointer;
  padding: 2px 6px; border-radius: var(--radius-sm); white-space: nowrap;
}
.prop-remove-prop-btn:hover { background: var(--bg-subtle); }

/* ─ Sections inside card ─ */
.prop-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
}
.prop-section__header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.prop-section__label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-tertiary);
}
.prop-add-item-btn {
  font-size: 11px; color: var(--accent); background: none; border: none;
  cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm);
}
.prop-add-item-btn:hover { background: var(--accent-muted); }
.prop-rows { display: flex; flex-direction: column; gap: 4px; }
.prop-empty { font-size: 11px; color: var(--text-tertiary); padding: 4px 0; margin: 0; }

/* ─ Item rows ─ */
.prop-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-subtle); border-radius: var(--radius-md);
  padding: 7px 10px; flex-wrap: wrap;
}
.prop-row--loan { flex-direction: column; align-items: stretch; }
.prop-row--rent {
  margin-left: 12px; background: transparent;
  border-left: 2px solid var(--border-light);
  border-radius: 0; padding: 4px 8px;
}
.prop-row-main { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.prop-row-end { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.prop-row-inline { display: flex; align-items: center; gap: 4px; }
.prop-name-input {
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  border: none; background: transparent; outline: none;
  border-bottom: 1px solid transparent; flex: 1; min-width: 80px;
}
.prop-name-input:focus { border-bottom-color: var(--accent); }
.prop-currency { font-size: 11px; color: var(--text-tertiary); }
.prop-amount-input {
  font-size: 12px; color: var(--text-primary); border: none; background: transparent;
  outline: none; width: 72px; font-family: 'JetBrains Mono', monospace;
  border-bottom: 1px solid transparent;
}
.prop-amount-input:focus { border-bottom-color: var(--accent); }
.prop-freq-select {
  font-size: 10px; color: var(--text-secondary); border: 1px solid var(--border-light);
  border-radius: 4px; padding: 2px 5px; background: var(--bg-raised); cursor: pointer;
}
.prop-annual {
  font-size: 11px; font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary); white-space: nowrap;
}
.prop-annual-hint {
  font-size: 10px; color: #4a7c5a; font-family: 'JetBrains Mono', monospace; white-space: nowrap;
}
:is([data-theme="dark"], [data-theme="dracula"]) .prop-annual-hint { color: #6abf7e; }
.prop-remove-btn {
  font-size: 11px; color: var(--text-tertiary); background: none; border: none;
  cursor: pointer; padding: 2px 5px; border-radius: var(--radius-sm); line-height: 1;
}
.prop-remove-btn:hover { color: var(--bracket-4); background: var(--bg-subtle); }
.prop-rent-label { font-size: 10px; color: #4a7c5a; font-weight: 600; white-space: nowrap; }
:is([data-theme="dark"], [data-theme="dracula"]) .prop-rent-label { color: #6abf7e; }
.prop-add-rent-btn {
  font-size: 10px; color: var(--text-tertiary); background: none; border: none;
  cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm);
}
.prop-add-rent-btn:hover { color: var(--accent); background: var(--accent-muted); }

/* ─ Loan details toggle + panel ─ */
.prop-details-toggle {
  font-size: 10px; color: var(--text-tertiary); background: none;
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  cursor: pointer; padding: 2px 7px; white-space: nowrap;
}
.prop-details-toggle:hover { color: var(--accent); border-color: var(--accent); }
.prop-details-toggle.is-open { color: var(--accent); border-color: var(--accent); background: var(--accent-muted); }

.prop-loan-details {
  margin: 4px 0 2px 12px;
  border-left: 2px solid var(--accent-muted);
  padding: 10px 14px;
  background: var(--bg-subtle);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.prop-ld-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 18px;
}
.prop-ld-field { display: flex; flex-direction: column; gap: 3px; }
.prop-ld-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-tertiary);
}
.prop-ld-input-wrap { display: flex; align-items: center; gap: 4px; }
.prop-ld-input {
  font-size: 12px; color: var(--text-primary); background: transparent;
  border: none; outline: none; border-bottom: 1px solid var(--border-light);
  padding: 2px 0; min-width: 0; flex: 1;
}
.prop-ld-input:hover  { border-bottom-color: var(--text-tertiary); }
.prop-ld-input:focus  { border-bottom-color: var(--accent); }
.prop-ld-input--mono  { font-family: 'JetBrains Mono', monospace; }
.prop-ld-input--sm    { flex: 0 0 auto; width: 56px; }
.prop-ld-input--date  { flex: 0 0 auto; width: auto; color: var(--text-secondary); }
.prop-ld-neg     { font-size: 11px; color: var(--bracket-4); font-family: 'JetBrains Mono', monospace; }
.prop-ld-suffix  { font-size: 10px; color: var(--text-tertiary); white-space: nowrap; }
.prop-ld-derived {
  font-size: 13px; font-weight: 600; font-family: 'JetBrains Mono', monospace;
  color: var(--accent); padding-top: 2px;
}
.prop-ld-derived-sub { font-size: 10px; font-weight: 400; color: var(--text-tertiary); margin-left: 4px; }
.prop-ld-managed { font-size: 9px; font-weight: 500; color: var(--text-tertiary); text-transform: none; letter-spacing: 0; }

.prop-ld-charges {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--border-light);
}
.prop-ld-charges-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-tertiary); margin-bottom: 6px;
}
.prop-ldp { display: flex; flex-direction: column; gap: 6px; }
.prop-ldp-head { display: flex; align-items: center; justify-content: space-between; }
.prop-ldp-title { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.prop-ldp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ─ P&L footer ─ */
.prop-pl {
  padding: 12px 16px;
  background: var(--bg-subtle);
  font-size: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.prop-pl-row {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--text-secondary);
}
.prop-pl-row span:last-child { font-family: 'JetBrains Mono', monospace; }
.prop-pl-row--income { color: #4a7c5a; }
:is([data-theme="dark"], [data-theme="dracula"]) .prop-pl-row--income { color: #6abf7e; }
.prop-pl-row--total {
  font-weight: 700; color: var(--bracket-4);
  border-top: 1px solid var(--border-light);
  padding-top: 6px; margin-top: 2px; font-size: 13px;
}
.prop-pl-row--after {
  font-weight: 700; color: var(--accent-dark);
  border-top: 1px dashed var(--border-light);
  padding-top: 6px; margin-top: 2px; font-size: 13px;
}

/* ─ Negative gearing section ─ */
.prop-ng-split {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-tertiary);
}
.prop-ng-split-input {
  width: 44px; padding: 2px 5px; text-align: right;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text-primary); background: var(--bg-subtle);
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
}
.prop-ng-split-input:focus { outline: none; border-color: var(--accent); }

/* Gearing interest-basis toggle (FY to date / Annualised) */
.prop-ng-modes {
  display: inline-flex; gap: 2px; margin: 0 0 10px;
  background: var(--bg-subtle); border-radius: var(--radius-pill); padding: 2px;
}
.prop-ng-mode {
  border: none; cursor: pointer; background: transparent;
  font-family: inherit; font-size: 11px; font-weight: 600; color: var(--text-tertiary);
  padding: 4px 12px; border-radius: var(--radius-pill);
  transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
.prop-ng-mode:hover { color: var(--text-secondary); }
.prop-ng-mode.active { background: var(--accent); color: var(--text-inverse); }
.prop-ng-hint {
  font-size: 11px; color: var(--text-tertiary); line-height: 1.5;
  background: var(--bg-subtle); border-radius: var(--radius-md);
  padding: 8px 10px; margin: 0 0 8px;
}
.prop-ng-rows { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.prop-ng-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-secondary);
}
.prop-ng-row span:last-child { font-family: 'JetBrains Mono', monospace; }
.prop-ng-row--income { color: #4a7c5a; }
:is([data-theme="dark"], [data-theme="dracula"]) .prop-ng-row--income { color: #6abf7e; }
.prop-ng-row--net {
  font-weight: 700; color: var(--text-primary);
  border-top: 1px solid var(--border-light);
  padding-top: 5px; margin-top: 2px;
}
.prop-ng-owners { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.prop-ng-owner {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-subtle); border-radius: var(--radius-md);
  padding: 7px 10px; font-size: 12px;
}
.prop-ng-owner-name { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.prop-ng-owner-mid { flex: 1; color: var(--text-tertiary); font-size: 11px; text-align: right; }
.prop-ng-owner-benefit {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px;
}
.prop-ng-owner-benefit.is-refund { color: #4a7c5a; }
:is([data-theme="dark"], [data-theme="dracula"]) .prop-ng-owner-benefit.is-refund { color: #6abf7e; }
.prop-ng-owner-benefit.is-owed { color: var(--bracket-4); }
.prop-ng-result {
  display: flex; justify-content: space-between; align-items: baseline;
  background: var(--accent-muted); border-radius: var(--radius-md);
  padding: 10px 12px; margin-bottom: 8px;
  font-size: 12px; font-weight: 700; color: var(--text-primary);
}
.prop-ng-result--owed { background: var(--warn-bg); }
.prop-ng-result-val {
  font-family: 'JetBrains Mono', monospace; font-size: 16px; color: var(--accent-dark);
}
.prop-ng-result--owed .prop-ng-result-val { color: var(--warn); }
.prop-ng-result-fn { font-size: 11px; font-weight: 400; color: var(--text-tertiary); }
.prop-ng-note {
  font-size: 10.5px; color: var(--text-tertiary); line-height: 1.55; margin: 0;
}

/* ─ Owner statements ─ */
.prop-stmt-fy {
  font-size: 10px; font-weight: 700; font-family: 'JetBrains Mono', monospace;
  color: var(--accent-dark); background: var(--accent-muted);
  border-radius: var(--radius-sm); padding: 2px 7px; white-space: nowrap;
}
.prop-stmt-period { font-size: 11px; color: var(--text-secondary); }
.prop-stmt-doc {
  font-size: 10px; color: var(--text-secondary); background: none;
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  cursor: pointer; padding: 2px 7px; white-space: nowrap;
}
.prop-stmt-doc:hover { color: var(--accent); border-color: var(--accent); }
.prop-stmt-doc--none { color: var(--text-tertiary); border-style: dashed; }
.prop-stmt-docrow { display: flex; align-items: center; gap: 8px; }

/* ─ Unassigned section ─ */
.prop-unassigned-card {
  border: 2px dashed var(--border-light);
  border-radius: var(--radius-xl);
  padding: 16px;
  margin-bottom: 16px;
}
.prop-unassigned-title {
  font-size: 12px; font-weight: 600; color: var(--text-tertiary);
  margin-bottom: 10px; text-transform: uppercase; letter-spacing: .05em;
}
.prop-unassigned-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 12px; background: var(--bg-subtle);
  border-radius: var(--radius-md); margin-bottom: 4px;
}
.prop-unassigned-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.prop-unassigned-sub { font-size: 11px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }
.prop-assign-select {
  font-size: 11px; border: 1px solid var(--border-light); border-radius: var(--radius-md);
  padding: 5px 10px; color: var(--text-secondary); background: var(--bg-raised); cursor: pointer;
  min-width: 160px;
}
.prop-assign-select:focus { outline: none; border-color: var(--accent); }

/* ─ Add Property button ─ */
.prop-add-card {
  width: 100%; border: 2px dashed var(--border-light); background: none;
  border-radius: var(--radius-xl); padding: 22px; cursor: pointer;
  color: var(--text-tertiary); font-size: 13px; font-family: inherit;
  transition: border-color .15s, color .15s; display: flex;
  align-items: center; justify-content: center; gap: 10px; margin-bottom: 24px;
}
.prop-add-card:hover { border-color: var(--accent); color: var(--accent); }
.prop-add-card__icon { font-size: 20px; font-weight: 300; }

/* ─ Household summary tile ─ */
.prop-summary-tile .hh-card-header { align-items: center; }
.prop-summary-edit-link {
  font-size: 11px; color: var(--accent); text-decoration: none;
  border: 1px solid var(--accent-soft); border-radius: var(--radius-md);
  padding: 3px 10px; white-space: nowrap; transition: background .15s;
}
.prop-summary-edit-link:hover { background: var(--accent-muted); }
.prop-summary-meta {
  font-size: 10px; color: var(--text-tertiary); margin-top: 8px;
}

/* ═══ ADJUSTED INCOME CARD (Div 293) ═══ */

.adj-card .hh-waterfall { margin-top: var(--space-md); }

.adj-status {
  display: flex; align-items: center; gap: 8px;
  margin-top: var(--space-md);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13px; font-weight: 500;
}
.adj-status--good { background: var(--accent-muted); color: var(--text-primary); }
.adj-status--warn { background: var(--warn-bg); color: var(--warn); }
.adj-status strong { font-family: var(--font-mono); }

.adj-footnote {
  margin-top: var(--space-sm);
  font-size: 11px; color: var(--text-tertiary); line-height: 1.5;
}

/* ═══════════════ ACCOUNTS PAGE ═══════════════ */

.acct-hero {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 24px;
}

/* ─ Account cards ─ */
.acct-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px; margin-bottom: 20px;
}
.acct-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  background-image: linear-gradient(135deg, rgba(192,138,110,.04) 0%, transparent 60%);
  display: flex; flex-direction: column; gap: 8px;
}
.acct-card--credit { border-color: var(--warn-bg); }
.acct-card__top { display: flex; align-items: center; gap: 8px; }
.acct-card__icon { font-size: 18px; }
.acct-name-input {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--text-primary);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 2px 6px; font-family: inherit;
}
.acct-name-input:hover { border-color: var(--border-light); }
.acct-name-input:focus { outline: none; border-color: var(--accent); }
.acct-card__meta { display: flex; align-items: center; gap: 6px; }
.acct-bank-input {
  flex: 1; min-width: 0; font-size: 11px; color: var(--text-tertiary);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 2px 6px; font-family: inherit;
}
.acct-bank-input:hover { border-color: var(--border-light); }
.acct-bank-input:focus { outline: none; border-color: var(--accent); }
.acct-card__balance {
  display: flex; align-items: baseline; justify-content: space-between;
  background: var(--bg-subtle); border-radius: var(--radius-md); padding: 8px 10px;
}
.acct-balance-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-tertiary);
}
.acct-balance-wrap { display: flex; align-items: baseline; gap: 2px; }
.acct-currency { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }
.acct-balance-input {
  width: 120px; font-size: 18px; font-weight: 700; text-align: right;
  font-family: 'JetBrains Mono', monospace; color: var(--text-primary);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 1px 4px;
}
.acct-card--credit .acct-balance-input { color: var(--warn); }
.acct-balance-input:hover { border-color: var(--border-light); }
.acct-balance-input:focus { outline: none; border-color: var(--accent); }
.acct-card__footer { font-size: 10px; color: var(--text-tertiary); }
.acct-add-card {
  border: 2px dashed var(--border-light); background: none;
  border-radius: var(--radius-xl); cursor: pointer; min-height: 120px;
  color: var(--text-tertiary); font-size: 13px; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: border-color .15s, color .15s;
}
.acct-add-card:hover { border-color: var(--accent); color: var(--accent); }

/* ─ Ledger ─ */
.acct-ledger-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px; margin-bottom: 20px;
}
.acct-ledger-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.acct-month-nav { display: flex; align-items: center; gap: 10px; }
.acct-month-btn {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-light); background: var(--bg-subtle);
  color: var(--text-secondary); font-size: 15px; cursor: pointer; line-height: 1;
}
.acct-month-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.acct-month-btn:disabled { opacity: .35; cursor: default; }
.acct-month-label { font-size: 14px; font-weight: 700; color: var(--text-primary); min-width: 110px; text-align: center; }
.acct-ledger-totals { font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--text-tertiary); }
.acct-in { color: #4a7c5a; }
:is([data-theme="dark"], [data-theme="dracula"]) .acct-in { color: #6abf7e; }
.acct-out { color: var(--bracket-4); font-family: 'JetBrains Mono', monospace; }

.acct-quickadd {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: var(--accent-muted); border-radius: var(--radius-md);
  padding: 8px 10px; margin-bottom: 10px;
}
.acct-quickadd-btn {
  background: var(--accent); color: var(--text-inverse); border: none; cursor: pointer;
  border-radius: var(--radius-md); padding: 6px 16px; font-size: 12px;
  font-weight: 700; font-family: inherit;
}
.acct-quickadd-btn:hover { background: var(--accent-dark); }

.acct-txn-rows { display: flex; flex-direction: column; gap: 4px; }
.acct-txn-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: var(--bg-subtle); border-radius: var(--radius-md); padding: 5px 8px;
}
.acct-txn-date {
  font-size: 11px; font-family: 'JetBrains Mono', monospace; color: var(--text-secondary);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 3px 4px; width: 118px;
}
.acct-txn-date:hover { border-color: var(--border-light); }
.acct-txn-date:focus { outline: none; border-color: var(--accent); }
.acct-txn-cat { max-width: 150px; }
.acct-txn-desc {
  flex: 1; min-width: 120px; font-size: 12px; color: var(--text-primary);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 3px 6px; font-family: inherit;
}
.acct-txn-desc:hover { border-color: var(--border-light); }
.acct-txn-desc:focus { outline: none; border-color: var(--accent); }
.acct-txn-dir {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-light);
  background: var(--bg-raised); color: var(--bracket-4); font-size: 13px; font-weight: 700;
  cursor: pointer; line-height: 1;
}
.acct-txn-dir.is-credit { color: #4a7c5a; }
:is([data-theme="dark"], [data-theme="dracula"]) .acct-txn-dir.is-credit { color: #6abf7e; }
.acct-txn-amt-wrap { display: flex; align-items: center; gap: 2px; }
.acct-txn-amt {
  width: 84px; font-size: 12px; font-weight: 600; text-align: right;
  font-family: 'JetBrains Mono', monospace; color: var(--text-primary);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 3px 4px;
}
.acct-txn-amt.is-credit { color: #4a7c5a; }
:is([data-theme="dark"], [data-theme="dracula"]) .acct-txn-amt.is-credit { color: #6abf7e; }
.acct-txn-amt:hover { border-color: var(--border-light); }
.acct-txn-amt:focus { outline: none; border-color: var(--accent); }

/* ─ Transfer mode (quick-add pill) + linked transfer rows ─ */
.acct-qa-mode {
  display: inline-flex; gap: 2px; background: var(--bg-subtle);
  border-radius: var(--radius-pill); padding: 2px;
}
.acct-qa-mode-btn {
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  padding: 4px 11px; border-radius: var(--radius-pill); line-height: 1.4;
}
.acct-qa-mode-btn.is-active { background: var(--bg-raised); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.acct-qa-mode-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.acct-qa-arrow { color: var(--accent); font-weight: 700; padding: 0 2px; }

.acct-txn-row--transfer { background: var(--accent-muted); }
.acct-txn-transfer-badge {
  font-size: 11px; font-weight: 700; color: var(--accent-dark);
  white-space: nowrap; padding: 0 4px;
}
.acct-txn-transfer-dest {
  flex: 1; min-width: 120px; font-size: 12px; color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-txn-transfer-arrow { color: var(--accent); font-weight: 700; }
.acct-txn-dir--locked {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: default; background: var(--bg-raised);
}

/* ─ PDF import (button, pending strip, staging overlay) ─ */
.acct-import-btn {
  background: var(--accent-muted); color: var(--accent-dark); border: 1px solid var(--accent-soft);
  border-radius: var(--radius-md); padding: 5px 12px; font-size: 12px; font-weight: 700;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.acct-import-btn:hover { background: var(--accent-soft); }

.acct-pending-strip {
  background: var(--warn-bg, #f6efe0); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 7px 12px; margin-bottom: 10px;
  font-size: 12px; color: var(--text-secondary);
}

/* ─ Per-account scope pills, clickable cards, ledger toolbar ─ */
.acct-scope-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.acct-scope-pill {
  border: 1px solid var(--border-light); background: var(--bg-subtle); cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-secondary);
  padding: 4px 12px; border-radius: var(--radius-pill);
}
.acct-scope-pill:hover { background: var(--accent-muted); }
.acct-scope-pill.is-active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }

.acct-card { cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s; }
.acct-card.is-viewing { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-muted); }
.acct-card__name { flex: 1; font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-name-edit {
  border: none; background: transparent; cursor: pointer; color: var(--text-tertiary);
  font-size: 12px; padding: 2px 4px; border-radius: var(--radius-sm); line-height: 1;
}
.acct-name-edit:hover { color: var(--accent); background: var(--accent-muted); }
.acct-reconciled { color: #3d7a55; font-weight: 800; font-size: 13px; }
:is([data-theme="dark"], [data-theme="dracula"]) .acct-reconciled { color: #6abf7e; }

.import-modal--sm { width: min(480px, 94vw); }
.import-picker-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.import-picker-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.import-picker-warn {
  font-size: 12px; color: var(--text-secondary); background: var(--accent-muted);
  border: 1px solid var(--accent-soft); border-radius: var(--radius-md); padding: 8px 10px; line-height: 1.5;
}
.import-picker-warn.is-credit { background: var(--warn-bg, #f6e6e0); }
.import-error {
  margin: 0 18px; padding: 8px 12px; border-radius: var(--radius-md);
  background: var(--warn-bg, #f6e6e0); border: 1px solid var(--bracket-4);
  color: var(--bracket-4); font-size: 12px; font-weight: 600;
}

.acct-ledger-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.acct-search {
  flex: 1; min-width: 140px; font-size: 12px; font-family: inherit; color: var(--text-primary);
  background: var(--bg-subtle); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 6px 10px;
}
.acct-search:focus { outline: none; border-color: var(--accent); }
.acct-search:disabled { opacity: 0.5; }
.acct-collapse-btn {
  border: 1px solid var(--border-light); background: var(--bg-subtle); cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 600; color: var(--text-secondary);
  padding: 6px 12px; border-radius: var(--radius-md); white-space: nowrap;
}
.acct-collapse-btn:hover { background: var(--accent-muted); }

.import-recon-ack {
  display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  color: var(--bracket-4); cursor: pointer;
}

/* ─ Credit-card fields (account card + import credit entry) ─ */
.acct-card__credit { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 3px; }
.acct-credit-row { display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.acct-credit-label { color: var(--text-tertiary); }
.acct-credit-val { display: inline-flex; align-items: center; gap: 1px; }
.acct-credit-input {
  width: 72px; text-align: right; font-size: 11px; font-family: 'JetBrains Mono', monospace;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 1px 3px; color: var(--text-primary);
}
.acct-credit-input:hover { border-color: var(--border-light); }
.acct-credit-input:focus { outline: none; border-color: var(--accent); }
.acct-credit-avail { font-size: 11px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: #3d7a55; }
:is([data-theme="dark"], [data-theme="dracula"]) .acct-credit-avail { color: #6abf7e; }

.import-credit-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; color: var(--text-secondary); }
.import-credit-note { flex-basis: 100%; font-size: 11px; color: var(--text-tertiary); }
.import-credit-entry label { display: inline-flex; align-items: center; gap: 4px; }
.import-credit-input {
  width: 96px; font-size: 12px; font-family: 'JetBrains Mono', monospace;
  background: var(--bg-subtle); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 4px 6px; color: var(--text-primary);
}
.import-credit-input:focus { outline: none; border-color: var(--accent); }
.import-credit-avail { font-weight: 700; color: #3d7a55; }
:is([data-theme="dark"], [data-theme="dracula"]) .import-credit-avail { color: #6abf7e; }

.import-loan-recon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
.import-loan-recon label { display: inline-flex; align-items: center; gap: 4px; }
.import-loan-recon input[type="date"] {
  font-size: 12px; font-family: 'JetBrains Mono', monospace;
  background: var(--bg-subtle); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 4px 6px; color: var(--text-primary);
}
.import-loan-recon input[type="date"]:focus { outline: none; border-color: var(--accent); }

.import-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20, 18, 16, 0.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.import-modal {
  background: var(--bg-raised); border: 1px solid var(--border-light);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  width: min(940px, 96vw); max-height: 88vh; display: flex; flex-direction: column;
}
.import-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border-light);
}
.import-banner {
  padding: 12px 18px; background: var(--accent-muted);
  border-bottom: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 8px;
}
.import-banner.is-warn { background: var(--warn-bg, #f6e6e0); }
.import-banner-line { font-size: 13px; color: var(--text-primary); }
.import-ok  { color: #3d7a55; font-weight: 700; }
.import-bad { color: var(--bracket-4); font-weight: 700; }
:is([data-theme="dark"], [data-theme="dracula"]) .import-ok { color: #6abf7e; }
.import-confirm { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--text-secondary); }
.import-confirm label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.import-acct-pick { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border-radius: var(--radius-sm); }
.import-acct-pick strong { color: var(--text-primary); font-size: 12px; }
.import-acct-pick.needs-pick { background: var(--warn-bg, #f6e6e0); box-shadow: inset 3px 0 0 var(--accent); }
.import-hint { font-size: 11px; color: var(--text-tertiary); }

.import-actions {
  display: flex; align-items: center; gap: 8px; padding: 8px 18px;
  border-bottom: 1px solid var(--border-light);
}
.import-mini-btn {
  background: var(--bg-subtle); color: var(--text-primary); border: 1px solid var(--border-light);
  border-radius: var(--radius-pill); padding: 4px 12px; font-size: 11px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.import-mini-btn:hover { background: var(--accent-muted); }

.import-table { overflow-y: auto; padding: 8px 12px; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.import-row {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
}
.import-row.is-accepted { background: var(--accent-muted); }
.import-row.is-dup { opacity: 0.5; }
.import-date { width: 92px; font-size: 11px; font-family: 'JetBrains Mono', monospace; color: var(--text-secondary); white-space: nowrap; }
.import-date-hint { color: var(--accent); margin-left: 2px; cursor: help; }
.import-desc { flex: 1; min-width: 120px; font-size: 12px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.import-xfer { font-size: 11px; font-weight: 700; color: var(--accent-dark); white-space: nowrap; }
.import-dest { max-width: 200px; }
.import-src { font-size: 12px; width: 14px; text-align: center; cursor: help; }
.import-src--learned { color: #c79a3a; }
.import-src--default { color: var(--text-tertiary); }
.import-amt { width: 92px; text-align: right; font-size: 12px; font-weight: 600; font-family: 'JetBrains Mono', monospace; color: var(--text-primary); }
.import-amt.is-credit { color: #4a7c5a; }
:is([data-theme="dark"], [data-theme="dracula"]) .import-amt.is-credit { color: #6abf7e; }
.import-dup-badge { font-size: 10px; font-weight: 700; color: var(--bracket-4); width: 28px; text-align: right; }
.import-dup-badge.import-maybe { color: #c79a3a; width: 44px; }
.import-row.is-maybe { box-shadow: inset 2px 0 0 #c79a3a; }
.import-dedup-line { font-size: 12px; color: var(--text-secondary); }

.import-foot {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border-top: 1px solid var(--border-light);
}
.import-foot-spacer { flex: 1; }
.import-cancel-btn {
  background: transparent; color: var(--text-secondary); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 6px 16px; font-size: 12px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.import-cancel-btn:hover { background: var(--bg-subtle); }

/* ─ Bottom panels ─ */
.acct-bottom {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin-bottom: 24px;
}
.acct-panel-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
}
.acct-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.acct-cat-row {
  display: grid; grid-template-columns: 130px 1fr 80px 36px;
  align-items: center; gap: 8px; padding: 4px 0; font-size: 12px;
}
.acct-cat-name { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-cat-bar { height: 6px; background: var(--bg-subtle); border-radius: 3px; overflow: hidden; }
.acct-cat-fill { height: 100%; background: var(--accent); border-radius: 3px; }
.acct-cat-amt { text-align: right; font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--text-primary); }
.acct-cat-pct { text-align: right; font-size: 10px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }

.acct-insights-btn {
  font-size: 11px; color: var(--accent); background: none; cursor: pointer;
  border: 1px solid var(--accent-soft); border-radius: var(--radius-md); padding: 4px 12px;
  font-family: inherit;
}
.acct-insights-btn:hover:not(:disabled) { background: var(--accent-muted); }
.acct-insights-btn:disabled { opacity: .5; cursor: default; }
.acct-insights-body { font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; }
.acct-insights-body ul { padding-left: 18px; margin: 6px 0; }
.acct-insights-body li { margin-bottom: 6px; }
.acct-insights-body strong { color: var(--text-primary); }
.acct-insights-meta { font-size: 10px; color: var(--text-tertiary); margin-top: 8px; }

@media (max-width: 900px) {
  .acct-hero, .acct-bottom { grid-template-columns: 1fr; }
}

/* ═══ SHARED UI FRAMEWORK CLASSES (ui-shell.js) ═══ */
.ui-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}
.ui-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  align-items: start;
}
.ui-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  align-items: start;
}
.ui-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ui-card__header {
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-light);
}
.ui-card__title-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.ui-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.ui-card__body {
  padding: var(--space-lg) var(--space-xl);
}
.ui-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  gap: var(--space-sm);
}
.ui-empty-state__icon { font-size: 36px; opacity: .65; }
.ui-empty-state__title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.ui-empty-state__message { font-size: 13px; color: var(--text-tertiary); max-width: 420px; }

@media (max-width: 1024px) {
  .ui-grid-2,
  .ui-grid-3,
  .prop-grid {
    grid-template-columns: 1fr;
  }
}

/* Per-transaction agent note — import staging + ledger */
.import-note { margin: -2px 0 6px 30px; }
.acct-note   { margin: -2px 0 4px 30px; }
.import-note-summary, .acct-note-summary {
  list-style: none; cursor: pointer; font-size: 11px; color: var(--text-tertiary);
  padding: 2px 0; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 520px;
}
.import-note-summary::-webkit-details-marker, .acct-note-summary::-webkit-details-marker { display: none; }
.import-note-summary:hover, .acct-note-summary:hover { color: var(--text-secondary); }
details[open] > .import-note-summary, details[open] > .acct-note-summary { color: var(--accent); }
.import-note-input, .acct-note-input {
  width: 100%; max-width: 520px; margin-top: 3px; font-size: 12px; font-family: inherit;
  background: var(--bg-subtle); border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  padding: 5px 8px; color: var(--text-primary);
}
.import-note-input:focus, .acct-note-input:focus { outline: none; border-color: var(--accent); }

/* ═══ TAX FILE PAGE ═══ */
.tf-hero { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.tf-hero-card {
  background: var(--bg-raised); border: 1px solid var(--border-light);
  border-radius: var(--radius-xl); padding: 18px 22px;
}
.tf-hero-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-tertiary); margin-bottom: 8px;
}
.tf-hero-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 8px; }

/* ─ FY selector pills ─ */
.tf-fy-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.tf-fy-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; font-family: inherit; padding: 4px 10px;
  border-radius: var(--radius-pill); border: 1px solid var(--border-light);
  background: var(--bg-subtle); color: var(--text-secondary); cursor: pointer;
}
.tf-fy-pill:hover { border-color: var(--accent); }
.tf-fy-pill.active { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); }
.tf-fy-count { font-size: 9px; font-family: 'JetBrains Mono', monospace; background: var(--border-light); border-radius: 8px; padding: 0 5px; }
.tf-fy-pill.active .tf-fy-count { background: rgba(255, 255, 255, .28); }

/* ─ Readiness bar ─ */
.tf-readiness { margin-top: 12px; }
.tf-readiness-bar { height: 6px; border-radius: 3px; background: var(--bg-subtle); overflow: hidden; }
.tf-readiness-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width .4s var(--ease-out); }
.tf-readiness-fill.complete { background: #4a7c5a; }
:is([data-theme="dark"], [data-theme="dracula"]) .tf-readiness-fill.complete { background: #6abf7e; }

/* ─ Per-person return status stepper ─ */
.tf-steps { display: flex; gap: 4px; flex-wrap: wrap; }
.tf-step {
  font-size: 10px; font-weight: 600; font-family: inherit; padding: 3px 8px;
  border-radius: var(--radius-pill); border: 1px solid var(--border-light);
  background: transparent; color: var(--text-tertiary); cursor: pointer; white-space: nowrap;
}
.tf-step:hover { border-color: var(--accent); }
.tf-step.done { color: var(--text-secondary); background: var(--bg-subtle); }
.tf-step.active { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); }

/* ─ Cards ─ */
.tf-card {
  background: var(--bg-raised); border: 1px solid var(--border-light);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  margin-bottom: 24px; overflow: hidden;
}
.tf-card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: var(--space-lg) var(--space-xl); flex-wrap: wrap;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 16px;
}
.tf-card-header h2 { font-size: 16px; font-weight: 600; margin: 0; color: var(--text-primary); }
.tf-card-hint { font-size: 11px; color: var(--text-tertiary); max-width: 56ch; text-align: right; }
.tf-card .prop-ng-note { padding: 0 var(--space-xl) 16px; margin: 0; }

/* ─ Checklist ─ */
.tf-check-groups { padding: 0 var(--space-xl) 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.tf-check-group-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-tertiary); margin-bottom: 8px;
}
.tf-check-row {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 10px; border-radius: var(--radius-md);
  background: var(--bg-subtle); margin-bottom: 6px;
}
.tf-check-body { flex: 1; min-width: 0; }
.tf-check-label { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.tf-check-why { font-size: 10.5px; color: var(--text-tertiary); margin-top: 2px; line-height: 1.45; }
.tf-check-app { font-size: 10.5px; font-family: 'JetBrains Mono', monospace; color: var(--text-secondary); margin-top: 3px; }
.tf-check-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.tf-chip {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: var(--radius-pill); white-space: nowrap; margin-top: 1px;
}
.tf-chip.is-uploaded { background: rgba(74, 124, 90, .14); color: #4a7c5a; }
:is([data-theme="dark"], [data-theme="dracula"]) .tf-chip.is-uploaded { background: rgba(106, 191, 126, .14); color: #6abf7e; }
.tf-chip.is-inapp { background: var(--accent-muted); color: var(--accent-dark); }
.tf-chip.is-missing { background: rgba(176, 107, 107, .14); color: var(--bracket-4); }
.tf-chip.is-optional { background: transparent; color: var(--text-tertiary); border: 1px dashed var(--border-light); }

/* ─ Document vault ─ */
.tf-stage-hint { font-size: 11px; color: var(--text-tertiary); margin: 0 0 8px; }
.tf-doc-row { flex-wrap: nowrap; }
.tf-doc-cat { max-width: 200px; }
.tf-doc-note { flex: 1.2; font-weight: 400; color: var(--text-secondary); }

/* ─ Expected figures ─ */
.tf-fig-props { padding: 0 20px 8px; display: flex; flex-direction: column; gap: 8px; }
.tf-fig-prop { background: var(--bg-subtle); border-radius: var(--radius-md); padding: 8px 12px; }
.tf-fig-prop-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.tf-fig-src {
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-tertiary); border: 1px solid var(--border-light);
  padding: 1px 6px; border-radius: var(--radius-pill); margin-left: 6px;
}
.tf-fig-prop-nums {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-secondary);
}
.tf-pos { color: #4a7c5a; }
.tf-neg { color: var(--bracket-4); }
:is([data-theme="dark"], [data-theme="dracula"]) .tf-pos { color: #6abf7e; }

.tf-fig-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 8px 20px 12px; }
.tf-fig-col { background: var(--bg-subtle); border-radius: var(--radius-lg); padding: 12px 14px; }
.tf-fig-col-title { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.tf-wf-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 3px 0; color: var(--text-primary); }
.tf-wf-row span:last-child { font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.tf-wf-sub { color: var(--text-secondary); font-size: 11.5px; }
.tf-wf-total { font-weight: 700; border-top: 1px solid var(--border-light); margin-top: 2px; padding-top: 5px; }
.tf-wf-hl { font-weight: 600; }
.tf-wf-dim { color: var(--text-tertiary); font-size: 11px; }

@media (max-width: 1000px) {
  .tf-hero, .tf-check-groups, .tf-fig-cols { grid-template-columns: 1fr; }
}

/* ═══ SCREEN LOCK ═══ */
/* lock.js marks <html> from a <head> script, so these rules apply before the
   document's first paint — the page is never briefly visible while locked.
   `visibility` rather than `display` so nothing reflows on unlock. */
html.pu-locked { overflow: hidden; }
html.pu-locked body { visibility: hidden; }
html.pu-locked #puLock { visibility: visible; }

.pu-lock {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg);
  background: var(--bg);
  /* Opaque, not translucent: a blur still leaks the shape of the numbers. */
}
.pu-lock__panel {
  width: 100%; max-width: 380px;
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  text-align: center;
}
.pu-lock__mark { font-size: 30px; line-height: 1; margin-bottom: var(--space-sm); }
.pu-lock__title { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -.02em; }
.pu-lock__sub { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
.pu-lock__intro {
  font-size: 12px; color: var(--text-secondary); line-height: 1.6;
  margin-top: var(--space-sm); text-align: left;
}
.pu-lock__form { display: flex; flex-direction: column; text-align: left; margin-top: var(--space-lg); }
.pu-lock__label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-tertiary); margin-bottom: 4px;
}
.pu-lock__label + .pu-lock__input { margin-bottom: var(--space-md); }
.pu-lock__input {
  font-family: var(--font-sans); font-size: 14px; color: var(--text-primary);
  background: var(--bg-subtle); border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 9px 12px; outline: none;
  transition: border-color var(--duration) var(--ease-out);
}
.pu-lock__input:focus { border-color: var(--accent); background: var(--bg-raised); }
.pu-lock__btn {
  font-family: var(--font-sans); font-size: 15px; font-weight: 700;
  color: var(--text-inverse); background: var(--accent);
  border: none; border-radius: var(--radius-md);
  padding: 12px; margin-top: var(--space-xs); cursor: pointer;
  transition: opacity var(--duration) var(--ease-out);
}
.pu-lock__btn:hover:not(:disabled) { opacity: .88; }
.pu-lock__btn:disabled { opacity: .5; cursor: default; }
.pu-lock__link {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  color: var(--text-tertiary); background: none; border: none;
  margin-top: var(--space-md); cursor: pointer; text-decoration: underline;
}
.pu-lock__link:hover { color: var(--accent-dark); }
.pu-lock__error {
  font-size: 12px; color: var(--warn); min-height: 16px;
  margin-top: var(--space-md); line-height: 1.4;
}
.pu-lock__note {
  font-size: 10px; color: var(--text-tertiary); line-height: 1.55;
  margin-top: var(--space-md); text-align: left;
}
.pu-lock__note code { font-family: var(--font-mono); font-size: 9.5px; }

/* Sits beside the theme toggle and borrows its shape */
.pu-lock-btn { font-size: 15px; }

/* ═══ OPEN BANKING (REDBARK CDR) ACCOUNTS PAGE ═══ */
.acct-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

.acct-hero-back {
  font-size: 10px;
  font-weight: 700;
  font-family: inherit;
  padding: 2px 7px;
  margin-right: 6px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-light);
  background: var(--bg-subtle);
  color: var(--accent);
  cursor: pointer;
}
.acct-hero-back:hover {
  border-color: var(--accent);
  background: var(--accent-muted);
}

.ob-conn-bar {
  margin-bottom: 18px;
}

.ob-conn-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-left: 4px solid #4a7c5a;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 14px 18px;
}
:is([data-theme="dark"], [data-theme="dracula"]) .ob-conn-card {
  border-left-color: #6abf7e;
}

.ob-conn-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.ob-conn-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.ob-conn-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ob-conn-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.ob-conn-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: rgba(74, 124, 90, 0.14);
  color: #4a7c5a;
}
:is([data-theme="dark"], [data-theme="dracula"]) .ob-conn-status-pill {
  background: rgba(106, 191, 126, 0.16);
  color: #6abf7e;
}

.ob-conn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.ob-conn-provider {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: 'JetBrains Mono', monospace;
}

.ob-conn-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 3px;
}
.ob-conn-meta b {
  color: var(--text-primary);
  font-weight: 600;
}
.ob-conn-sep {
  color: var(--text-tertiary);
}

.ob-conn-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ob-sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-md);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.ob-sync-btn:hover:not(:disabled) {
  background: var(--accent-dark);
}
.ob-sync-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

@keyframes ob-spin {
  to { transform: rotate(360deg); }
}
.ob-sync-icon {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
}
.ob-sync-icon.is-spinning {
  animation: ob-spin 0.9s linear infinite;
}

.ob-oauth-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.ob-oauth-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.ob-conn-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
}
.ob-conn-toast--ok {
  background: rgba(74, 124, 90, 0.14);
  color: #4a7c5a;
  border: 1px solid rgba(74, 124, 90, 0.3);
}
:is([data-theme="dark"], [data-theme="dracula"]) .ob-conn-toast--ok {
  color: #6abf7e;
}
.ob-conn-toast--err {
  background: rgba(176, 107, 107, 0.14);
  color: var(--bracket-4);
  border: 1px solid rgba(176, 107, 107, 0.3);
}
.ob-conn-toast-close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  opacity: 0.75;
}

/* ─ Grouped Account Sections ─ */
.acct-sections {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 24px;
}

.ob-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ob-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.ob-section-sub {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin: 2px 0 0;
}

.ob-section-tag {
  font-size: 10.5px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-tertiary);
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}

.ob-cards-grid {
  display: grid;
  gap: 14px;
}
.ob-cards-grid--top {
  grid-template-columns: repeat(3, 1fr);
}
.ob-cards-grid--loans {
  grid-template-columns: repeat(2, 1fr);
}

.ob-acct-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.ob-acct-card:hover {
  border-color: var(--accent-soft);
  transform: translateY(-1px);
}
.ob-acct-card.is-viewing {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.ob-acct-card.is-zero-loan {
  opacity: 0.78;
}

.ob-acct-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ob-acct-card__title-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.ob-acct-card__icon {
  font-size: 20px;
  line-height: 1.1;
  flex-shrink: 0;
}

.ob-acct-card__name-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ob-acct-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.ob-acct-card__sub {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.ob-acct-masked {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary);
  font-weight: 600;
}

.ob-cdr-badge {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-tertiary);
  border: 1px solid var(--border-light);
  white-space: nowrap;
}

.ob-loan-badges {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ob-rate-badge {
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-muted);
  color: var(--accent-dark);
  white-space: nowrap;
}

.ob-offset-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: rgba(74, 124, 90, 0.14);
  color: #4a7c5a;
  white-space: nowrap;
}
:is([data-theme="dark"], [data-theme="dracula"]) .ob-offset-badge {
  color: #6abf7e;
}

.ob-acct-card__balances {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-subtle);
  border-radius: var(--radius-lg);
}

.ob-bal-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: 3px;
}

.ob-bal-primary {
  font-size: 20px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary);
  line-height: 1.15;
}
.ob-bal-primary--positive {
  color: #4a7c5a;
}
:is([data-theme="dark"], [data-theme="dracula"]) .ob-bal-primary--positive {
  color: #6abf7e;
}

.ob-bal-right {
  text-align: right;
}

.ob-bal-secondary {
  font-size: 14px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary);
}

.ob-bal-pending {
  font-size: 10.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.ob-acct-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-secondary);
}

.ob-acct-drill-hint {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
}

.ob-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ob-progress-bar {
  height: 6px;
  background: var(--bg-subtle);
  border-radius: 3px;
  overflow: hidden;
}

.ob-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}

.ob-progress-fill--loan {
  background: #4a7c5a;
}
:is([data-theme="dark"], [data-theme="dracula"]) .ob-progress-fill--loan {
  background: #6abf7e;
}

.ob-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-family: 'JetBrains Mono', monospace;
}

/* ─ Enriched Open Banking Transaction Ledger ─ */
.acct-pill-last4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  opacity: 0.7;
  margin-left: 3px;
}

.acct-pill-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.07);
  border-radius: 8px;
  padding: 0 5px;
  margin-left: 4px;
}
.acct-scope-pill.is-active .acct-pill-count {
  background: rgba(255, 255, 255, 0.25);
}

.ob-filter-pills {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.ob-filter-pill {
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-light);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.ob-filter-pill:hover {
  border-color: var(--accent);
}
.ob-filter-pill.is-active {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--accent-dark);
}

.ob-interest-pill {
  color: #c79a3a;
  font-family: 'JetBrains Mono', monospace;
}

.ob-txn-row {
  display: grid;
  grid-template-columns: 66px minmax(180px, 1fr) 165px 175px 110px auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: border-color 0.12s;
}
.ob-txn-row:hover {
  border-color: var(--border-light);
}

.ob-txn-date {
  font-size: 11.5px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ob-txn-pending-dot {
  color: #c79a3a;
  font-size: 9px;
}

.ob-txn-main {
  min-width: 0;
}

.ob-txn-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ob-txn-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 10.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.ob-txn-raw {
  max-width: 340px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ob-txn-prov-tag {
  font-size: 9px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
}

.ob-txn-ref {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
}

.ob-txn-acct-pill {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.ob-txn-acct-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ob-txn-acct-pill small {
  font-family: 'JetBrains Mono', monospace;
  opacity: 0.7;
  margin-left: 2px;
}

.ob-txn-amount {
  text-align: right;
  font-size: 12.5px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}
.ob-txn-amount.is-credit {
  color: #4a7c5a;
}
:is([data-theme="dark"], [data-theme="dracula"]) .ob-txn-amount.is-credit {
  color: #6abf7e;
}
.ob-txn-amount.is-debit {
  color: var(--text-primary);
}

.ob-txn-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.ob-txn-actions .acct-note {
  margin: 0;
}

@media (max-width: 1024px) {
  .acct-hero,
  .ob-cards-grid--top,
  .ob-cards-grid--loans {
    grid-template-columns: 1fr;
  }
  .ob-txn-row {
    grid-template-columns: 60px 1fr auto;
  }
  .ob-txn-acct-pill {
    display: none;
  }
}