/*
 * Deep Spectrum — Deduxe brand palette overlay
 *
 * Anchored to the official Deduxe logo lockup (dark navy bg, sound-wave D-mark
 * with violet→magenta gradient, white wordmark). Applies that brand to the
 * app's tokens so accents, buttons, and gradients feel like the logo.
 *
 * Marta's voice-memo guidance is honored on surface area: large backgrounds
 * stay deep navy (not pink), pink stays a small tail accent in gradient termini,
 * accent color is violet (matches logo mid-stop) not pure indigo.
 *
 * Loaded after style.css so these :root and [data-theme="light"] declarations win.
 */

:root {
  /* Surfaces — Marta-approved dark-logo navy */
  --bg-primary: #0F1024;
  --bg-secondary: #1A1D3A;
  --bg-card: #1A1D3A;
  --bg-elevated: #1E1B4B;
  --border-color: #312E81;
  --border-light: #1E1B4B;

  --nav-bg: #0F1024;
  --nav-border: #1E1B4B;
  --nav-inactive: #9CA3AF;

  --input-bg: #1A1D3A;
  --input-border: #312E81;

  /* Primary accent — violet, matches logo mid-gradient (#7C3AED) */
  --accent-purple: #7C3AED;
  --accent-purple-hover: #6D28D9;
  --accent-purple-light: #A78BFA;
  --accent-purple-bg: rgba(124, 58, 237, 0.14);
  --purple-bg: rgba(124, 58, 237, 0.14);
  --purple-500: #7C3AED;
  --purple-400: #A78BFA;
  --purple-600: #6D28D9;

  --bg-tertiary: #0F1024;
  --surface: #1A1D3A;

  --hover-bg: rgba(124, 58, 237, 0.10);

  --card-bg-raw: 26, 29, 58;
  --modal-overlay: rgba(15, 16, 36, 0.72);

  --shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);

  /* Named gradient tokens — match the logo's violet → magenta accent */
  --gradient-hero: linear-gradient(
    135deg,
    #5B21B6 0%,
    #7C3AED 45%,
    #A855F7 75%,
    #C026D3 100%
  );
  --gradient-cta: linear-gradient(135deg, #6D28D9 0%, #7C3AED 50%, #A855F7 100%);
  --gradient-card-glow: radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.35), transparent 70%);
  --gradient-text: linear-gradient(90deg, #7C3AED 0%, #A855F7 50%, #C026D3 100%);
  --gradient-logo: linear-gradient(135deg, #5B21B6 0%, #7C3AED 50%, #C026D3 100%);
}

/*
 * Brand-prominent gradient overrides
 *
 * These selectors carry the visible brand identity (logo wordmark, hero title
 * accent text, shimmer animation). They get the full violet → magenta-pink
 * run that matches the official logo's sound-wave gradient.
 *
 * Note: large surfaces (page backgrounds, primary CTAs) intentionally do NOT
 * use this gradient — Marta's voice memo flagged that pink-dominated surfaces
 * make the app feel "too feminine". Pink lives in brand elements only.
 */

.logo,
.logo-small {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 35%, #A855F7 65%, #DB2777 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-shimmer {
  background: linear-gradient(90deg, #7C3AED, #A855F7, #DB2777, #7C3AED);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text {
  background: linear-gradient(135deg, #7C3AED 0%, #A855F7 50%, #DB2777 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* New wide PNG wordmark in nav — override the old 32x32 square sizing */
.landing-nav-logo img,
.landing-nav-logo img.brand-logo-img {
  width: auto !important;
  height: 32px !important;
  max-height: 32px;
}
.landing-nav-title,
.prelogin-nav-title { display: none !important; }

/* While the onboarding tour overlay is visible, hide app-shell chrome
 * (avatar, bell, header bars) so it doesn't bleed through. */
body.onb-tour-open .profile-avatar,
body.onb-tour-open .reminders-bell-btn,
body.onb-tour-open .dash-header-right,
body.onb-tour-open .dash-header,
body.onb-tour-open .landing-nav,
body.onb-tour-open .prelogin-nav {
  display: none !important;
}

/* Profile avatar — force perfect circle everywhere. Default <button>
 * user-agent padding (~12px 20px) was leaking through and making the
 * 30px circle render as a 40x30 oval. */
.profile-avatar,
.profile-avatar-sm {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  flex: 0 0 32px !important;
  aspect-ratio: 1 / 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
}

/* Global safety: never stretch a logo/brand image.
 * Catches both classed elements AND inline-sized <img width=… height=…>
 * referencing the brand asset paths. */
img.brand-logo-img,
.onb-logo-mark,
.landing-nav-logo img,
.prelogin-nav-logo img,
.footer-brand img,
.code-logo img,
img[src*="/public/deduxe-icon"],
img[src*="/public/deduxe-logo"],
img[src*="/public/favicon"] {
  object-fit: contain !important;
  flex-shrink: 0;
}

/* ---- Responsive: kill horizontal overflow + mobile nav fixes ---- */
html, body {
  overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; }

/* Mobile nav: compact buttons, fit logo + actions in one row */
@media (max-width: 640px) {
  .landing-nav-inner,
  .prelogin-nav-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 8px;
  }
  .landing-nav-links,
  .prelogin-nav-links {
    gap: 6px;
  }
  .landing-nav-links .btn-sm,
  .prelogin-nav-links .btn-sm {
    padding: 6px 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
  /* Hide non-essential nav links on phones (Features/Pricing/Watch Demo) */
  .landing-nav-link { display: none !important; }
  /* Compact lang toggle */
  #lang-toggle {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
}

/* Very small phones: drop lang toggle entirely; users find it in settings */
@media (max-width: 420px) {
  #lang-toggle { display: none !important; }
  .landing-nav-logo img,
  .landing-nav-logo img.brand-logo-img {
    height: 26px !important;
  }
  .prelogin-nav-logo img,
  .prelogin-nav-logo img.brand-logo-img {
    height: 24px !important;
  }
}

/* Force landing sections to stay within viewport at mobile */
@media (max-width: 640px) {
  .landing-hero,
  .landing-hero-content,
  .landing-section,
  .landing-cta,
  .features-section,
  .steps-section,
  .pricing-section,
  .landing-footer-inner {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .landing-hero-title { font-size: 36px !important; line-height: 1.1; }
  .landing-hero-sub { font-size: 15px !important; }
  /* Auth screen padding */
  .prelogin-nav { padding: 0; }
}

/* Auth forms: stack First/Last name + similar split rows on narrow screens */
@media (max-width: 540px) {
  .form-row,
  .signup-name-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .form-row > *,
  .signup-name-row > *,
  .form-row .input-group.half,
  .input-group.half {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
  /* Auth-screen "Create Account" / "Log In" headings — fit narrow */
  #login-screen .logo,
  #signup-screen .logo,
  #reset-screen .logo,
  #reset-new-screen .logo {
    font-size: 32px !important;
    letter-spacing: -0.5px;
  }
  /* Pricing & similar large hero titles */
  .pricing-title { font-size: 28px !important; }
}

/* Hide redundant "Start Free Trial" nav button at narrow widths — in-body
 * CTA drives signup. Only "Log In" stays in nav. */
@media (max-width: 540px) {
  .landing-nav-links button.btn-primary.btn-sm[onclick*="signup-screen"] {
    display: none !important;
  }
}

/* Prelogin nav: let the new wider logo PNG size by height */
.prelogin-nav-logo img,
.prelogin-nav-logo img.brand-logo-img {
  width: auto !important;
  height: 28px !important;
  max-height: 28px;
  border-radius: 0 !important;
}

/* Hero center wordmark — let the PNG size by height, auto width */
.code-logo-lg img.brand-logo-img { height: 80px; width: auto; }
.code-logo-md img.brand-logo-img { height: 56px; width: auto; }

/*
 * Deductions Protected — top-of-home progress card (PRD §5.1).
 * "Critical to keep users engaged — show users the amount saved so far."
 */
.deductions-card {
  margin: 16px;
  padding: 20px 20px 18px;
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.18) 0%, rgba(168, 85, 247, 0.10) 50%, rgba(219, 39, 119, 0.12) 100%),
    #1A1D3A;
  border: 1px solid rgba(124, 58, 237, 0.32);
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.18);
}
.deductions-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.deductions-card-label {
  color: #A78BFA;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.deductions-card-period {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-weight: 600;
}
.deductions-amount {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.05;
  background: linear-gradient(135deg, #7C3AED 0%, #A855F7 50%, #DB2777 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 2px;
}
.deductions-savings-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
}
.deductions-savings-label {
  color: rgba(255, 255, 255, 0.55);
}
.deductions-savings-val {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 14px;
  margin-right: 6px;
}
.deductions-savings-rate {
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
  font-weight: 500;
}

[data-theme="light"] .deductions-card {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(168, 85, 247, 0.05) 50%, rgba(219, 39, 119, 0.07) 100%),
    #FFFFFF;
  border-color: rgba(124, 58, 237, 0.20);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.10);
}
[data-theme="light"] .deductions-card-label { color: #6D28D9; }
[data-theme="light"] .deductions-card-period { color: rgba(31, 41, 55, 0.55); }
[data-theme="light"] .deductions-savings-label { color: rgba(31, 41, 55, 0.65); }
[data-theme="light"] .deductions-savings-val { color: #1F2937; }
[data-theme="light"] .deductions-savings-rate { color: rgba(31, 41, 55, 0.45); }
[data-theme="light"] .deductions-savings-row { border-top-color: rgba(0, 0, 0, 0.08); }

/* Primary CTAs carry the brand gradient to match logo */
.btn-primary,
.btn-sm,
.entity-pill.active {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 40%, #A855F7 75%, #DB2777 100%) !important;
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.35);
}

.btn-primary:hover,
.btn-sm:hover {
  box-shadow: 0 4px 20px rgba(192, 38, 211, 0.40);
  transform: translateY(-1px);
}

/* ============================================================
 *  PHASE A — DASHBOARD POLISH
 * ============================================================ */

/* Dashboard header: greeting + bell + avatar.
   .dash-greeting used to have margin-bottom:24px which made its flex
   box taller than the right-side icon group — flex centering then
   placed the text ~12px above the icon centers. Zero out the inner
   margin and put the breathing room on the header itself so the row
   reads as a single horizontal band. */
.dash-header { padding: 16px 16px 8px !important; margin-bottom: 12px; }
.dash-greeting { margin-bottom: 0 !important; display: flex !important; align-items: center; gap: 8px; min-width: 0; }
.dash-greeting img { vertical-align: middle; flex-shrink: 0; }
.dash-greeting .greeting-text { margin: 0 !important; line-height: 1.1; }
.dash-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.greeting-text {
  font-family: inherit;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px;
  color: #fff !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Phone widths: shrink further so "Good afternoon, <Name>" never wraps. */
@media (max-width: 480px) {
  .greeting-text {
    font-size: 16px !important;
  }
}
@media (max-width: 360px) {
  .greeting-text {
    font-size: 15px !important;
  }
}
.reminders-bell-btn {
  width: 40px; height: 40px;
  border-radius: 12px !important;
  background: rgba(124, 58, 237, 0.10) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  transition: background 0.2s, transform 0.15s;
}
.reminders-bell-btn:hover {
  background: rgba(124, 58, 237, 0.18) !important;
  transform: translateY(-1px);
}

/* Dashboard hero "What would you like to log?" */
.dash-hero-text {
  font-family: inherit !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
  margin: 8px 0 18px !important;
}

/* Type selector — small inline chips above the mic (was big cards) */
.dash-category-chips,
.dash-category-cards.dash-category-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px !important;
  padding: 0 16px !important;
  margin: 4px 0 18px !important;
}
.dash-category-chips .dash-cat-card {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  background: rgba(124, 58, 237, 0.06) !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
  color: rgba(255, 255, 255, 0.65) !important;
  transition: all 0.18s ease;
  font-size: 13px !important;
  margin: 0 !important;
}
.dash-category-chips .dash-cat-card:hover {
  background: rgba(124, 58, 237, 0.14) !important;
  color: #fff !important;
}
.dash-category-chips .dash-cat-card.selected {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.30), rgba(219, 39, 119, 0.20)) !important;
  border-color: rgba(168, 85, 247, 0.60) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25);
}
.dash-category-chips .dash-cat-icon { margin: 0 !important; line-height: 0; color: currentColor; }
.dash-category-chips .dash-cat-icon svg { width: 14px !important; height: 14px !important; }
.dash-category-chips .dash-cat-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1px;
}

/* Compact quick-action row — 3 alt entry paths (Note merged into the
   main mic via reminder detection on the transcript). 3-column grid
   on wider phones + tablets; falls back to 2 cols on tiny phones so
   the labels don't get squished. */
.quick-actions-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 16px;
  margin: 24px auto 12px;
  max-width: 420px;
}
.quick-actions-row .quick-action {
  grid-column: span 1;
}
@media (max-width: 360px) {
  .quick-actions-row { grid-template-columns: repeat(2, 1fr); max-width: 280px; }
}
.quick-action {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 14px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s ease;
}
.quick-action:hover {
  background: rgba(124, 58, 237, 0.10) !important;
  border-color: rgba(168, 85, 247, 0.40) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.15);
}
.quick-action .qa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.16);
  color: #C4B5FD;
}
.quick-action .qa-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.70) !important;
  letter-spacing: 0.2px;
  text-align: center;
  line-height: 1.2;
}
.quick-action:hover .qa-icon {
  background: rgba(124, 58, 237, 0.28);
  color: #fff;
}
.quick-action:hover .qa-label { color: #fff !important; }

/* Mic-first dashboard: the 3 quick-action tiles got pruned down to a
   single "Type my deduction" text link below the mic. Scan Receipt
   and Start Trip live inside their own accordion CTAs now, so the
   home screen reads as a single focused surface. */
.dash-type-link-row {
  display: flex;
  justify-content: center;
  margin: 14px auto 8px;
  padding: 0 16px;
}
.dash-type-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px !important;
  background: transparent !important;
  border: none !important;
  color: #C4B5FD !important;
  font-family: inherit;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.18s ease, background 0.18s ease;
}
.dash-type-link svg { opacity: 0.9; }
.dash-type-link:hover {
  color: #fff !important;
  background: rgba(124, 58, 237, 0.12) !important;
}
.dash-type-link:hover svg { opacity: 1; }

/* "Add a Note or Reminder" button below "or enter manually". Outlined
   violet pill so it reads as a secondary action — the mic is still
   the primary entry point, this is the dedicated path for reminders
   and standalone notes. */
.dash-note-row {
  display: flex;
  justify-content: center;
  margin: 0 auto 8px;
  padding: 0 16px;
}
.dash-note-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: rgba(124, 58, 237, 0.10);
  border: 1.5px solid rgba(168, 85, 247, 0.45);
  border-radius: 14px;
  color: #C4B5FD;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dash-note-btn:hover {
  background: rgba(124, 58, 237, 0.18);
  border-color: rgba(168, 85, 247, 0.65);
  color: #fff;
}
.dash-note-btn:active { transform: scale(0.98); }
/* On iOS Safari, taps that land on the inline SVG/text inside the button
   can make the SVG (not the button) the click target. The inline onclick
   still bubbles, but the delegated handler reads via .closest('.dash-note-btn')
   which traverses up so it's safe either way. Pointer-events:none belt
   keeps the tap target unambiguously the button itself. */
.dash-note-btn svg,
.dash-note-btn span { pointer-events: none; }

/* Settings — REPS/STR/Both hours-mode toggle row. Three pill buttons
   in a row; active one fills with the brand gradient. */
.settings-hours-mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.settings-hours-mode-btn {
  padding: 10px 12px;
  background: rgba(26, 29, 58, 0.55);
  border: 1.5px solid rgba(168, 85, 247, 0.28);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.70);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.settings-hours-mode-btn:hover {
  border-color: rgba(168, 85, 247, 0.55);
  color: rgba(255, 255, 255, 0.92);
}
.settings-hours-mode-btn.active {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 50%, #A855F7 100%);
  border-color: rgba(168, 85, 247, 0.85);
  color: #fff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.32);
}

/* Type selector above the mic — Expense / Mileage / Hours. User
   picks the type explicitly so the mic routes to the right flow.
   3-column grid; active button gets the brand gradient fill. */
.dash-type-select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 420px;
  margin: 8px auto 22px;
  padding: 0 16px;
}
.dash-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 6px;
  background: rgba(26, 29, 58, 0.55);
  border: 1.5px solid rgba(124, 58, 237, 0.20);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.65);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.dash-type-btn svg { opacity: 0.8; transition: opacity 0.15s ease; }
.dash-type-btn:hover {
  border-color: rgba(168, 85, 247, 0.45);
  color: rgba(255, 255, 255, 0.85);
}
.dash-type-btn.dash-type-active {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 50%, #A855F7 100%);
  border-color: rgba(168, 85, 247, 0.85);
  color: #fff;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.32);
}
.dash-type-btn.dash-type-active svg { opacity: 1; }

/* Tighten the mic hint area + headline now that everything is closer */
.dash-hero { padding-top: 4px; }
.dash-hero-text {
  font-family: inherit !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
  text-align: center;
  margin: 14px 0 12px !important;
  color: #fff;
}
.dash-cat-hint {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  text-align: center;
  padding: 0 24px;
  margin: 10px 0 0 !important;
  line-height: 1.4;
}

/* Hero mic — bigger, gradient breathing ring */
.mic-button-large {
  width: 132px !important;
  height: 132px !important;
  border: none !important;
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 40%, #A855F7 75%, #DB2777 100%) !important;
  box-shadow:
    0 0 0 6px rgba(124, 58, 237, 0.10),
    0 0 0 14px rgba(124, 58, 237, 0.04),
    0 16px 48px rgba(124, 58, 237, 0.40) !important;
  position: relative;
  animation: micBreathe 3.6s ease-in-out infinite;
}
.mic-button-large::before {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.28) 0%, transparent 65%);
  z-index: -1;
  animation: micPulseGlow 3.6s ease-in-out infinite;
}
@keyframes micBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes micPulseGlow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
.mic-button-large:active { transform: scale(0.96); }
/* Mic story stack — headline carries the action ("Speak any deduction")
   so users immediately know this is the primary entry point, sub
   explains scope so they don't have to guess what counts. */
.mic-headline {
  margin: 22px 0 6px !important;
  padding: 0 20px;
  font-family: inherit !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
  line-height: 1.15 !important;
  text-align: center;
  background: linear-gradient(135deg, #ffffff 0%, #C4B5FD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.mic-hint {
  margin-top: 4px !important;
  padding: 0 24px;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  letter-spacing: 0.2px;
  text-align: center;
  line-height: 1.4;
}

/* Secondary action buttons (Import Hours, Scan Receipt) */
#photo-import-btn,
#scan-receipt-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  transition: all 0.18s ease;
}
#photo-import-btn:hover,
#scan-receipt-btn:hover {
  background: rgba(124, 58, 237, 0.12) !important;
  border-color: rgba(168, 85, 247, 0.40) !important;
  transform: translateY(-1px);
}
#photo-import-btn svg,
#scan-receipt-btn svg { stroke: rgba(168, 85, 247, 0.9) !important; }

/* REPS / STR / Billable progress cards — premium feel */
.reps-progress-card {
  margin: 12px 16px !important;
  padding: 18px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(124, 58, 237, 0.05) 100%),
    rgba(26, 29, 58, 0.6) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
}
.reps-progress-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #A78BFA !important;
}
.reps-hours-val {
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px;
}
.reps-bar-track {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 999px !important;
  height: 8px !important;
  overflow: hidden;
}
.reps-bar-fill {
  background: linear-gradient(90deg, #7C3AED, #A855F7, #DB2777) !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.45);
  border-radius: 999px;
}

/* "or enter manually" link */
.entry-manual-link a {
  color: #A78BFA !important;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dashed rgba(167, 139, 250, 0.4);
  padding-bottom: 1px;
  transition: color 0.15s;
}
.entry-manual-link a:hover { color: #C4B5FD !important; }

/* ============================================================
 *  PHASE B — VOICE ENTRY MODAL
 * ============================================================ */

.expense-modal-content {
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.06) 0%, rgba(15, 16, 36, 0) 40%),
    #0F1024 !important;
  border-radius: 24px 24px 0 0 !important;
  border-top: 1px solid rgba(124, 58, 237, 0.22) !important;
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.5) !important;
}

/* Modal close (X) and back (<) — matched 40x40 brand-gradient circles
   so they pop against any background and read as identical sibling
   actions. No more dark-box chrome around them. */
.expense-modal-close,
.expense-back-btn {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 40%, #A855F7 75%, #DB2777 100%) !important;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.42);
  z-index: 10;
}
.expense-modal-close:hover,
.expense-back-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.55);
  opacity: 1;
}
/* Close button — hide the literal × text with text-indent + overflow
   trick (font-size:0 was losing the cascade battle, color:transparent
   leaves a faint outline). Then render a crisp white SVG X via the
   ::before pseudo, perfectly centered inside the 40x40 flex container. */
.expense-modal-close {
  text-indent: -9999px !important;
  overflow: hidden !important;
  position: relative !important;
}
.expense-modal-close::before {
  content: '';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-indent: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
/* Back button uses its own inline SVG via markup; ensure the stroke
   reads as white over the gradient. */
.expense-back-btn svg {
  stroke: #FFFFFF !important;
  stroke-width: 2.4 !important;
}

.expense-modal-title {
  font-family: inherit !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.4px !important;
}

/* Position pins — visual styling lives in the matched
   `.expense-modal-close, .expense-back-btn` rule above. */
.expense-back-btn {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
}
/* Close button was `position: fixed` in style.css which makes it
   float in the viewport (wrong inside scrolling modals). Pin it to
   the modal's top-right corner like the back button is on the left. */
.expense-modal-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
}
/* Ensure the modal-content is the positioning context for the
   absolute back button. */
.expense-modal-content { position: relative !important; }
/* When the back button is pinned to the corner, the header no longer
   needs to reserve column space for it — push the title down so it
   doesn't collide with the corner buttons. */
.expense-modal-header {
  padding-top: 64px !important;
}

/* Entry-option cards (Log Expense / Log Mileage / Log Hours) */
.entry-option-card {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.06) 0%, rgba(219, 39, 119, 0.03) 100%),
    rgba(26, 29, 58, 0.5) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 16px !important;
  transition: all 0.18s ease;
}
.entry-option-card:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.14) 0%, rgba(219, 39, 119, 0.08) 100%),
    rgba(26, 29, 58, 0.7) !important;
  border-color: rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.18);
}
.entry-option-icon {
  background: rgba(124, 58, 237, 0.14) !important;
  border: 1px solid rgba(168, 85, 247, 0.32) !important;
  border-radius: 12px !important;
}
.entry-option-title { font-weight: 600 !important; }
.entry-option-arrow { color: rgba(168, 85, 247, 0.6) !important; }

/* Listen step: bigger gradient mic w/ breathing ring (matches dashboard) */
.expense-mic-btn {
  width: 132px !important;
  height: 132px !important;
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 40%, #A855F7 75%, #DB2777 100%) !important;
  box-shadow:
    0 0 0 6px rgba(124, 58, 237, 0.10),
    0 0 0 14px rgba(124, 58, 237, 0.04),
    0 16px 48px rgba(124, 58, 237, 0.40) !important;
  animation: micBreathe 3.6s ease-in-out infinite;
}
.expense-mic-btn::before {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.28) 0%, transparent 65%);
  z-index: -1;
  animation: micPulseGlow 3.6s ease-in-out infinite;
}
.expense-mic-btn.listening {
  animation: micBreathe 1.8s ease-in-out infinite !important;
}

.expense-listen-status {
  font-size: 15px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  letter-spacing: 0.2px;
  margin-top: 24px !important;
}

/* Live transcript: editorial type */
.expense-live-transcript {
  font-family: inherit !important;
  font-size: 18px !important;
  line-height: 1.5;
  text-align: center;
  margin-top: 24px;
  padding: 0 20px;
  min-height: 60px;
  color: rgba(255, 255, 255, 0.92) !important;
}
.expense-live-transcript .interim-text {
  color: rgba(255, 255, 255, 0.45) !important;
  font-style: italic;
}

/* Voice examples box: premium gradient hint card */
.voice-examples-box {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(219, 39, 119, 0.04) 100%),
    rgba(26, 29, 58, 0.5) !important;
  border: 1px solid rgba(124, 58, 237, 0.20) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
}
.voice-examples-heading {
  color: #A78BFA !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}
.voice-examples-instruction { color: rgba(255, 255, 255, 0.55); margin-bottom: 10px; }
.voice-examples-single {
  font-family: inherit !important;
  font-style: italic;
  color: rgba(255, 255, 255, 0.85) !important;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 10px;
}
.voice-examples-tip { color: rgba(255, 255, 255, 0.45); font-size: 12px; }

/* Form inputs in the voice modal */
.expense-input-lg,
#editable-transcript,
.expense-preview-fields input,
.expense-preview-fields select,
.expense-preview-fields textarea {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  color: #fff !important;
  font-size: 15px !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.expense-input-lg:focus,
#editable-transcript:focus,
.expense-preview-fields input:focus,
.expense-preview-fields select:focus,
.expense-preview-fields textarea:focus {
  outline: none !important;
  border-color: rgba(168, 85, 247, 0.60) !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15) !important;
}
.expense-preview-fields label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase;
  color: #A78BFA !important;
  margin-bottom: 6px !important;
}

/* Success step */
.expense-success-check {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(168, 85, 247, 0.10)) !important;
  border: 1px solid rgba(34, 197, 94, 0.40) !important;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.08), 0 12px 32px rgba(34, 197, 94, 0.20);
}
.expense-success-title {
  font-family: inherit !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.5px;
}
.expense-success-sub {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 15px;
  margin-top: 4px;
}

/* Save button gets brand gradient */
.expense-save-btn,
#voice-save-btn,
#split-save-btn,
#process-btn {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 40%, #A855F7 75%, #DB2777 100%) !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 14px 24px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
}

/* ============================================================
 *  PHASE B — ENTRIES LIST
 * ============================================================ */

#entries-page .page-header h2 {
  font-family: inherit;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

/* Search input */
.entries-search-mini {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 14px !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.entries-search-mini:focus-within {
  border-color: rgba(168, 85, 247, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}
.entries-search-mini svg { color: #A78BFA !important; }
.entries-search-mini input {
  background: transparent !important;
  color: #fff !important;
}
.entries-search-mini input::placeholder { color: rgba(255, 255, 255, 0.4) !important; }

/* Entity pills (top row above tabs) */
.entries-entity-pills .entity-pill {
  background: rgba(124, 58, 237, 0.06) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: all 0.15s;
}
.entries-entity-pills .entity-pill:hover {
  background: rgba(124, 58, 237, 0.14) !important;
  border-color: rgba(168, 85, 247, 0.40) !important;
}
.entries-entity-pills .entity-pill.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.30), rgba(219, 39, 119, 0.22)) !important;
  border-color: rgba(168, 85, 247, 0.65) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25);
}

/* Type tabs (Expenses / Mileage / Hours / Receipts) — modern underline indicator */
.entries-type-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(124, 58, 237, 0.12);
  margin-bottom: 14px;
}
.type-tab {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.50) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 12px !important;
  position: relative;
  transition: color 0.15s;
}
.type-tab:hover { color: rgba(255, 255, 255, 0.85) !important; }
.type-tab.active {
  color: #fff !important;
  background: transparent !important;
}
.type-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 8px;
  right: 8px;
  height: 2px;
  background: linear-gradient(90deg, #7C3AED, #A855F7, #DB2777);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.55);
}
.type-tab-count {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.65) !important;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}
.type-tab.active .type-tab-count {
  background: rgba(168, 85, 247, 0.30) !important;
  color: #fff !important;
}

/* Entry cards — premium surface */
.entry-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(124, 58, 237, 0.04) 100%),
    rgba(26, 29, 58, 0.5) !important;
  border: 1px solid rgba(124, 58, 237, 0.14) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  transition: all 0.18s ease;
}
.entry-card:hover {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(219, 39, 119, 0.04) 100%),
    rgba(26, 29, 58, 0.7) !important;
  border-color: rgba(168, 85, 247, 0.32) !important;
  transform: translateX(2px);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.15);
}
.entry-amount {
  font-weight: 700 !important;
  letter-spacing: -0.3px;
}

/* Empty state for entries list */
.entries-empty,
.empty-state,
.entries-empty-state {
  text-align: center;
  padding: 48px 24px 32px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(124, 58, 237, 0.10) 0%, transparent 70%);
}
.entries-empty .empty-glyph,
.empty-state .empty-glyph,
.entries-empty-state svg {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 14px !important;
  opacity: 0.55;
  color: #A78BFA !important;
  stroke: #A78BFA !important;
  filter: drop-shadow(0 4px 16px rgba(124, 58, 237, 0.30));
  display: block !important;
}
.entries-empty h3,
.empty-state h3 {
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: #fff;
  margin: 0 0 6px;
}
.entries-empty-state p,
.entries-empty p,
.empty-state p {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin: 0 !important;
  line-height: 1.45;
}

/* Hide the totals container when it has no rendered content — it was
 * left visible as a styled empty card under the empty state. */
.entries-totals:empty { display: none !important; }

/* Tighten the gap between filters and entries area */
#entries-page .entries-categories {
  margin-top: 8px;
}
/* Time filter bar on the Expenses page — segmented control look.
   Outer container + inner active button match the entity dropdown
   style: 1.5px stronger-violet border + slightly-rounded 10px
   corners. Reads as one sturdy switcher, not four floating tabs. */
#entries-page .entries-time-filters {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  margin: 6px 0 18px;
  background: rgba(26, 29, 58, 0.65);
  border: 1.5px solid rgba(168, 85, 247, 0.45);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
#entries-page .entries-time-filters .time-filter-btn {
  flex: 1;
  margin: 0 !important;
  border-radius: 7px !important;
  font-size: 12.5px;
  padding: 8px 10px !important;
  border: none !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.55) !important;
}
#entries-page .entries-time-filters .time-filter-btn.active {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 50%, #A855F7 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}

/* Reports page — empty state: actionable, brand-aligned */
#reports-page .reports-empty-state {
  text-align: center;
  padding: 36px 24px 32px;
  margin: 8px 16px 20px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 65% 70% at 50% 25%, rgba(124, 58, 237, 0.14) 0%, transparent 70%),
    rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(124, 58, 237, 0.28);
}
#reports-page .reports-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.22), rgba(219, 39, 119, 0.14));
  border: 1px solid rgba(168, 85, 247, 0.40);
  color: #C4B5FD;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.18);
}
#reports-page .reports-empty-title {
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: #fff;
  margin: 0 0 6px;
}
#reports-page .reports-empty-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  margin: 0 auto 18px;
  max-width: 320px;
}
#reports-page .reports-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 40%, #A855F7 75%, #DB2777 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35);
  transition: transform 0.15s, box-shadow 0.2s;
}
#reports-page .reports-empty-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(192, 38, 211, 0.42);
}

/* When summary cards show zero, soften the metric so the empty state is the
 * focal point and the zero rows feel like placeholders, not failures. */
#reports-page .report-summary-card .summary-card-value { opacity: 0.92; }

/* ============================================================
 *  PHASE B — REPORTS
 * ============================================================ */

#reports-page .page-header h2 {
  font-family: inherit;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

/* Business entity selector */
.report-entity-select-wrap {
  margin: 14px 16px;
}
.report-entity-label {
  display: block;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: #A78BFA !important;
  margin-bottom: 8px !important;
}
.report-entity-select-box {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 14px !important;
  overflow: hidden;
}
.report-entity-select-box:focus-within {
  border-color: rgba(168, 85, 247, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}
.report-entity-select-box select {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  width: 100%;
  padding: 14px 16px !important;
  font-size: 15px !important;
}

/* Period filter — segmented control */
.report-time-filters {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 14px;
  padding: 4px;
  margin: 12px 16px;
}
.time-filter-btn {
  flex: 1;
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 9px 6px !important;
  border-radius: 10px !important;
  transition: all 0.15s;
}
.time-filter-btn:hover {
  color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(124, 58, 237, 0.08) !important;
}
.time-filter-btn.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.30), rgba(219, 39, 119, 0.22)) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.30);
}

/* Summary cards — premium surface, gradient on the primary metric */
.report-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 16px;
  margin-bottom: 20px;
}
.report-summary-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(124, 58, 237, 0.05) 100%),
    rgba(26, 29, 58, 0.55) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 16px !important;
  padding: 18px 16px !important;
  cursor: pointer;
  transition: all 0.18s ease;
}
.report-summary-card:hover {
  transform: translateY(-2px);
  border-color: rgba(168, 85, 247, 0.40) !important;
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.18);
}
.summary-card-value {
  display: block;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.6px !important;
  line-height: 1.05 !important;
  margin-bottom: 4px;
}
.summary-val-purple {
  background: linear-gradient(135deg, #7C3AED 0%, #A855F7 50%, #DB2777 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.summary-val-blue { color: #93C5FD !important; }
.summary-val-green { color: #34D399 !important; }
.summary-card-label {
  display: block;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55) !important;
  margin-top: 4px;
}
.summary-card-sub {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.50);
  margin-top: 2px;
}
.summary-sub-green { color: #34D399 !important; }

/* Category breakdown section */
.report-section { margin: 0 16px 20px; }
.report-section-title {
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: #fff;
  margin: 16px 0 12px;
}

/* Download cards (Expense Report / Receipt Report) */
.report-download-cards {
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.report-dl-card {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(219, 39, 119, 0.04) 100%),
    rgba(26, 29, 58, 0.5) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 16px !important;
  padding: 18px !important;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.report-dl-card:hover {
  transform: translateY(-2px);
  border-color: rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.20);
}
/* Override the inline rainbow icon backgrounds for unified violet */
#reports-page .report-dl-icon {
  background: rgba(124, 58, 237, 0.18) !important;
  border: 1px solid rgba(168, 85, 247, 0.40) !important;
  border-radius: 12px !important;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#reports-page .report-dl-icon svg { stroke: #C4B5FD !important; }
.report-dl-label {
  font-weight: 700 !important;
  color: #fff !important;
  font-size: 14px;
}
.report-dl-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.50);
  line-height: 1.3;
}

/* ============================================================
 *  PHASE B — SETTINGS
 * ============================================================ */

#settings-page .page-header h2 {
  font-family: inherit;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

/* All settings cards — premium violet-tinted surface */
#settings-page .card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(124, 58, 237, 0.04) 100%),
    rgba(26, 29, 58, 0.55) !important;
  border: 1px solid rgba(124, 58, 237, 0.15) !important;
  border-radius: 18px !important;
  padding: 18px !important;
  margin: 14px 16px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* Section titles (Account, Your Plan, Entities, Theme, etc.) */
#settings-page .section-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #A78BFA !important;
  margin: 0 0 14px !important;
}

/* Field rows */
#settings-page .settings-field {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 12px 0 !important;
  cursor: pointer;
}
#settings-page .settings-field:last-child { border-bottom: none !important; }
#settings-page .settings-field-label {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.50) !important;
  font-weight: 500 !important;
}
#settings-page .settings-field-value {
  font-size: 15px !important;
  color: #fff !important;
  font-weight: 500 !important;
  margin-top: 2px;
}

/* Plan card — promoted with brand gradient border */
#settings-page .settings-plan-card {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.12) 0%, rgba(219, 39, 119, 0.08) 100%),
    rgba(26, 29, 58, 0.6) !important;
  border: 1px solid rgba(168, 85, 247, 0.40) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-shadow: 0 6px 22px rgba(124, 58, 237, 0.18);
}
.settings-plan-name {
  font-family: inherit !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px;
  background: linear-gradient(135deg, #7C3AED, #A855F7, #DB2777);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.settings-plan-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
  display: block;
}

/* Theme toggle row + switch */
.theme-toggle-label {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #fff !important;
}
.theme-toggle-hint {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.50) !important;
}
.toggle-switch {
  width: 50px !important;
  height: 28px !important;
}
.toggle-slider {
  background: rgba(124, 58, 237, 0.18) !important;
  border: 1px solid rgba(124, 58, 237, 0.30);
  border-radius: 999px !important;
  transition: all 0.2s ease;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.22s cubic-bezier(0.5, 0, 0.3, 1.4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.toggle-switch input:checked ~ .toggle-slider {
  background: linear-gradient(135deg, #7C3AED, #A855F7, #DB2777) !important;
  border-color: rgba(168, 85, 247, 0.65);
}
.toggle-switch input:checked ~ .toggle-slider::before {
  transform: translateX(22px);
}

/* Section header rows (heading + button) */
#settings-page .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#settings-page .section-header .btn-sm {
  background: rgba(124, 58, 237, 0.14) !important;
  border: 1px solid rgba(168, 85, 247, 0.40) !important;
  color: #C4B5FD !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
#settings-page .section-header .btn-sm:hover {
  background: rgba(124, 58, 237, 0.22) !important;
  border-color: rgba(168, 85, 247, 0.60) !important;
}

/* ============================================================
 *  PHASE B — AUTH POLISH
 * ============================================================ */

/* Auth form labels become uppercase violet (matches voice modal) */
.auth-form label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase;
  color: #A78BFA !important;
  margin-bottom: 6px !important;
}

/* Auth inputs get violet focus rings */
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  color: #fff !important;
  font-size: 16px !important;  /* prevents iOS auto-zoom */
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-form input:focus {
  outline: none !important;
  border-color: rgba(168, 85, 247, 0.60) !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15) !important;
}
.auth-form input::placeholder { color: rgba(255, 255, 255, 0.30) !important; }

/* ============================================================
 *  PHASE C — LANDING POLISH
 * ============================================================ */

/* Feature cards (Voice Logging, Multi-Entity, Tax-Ready) */
.feature-card {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(219, 39, 119, 0.03) 100%),
    rgba(26, 29, 58, 0.55) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 20px !important;
  transition: all 0.25s ease;
}
.feature-card:hover {
  border-color: rgba(168, 85, 247, 0.45) !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(124, 58, 237, 0.20) !important;
}
.feature-icon {
  background: rgba(124, 58, 237, 0.16) !important;
  border: 1px solid rgba(168, 85, 247, 0.36);
}
.feature-icon svg { stroke: #C4B5FD !important; }
.feature-title {
  font-family: inherit;
  font-weight: 600 !important;
  letter-spacing: -0.3px;
}

/* Step cards (Speak It / Review It / Save It) */
.step-card {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.06) 0%, rgba(219, 39, 119, 0.03) 100%),
    rgba(26, 29, 58, 0.50) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 20px !important;
}
.step-card:hover {
  border-color: rgba(168, 85, 247, 0.45) !important;
}
.step-number {
  background: linear-gradient(135deg, #6D28D9, #7C3AED, #A855F7, #DB2777) !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35);
}

/* Pricing cards */
.pricing-card {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(219, 39, 119, 0.03) 100%),
    rgba(26, 29, 58, 0.55) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 22px !important;
  transition: all 0.25s ease;
}
.pricing-card:hover {
  border-color: rgba(168, 85, 247, 0.45) !important;
  transform: translateY(-3px);
}
.pricing-card.popular {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.18) 0%, rgba(219, 39, 119, 0.10) 100%),
    rgba(26, 29, 58, 0.7) !important;
  border: 1px solid transparent !important;
  border-radius: 22px !important;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.55),
    0 12px 40px rgba(124, 58, 237, 0.25);
}
.pricing-card.popular::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #7C3AED, #A855F7, #DB2777);
  border-radius: 22px;
  z-index: -1;
  opacity: 0.6;
  filter: blur(8px);
}
.pricing-popular-badge,
.pricing-card .popular-badge,
.pricing-card .badge-popular {
  background: linear-gradient(135deg, #7C3AED, #A855F7, #DB2777) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* All marketing section headings use the same heavy sans-serif family
   so they read as one consistent typographic system:
   - "Simple, transparent pricing"      (.landing-section-title — base sans)
   - "Ready to stop losing money?"      (.cta-title — was Playfair, now sans)
   - "Don't Leave Your Money on the Table" (.proof-headline — was Playfair, now sans) */
.proof-headline,
.cta-title {
  font-family: inherit !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}

/* ============================================================
 *  LANDING — Fireflies-style polish (sections, rhythm, depth)
 * ============================================================ */

/* Hero: dramatic top gradient backdrop + bigger spacing */
.landing-hero {
  position: relative;
  padding-top: 80px !important;
  padding-bottom: 100px !important;
}
.landing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(124, 58, 237, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 80% 30%, rgba(219, 39, 119, 0.10) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.landing-hero > * { position: relative; z-index: 1; }

/* Larger landing-section padding for breathing room */
.landing-section,
section.landing-features,
section.landing-how,
section.landing-cta,
section.landing-pricing,
section.landing-proof,
section.landing-testimonials {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

/* Section-level background variation — soft gradient bands */
section.landing-features {
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(124, 58, 237, 0.06) 0%, transparent 60%),
    transparent;
  position: relative;
}
section.landing-how {
  background:
    linear-gradient(180deg, transparent 0%, rgba(124, 58, 237, 0.04) 50%, transparent 100%);
  position: relative;
}
section.landing-pricing {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(124, 58, 237, 0.06) 0%, transparent 70%);
  position: relative;
}
section.landing-testimonials {
  background:
    linear-gradient(180deg, transparent 0%, rgba(219, 39, 119, 0.03) 100%);
  position: relative;
}

/* Big section titles — bolder hierarchy */
.landing-section-title,
.section-heading,
.proof-headline {
  font-size: clamp(32px, 5vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -1.2px !important;
}

/* Pill labels above section headlines */
.section-pill,
.landing-section-pill,
.landing-features-badge,
.landing-how-badge,
.landing-pricing-badge,
.landing-proof-badge {
  display: inline-block;
  padding: 6px 14px !important;
  background: rgba(124, 58, 237, 0.14) !important;
  border: 1px solid rgba(168, 85, 247, 0.40) !important;
  color: #C4B5FD !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* Brighten step card titles + body — they read too dim */
.step-card .step-title,
.step-card h3 {
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-top: 14px !important;
}
.step-card .step-desc,
.step-card p {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 15px !important;
  line-height: 1.6;
}

/* Brighten feature card titles + body */
.feature-card .feature-title,
.feature-title {
  color: #fff !important;
  font-weight: 700 !important;
}
.feature-desc {
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.6 !important;
}

/* Testimonials cards */
.testimonial-card,
.testimonials-grid > * {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.06) 0%, rgba(219, 39, 119, 0.03) 100%),
    rgba(26, 29, 58, 0.5) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 18px !important;
}
.testimonial-card .stars,
.testimonial-stars { color: #FBBF24 !important; }
.testimonial-quote,
.testimonial-card p {
  color: rgba(255, 255, 255, 0.85) !important;
  font-style: italic;
}

/* Proof stats (1 tap / 30 sec / 100%) */
.proof-stats .proof-stat-num,
.proof-stat .proof-num,
.proof-number {
  background: linear-gradient(135deg, #7C3AED 0%, #A855F7 50%, #DB2777 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: clamp(40px, 5.5vw, 64px) !important;
  font-weight: 800 !important;
  letter-spacing: -1.5px !important;
  line-height: 1 !important;
}

/* Footer polish */
.landing-footer {
  background:
    linear-gradient(180deg, transparent 0%, rgba(124, 58, 237, 0.04) 100%),
    rgba(15, 16, 36, 0.6) !important;
  border-top: 1px solid rgba(124, 58, 237, 0.15);
}
.footer-col h4 {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: #A78BFA !important;
}
.footer-col a {
  color: rgba(255, 255, 255, 0.55) !important;
  transition: color 0.15s;
}
.footer-col a:hover { color: #fff !important; }

/* ============================================================
 *  POST-SIGNUP ONBOARDING — Business setup (Account → Business → Ready)
 * ============================================================ */

#onboarding-screen {
  background:
    radial-gradient(ellipse 70% 60% at 50% 10%, rgba(124, 58, 237, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(219, 39, 119, 0.08) 0%, transparent 65%),
    #0F1024 !important;
  min-height: 100vh;
}
.onboarding-wrapper {
  max-width: 520px !important;
  margin: 0 auto !important;
  padding: 40px 20px 80px !important;
}

/* Stepper at top */
.onboarding-progress {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0 !important;
  margin-bottom: 40px !important;
}
.onboarding-progress-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  gap: 8px;
}
.onboarding-progress-step span {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.45) !important;
}
.onboarding-progress-step.completed span { color: #34D399 !important; }
.onboarding-progress-step.active span {
  background: linear-gradient(135deg, #7C3AED, #A855F7, #DB2777);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.progress-circle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  font-weight: 700 !important;
  background: rgba(124, 58, 237, 0.08) !important;
  border: 1.5px solid rgba(124, 58, 237, 0.25) !important;
  color: rgba(255, 255, 255, 0.45) !important;
  transition: all 0.2s;
}
.onboarding-progress-step.completed .progress-circle {
  background: linear-gradient(135deg, #10B981, #34D399) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.25);
}
.onboarding-progress-step.active .progress-circle {
  background: linear-gradient(135deg, #6D28D9, #7C3AED, #A855F7, #DB2777) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.18), 0 8px 24px rgba(124, 58, 237, 0.40);
}
.progress-line {
  flex: 1;
  height: 2px;
  background: rgba(124, 58, 237, 0.18) !important;
  margin: 0 12px;
  align-self: flex-start;
  margin-top: 17px !important;
  border-radius: 2px;
}
.progress-line.completed {
  background: linear-gradient(90deg, #10B981 0%, #34D399 60%, #7C3AED 100%) !important;
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.30);
}

/* Main card */
.onboarding-container {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.06) 0%, rgba(219, 39, 119, 0.03) 100%),
    rgba(26, 29, 58, 0.65) !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
  border-radius: 24px !important;
  padding: 36px 28px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.30);
}
.onboarding-header { text-align: center; margin-bottom: 28px; }
.onboarding-header h2 {
  font-family: inherit !important;
  font-size: clamp(22px, 5.5vw, 28px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.4px !important;
  color: #fff !important;
  margin: 0 0 8px !important;
}
.onboarding-header p {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1.55;
  margin: 0;
  max-width: 360px;
  margin: 0 auto !important;
}

/* Form */
.onboarding-form .input-group {
  margin-bottom: 20px !important;
}
.onboarding-form label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #A78BFA !important;
  margin-bottom: 8px !important;
}
.onboarding-form input[type="text"],
.onboarding-form select {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
  border-radius: 12px !important;
  padding: 13px 14px !important;
  color: #fff !important;
  font-size: 15px !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.onboarding-form input[type="text"]:focus,
.onboarding-form select:focus {
  outline: none !important;
  border-color: rgba(168, 85, 247, 0.60) !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15) !important;
}
.onboarding-form input::placeholder { color: rgba(255, 255, 255, 0.30) !important; }

/* Track toggle group */
.track-toggle-group {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 14px;
  padding: 4px;
}
.track-toggle-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px !important;
  border-radius: 10px !important;
  transition: background 0.15s;
}
.track-toggle-row:hover { background: rgba(124, 58, 237, 0.06); }
.track-toggle-row + .track-toggle-row { border-top: 1px solid rgba(124, 58, 237, 0.10); }
.track-toggle-label {
  display: block;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #fff !important;
}
.track-toggle-desc {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.50) !important;
  margin-top: 2px;
  display: block;
}

/* Continue button */
.onboarding-continue-btn {
  width: 100% !important;
  margin-top: 12px !important;
  padding: 15px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 40%, #A855F7 75%, #DB2777 100%) !important;
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.35) !important;
  letter-spacing: 0.2px;
  border: none !important;
  transition: transform 0.15s, box-shadow 0.2s;
}
.onboarding-continue-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(192, 38, 211, 0.42) !important;
}
.onboarding-skip-text {
  text-align: center;
  margin-top: 14px !important;
}
.onboarding-skip-text a {
  color: rgba(255, 255, 255, 0.50) !important;
  text-decoration: none;
  font-size: 13px !important;
  font-weight: 500;
  transition: color 0.15s;
}
.onboarding-skip-text a:hover { color: #C4B5FD !important; }

/* "What best describes you?" — user-type onboarding screen.
 * Do NOT use display:flex !important here — JS toggles display:none/'' to
 * show/hide the overlay, and an !important display rule blocks the hide.
 * Instead apply layout via a child wrapper rule below. */
#user-type-onboarding {
  background:
    radial-gradient(ellipse 70% 60% at 50% 10%, rgba(124, 58, 237, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(219, 39, 119, 0.08) 0%, transparent 65%),
    #0F1024 !important;
  min-height: 100vh;
  padding: 40px 20px 80px;
  position: fixed;
  inset: 0;
  z-index: 99998;
  overflow-y: auto;
}
#user-type-onboarding[style*="display: none"],
#user-type-onboarding[style*="display:none"] { display: none !important; }
#user-type-onboarding .ut-step {
  margin: 0 auto;
}
.ut-step { max-width: 520px; width: 100%; text-align: center; }
.ut-logo-area { margin-bottom: 18px; display: flex; justify-content: center; }
.ut-title {
  font-family: inherit !important;
  font-size: clamp(26px, 6.5vw, 36px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.5px !important;
  color: #fff !important;
  margin: 0 0 8px !important;
  line-height: 1.15 !important;
}
.ut-subtitle {
  font-size: 15px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin: 0 0 28px !important;
}
.ut-cards-list {
  display: grid;
  gap: 12px;
  width: 100%;
}
/* The Continue button lives inside .ut-footer (a position:fixed bottom
 * CTA bar by default). On desktop that footer spans the viewport while
 * the cards span .ut-step (520px centered in the scroll container,
 * which excludes the scrollbar). The result: cards and button end up
 * misaligned by ~7.5px because they use different centering origins.
 *
 * Fix: un-fix the footer. Let the button flow inside .ut-step so it
 * shares the cards' centering. We re-pin it to the bottom on small
 * phones where a sticky CTA is real UX value. */
#user-type-onboarding .ut-footer {
  position: static !important;
  background: none !important;
  padding: 24px 0 0 !important;
  width: 100%;
}
@media (max-width: 540px) {
  #user-type-onboarding .ut-footer {
    position: sticky !important;
    bottom: 0;
    background: linear-gradient(to top, #0F1024 60%, transparent) !important;
    padding: 16px 0 calc(16px + env(safe-area-inset-bottom)) !important;
    margin-top: 16px;
  }
}
#user-type-onboarding .ut-continue-btn,
.ut-continue-btn {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.ut-card {
  display: flex !important;
  align-items: center;
  gap: 14px;
  text-align: left;
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.06) 0%, rgba(219, 39, 119, 0.03) 100%),
    rgba(26, 29, 58, 0.55) !important;
  border: 1px solid rgba(124, 58, 237, 0.20) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}
.ut-card:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.14) 0%, rgba(219, 39, 119, 0.08) 100%),
    rgba(26, 29, 58, 0.7) !important;
  border-color: rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.20);
}
.ut-card.selected {
  border-color: rgba(168, 85, 247, 0.70) !important;
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.50), 0 12px 32px rgba(124, 58, 237, 0.30);
}
.ut-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.18) !important;
  border: 1px solid rgba(168, 85, 247, 0.40);
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ut-card-icon svg { stroke: #C4B5FD !important; }
.ut-card-text { flex: 1; }
.ut-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 2px;
}
.ut-card-desc {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1.45;
}
.ut-card-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.ut-card-check svg { stroke: #fff !important; }
.ut-card.selected .ut-card-check {
  opacity: 1;
  background: linear-gradient(135deg, #7C3AED, #DB2777);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}

/* Mobile responsive for onboarding flows */
@media (max-width: 540px) {
  .onboarding-wrapper,
  #user-type-onboarding { padding: 24px 16px 60px !important; }
  .onboarding-container { padding: 24px 20px !important; }
  .progress-circle { width: 30px !important; height: 30px !important; font-size: 12px !important; }
  .onboarding-progress-step span { font-size: 11px !important; }
  .progress-line { margin-top: 14px !important; margin-left: 6px; margin-right: 6px; }
  .ut-card { padding: 13px 14px !important; gap: 12px; }
  .ut-card-icon { width: 38px; height: 38px; }
  .ut-card-title { font-size: 14px !important; }
  .ut-card-desc { font-size: 11.5px !important; }
}

/* ============================================================
 *  LANDING — MOBILE-FIRST RESPONSIVE TIGHTENING
 * ============================================================ */

@media (max-width: 768px) {
  .landing-hero {
    padding-top: 56px !important;
    padding-bottom: 64px !important;
  }
  .landing-section,
  section.landing-features,
  section.landing-how,
  section.landing-cta,
  section.landing-pricing,
  section.landing-proof,
  section.landing-testimonials {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .landing-section-title,
  .section-heading,
  .proof-headline {
    font-size: clamp(28px, 8vw, 40px) !important;
    letter-spacing: -0.8px !important;
  }
  /* Hero phone mockup: keep below the text on phones, smaller */
  .landing-hero-mockup img,
  .landing-hero-mockup {
    max-width: 280px !important;
    margin: 32px auto 0 !important;
  }
  /* Feature/step/pricing cards: stack and full-width */
  .features-grid,
  .steps-grid,
  .pricing-cards,
  .testimonials-grid {
    grid-template-columns: 1fr !important;
    display: grid !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 20px !important;
  }
  .step-card,
  .feature-card,
  .pricing-card,
  .testimonial-card {
    max-width: 100% !important;
    margin: 0 !important;
  }
  /* Pricing popular card no longer needs to scale up at mobile */
  .pricing-card.popular { transform: none !important; }
  /* Step connector arrows hide on mobile (vertical stack) */
  .step-connector,
  .steps-grid .step-arrow,
  .steps-grid svg[class*="arrow"] { display: none !important; }
  /* Proof stats stack vertically with more spacing */
  .proof-stats {
    flex-direction: column !important;
    gap: 36px !important;
  }
}

@media (max-width: 480px) {
  .landing-hero { padding-top: 40px !important; padding-bottom: 48px !important; }
  .landing-section,
  section.landing-features,
  section.landing-how,
  section.landing-cta,
  section.landing-pricing,
  section.landing-proof,
  section.landing-testimonials {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .landing-hero-mockup img,
  .landing-hero-mockup { max-width: 240px !important; }
}

/* ============================================================
 *  Onboarding modernization (PRD §5.1: founder-led, brand-forward).
 * - Replace flat purple-D square with sound-wave glyph + soft violet halo
 * - Swap onb-cta-btn for the brand violet→magenta-pink gradient
 * - Richer ambient backdrop on each slide
 */
.onb-screen::before {
  background:
    radial-gradient(ellipse 80% 60% at 50% 18%, rgba(124, 58, 237, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 88% 92%, rgba(219, 39, 119, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 8% 88%, rgba(79, 70, 229, 0.10) 0%, transparent 65%) !important;
}
.onb-screen {
  background: #0F1024 !important;
}

/* Slide 1 logo — replace the purple square with the brand glyph */
.onb-s1-logo {
  position: relative;
  width: 120px !important;
  height: 120px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 36px !important;
}
.onb-logo-halo {
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.45) 0%, rgba(219, 39, 119, 0.18) 45%, transparent 70%);
  filter: blur(8px);
  z-index: 0;
  animation: onbHaloPulse 4s ease-in-out infinite;
}
.onb-logo-mark {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  max-width: 120px;
  max-height: 120px;
  object-fit: contain;
  z-index: 1;
  filter: drop-shadow(0 6px 20px rgba(124, 58, 237, 0.45));
}
@keyframes onbHaloPulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

/* All onboarding CTAs get the brand gradient */
.onb-cta-btn {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 40%, #A855F7 75%, #DB2777 100%) !important;
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
  letter-spacing: 0.2px;
}
.onb-cta-btn:hover {
  box-shadow: 0 12px 40px rgba(192, 38, 211, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
}

/* Tighten the welcome-screen typography for a more premium feel */
.onb-s1-headline {
  font-size: clamp(24px, 6.5vw, 34px) !important;
  max-width: min(360px, calc(100vw - 48px)) !important;
  letter-spacing: -0.5px;
  line-height: 1.18 !important;
}
.onb-s1-sub {
  font-size: 15px !important;
  max-width: min(320px, calc(100vw - 48px)) !important;
}

/* ----- SLIDE 2: voice-tracking demo ----- */
.onb-s2-headline {
  font-family: inherit !important;
  font-size: clamp(22px, 6vw, 28px) !important;
  letter-spacing: -0.4px;
}
.onb-phone-frame {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.10) 0%, rgba(219, 39, 119, 0.06) 100%),
    rgba(26, 29, 58, 0.7) !important;
  border: 1px solid rgba(124, 58, 237, 0.25) !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 40px rgba(124, 58, 237, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  padding: 28px 22px !important;
  max-width: min(360px, calc(100vw - 32px)) !important;
}
.onb-wave-bar {
  background: linear-gradient(180deg, #A855F7 0%, #7C3AED 50%, #DB2777 100%) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.45);
}
.onb-transcript {
  font-family: inherit !important;
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
.onb-auto-tags .onb-tag {
  background: rgba(124, 58, 237, 0.15) !important;
  border: 1px solid rgba(168, 85, 247, 0.40) !important;
  color: #C4B5FD !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
}

/* ----- SLIDE 3: dashboard preview ----- */
.onb-badge {
  background: rgba(124, 58, 237, 0.15) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  color: #C4B5FD !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
}
.onb-title {
  font-family: inherit !important;
  font-size: clamp(22px, 6vw, 28px) !important;
  letter-spacing: -0.4px;
  margin-top: 14px !important;
}
.onb-preview-card {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.10) 0%, rgba(219, 39, 119, 0.05) 100%),
    rgba(26, 29, 58, 0.7) !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.12) !important;
}
.onb-summary-item {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(124, 58, 237, 0.14) !important;
  border-radius: 14px !important;
}
.onb-cat-bar { background: rgba(255, 255, 255, 0.05) !important; height: 6px !important; }

/* ----- SLIDE 4: reports preview — unify icon tints ----- */
.onb-report-card {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(219, 39, 119, 0.04) 100%),
    rgba(26, 29, 58, 0.65) !important;
  border: 1px solid rgba(124, 58, 237, 0.20) !important;
  border-radius: 18px !important;
}
/* Override the inline rainbow backgrounds — single brand-violet tint */
.onb-screen .onb-report-icon {
  background: rgba(124, 58, 237, 0.14) !important;
  border: 1px solid rgba(168, 85, 247, 0.32) !important;
  border-radius: 12px !important;
}
.onb-screen .onb-report-icon svg { stroke: #C4B5FD !important; }
.onb-feature-pill {
  background: rgba(124, 58, 237, 0.08) !important;
  border: 1px solid rgba(168, 85, 247, 0.30) !important;
  color: #C4B5FD !important;
}

/* ----- SLIDE 5: PDF preview ----- */
.onb-pdf-window {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(219, 39, 119, 0.04) 100%),
    rgba(26, 29, 58, 0.7) !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important;
  overflow: hidden;
}
.onb-pdf-topbar {
  background: rgba(15, 16, 36, 0.85) !important;
  border-bottom: 1px solid rgba(124, 58, 237, 0.18) !important;
  padding: 8px 10px !important;
}

/* ----- SLIDE 6: business setup form ----- */
.onb-setup-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.22), rgba(219, 39, 119, 0.15)) !important;
  border: 1px solid rgba(168, 85, 247, 0.45);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.25);
}
.onb-setup-title {
  font-family: inherit !important;
  font-size: clamp(22px, 6vw, 28px) !important;
  letter-spacing: -0.4px;
}

/* Skip + close buttons — softer presence */
.onb-skip-btn {
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  letter-spacing: 0.4px;
}
.onb-close-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.onb-close-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}
.onb-close-btn svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex-shrink: 0 !important;
  stroke: rgba(255, 255, 255, 0.95) !important;
  stroke-width: 2.5 !important;
}

/* ============================================================
 *  WATCH DEMO OVERLAY (#demo-overlay) — mirrors the onboarding-tour
 *  polish on the .demo-* classes. Same visual treatment as .onb-*
 *  but kept on separate selectors because the demo flow has its own
 *  Skip behavior (jumps to slide 4 sample-report instead of closing).
 * ============================================================ */

.demo-screen {
  background: #0F1024 !important;
  position: relative;
}
.demo-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 18%, rgba(124, 58, 237, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 88% 92%, rgba(219, 39, 119, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 8% 88%, rgba(79, 70, 229, 0.10) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.demo-screen > * { position: relative; z-index: 1; }

/* Slide 1 logo — sound-wave glyph + animated halo (matches onb-screen-1) */
.demo-s1-logo {
  position: relative;
  width: 120px !important;
  height: 120px !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 36px !important;
}
.demo-logo-halo {
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.45) 0%, rgba(219, 39, 119, 0.18) 45%, transparent 70%);
  filter: blur(8px);
  z-index: 0;
  animation: onbHaloPulse 4s ease-in-out infinite;
}
.demo-logo-mark {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  max-width: 120px;
  max-height: 120px;
  object-fit: contain;
  z-index: 1;
  filter: drop-shadow(0 6px 20px rgba(124, 58, 237, 0.45));
}

.demo-s1-headline {
  font-family: inherit !important;
  font-size: clamp(24px, 6.5vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.5px !important;
  max-width: min(360px, calc(100vw - 48px)) !important;
  margin: 0 auto 18px !important;
  color: #fff !important;
  text-align: center;
}
.demo-s1-headline em { font-style: italic; color: #c4b5fd; }
.demo-s1-sub {
  font-size: 15px !important;
  max-width: min(320px, calc(100vw - 48px)) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  text-align: center;
  line-height: 1.6;
  margin: 0 auto !important;
}

/* All demo CTAs get the brand gradient */
.demo-cta-btn {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 40%, #A855F7 75%, #DB2777 100%) !important;
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
  letter-spacing: 0.2px;
  border: none !important;
}
.demo-cta-btn:hover {
  box-shadow: 0 12px 40px rgba(192, 38, 211, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
}

/* SLIDE 2: voice demo */
.demo-s2-headline {
  font-family: inherit !important;
  font-size: clamp(22px, 6vw, 28px) !important;
  letter-spacing: -0.4px;
  color: #fff;
}
.demo-phone-frame {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.10) 0%, rgba(219, 39, 119, 0.06) 100%),
    rgba(26, 29, 58, 0.7) !important;
  border: 1px solid rgba(124, 58, 237, 0.25) !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 40px rgba(124, 58, 237, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  padding: 28px 22px !important;
  max-width: min(360px, calc(100vw - 32px)) !important;
}
.demo-wave-bar {
  background: linear-gradient(180deg, #A855F7 0%, #7C3AED 50%, #DB2777 100%) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.45);
}
.demo-transcript {
  font-family: inherit !important;
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
.demo-auto-tags .demo-tag {
  background: rgba(124, 58, 237, 0.15) !important;
  border: 1px solid rgba(168, 85, 247, 0.40) !important;
  color: #C4B5FD !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
}

/* SLIDE 3-5: badges + titles */
.demo-badge {
  background: rgba(124, 58, 237, 0.15) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  color: #C4B5FD !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  display: inline-block;
}
.demo-title {
  font-family: inherit !important;
  font-size: clamp(22px, 6vw, 28px) !important;
  letter-spacing: -0.4px;
  margin-top: 14px !important;
  color: #fff;
}
.demo-sub {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* SLIDE 3: dashboard preview */
.demo-preview-card {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.10) 0%, rgba(219, 39, 119, 0.05) 100%),
    rgba(26, 29, 58, 0.7) !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.12) !important;
}
.demo-summary-item {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(124, 58, 237, 0.14) !important;
  border-radius: 14px !important;
}
.demo-cat-bar { background: rgba(255, 255, 255, 0.05) !important; height: 6px !important; }

/* SLIDE 4: reports preview — unify rainbow icons to brand violet */
.demo-report-card {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(219, 39, 119, 0.04) 100%),
    rgba(26, 29, 58, 0.65) !important;
  border: 1px solid rgba(124, 58, 237, 0.20) !important;
  border-radius: 18px !important;
}
.demo-screen .demo-report-icon {
  background: rgba(124, 58, 237, 0.14) !important;
  border: 1px solid rgba(168, 85, 247, 0.32) !important;
  border-radius: 12px !important;
}
.demo-screen .demo-report-icon svg { stroke: #C4B5FD !important; }
.demo-feature-pill {
  background: rgba(124, 58, 237, 0.08) !important;
  border: 1px solid rgba(168, 85, 247, 0.30) !important;
  color: #C4B5FD !important;
}

/* SLIDE 5: PDF preview */
.demo-pdf-window {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(219, 39, 119, 0.04) 100%),
    rgba(26, 29, 58, 0.7) !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important;
  overflow: hidden;
}
.demo-pdf-topbar {
  background: rgba(15, 16, 36, 0.85) !important;
  border-bottom: 1px solid rgba(124, 58, 237, 0.18) !important;
  padding: 8px 10px !important;
}

/* Skip + close buttons */
.demo-skip-btn {
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  letter-spacing: 0.4px;
}
.demo-close-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.demo-close-btn:hover { background: rgba(255, 255, 255, 0.18) !important; }
.demo-close-btn svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex-shrink: 0 !important;
  stroke: rgba(255, 255, 255, 0.95) !important;
  stroke-width: 2.5 !important;
}

/* Hide app-shell chrome while demo overlay is open (matches onb-tour-open) */
body.demo-open .profile-avatar,
body.demo-open .reminders-bell-btn,
body.demo-open .dash-header-right,
body.demo-open .dash-header,
body.demo-open .landing-nav,
body.demo-open .prelogin-nav {
  display: none !important;
}

/* ============================================================
 *  UNIVERSAL X CLOSE BUTTONS — never let the icon collapse to 0.
 *  Bug pattern: button is display:flex; child SVG with explicit
 *  width/height gets squished to width:0 by flex shrinkage. Same
 *  trick used for .onb-close-btn — apply globally.
 * ============================================================ */
button.modal-close,
button.expense-modal-close,
button.demo-close-btn,
button.onb-close-btn,
button.back-btn,
button.expense-back-btn,
button[aria-label*="close" i],
button[aria-label*="dismiss" i],
/* Reminders panel X — onclick starts with document.getElementById and
 * is the ONLY thing that runs (close-only). Tighter than [onclick*="remove"]
 * which accidentally matched the New Voice Note CTA whose onclick ALSO
 * contains .remove() (to close the panel after opening the voice flow). */
#reminders-panel-overlay button[onclick^="document.getElementById('reminders-panel-overlay').remove()"] {
  flex-shrink: 0 !important;
}
button.modal-close > svg,
button.expense-modal-close > svg,
button.demo-close-btn > svg,
button.onb-close-btn > svg,
button.back-btn > svg,
button.expense-back-btn > svg,
button[aria-label*="close" i] > svg,
button[aria-label*="dismiss" i] > svg,
#reminders-panel-overlay button[onclick^="document.getElementById('reminders-panel-overlay').remove()"] > svg {
  flex-shrink: 0 !important;
  min-width: 14px !important;
  min-height: 14px !important;
  width: 16px !important;
  height: 16px !important;
  stroke: rgba(255, 255, 255, 0.95) !important;
  stroke-width: 2.4 !important;
}

/* The &times; entity close button (used in static modals) — make the
 * × glyph crisp at the right size. The class .modal-close uses font:
 * 24px/1 and the entity renders as a text char. */
button.modal-close,
button.expense-modal-close {
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.80) !important;
}

/* ============================================================
 *  NOTES & REMINDERS PANEL (#reminders-panel-overlay)
 *  Built via JS innerHTML with inline styles. Overrides need
 *  !important to win against those inline styles.
 * ============================================================ */

#reminders-panel-overlay {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(124, 58, 237, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(219, 39, 119, 0.10) 0%, transparent 65%),
    linear-gradient(160deg, #0D0D1A, #0A0A14) !important;
}

/* Header */
#reminders-panel-overlay > div:first-child {
  padding: 24px 20px 4px !important;
}
#reminders-panel-overlay h2 {
  font-family: inherit !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.4px !important;
  margin: 0 0 4px !important;
}
#reminders-panel-overlay h2::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  vertical-align: -3px;
  background-image: url("/public/deduxe-icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#reminders-panel-overlay #reminders-count-label {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* X close button — branded, larger hit area, visible X.
 * Targets the panel's specific close handler (NOT the New Voice Note CTA,
 * which also has .remove() in its onclick). */
#reminders-panel-overlay button[onclick^="document.getElementById('reminders-panel-overlay').remove()"] {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0 !important;
  padding: 0 !important;
  transition: background 0.15s;
}
#reminders-panel-overlay button[onclick^="document.getElementById('reminders-panel-overlay').remove()"]:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}
#reminders-panel-overlay button[onclick^="document.getElementById('reminders-panel-overlay').remove()"] > svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  stroke-width: 2.5 !important;
  stroke: rgba(255, 255, 255, 0.95) !important;
}

/* Search input — refined card */
#reminders-search {
  font-size: 15px !important;
}
/* Wrap search row container */
#reminders-panel-overlay div[style*="background:rgba(255,255,255,0.05)"][style*="border-radius:12px"][style*="padding:10px"] {
  background: rgba(124, 58, 237, 0.06) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#reminders-panel-overlay div[style*="background:rgba(255,255,255,0.05)"][style*="border-radius:12px"][style*="padding:10px"]:focus-within {
  border-color: rgba(168, 85, 247, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12) !important;
}
#reminders-panel-overlay div[style*="background:rgba(255,255,255,0.05)"] svg {
  stroke: #A78BFA !important;
}

/* Filter pills (All / Reminders / Notes / Done) — branded.
 * EXPLICIT display + width — without these, the buttons inherit block-
 * level full-parent-width (~680px each) and stack vertically. */
#vn-pill-all,
#vn-pill-reminders,
#vn-pill-notes,
#vn-pill-done {
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  font-family: inherit !important;
  letter-spacing: 0.15px;
  transition: all 0.15s;
  white-space: nowrap;
}
/* Active pill — brand gradient */
#reminders-panel-overlay button[id^="vn-pill-"][style*="background:linear-gradient(135deg,#7C3AED,#9333EA)"] {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 40%, #A855F7 75%, #DB2777 100%) !important;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.30) !important;
  border: none !important;
  color: #fff !important;
}
/* Inactive pills — softer violet tint */
#reminders-panel-overlay button[id^="vn-pill-"][style*="background:rgba(255,255,255,0.05)"] {
  background: rgba(124, 58, 237, 0.06) !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
  color: rgba(255, 255, 255, 0.70) !important;
}
#reminders-panel-overlay button[id^="vn-pill-"]:hover {
  filter: brightness(1.08);
}

/* Pills row — horizontal scroll on small screens, scrollbar hidden */
#reminders-panel-overlay div[style*="overflow-x:auto"] {
  padding-bottom: 4px !important;
  margin: 0 -4px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}
#reminders-panel-overlay div[style*="overflow-x:auto"]::-webkit-scrollbar { display: none; }

/* Loading + empty state */
#reminders-panel-body > div[style*="padding:40px 0"] {
  text-align: center;
  padding: 60px 24px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin: 12px 16px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse 60% 70% at 50% 30%, rgba(124, 58, 237, 0.10) 0%, transparent 75%),
    rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(124, 58, 237, 0.22);
}

/* New Voice Note CTA — brand gradient */
#reminders-panel-overlay button[onclick*="openVoiceNoteFlow"] {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 40%, #A855F7 75%, #DB2777 100%) !important;
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.40) !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
  transition: transform 0.15s, box-shadow 0.2s;
}
#reminders-panel-overlay button[onclick*="openVoiceNoteFlow"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(192, 38, 211, 0.45) !important;
}

/* Bottom CTA container — match panel gradient backdrop */
#reminders-panel-overlay > div:last-child {
  background: linear-gradient(0deg, #0A0A14 70%, rgba(10, 10, 20, 0)) !important;
  padding: 20px 20px 32px !important;
}

/* Note/reminder list items */
#reminders-panel-body .vn-row,
#reminders-panel-body > div:not([style*="padding:40px 0"]):not([style*="padding:20px 0"]) > div {
  /* Branded list-item styling could go here once we see the rendered HTML */
}

/* Responsive: tighten on phones, generous on desktop */
@media (max-width: 540px) {
  #reminders-panel-overlay > div:first-child {
    padding: 18px 16px 0 !important;
  }
  #reminders-panel-overlay h2 {
    font-size: 22px !important;
  }
  #reminders-panel-overlay h2::before {
    width: 18px;
    height: 18px;
    margin-right: 8px;
  }
  #reminders-panel-body {
    padding: 12px 16px 100px !important;
  }
  #reminders-panel-overlay > div:last-child {
    padding: 14px 16px 28px !important;
  }
  #reminders-panel-overlay button[id^="vn-pill-"] {
    font-size: 12px !important;
    padding: 7px 13px !important;
  }
}
@media (min-width: 768px) {
  /* On wider screens, constrain SCROLL content to a comfortable column,
   * but leave the fixed/absolute footer alone — its left:0/right:0
   * positioning conflicts with auto margins and shrinks it. */
  #reminders-panel-overlay > div:first-child,
  #reminders-panel-overlay > div:nth-child(2),
  #reminders-panel-body {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
  }
  /* Footer CTA — wrap its inner button instead of constraining the
   * absolutely-positioned container itself. */
  #reminders-panel-overlay > div:last-child > button {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
  }
}

[data-theme="light"] {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F7F8FC;
  --bg-card: #FFFFFF;
  --bg-elevated: #F1F2FA;
  --border-color: #E5E7EB;
  --border-light: #EEF0FA;

  --nav-bg: #FFFFFF;
  --nav-border: #E5E7EB;

  --input-bg: #FFFFFF;
  --input-border: #E5E7EB;

  --accent-purple: #7C3AED;
  --accent-purple-hover: #6D28D9;
  --accent-purple-light: #A78BFA;
  --accent-purple-bg: rgba(124, 58, 237, 0.08);
  --purple-bg: rgba(124, 58, 237, 0.08);
  --purple-500: #7C3AED;
  --purple-400: #A78BFA;
  --purple-600: #6D28D9;

  --bg-tertiary: #F7F8FC;
  --surface: #FFFFFF;
  --hover-bg: rgba(124, 58, 237, 0.06);
}


/* ============================================================
 *  PHASE D — Overnight polish (modals, panels, empty states, mobile)
 *
 *  Targets every surface not covered in Phase A/B/C: manual entry modal,
 *  edit entry/entity modals, recurring expense, add-entity, PDF picker,
 *  receipt report filter, voice-notes panel, admin panel, demo overlay,
 *  property setup, plus a deep mobile responsive pass.
 * ============================================================ */

/* ---- Generic .modal class (manual, add-entity, edit, recurring, pdf, rr) ---- */
.modal .modal-content {
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.05) 0%, rgba(15, 16, 36, 0) 38%),
    #0F1024 !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
  border-top: 1px solid rgba(124, 58, 237, 0.32) !important;
  border-radius: 24px 24px 0 0 !important;
  box-shadow: 0 -16px 56px rgba(0, 0, 0, 0.55) !important;
  max-height: 92vh;
}

.modal .modal-header {
  padding: 22px 22px 14px !important;
  border-bottom: 1px solid rgba(124, 58, 237, 0.12) !important;
}
.modal .modal-header h3 {
  font-family: inherit !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.4px !important;
  color: #fff;
}
.modal .modal-close {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 18px !important;
  transition: all 0.16s ease;
}
.modal .modal-close:hover {
  background: rgba(124, 58, 237, 0.18) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
  color: #fff !important;
}

.modal .modal-body {
  padding: 18px 22px !important;
}
.modal .modal-footer {
  padding: 14px 22px 22px !important;
  border-top: 1px solid rgba(124, 58, 237, 0.12) !important;
  gap: 10px;
}

/* Form labels in modals — uppercase violet to match auth/voice patterns */
.modal .form-group label,
.modal .modal-body label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.10em !important;
  color: #A78BFA !important;
  margin-bottom: 8px !important;
  display: block;
}

/* Form inputs in modals — violet focus rings, no iOS auto-zoom (>= 16px) */
.modal .form-group input[type="text"],
.modal .form-group input[type="number"],
.modal .form-group input[type="date"],
.modal .form-group input[type="email"],
.modal .form-group input[type="tel"],
.modal .form-group select,
.modal .form-group textarea {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  color: #fff !important;
  font-size: 16px !important;
  font-family: inherit !important;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.modal .form-group input::placeholder,
.modal .form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}
.modal .form-group input:focus,
.modal .form-group select:focus,
.modal .form-group textarea:focus {
  outline: none !important;
  border-color: rgba(168, 85, 247, 0.60) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15) !important;
}

/* Track-toggle rows in add/edit entity modals */
.modal .track-toggle-row {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.06) 0%, rgba(219, 39, 119, 0.03) 100%),
    rgba(26, 29, 58, 0.5) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin-bottom: 10px;
}
.modal .track-toggle-label {
  color: #fff !important;
  font-weight: 600;
  font-size: 14px;
}
.modal .track-toggle-desc {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 12px;
}

/* Primary save buttons in modals — brand gradient */
.modal .modal-footer .btn-primary,
.modal-footer .btn-primary,
.modal .btn-primary {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 40%, #A855F7 75%, #DB2777 100%) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 13px 22px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35) !important;
  flex: 1;
}

/* Ghost & danger outline buttons — quieter, matched borders */
.modal .btn-ghost {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-radius: 14px !important;
  padding: 13px 22px !important;
  font-weight: 600 !important;
  transition: all 0.16s ease;
}
.modal .btn-ghost:hover {
  background: rgba(124, 58, 237, 0.12) !important;
  border-color: rgba(168, 85, 247, 0.30) !important;
  color: #fff !important;
}
.modal .btn-danger-outline {
  background: transparent !important;
  border: 1px solid rgba(239, 68, 68, 0.45) !important;
  color: #fca5a5 !important;
  border-radius: 14px !important;
  padding: 13px 18px !important;
  font-weight: 600 !important;
  transition: all 0.16s ease;
}
.modal .btn-danger-outline:hover {
  background: rgba(239, 68, 68, 0.10) !important;
  border-color: rgba(239, 68, 68, 0.70) !important;
  color: #fecaca !important;
}

/* "Attach Receipt Photo" inline button (in manual modal) */
.modal .btn-ghost.btn-sm {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 14px !important;
  font-size: 13px !important;
  flex: 0 0 auto;
}

/* ---- PDF Period picker (extra polish on the period chips) ---- */
.pdf-period-btn {
  background: rgba(124, 58, 237, 0.06) !important;
  border: 1px solid rgba(124, 58, 237, 0.20) !important;
  color: rgba(255, 255, 255, 0.80) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.16s ease;
}
.pdf-period-btn:hover {
  background: rgba(124, 58, 237, 0.16) !important;
  border-color: rgba(168, 85, 247, 0.45) !important;
  color: #fff !important;
}
.pdf-period-btn.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.32), rgba(219, 39, 119, 0.20)) !important;
  border-color: rgba(168, 85, 247, 0.70) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25);
}
.pdf-confirm-summary {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(219, 39, 119, 0.06)) !important,
    rgba(26, 29, 58, 0.5) !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  text-align: center;
}
.pdf-confirm-entity {
  font-family: inherit !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 0 4px;
}
.pdf-confirm-period {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin: 0;
}

/* Report language picker */
.report-lang-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em !important;
  color: #A78BFA !important;
  display: block;
  margin-top: 16px;
  margin-bottom: 8px;
}
.report-lang-options {
  display: flex;
  gap: 8px;
}
.report-lang-btn {
  flex: 1;
  background: rgba(124, 58, 237, 0.06) !important;
  border: 1px solid rgba(124, 58, 237, 0.20) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.16s ease;
}
.report-lang-active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.30), rgba(219, 39, 119, 0.20)) !important;
  border-color: rgba(168, 85, 247, 0.65) !important;
  color: #fff !important;
}

/* ---- Receipt report filter modal (RR) ---- */
.rr-pill {
  background: rgba(124, 58, 237, 0.06) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: all 0.15s;
}
.rr-pill:hover {
  background: rgba(124, 58, 237, 0.14) !important;
  border-color: rgba(168, 85, 247, 0.40) !important;
}
.rr-pill-active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.30), rgba(219, 39, 119, 0.22)) !important;
  border-color: rgba(168, 85, 247, 0.65) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.22);
}
.rr-chip {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(124, 58, 237, 0.14) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  transition: all 0.15s;
}
.rr-chip:hover {
  background: rgba(124, 58, 237, 0.10) !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
}
.rr-chip-active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(219, 39, 119, 0.08)) !important;
  border-color: rgba(168, 85, 247, 0.55) !important;
  color: #fff !important;
}
.rr-section-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.10em !important;
  color: #A78BFA !important;
  margin-bottom: 10px !important;
  display: block;
}

/* ---- Voice notes / reminders panel ---- */
#reminders-panel-overlay {
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(124, 58, 237, 0.18) 0%, transparent 65%),
    linear-gradient(180deg, #0F1024 0%, #0A0A14 100%) !important;
}
#reminders-panel-overlay h2 {
  font-family: inherit !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px;
}
#reminders-panel-overlay input::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

/* ---- Notif prompt overlay ---- */
.notif-prompt-card {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(219, 39, 119, 0.04) 100%),
    #1A1D3A !important;
  border: 1px solid rgba(124, 58, 237, 0.25) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 56px rgba(124, 58, 237, 0.30), 0 0 0 1px rgba(168, 85, 247, 0.15) inset !important;
  padding: 28px 24px 22px !important;
}
.notif-prompt-icon {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.20), rgba(219, 39, 119, 0.12)) !important;
  border: 1px solid rgba(168, 85, 247, 0.40) !important;
  border-radius: 18px !important;
  width: 72px !important;
  height: 72px !important;
  margin: 0 auto 16px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.25);
}
.notif-prompt-title {
  font-family: inherit !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
}
.notif-prompt-desc {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 14px;
  line-height: 1.5;
}
.notif-prompt-btn {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 40%, #A855F7 75%, #DB2777 100%) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 13px 22px !important;
  font-weight: 600 !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35) !important;
  width: 100%;
}
.notif-prompt-skip {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 13px;
  margin-top: 8px;
}

/* ---- Demo overlay (watch demo) ---- */
.demo-overlay {
  background:
    radial-gradient(ellipse 60% 40% at 50% 8%, rgba(124, 58, 237, 0.22) 0%, transparent 65%),
    linear-gradient(180deg, #0F1024 0%, #0A0A14 100%) !important;
}
.demo-s1-headline,
.demo-s2-headline,
.demo-title {
  font-family: inherit !important;
  font-weight: 600 !important;
  letter-spacing: -0.4px !important;
}
.demo-cta-btn {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 40%, #A855F7 75%, #DB2777 100%) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 14px 28px !important;
  font-weight: 600 !important;
  color: #fff !important;
  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.35) !important;
  letter-spacing: 0.2px;
}
.demo-phone-frame,
.demo-preview-card,
.demo-report-card,
.demo-pdf-window {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(219, 39, 119, 0.04) 100%),
    rgba(26, 29, 58, 0.7) !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 40px rgba(124, 58, 237, 0.18) !important;
}
.demo-wave-bar {
  background: linear-gradient(180deg, #A855F7 0%, #7C3AED 50%, #DB2777 100%) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.40);
}
.demo-badge {
  background: rgba(124, 58, 237, 0.16) !important;
  border: 1px solid rgba(168, 85, 247, 0.40) !important;
  color: #C4B5FD !important;
  border-radius: 999px !important;
  padding: 5px 12px;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
}
/* Slide 4: unify rainbow demo-report-icons to violet (matches onboarding) */
.demo-overlay .demo-report-icon {
  background: rgba(124, 58, 237, 0.14) !important;
  border: 1px solid rgba(168, 85, 247, 0.32) !important;
  border-radius: 12px !important;
}
.demo-overlay .demo-report-icon svg { stroke: #C4B5FD !important; }
.demo-feature-pill {
  background: rgba(124, 58, 237, 0.08) !important;
  border: 1px solid rgba(168, 85, 247, 0.30) !important;
  color: #C4B5FD !important;
  border-radius: 999px !important;
}

/* ---- Cancel overlay ---- */
.cancel-overlay {
  background: linear-gradient(180deg, #0F1024 0%, #0A0A14 100%) !important;
}
.cancel-heading {
  font-family: inherit !important;
  font-weight: 600 !important;
  letter-spacing: -0.4px;
}
.cancel-reason-card {
  background: rgba(124, 58, 237, 0.04) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 8px;
  transition: all 0.15s ease;
}
.cancel-reason-card:hover {
  background: rgba(124, 58, 237, 0.10) !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
}
.cancel-reason-card.selected {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(219, 39, 119, 0.10)) !important;
  border-color: rgba(168, 85, 247, 0.55) !important;
}
.cancel-continue-btn {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 40%, #A855F7 75%, #DB2777 100%) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 14px 24px !important;
  font-weight: 600 !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35) !important;
}
.cancel-continue-btn:disabled {
  opacity: 0.4 !important;
  box-shadow: none !important;
  cursor: not-allowed;
}
.cancel-progress-box {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(219, 39, 119, 0.04)) !important,
    rgba(26, 29, 58, 0.5) !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
  border-radius: 16px !important;
  padding: 18px !important;
}
.cancel-progress-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em !important;
  color: #A78BFA !important;
}

/* ---- Property setup modal ---- */
#property-setup-modal .expense-modal-content {
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.07) 0%, rgba(15, 16, 36, 0) 38%),
    #0F1024 !important;
}
.property-popup-card {
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(124, 58, 237, 0.06) 100%),
    #1A1D3A !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 48px rgba(34, 197, 94, 0.18) !important;
}
.property-popup-title {
  font-family: inherit !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}
.property-popup-btn-primary {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 40%, #A855F7 75%, #DB2777 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 11px 18px !important;
  font-weight: 600;
  color: #fff !important;
}

/* ---- Admin panel polish ---- */
#admin-panel {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(219, 39, 119, 0.03) 100%),
    rgba(26, 29, 58, 0.5) !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
  border-radius: 18px !important;
  padding: 20px !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.12) !important;
}
#admin-panel .section-title,
#admin-panel h3 {
  font-family: inherit !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px;
  font-size: 18px !important;
  color: #fff !important;
}
#admin-panel h4 {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em !important;
  color: #A78BFA !important;
}
#admin-panel input,
#admin-panel select {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(124, 58, 237, 0.20) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  color: #fff !important;
  font-size: 14px !important;
}
#admin-panel input:focus,
#admin-panel select:focus {
  outline: none !important;
  border-color: rgba(168, 85, 247, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
}

/* ---- Pricing screen (in-app) polish ---- */
#pricing-screen .pricing-card {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(219, 39, 119, 0.04) 100%),
    rgba(26, 29, 58, 0.65) !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.14) !important;
}

/* ============================================================
 *  PHASE D — Saved Common Locations chip row (PRD §4.3)
 *  Quick-tap chips above the location input in entry preview modals.
 * ============================================================ */
.saved-locations-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 8px;
}
.saved-locations-label {
  width: 100%;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em !important;
  color: rgba(167, 139, 250, 0.65) !important;
  margin-bottom: 2px;
}
.saved-location-chip {
  background: rgba(124, 58, 237, 0.08) !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
  color: #C4B5FD !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.saved-location-chip:hover,
.saved-location-chip.selected {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(219, 39, 119, 0.16)) !important;
  border-color: rgba(168, 85, 247, 0.55) !important;
  color: #fff !important;
}
/* Tiny × on each saved chip — taps remove the chip from the user's
   favorites. Sits inside the chip, separated by a small gap. */
.saved-location-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
}
.saved-location-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  line-height: 1;
  margin-right: -4px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.saved-location-x:hover {
  background: rgba(239, 68, 68, 0.30);
  color: #fff;
}
/* "+ Save" chip at the end of the row — dashed border so users
   recognize it as an action, not a saved item. */
.saved-location-add {
  background: transparent !important;
  border: 1px dashed rgba(168, 85, 247, 0.45) !important;
  color: #A78BFA !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.saved-location-add:hover {
  background: rgba(124, 58, 237, 0.12) !important;
  border-color: rgba(168, 85, 247, 0.70) !important;
  color: #C4B5FD !important;
}

/* ============================================================
 *  PHASE D — Photo Import (OCR Hours) overlays
 * ============================================================ */
#photo-import-overlay {
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(124, 58, 237, 0.18) 0%, transparent 60%),
    rgba(10, 10, 20, 0.92) !important;
  backdrop-filter: blur(10px);
}
#photo-import-overlay > div {
  /* Inline injected; nothing to override directly. */
}

/* Photo-import preview screen — branded surface */
#photo-import-preview {
  background:
    radial-gradient(ellipse 60% 30% at 50% 0%, rgba(124, 58, 237, 0.18) 0%, transparent 60%),
    #0D0D1A !important;
}

/* ============================================================
 *  PHASE D — Watch Demo refinements (slide 3+4 unified violet)
 * ============================================================ */
.demo-screen .demo-cat-fill { box-shadow: 0 0 6px rgba(168, 85, 247, 0.3); }

/* ============================================================
 *  PHASE D — Reminders bell-badge polish
 * ============================================================ */
.reminders-bell-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(124, 58, 237, 0.20) !important;
  border-radius: 14px !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.16s ease;
}
.reminders-bell-btn:hover {
  background: rgba(124, 58, 237, 0.18) !important;
  border-color: rgba(168, 85, 247, 0.45) !important;
}
.reminders-badge {
  background: linear-gradient(135deg, #DB2777 0%, #7C3AED 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(219, 39, 119, 0.50) !important;
}

/* ============================================================
 *  PHASE D — Mobile responsive deep pass (@max-width: 480 / 414)
 *  Goals: kill horizontal overflow, ensure touch targets >= 44px,
 *  scale Playfair headlines, give modals breathing room on tiny phones.
 * ============================================================ */

@media (max-width: 480px) {
  /* Modal — full-bleed on tiny screens, slightly tighter padding */
  .modal .modal-content {
    border-radius: 22px 22px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .modal .modal-header { padding: 18px 18px 12px !important; }
  .modal .modal-header h3 { font-size: 20px !important; }
  .modal .modal-body { padding: 14px 18px !important; }
  .modal .modal-footer {
    padding: 12px 18px 20px !important;
    flex-wrap: wrap;
  }
  .modal .modal-footer .btn-primary,
  .modal .modal-footer .btn-ghost,
  .modal .modal-footer .btn-danger-outline {
    flex: 1 1 100%;
    min-height: 44px;
  }
  .modal .form-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .modal .form-row > .form-group.half {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
  /* Larger touch targets for chips */
  .pdf-period-btn,
  .rr-pill,
  .saved-location-chip {
    min-height: 36px;
  }
  /* Reminders panel hides any leftover overflow */
  #reminders-panel-overlay > div { box-sizing: border-box; }
  /* Voice note modal — tighten padding */
  .vn-modal-content { padding: 18px 16px 24px !important; }
}

@media (max-width: 414px) {
  /* Editorial headlines shouldn't clip on iPhone-SE-class widths */
  .modal .modal-header h3 { font-size: 19px !important; }
  /* Smaller padding for very narrow screens */
  .modal .modal-body { padding: 12px 14px !important; }
  .modal .modal-footer { padding: 12px 14px 18px !important; }
  /* Dashboard greeting + small avatar — ensure no overflow */
  .dash-header { padding-left: 14px !important; padding-right: 14px !important; }
}

@media (max-width: 360px) {
  .modal .modal-header h3 { font-size: 18px !important; }
  .modal .form-group label { font-size: 10px !important; }
}

/* ============================================================
 *  PHASE D — Settings page on tiny phones
 * ============================================================ */
@media (max-width: 480px) {
  #settings-page .card,
  #settings-page .settings-card {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }
  /* Subscription card promote: don't overflow */
  #subscription-card { overflow-wrap: break-word; }
}

/* ============================================================
 *  PHASE D — Auth screens at @414 + @360
 * ============================================================ */
@media (max-width: 414px) {
  #login-screen .logo,
  #signup-screen .logo,
  #forgot-password-screen .logo,
  #reset-password-screen .logo,
  #access-code-screen .logo {
    font-size: 28px !important;
  }
}


/* Phase D light-mode modal harmonization — keep airy & contrasted */
[data-theme="light"] .modal .modal-content {
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.04) 0%, rgba(255, 255, 255, 0) 38%),
    #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-top: 1px solid rgba(124, 58, 237, 0.22) !important;
  box-shadow: 0 -16px 56px rgba(15, 16, 36, 0.18) !important;
}
[data-theme="light"] .modal .modal-header h3,
[data-theme="light"] .modal .form-group input,
[data-theme="light"] .modal .form-group select,
[data-theme="light"] .modal .form-group textarea {
  color: #1F2937 !important;
}
[data-theme="light"] .modal .form-group input,
[data-theme="light"] .modal .form-group select,
[data-theme="light"] .modal .form-group textarea {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
}
[data-theme="light"] .modal .form-group input:focus,
[data-theme="light"] .modal .form-group select:focus,
[data-theme="light"] .modal .form-group textarea:focus {
  border-color: rgba(124, 58, 237, 0.50) !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12) !important;
  background: #FFFFFF !important;
}
[data-theme="light"] .modal .btn-ghost {
  background: #F1F2FA !important;
  border-color: #E5E7EB !important;
  color: #4B5563 !important;
}
[data-theme="light"] .modal .modal-close {
  background: #F1F2FA !important;
  border-color: #E5E7EB !important;
  color: #4B5563 !important;
}


/* ============================================================
 *  STRIPE CHECKOUT (payment modal) — replaces the old fake card form
 * ============================================================ */

.stripe-checkout-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.stripe-checkout-wrap .btn-primary {
  padding: 16px 18px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.stripe-checkout-wrap .btn-primary[disabled] {
  opacity: 0.7;
  cursor: progress;
}
.stripe-checkout-note {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.55;
  text-align: center;
  margin: 0;
}
.stripe-checkout-note strong {
  color: #C4B5FD;
  font-weight: 700;
}
[data-theme="light"] .stripe-checkout-note {
  color: #6B7280;
}
[data-theme="light"] .stripe-checkout-note strong {
  color: #6D28D9;
}


/* ============================================================
 *  PHASE F — Landing layout tightening
 *
 *  Problem: hero on mobile/tablet was 1135-1252px tall — the mockup
 *  PNG sat ~150px below the CTAs with no visual reason for the gap.
 *  Sections at >= 768px also had 96px top/bottom = 192px between any
 *  two sections, which felt overly airy.
 *
 *  This is the override layer — base style.css stays untouched.
 * ============================================================ */

/* Hero: stacked layout (mobile + tablet) — cut empty space between
   CTAs and the mockup PNG. */
@media (max-width: 900px) {
  .landing-hero {
    /* Nav is position:fixed ~64px tall on tablet — add it to padding-top
       so the Voice-Powered pill isn't hidden behind the nav. */
    padding-top: 120px !important;
    padding-bottom: 48px !important;
    gap: 24px !important;
  }
  .landing-hero-btns {
    margin-bottom: 8px !important;
  }
  /* Kill the stale `margin: 32px auto 0` override on the mockup img +
     container that earlier polish phases added — the new hero gap
     already provides spacing between content and mockup. */
  .landing-hero-mockup,
  .landing-hero-mockup img,
  .mockup-img {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .landing-hero-mockup {
    flex: 0 0 auto !important;
  }
  /* Trim the heavy drop-shadow on mobile so it doesn't read as
     additional empty space above the phone frame. */
  .mockup-img {
    box-shadow:
      0 16px 48px rgba(99, 102, 241, 0.18),
      0 4px 16px rgba(0, 0, 0, 0.35) !important;
    max-width: 260px !important;
  }
}

@media (max-width: 480px) {
  .landing-hero {
    /* Phone nav is ~60px tall; clear it + 40px breathing = 100px. */
    padding-top: 100px !important;
    padding-bottom: 40px !important;
    gap: 20px !important;
  }
  .mockup-img {
    max-width: 240px !important;
  }
}

/* Desktop hero: fill the viewport — hero should start right under the
   nav and extend at least one full screen height down, with content
   (text + phone) vertically centered in the middle. The nav is fixed
   at ~80px tall, so min-height: calc(100vh - 80px) gives the hero
   "one full screen below the nav".
   The phone bezel renders at 414×868 (≈1:2.1). max-width: 240px
   gives ~503px tall — small enough that the hero's vertical centering
   creates clear breathing room above + below within a tall hero. */
@media (min-width: 901px) {
  .landing-hero {
    /* Narrower max-width pulls the text + phone closer together
       horizontally instead of spreading to the edges of a 1200px box. */
    max-width: 980px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    /* 80px breathing above + below the content — hero sizes to its
       content height, not the viewport. */
    min-height: 0 !important;
    /* Nav is position:fixed and ~67px tall, so the top of the hero
       sits behind it. Add the nav height to the padding so the
       content (80px breathing room) starts BELOW the nav, not
       under it. Total: 67px nav clearance + 80px breathing = 147px. */
    padding-top: 147px !important;
    padding-bottom: 80px !important;
    align-items: center !important;
    justify-content: center;
    gap: 40px !important;
  }
  .landing-hero-content {
    max-width: 480px;
  }
  .landing-hero-mockup {
    align-self: center;
    flex: 0 0 260px !important;
  }
  .mockup-img {
    max-width: 240px !important;
  }
}

/* Landing sections: trim the vertical breathing room a touch on
   tablet + desktop. 96px top/bottom = 192px between sections felt
   excessive; 72px = 144px reads more focused without crowding. */
@media (min-width: 901px) {
  .landing-section,
  section.landing-section {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
  /* The CTA strip ("Ready to stop losing money?") needs less than a
     features section — keep its emphasis but not as a giant block. */
  section.landing-cta {
    padding-top: 64px !important;
    padding-bottom: 80px !important;
  }
}

/* IRS quote section — sits between the hero and the features grid.
   Was 12/28 originally (felt cramped against the hero); 64/48 gives
   the "Could you survive an audit?" headline breathing room above
   and a softer transition into the features section below. */
.irs-quote-section {
  padding-top: 64px !important;
  padding-bottom: 48px !important;
}
@media (min-width: 901px) {
  .irs-quote-section {
    padding-top: 80px !important;
    padding-bottom: 56px !important;
  }
}

/* Nav logo: ensure the wide 4.29:1 wordmark renders at its natural
   aspect ratio. Without these aspect-ratio + min-width hints, some
   browsers squish it when the parent flex container compresses. */
.landing-nav-logo,
.prelogin-nav-logo {
  flex-shrink: 0 !important;
  min-width: 120px;
}
.landing-nav-logo img,
.landing-nav-logo img.brand-logo-img {
  width: auto !important;
  height: 34px !important;
  max-height: 34px;
  object-fit: contain !important;
  display: block !important;
}
@media (max-width: 480px) {
  .landing-nav-logo,
  .prelogin-nav-logo { min-width: 100px; }
  .landing-nav-logo img,
  .landing-nav-logo img.brand-logo-img { height: 28px !important; }
}


/* ============================================================
 *  PILL/BADGE TEXT — pure white on the violet-tinted background.
 *  Was originally accent-purple (too bright), tried text-secondary
 *  grey (too muted), settled on white per user request — gives the
 *  pill a clean Apple/Linear-style "category label" feel.
 * ============================================================ */
.landing-hero-badge,
.section-badge,
.landing-section-pill,
.section-pill {
  color: #FFFFFF !important;
}
[data-theme="light"] .landing-hero-badge,
[data-theme="light"] .section-badge,
[data-theme="light"] .landing-section-pill,
[data-theme="light"] .section-pill {
  /* Light mode: white-on-violet has weak contrast; use a dark slate
     instead so the pill still reads. */
  color: #1F2937 !important;
}


/* ============================================================
 *  AUTH HEADER PARITY — make the login/signup/reset/access-code
 *  prelogin nav match the landing nav. User reported the auth
 *  header was visibly smaller with a tiny logo and no padding.
 * ============================================================ */
.prelogin-nav {
  padding: 16px 24px !important;
}
.prelogin-nav-logo img,
.prelogin-nav-logo img.brand-logo-img {
  width: auto !important;
  height: 34px !important;
  max-height: 34px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}
.prelogin-nav-logo {
  min-width: 120px;
  flex-shrink: 0 !important;
}
@media (max-width: 480px) {
  .prelogin-nav {
    padding: 14px 20px !important;
  }
  .prelogin-nav-logo {
    min-width: 100px;
  }
  .prelogin-nav-logo img,
  .prelogin-nav-logo img.brand-logo-img {
    height: 28px !important;
  }
}


/* ============================================================
 *  FOOTER — center everything on mobile
 *  User request: footer elements should center on phones. Base CSS
 *  centered text but left-aligned the brand img and column links.
 * ============================================================ */
@media (max-width: 900px) {
  .landing-footer .footer-top,
  .landing-footer .footer-brand,
  .landing-footer .footer-links,
  .landing-footer .footer-col,
  .landing-footer .footer-bottom {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Brand logo: was display:block left-aligned via inline style. */
  .landing-footer .footer-brand img {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
  /* Tagline + email centered with comfortable line-height. */
  .landing-footer .footer-tagline,
  .landing-footer .footer-email {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Footer columns: each <a> is display:block — they fill the parent
     so text-align: center on parent works, but make sure parent is
     a centered flex column for consistent vertical rhythm. */
  .landing-footer .footer-col {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    gap: 8px;
  }
  .landing-footer .footer-col h4 {
    text-align: center !important;
    margin-bottom: 4px;
  }
  .landing-footer .footer-col a {
    display: inline-block !important;
    text-align: center !important;
  }
  /* Copyright line */
  .landing-footer .footer-bottom p {
    text-align: center !important;
    margin: 0 auto !important;
  }
}


/* ============================================================
 *  CALENDAR SUGGESTIONS (preview/stub)
 *  Surfaces "today's events from your calendar" on the dashboard.
 *  Real Google Calendar OAuth ships post-meeting; for now the card
 *  pulls from a hardcoded stub set (_stubbedCalendarSuggestions in
 *  script.js). Designed to feel like the Deductions Protected card
 *  so it slots into the existing dashboard rhythm.
 * ============================================================ */
.calendar-suggestions-card {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(219, 39, 119, 0.03)),
    rgba(26, 29, 58, 0.55);
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 18px;
  padding: 18px 18px 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.cal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cal-card-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #A78BFA;
}
.cal-card-pill {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #FFFFFF;
}
.cal-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-suggestion {
  background: rgba(15, 16, 36, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
  position: relative;
}
.cal-sug-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.cal-time {
  font-size: 11px;
  font-weight: 700;
  color: #C4B5FD;
  letter-spacing: 0.4px;
}
.cal-amt {
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(135deg, #6D28D9, #DB2777);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cal-amt-muted {
  background: none;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.55);
  color: rgba(255, 255, 255, 0.55);
}
.cal-sug-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 2px;
  line-height: 1.3;
}
.cal-sug-loc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
  /* Real-world calendar locations are often massive Zoom URLs with
     query params. Cap at 2 lines + ellipsis to prevent card overflow. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
}
.cal-sug-log {
  background: transparent;
  color: #C4B5FD;
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cal-sug-log:hover {
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(168, 85, 247, 0.55);
}
.cal-empty {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  padding: 8px 0;
  text-align: center;
}


/* Google Calendar connect/disconnect buttons inside the suggestions card */
.cal-connect-btn {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 40%, #A855F7 75%, #DB2777 100%);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.32);
}
.cal-connect-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(124, 58, 237, 0.42);
}
.cal-connect-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  margin: 0 0 12px;
}
.cal-disconnect-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cal-disconnect-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.75);
}


/* Voice-note modal: match the visual rhythm of the Expense / Hours /
   Mileage modals. The original vn-close-btn was tiny; using
   .expense-modal-close (36x36 box, top-right) brings it inline.
   z-index must be above .entry-detail-overlay (10000) so that
   tapping Add Note from inside an Entry Details modal puts the
   voice note flow ON TOP — otherwise the user can't reach the mic. */
#voice-note-modal {
  z-index: 10500 !important;
}
#voice-note-modal .vn-screen-title {
  display: none !important; /* old centered pill — replaced by expense-modal-title */
}
#voice-note-modal .vn-step-record-layout {
  padding-top: 24px;
}
#voice-note-modal .expense-modal-header {
  padding-top: 64px !important; /* match other modals so X doesn't overlap title */
  padding-bottom: 8px;
}
#voice-note-modal .vn-mic-wrapper {
  margin-top: 24px;
}


/* ============================================================
 *  VOICE RECORD SCREEN — unified copy + examples
 *  Mic-first UX needs a generic title + multi-type examples since
 *  the same surface now handles expense, mileage, and hours.
 * ============================================================ */
.expense-modal-subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  margin: -4px 0 0;
  padding: 0 24px;
  line-height: 1.5;
}

.voice-examples-box {
  background: rgba(15, 16, 36, 0.55);
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 14px;
  padding: 16px 18px;
}
.voice-examples-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #A78BFA;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.voice-example-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.voice-example-row:last-of-type {
  border-bottom: none;
  padding-bottom: 4px;
}
.voice-example-tag {
  flex-shrink: 0;
  padding: 3px 10px;
  background: rgba(124, 58, 237, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.32);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #C4B5FD;
  text-transform: uppercase;
  min-width: 70px;
  text-align: center;
}
.voice-example-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  font-style: italic;
  line-height: 1.4;
}
.voice-examples-tip {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 12px;
  line-height: 1.5;
  text-align: center;
}


/* ============================================================
 *  DASHBOARD ACCORDIONS — Calendar / Trips / Past Receipts
 *  Native <details> + <summary> for zero-JS expand/collapse with
 *  a brand-styled chevron + count badge in the header row.
 * ============================================================ */
/* Section heading above the accordions. "More ways to deduct" frames
   the accordions as alternative entry points (not as a list of past
   activity that might not exist yet). Sentence-case at 16px reads
   like a real section title rather than a thin uppercase microlabel. */
.dash-section-heading {
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  margin: 26px 4px 12px !important;
  padding: 0;
}

.dash-accordions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 12px;
}

.dash-acc {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(219, 39, 119, 0.03)),
    rgba(26, 29, 58, 0.55);
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 14px;
  overflow: hidden;
}
.dash-acc[open] {
  border-color: rgba(168, 85, 247, 0.3);
}

.dash-acc-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.dash-acc-summary::-webkit-details-marker { display: none; }
.dash-acc-summary::marker { content: ''; }

.dash-acc-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.14);
  flex-shrink: 0;
}
/* Title + subtitle stack. The title carries the action ("Deduct from
   your calendar"), the subtitle explains the affordance ("Tap a
   meeting to log it as an expense"). flex:1 keeps the count + chev
   anchored to the right. */
.dash-acc-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dash-acc-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.1px;
  line-height: 1.25;
}
.dash-acc-sub {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.50);
  letter-spacing: 0.1px;
  line-height: 1.3;
}
.dash-acc-count {
  font-size: 11px;
  font-weight: 700;
  color: #C4B5FD;
  background: rgba(124, 58, 237, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.32);
  border-radius: 999px;
  padding: 2px 9px;
  letter-spacing: 0.3px;
  min-width: 22px;
  text-align: center;
}
.dash-acc-count:empty {
  display: none;
}
.dash-acc-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.dash-acc[open] .dash-acc-chev {
  transform: rotate(180deg);
}

.dash-acc-body {
  padding: 0 16px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 12px;
}

/* List rows used by Trips + Past Receipts inside the accordions */
.acc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.acc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(15, 16, 36, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}
.acc-row-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.acc-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.acc-row-main {
  flex: 1;
  min-width: 0;
}
.acc-row-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acc-row-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}
.acc-row-amt {
  font-size: 13px;
  font-weight: 700;
  color: #C4B5FD;
  flex-shrink: 0;
}
.acc-empty {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  padding: 12px 8px;
  line-height: 1.5;
}


/* Shared CTA button at the top of accordion bodies (Start a Trip,
   Scan a Receipt) — same brand-gradient style as the Connect Google
   Calendar button so all three accordions have visually identical
   primary actions. */
.acc-cta-btn {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 40%, #A855F7 75%, #DB2777 100%);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.32);
}
.acc-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(124, 58, 237, 0.42);
}
/* iOS Safari can make the inner SVG icon the click target instead of
   the button, swallowing the inline onclick. Pin pointer-events off
   so the whole pill always reads as the tappable surface. Same fix
   pattern as .dash-note-btn. */
.acc-cta-btn svg,
.acc-cta-btn span {
  pointer-events: none;
}

/* Trip tracker — "LIVE" pulsing dot inside the status pill so Marta
   can tell the trip is actively tracking even when she's stopped at a
   light. The dot pulses red on a 1.4s loop; the pill background flips
   to a soft red tint so the eye reads "recording in progress." */
.trip-status-pill.trip-status-live {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.40);
  color: #FCA5A5;
}
.trip-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #EF4444;
  margin-right: 7px;
  vertical-align: 1px;
  animation: tripLivePulse 1.4s ease-in-out infinite;
}
@keyframes tripLivePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  50%      { opacity: 0.6; box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* Trip saved — green success state. */
.trip-status-pill.trip-status-saved {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.45);
  color: #34D399;
}

/* Small uppercase group header inside accordion body — used by the
   Reminders accordion to separate Upcoming / Past lists. */
.acc-row-group-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.55);
  margin: 12px 4px 6px;
}
/* Past/completed reminders dim to 60% so the eye lands on upcoming. */
.acc-row.acc-row-done {
  opacity: 0.55;
}
.acc-row.acc-row-done .acc-row-title { text-decoration: line-through; }

/* Settings link at the bottom of an accordion body — quiet text
   button that opens the relevant settings page. Used by Reminders
   for notification settings. */
.acc-settings-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid rgba(168, 85, 247, 0.20);
  border-radius: 10px;
  color: rgba(196, 181, 253, 0.85);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.acc-settings-link:hover {
  background: rgba(124, 58, 237, 0.10);
  border-color: rgba(168, 85, 247, 0.45);
  color: #C4B5FD;
}

/* Notes & Reminders panel — note cards + action buttons. Previously
   the action buttons used inline styles that got squished by a
   global rule into illegible ovals. Real CSS class with !important
   guards against any global button-min-width / button-min-height
   overrides. */
.vn-card {
  background: rgba(26, 29, 58, 0.55);
  border: 1px solid rgba(168, 85, 247, 0.18);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.vn-card:hover {
  background: rgba(26, 29, 58, 0.78);
  border-color: rgba(168, 85, 247, 0.32);
}
.vn-card-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.vn-card-text-col { flex: 1; min-width: 0; }
.vn-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 2px;
}
.vn-card-btn {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.vn-card-btn:active { transform: scale(0.92); }
.vn-card-btn-done {
  background: rgba(34, 197, 94, 0.14) !important;
  border: 1.5px solid rgba(34, 197, 94, 0.45) !important;
  color: #34D399 !important;
}
.vn-card-btn-done:hover {
  background: rgba(34, 197, 94, 0.26) !important;
  border-color: rgba(34, 197, 94, 0.70) !important;
}
.vn-card-btn-delete {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.30) !important;
  color: #f87171 !important;
}
.vn-card-btn-delete:hover {
  background: rgba(239, 68, 68, 0.20) !important;
  border-color: rgba(239, 68, 68, 0.55) !important;
}

/* ============================================================
 *  EXPENSES PAGE REDESIGN (May 2026)
 *  Hero deductible card + clean Deductions list with category
 *  icon tiles + simplified By Category bars. Replaces the old
 *  4-card summary grid + tx-toggle-btn pattern.
 * ============================================================ */

/* Hero "Deductible this {period}" card — the single source of truth
   for the page. Replaces the old 4-card grid that had a misleading
   "Tax Savings" cell duplicating the total. */
.exp-hero-card {
  margin: 14px 0 18px;
  padding: 18px 20px 16px;
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(219, 39, 119, 0.06)),
    rgba(26, 29, 58, 0.65);
  border: 1px solid rgba(168, 85, 247, 0.20);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.exp-hero-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(196, 181, 253, 0.70);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.exp-hero-value {
  font-family: inherit;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
  background: linear-gradient(135deg, #ffffff 0%, #C4B5FD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.exp-hero-sub {
  margin-top: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.1px;
}

/* Generic section wrapper used for both Deductions list and By Category */
.exp-section { margin: 20px 0; }
/* Section header — title left, action right. Use grid so the action
   ALWAYS sits at the right edge of the row regardless of any
   third-party flex rules that might leak in. */
.exp-section-header {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: baseline;
  margin-bottom: 10px;
  padding: 0;
  width: 100%;
}
.exp-section-title {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.2px;
  justify-self: start;
}
/* View-all link is right-anchored — no padding on the right so the
   text sits flush with the right edge of the deductions box below.
   Grid parent's `auto` track + justify-self:end guarantees right
   alignment even if some other rule sneaks in margin-left. */
.exp-view-all-link {
  background: transparent;
  border: none;
  color: #A78BFA;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0 4px 6px;
  margin: 0 2px 0 auto !important;
  justify-self: end;
  letter-spacing: 0.1px;
}
.exp-view-all-link:hover { color: #C4B5FD; }

/* Total hours pill shown on the right of the Hours section header,
   mirroring the .exp-view-all-link placement. Slightly muted vs the
   bar amounts so it reads as a label, not a tap target. */
.exp-hours-total {
  margin: 0 2px 0 auto !important;
  justify-self: end;
  font-size: 13px;
  font-weight: 700;
  color: #C4B5FD;
  letter-spacing: -0.1px;
}
/* "Switch to This Year" reminder when user is on a shorter filter —
   sets expectation that the bars track ANNUAL progress toward IRS
   qualification, not period totals. */
.exp-hours-hint {
  margin: -4px 2px 10px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
  letter-spacing: 0.1px;
}
/* "✓ Qualified" pill next to REPS / STR label when the user has
   reached the annual hours threshold. Green so it pops against the
   violet/blue bar fills. */
.exp-hours-qual {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  background: rgba(52, 211, 153, 0.16);
  color: #34D399;
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  vertical-align: 1px;
}

/* "+ Add new entity" option at the bottom of the home entity
   dropdown — visually distinct from the entity rows above so users
   spot the action quickly. */
.entity-select-option.entity-select-add {
  color: #A78BFA !important;
  font-weight: 700;
  border-top: 1px solid rgba(168, 85, 247, 0.22);
  background: rgba(124, 58, 237, 0.06);
}
.entity-select-option.entity-select-add:hover {
  background: rgba(124, 58, 237, 0.14) !important;
  color: #C4B5FD !important;
}

/* Deductions list — wrapped in a single bordered box matching the
   entity dropdown + time filter (1.5px violet, 10px corners). Rows
   live inside as borderless items separated by hairlines. */
.exp-deductions-box {
  background: rgba(26, 29, 58, 0.65);
  border: 1.5px solid rgba(168, 85, 247, 0.45);
  border-radius: 10px;
  overflow: hidden;
}
.exp-deductions-list,
.exp-deductions-list-rest {
  display: flex;
  flex-direction: column;
}
.exp-deductions-list-rest.hidden { display: none; }

.exp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(168, 85, 247, 0.10);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
/* Last row in the container loses its hairline so it sits flush
   with the container's bottom edge. Handles both the initial-4
   visible-rows scenario and the View-all-expanded scenario. */
.exp-deductions-box > div:last-child > .exp-row:last-child,
.exp-deductions-list-rest.hidden { /* hidden rest doesn't count */ }
.exp-deductions-box > .exp-deductions-list:last-child > .exp-row:last-child,
.exp-deductions-box > .exp-deductions-list-rest:not(.hidden) > .exp-row:last-child {
  border-bottom: none;
}
/* When View all is expanded, the last row of the initial list also
   loses its border so the join with the rest list reads as one
   continuous flow. */
.exp-deductions-box:has(.exp-deductions-list-rest:not(.hidden)) .exp-deductions-list > .exp-row:last-child {
  border-bottom: 1px solid rgba(168, 85, 247, 0.10);
}
.exp-row:hover {
  background: rgba(124, 58, 237, 0.08);
}
.exp-row:active { transform: scale(0.99); }

.exp-row-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
}
.exp-row-icon svg { width: 20px; height: 20px; }

.exp-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.exp-row-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.1px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exp-row-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.1px;
}
.exp-row-amount {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.2px;
  flex-shrink: 0;
}
.exp-row-receipt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.18);
  color: #34D399;
  border: 1px solid rgba(52, 211, 153, 0.35);
}

/* By Category — two-line bar: label+amount on top, fill underneath */
.exp-cat-list { display: flex; flex-direction: column; gap: 14px; }
.exp-cat-bar {
  padding: 4px 2px;
  cursor: pointer;
}
.exp-cat-bar-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.exp-cat-bar-name {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: -0.1px;
}
.exp-cat-bar-right {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.exp-cat-bar-amount {
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.2px;
}
.exp-cat-bar-pct {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.50);
}
.exp-cat-bar-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.exp-cat-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* ============================================================
 *  ENTRY DETAIL MODAL — opened when you tap a deduction row
 *  Rebuilt May 2026 to fix cramped layout + non-working
 *  Take Photo / Choose buttons. Proper CSS classes throughout
 *  (was full of inline styles); stacked icon-above-label photo
 *  buttons so they don't wrap; prominent voice-first Add Note.
 * ============================================================ */
.entry-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: edFadeIn 0.18s ease;
}
@keyframes edFadeIn { from { opacity: 0; } to { opacity: 1; } }

.entry-detail-card {
  width: 100%;
  max-width: 440px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 22px 22px 24px;
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(219, 39, 119, 0.03)),
    rgba(20, 22, 44, 0.96);
  border: 1.5px solid rgba(168, 85, 247, 0.32);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  animation: edSlideUp 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes edSlideUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Header — eyebrow on the left, gradient circle X on the right */
.ed-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}
.ed-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.65);
  line-height: 1.3;
}
/* Match the rest of the app's modal X buttons + the brand-gradient
   CTAs (Connect Calendar, Start Trip, etc). Full violet→pink gradient,
   perfect 40x40 circle (flex-shrink:0 stops the parent flex layout
   from squishing it into an oval), white SVG X centered via ::before
   so the glyph is crisp at any DPR. */
.ed-close {
  flex-shrink: 0;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 40%, #A855F7 75%, #DB2777 100%) !important;
  border: none;
  border-radius: 50% !important;
  color: transparent;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.42);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  overflow: hidden;
  text-indent: -9999px;
}
.ed-close::before {
  content: '';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-indent: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
.ed-close:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.55);
}
.ed-close:active { transform: scale(0.96); }

.ed-title {
  margin: 0 0 6px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
  letter-spacing: -0.2px;
  line-height: 1.3;
}
.ed-amount {
  font-family: inherit;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #C4B5FD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Detail rows — label left, value right, hairline divider between */
.ed-rows {
  margin: 6px 0 18px;
  border-top: 1px solid rgba(168, 85, 247, 0.10);
}
.ed-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(168, 85, 247, 0.10);
}
.ed-row-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.50);
  letter-spacing: 0.1px;
}
.ed-row-value {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  text-align: right;
  letter-spacing: -0.1px;
}

/* Receipt section */
.ed-receipt-section { margin-top: 6px; }
.ed-receipt-empty {
  padding: 18px;
  border: 1px dashed rgba(168, 85, 247, 0.22);
  border-radius: 14px;
  text-align: center;
  background: rgba(124, 58, 237, 0.04);
}
.ed-receipt-empty-label {
  margin: 0 0 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.50);
  letter-spacing: 0.1px;
}
.ed-receipt-empty-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ed-photo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(168, 85, 247, 0.20);
  border-radius: 14px;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.ed-photo-btn:hover {
  background: rgba(124, 58, 237, 0.10);
  border-color: rgba(168, 85, 247, 0.45);
}
.ed-photo-btn:active { transform: scale(0.98); }
.ed-photo-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.18);
  color: #C4B5FD;
}
.ed-photo-btn-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  text-align: center;
  line-height: 1.25;
}

/* Existing receipt image + manage buttons */
.ed-receipt-img-wrap {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(168, 85, 247, 0.20);
  margin-bottom: 12px;
}
.ed-receipt-img { width: 100%; display: block; cursor: pointer; }
.ed-receipt-actions {
  display: flex;
  gap: 8px;
}
.ed-receipt-btn {
  flex: 1;
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ed-receipt-btn:hover { background: rgba(124, 58, 237, 0.12); }
.ed-receipt-btn-danger { color: #f87171; border-color: rgba(239, 68, 68, 0.30); }
.ed-receipt-btn-danger:hover { background: rgba(239, 68, 68, 0.10); }

/* Edit / Delete row */
.ed-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.ed-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px;
  background: transparent;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.1px;
  transition: background 0.15s ease, transform 0.1s ease;
}
.ed-action-btn:active { transform: scale(0.98); }
.ed-action-edit {
  color: #C4B5FD;
  border: 1.5px solid rgba(168, 85, 247, 0.55);
}
.ed-action-edit:hover { background: rgba(124, 58, 237, 0.10); }
.ed-action-delete {
  color: #f87171;
  border: 1.5px solid rgba(239, 68, 68, 0.55);
}
.ed-action-delete:hover { background: rgba(239, 68, 68, 0.10); }

/* Edit-Hours overlay: form fields styled to match the entry-detail
   modal language (violet borders, dark navy fills, soft labels). */
.eh-field {
  margin-bottom: 14px;
}
.eh-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.65);
  margin-bottom: 6px;
}
.eh-input {
  display: block;
  width: 100%;
  padding: 11px 14px;
  background: rgba(26, 29, 58, 0.65);
  border: 1.5px solid rgba(168, 85, 247, 0.32);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.95);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.1px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.eh-input:focus {
  border-color: rgba(168, 85, 247, 0.65);
  background: rgba(26, 29, 58, 0.85);
}
.eh-textarea {
  resize: vertical;
  min-height: 70px;
  line-height: 1.4;
}
select.eh-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A78BFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

.eh-type-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.eh-type-btn {
  padding: 11px 14px;
  background: rgba(26, 29, 58, 0.55);
  border: 1.5px solid rgba(168, 85, 247, 0.32);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.70);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.eh-type-btn:hover {
  background: rgba(124, 58, 237, 0.10);
  border-color: rgba(168, 85, 247, 0.55);
}
.eh-type-active {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 50%, #A855F7 100%) !important;
  border-color: rgba(168, 85, 247, 0.85) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}

/* Notes section — Add Note as a prominent voice-first violet button */
.ed-notes-section { margin-top: 22px; }
.ed-notes-wrap {}
.ed-notes-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.55);
  margin-bottom: 10px;
}
.ed-add-note-btn {
  display: block;
  width: 100%;
  padding: 13px 16px;
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 50%, #A855F7 100%);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.ed-add-note-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(124, 58, 237, 0.45);
}
.ed-add-note-btn:active { transform: scale(0.99); }

.ed-notes-empty {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.40);
  text-align: center;
  font-style: italic;
}
.ed-notes-list { margin-top: 12px; }
.ed-note {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(168, 85, 247, 0.10);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.ed-note-completed { opacity: 0.5; }
.ed-note-text {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.90);
  line-height: 1.4;
}
.ed-note-reminder {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #C4B5FD;
  letter-spacing: 0.1px;
}

/* ============================================================
 *  REPORTS PAGE REDESIGN (May 2026)
 *  Matches the cleaner mockup: header w/ subtitle, REPORT SCOPE
 *  eyebrow + entity dropdown / time filter (same bordered chip
 *  style as Expenses), single "In Scope" rollup card, three
 *  stacked Generate cards, Recent reports list.
 * ============================================================ */

#reports-page .reports-header {
  align-items: flex-start;
  margin-bottom: 16px;
}
#reports-page .reports-header-text { flex: 1; min-width: 0; }
#reports-page .reports-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  color: rgba(255, 255, 255, 0.95) !important;
  margin: 0 0 6px !important;
}
#reports-page .reports-subtitle {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
  letter-spacing: 0.1px;
}

/* Eyebrow above the entity dropdown */
.reports-scope-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.55);
  margin: 4px 0 8px;
}

/* Reuse entries-entity-dropdown-wrap for the entity chip but full
   width on Reports so it dominates the row visually. */
.reports-entity-dropdown-wrap {
  display: flex !important;
  width: 100%;
  min-width: 0;
}

/* Time filter — same segmented control as Expenses. */
#reports-page .report-time-filters {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  margin: 10px 0 18px;
  background: rgba(26, 29, 58, 0.65);
  border: 1.5px solid rgba(168, 85, 247, 0.45);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
#reports-page .report-time-filters .time-filter-btn {
  flex: 1;
  margin: 0 !important;
  border-radius: 7px !important;
  font-size: 12.5px;
  padding: 8px 10px !important;
  border: none !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.55) !important;
}
#reports-page .report-time-filters .time-filter-btn.active {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 50%, #A855F7 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}

/* In Scope rollup card */
.reports-scope-card {
  margin: 6px 0 24px;
  padding: 14px 16px 4px;
  background: rgba(26, 29, 58, 0.65);
  border: 1.5px solid rgba(168, 85, 247, 0.32);
  border-radius: 12px;
}
.reports-scope-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.60);
  margin-bottom: 8px;
}
.reports-scope-rows { display: flex; flex-direction: column; }
.reports-scope-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(168, 85, 247, 0.10);
}
.reports-scope-row:last-child { border-bottom: none; }
.reports-scope-row-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.1px;
}
.reports-scope-row-value {
  font-size: 14.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.2px;
  text-align: right;
}
.reports-scope-row-sub {
  display: inline;
  margin-left: 4px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(196, 181, 253, 0.75);
  letter-spacing: 0;
}

/* Top "Total deductible" row — visually anchors as the headline
   number that the breakdown rows roll up to. Bigger, gradient text,
   thicker divider below to separate from the breakdown items. */
.reports-scope-row-total {
  padding-bottom: 14px;
  border-bottom-color: rgba(168, 85, 247, 0.28);
}
.reports-scope-row-total .reports-scope-row-label {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}
.reports-scope-total-value {
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -0.4px !important;
  background: linear-gradient(135deg, #ffffff 0%, #C4B5FD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}

/* Section heading reuse */
#reports-page .reports-section-heading {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: rgba(255, 255, 255, 0.92);
  margin: 28px 0 12px;
  padding: 0 2px;
}

/* Generate cards — vertical stack, icon+text header, full-width
   violet "Generate" button below. */
.reports-generate-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reports-generate-card {
  padding: 16px 16px 14px;
  background: rgba(26, 29, 58, 0.55);
  border: 1.5px solid rgba(168, 85, 247, 0.22);
  border-radius: 14px;
}
.reports-gen-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.reports-gen-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.16);
  flex-shrink: 0;
}
.reports-gen-text { flex: 1; min-width: 0; }
.reports-gen-title {
  font-size: 14.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.1px;
  line-height: 1.25;
  margin-bottom: 3px;
}
.reports-gen-sub {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.35;
  letter-spacing: 0.1px;
}
.reports-gen-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 50%, #A855F7 100%);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.32);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.reports-gen-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.42);
}
.reports-gen-btn:active { transform: scale(0.99); }

/* Recent reports list */
.reports-recent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reports-recent-empty {
  padding: 18px 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.40);
  text-align: center;
  background: rgba(26, 29, 58, 0.40);
  border: 1px dashed rgba(168, 85, 247, 0.20);
  border-radius: 12px;
  font-style: italic;
}
.reports-recent-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(26, 29, 58, 0.55);
  border: 1px solid rgba(168, 85, 247, 0.18);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.reports-recent-row:hover {
  background: rgba(124, 58, 237, 0.10);
  border-color: rgba(168, 85, 247, 0.40);
}
.reports-recent-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.16);
  color: #C4B5FD;
  flex-shrink: 0;
}
.reports-recent-info { flex: 1; min-width: 0; }
.reports-recent-title {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reports-recent-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.1px;
  margin-top: 2px;
}
.reports-recent-action {
  color: #A78BFA;
  flex-shrink: 0;
  padding: 4px;
  cursor: pointer;
}
/* Hidden rest of the recent reports list — toggled by See more. */
.reports-recent-rest.hidden { display: none; }
.reports-recent-rest {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* "See more" pill at the bottom of the Recent list — same violet
   text style as other action links, centered + full-width for easy
   tapping on mobile. */
.reports-recent-more {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid rgba(168, 85, 247, 0.30);
  border-radius: 10px;
  color: #A78BFA;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.reports-recent-more:hover {
  background: rgba(124, 58, 237, 0.10);
  border-color: rgba(168, 85, 247, 0.55);
  color: #C4B5FD;
}

/* Entity dropdown — square-with-slightly-rounded-corners pill with a
   more pronounced border so it reads clearly as an interactive
   filter. The real <select> is overlayed at opacity:0 covering the
   whole pill, so any tap (icon, text, chevron, padding) opens the
   native picker. The visible chrome is just decorative spans/svgs
   updated by renderEntriesEntityPills() to mirror the value. */
.entries-entity-dropdown-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 8px 0 14px;
  padding: 10px 14px;
  background: rgba(26, 29, 58, 0.65);
  border: 1.5px solid rgba(168, 85, 247, 0.45);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  min-width: 200px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.entries-entity-dropdown-wrap:hover {
  border-color: rgba(168, 85, 247, 0.65);
  background: rgba(26, 29, 58, 0.78);
}
.entries-entity-icon {
  color: #A78BFA;
  flex-shrink: 0;
  pointer-events: none;
}
.entries-entity-chev {
  color: rgba(255, 255, 255, 0.65);
  flex-shrink: 0;
  margin-left: auto;
  pointer-events: none;
}
.entries-entity-display {
  flex: 1;
  color: rgba(255, 255, 255, 0.95);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
/* The real <select> sits invisibly on top of the whole pill. inset:0
   ensures it covers icon + text + chevron so any tap opens picker. */
.entries-entity-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  color: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  opacity: 0;
  z-index: 2;
}
.entries-entity-select option {
  background: #1a1d3a;
  color: #fff;
}

/* ============================================================
 *  LIGHT MODE OVERRIDES (June 2026)
 *  All the .exp-*, .dash-*, .acc-*, .reports-*, .vn-*, .entries-*
 *  components were authored with hardcoded white text on navy
 *  backgrounds. In light mode those become white-on-white and
 *  read as broken. The rules below swap each hardcoded color to a
 *  light-mode equivalent: white card surfaces, dark text, softer
 *  purple borders. Anything that already used CSS vars is fine.
 * ============================================================ */

/* ----- DASHBOARD ----------------------------------------- */
[data-theme="light"] .dash-section-heading { color: #1F2937 !important; }
[data-theme="light"] .dash-hero-text { color: rgba(31, 41, 55, 0.85) !important; }
[data-theme="light"] .dash-cat-hint { color: rgba(31, 41, 55, 0.55) !important; }

[data-theme="light"] .dash-type-btn {
  background: #FFFFFF;
  border-color: rgba(124, 58, 237, 0.22);
  color: rgba(31, 41, 55, 0.72);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .dash-type-btn:hover {
  border-color: rgba(124, 58, 237, 0.45);
  color: #1F2937;
}
/* Active state stays the brand gradient — already legible on light bg. */

[data-theme="light"] .dash-note-btn {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.35);
  color: #6D28D9;
}
[data-theme="light"] .dash-note-btn:hover {
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.55);
  color: #4C1D95;
}

[data-theme="light"] .dash-acc {
  background: #FFFFFF;
  border-color: rgba(124, 58, 237, 0.18);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .dash-acc[open] { border-color: rgba(124, 58, 237, 0.35); }
[data-theme="light"] .dash-acc-title { color: #1F2937; }
[data-theme="light"] .dash-acc-sub { color: rgba(31, 41, 55, 0.55); }
[data-theme="light"] .dash-acc-icon { background: rgba(124, 58, 237, 0.10); }
[data-theme="light"] .dash-acc-count {
  color: #6D28D9;
  background: rgba(124, 58, 237, 0.10);
  border-color: rgba(124, 58, 237, 0.22);
}
[data-theme="light"] .dash-acc-body { border-top-color: rgba(0, 0, 0, 0.06); }

[data-theme="light"] .acc-row {
  background: #F9FAFB;
  border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .acc-row-title { color: #1F2937; }
[data-theme="light"] .acc-row-meta { color: rgba(31, 41, 55, 0.55); }
[data-theme="light"] .acc-row-amt { color: #6D28D9; }
[data-theme="light"] .acc-row-thumb { background: rgba(124, 58, 237, 0.10); }
[data-theme="light"] .acc-empty { color: rgba(31, 41, 55, 0.50); }
[data-theme="light"] .acc-row-group-label { color: rgba(124, 58, 237, 0.65); }

[data-theme="light"] .acc-settings-link {
  border-color: rgba(124, 58, 237, 0.22);
  color: #6D28D9;
}
[data-theme="light"] .acc-settings-link:hover {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.45);
  color: #4C1D95;
}

/* Voice-note cards (Reminders accordion bodies) */
[data-theme="light"] .vn-card {
  background: #FFFFFF;
  border-color: rgba(124, 58, 237, 0.18);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .vn-card:hover {
  background: #F9FAFB;
  border-color: rgba(124, 58, 237, 0.30);
}

/* ----- DEDUCTIONS (Expenses) PAGE ------------------------ */
[data-theme="light"] #entries-page .page-header h2 { color: #1F2937; }

/* Hero "Deductible this year" card — keep the violet gradient on a
   lighter base so the gradient still reads but the card has presence
   on a white background. */
[data-theme="light"] .exp-hero-card {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.92), rgba(168, 85, 247, 0.78) 60%, rgba(219, 39, 119, 0.72));
  border-color: rgba(124, 58, 237, 0.40);
  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.22);
}
[data-theme="light"] .exp-hero-label { color: rgba(255, 255, 255, 0.82); }
[data-theme="light"] .exp-hero-value {
  background: #FFFFFF;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .exp-hero-sub { color: rgba(255, 255, 255, 0.78); }

/* Section headings ("Entries", "By Category", "Hours") */
[data-theme="light"] .exp-section-title { color: #1F2937; }
[data-theme="light"] .exp-view-all-link { color: #6D28D9; }
[data-theme="light"] .exp-view-all-link:hover { color: #4C1D95; }
[data-theme="light"] .exp-hours-total { color: #6D28D9; }
[data-theme="light"] .exp-hours-hint { color: rgba(31, 41, 55, 0.55); }
[data-theme="light"] .exp-hours-qual {
  background: rgba(16, 185, 129, 0.10);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.45);
}

/* Deductions box — white card with subtle violet border */
[data-theme="light"] .exp-deductions-box {
  background: #FFFFFF;
  border-color: rgba(124, 58, 237, 0.28);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .exp-row { border-bottom-color: rgba(0, 0, 0, 0.06); }
[data-theme="light"] .exp-row:hover { background: rgba(124, 58, 237, 0.04); }
[data-theme="light"] .exp-row-title { color: #1F2937; }
[data-theme="light"] .exp-row-meta { color: rgba(31, 41, 55, 0.55); }
[data-theme="light"] .exp-row-amount { color: #1F2937; }
[data-theme="light"] .exp-row-receipt {
  background: rgba(16, 185, 129, 0.10);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.40);
}

/* By Category bars */
[data-theme="light"] .exp-cat-bar-name { color: #1F2937; }
[data-theme="light"] .exp-cat-bar-amount { color: #1F2937; }
[data-theme="light"] .exp-cat-bar-pct { color: rgba(31, 41, 55, 0.55); }
[data-theme="light"] .exp-cat-bar-track { background: rgba(124, 58, 237, 0.10); }

/* Entity dropdown ("All Businesses" pill) */
[data-theme="light"] .entries-entity-dropdown-wrap {
  background: #FFFFFF;
  border-color: rgba(124, 58, 237, 0.32);
  color: #1F2937;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .entries-entity-dropdown-wrap:hover {
  background: #F9FAFB;
  border-color: rgba(124, 58, 237, 0.55);
}
[data-theme="light"] .entries-entity-icon { color: #7C3AED; }
[data-theme="light"] .entries-entity-display { color: #1F2937; }
[data-theme="light"] .entries-entity-chev { color: rgba(31, 41, 55, 0.55); }
[data-theme="light"] .entries-entity-select option {
  background: #FFFFFF;
  color: #1F2937;
}
[data-theme="light"] .entity-select-option.entity-select-add {
  color: #6D28D9 !important;
  border-top-color: rgba(124, 58, 237, 0.22);
  background: rgba(124, 58, 237, 0.04);
}
[data-theme="light"] .entity-select-option.entity-select-add:hover {
  background: rgba(124, 58, 237, 0.10) !important;
  color: #4C1D95 !important;
}

/* Time filter pill (This Week / Month / Quarter / Year) */
[data-theme="light"] #entries-page .entries-time-filters {
  background: #FFFFFF;
  border-color: rgba(124, 58, 237, 0.32);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] #entries-page .entries-time-filters .time-filter-btn {
  color: rgba(31, 41, 55, 0.60) !important;
}
[data-theme="light"] #entries-page .entries-time-filters .time-filter-btn:hover {
  color: #1F2937 !important;
}
/* Active stays gradient — reads great on white. */

/* ----- REPORTS PAGE ------------------------------------- */
[data-theme="light"] #reports-page .page-header h2 { color: #1F2937; }
[data-theme="light"] #reports-page .reports-title { color: #1F2937 !important; }
[data-theme="light"] #reports-page .reports-subtitle { color: rgba(31, 41, 55, 0.60); }
[data-theme="light"] .reports-scope-label { color: rgba(124, 58, 237, 0.70); }

[data-theme="light"] #reports-page .report-time-filters {
  background: #FFFFFF;
  border-color: rgba(124, 58, 237, 0.32);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] #reports-page .report-time-filters .time-filter-btn {
  color: rgba(31, 41, 55, 0.60) !important;
}
[data-theme="light"] #reports-page .report-time-filters .time-filter-btn:hover {
  color: #1F2937 !important;
}

[data-theme="light"] .reports-scope-card {
  background: #FFFFFF;
  border-color: rgba(124, 58, 237, 0.22);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .reports-scope-eyebrow { color: rgba(124, 58, 237, 0.70); }
[data-theme="light"] .reports-scope-row { border-bottom-color: rgba(0, 0, 0, 0.06); }
[data-theme="light"] .reports-scope-row-label { color: rgba(31, 41, 55, 0.78); }
[data-theme="light"] .reports-scope-row-value { color: #1F2937; }
[data-theme="light"] .reports-scope-row-sub { color: #6D28D9; }
[data-theme="light"] .reports-scope-row-total { border-bottom-color: rgba(124, 58, 237, 0.32); }
[data-theme="light"] .reports-scope-row-total .reports-scope-row-label { color: #1F2937; }
[data-theme="light"] .reports-scope-total-value {
  background: linear-gradient(135deg, #6D28D9 0%, #DB2777 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] #reports-page .reports-section-heading { color: #1F2937; }

[data-theme="light"] .reports-generate-card {
  background: #FFFFFF;
  border-color: rgba(124, 58, 237, 0.20);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .reports-gen-icon { background: rgba(124, 58, 237, 0.10); }
[data-theme="light"] .reports-gen-title { color: #1F2937; }
[data-theme="light"] .reports-gen-sub { color: rgba(31, 41, 55, 0.60); }

[data-theme="light"] .reports-recent-row {
  background: #FFFFFF;
  border-color: rgba(124, 58, 237, 0.18);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .reports-recent-row:hover {
  background: rgba(124, 58, 237, 0.04);
  border-color: rgba(124, 58, 237, 0.40);
}
[data-theme="light"] .reports-recent-icon {
  background: rgba(124, 58, 237, 0.10);
  color: #6D28D9;
}
[data-theme="light"] .reports-recent-title { color: #1F2937; }
[data-theme="light"] .reports-recent-meta { color: rgba(31, 41, 55, 0.55); }
[data-theme="light"] .reports-recent-action { color: #6D28D9; }
[data-theme="light"] .reports-recent-empty {
  background: #F9FAFB;
  color: rgba(31, 41, 55, 0.55);
  border-color: rgba(124, 58, 237, 0.20);
}
[data-theme="light"] .reports-recent-more {
  border-color: rgba(124, 58, 237, 0.32);
  color: #6D28D9;
}
[data-theme="light"] .reports-recent-more:hover {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.55);
  color: #4C1D95;
}

/* ----- ENTRY DETAIL / EDIT MODALS ----------------------- */
[data-theme="light"] .ed-row,
[data-theme="light"] .ed-section,
[data-theme="light"] .ed-card {
  background: #FFFFFF;
  border-color: rgba(124, 58, 237, 0.18);
}
[data-theme="light"] .ed-label,
[data-theme="light"] .ed-title,
[data-theme="light"] .ed-amount,
[data-theme="light"] .ed-value { color: #1F2937; }
[data-theme="light"] .ed-meta,
[data-theme="light"] .ed-sub { color: rgba(31, 41, 55, 0.60); }

[data-theme="light"] .eh-label,
[data-theme="light"] .em-label { color: #1F2937; }
[data-theme="light"] .eh-input,
[data-theme="light"] .eh-textarea,
[data-theme="light"] select.eh-input,
[data-theme="light"] .em-input,
[data-theme="light"] .em-textarea,
[data-theme="light"] select.em-input {
  background: #FFFFFF;
  border-color: rgba(124, 58, 237, 0.28);
  color: #1F2937;
}
[data-theme="light"] .eh-input:focus,
[data-theme="light"] .eh-textarea:focus,
[data-theme="light"] select.eh-input:focus,
[data-theme="light"] .em-input:focus,
[data-theme="light"] .em-textarea:focus,
[data-theme="light"] select.em-input:focus {
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.10);
}
[data-theme="light"] .eh-type-btn,
[data-theme="light"] .em-type-btn {
  background: #FFFFFF;
  border-color: rgba(124, 58, 237, 0.22);
  color: rgba(31, 41, 55, 0.72);
}
[data-theme="light"] .eh-type-btn:hover,
[data-theme="light"] .em-type-btn:hover {
  border-color: rgba(124, 58, 237, 0.45);
  color: #1F2937;
}

/* ----- SETTINGS — REPS/STR/Both pills ------------------- */
[data-theme="light"] .settings-hours-mode-btn {
  background: #FFFFFF;
  border-color: rgba(124, 58, 237, 0.28);
  color: rgba(31, 41, 55, 0.70);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .settings-hours-mode-btn:hover {
  border-color: rgba(124, 58, 237, 0.55);
  color: #1F2937;
}
/* Active stays gradient. */

/* ----- ENTRIES SEARCH (top-right pill on Deductions) ---- */
[data-theme="light"] .entries-search-mini {
  background: #FFFFFF !important;
  border-color: rgba(124, 58, 237, 0.22) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .entries-search-mini:focus-within {
  border-color: rgba(124, 58, 237, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.10);
}
[data-theme="light"] .entries-search-mini svg { color: #7C3AED !important; }
[data-theme="light"] .entries-search-mini input { color: #1F2937 !important; }
[data-theme="light"] .entries-search-mini input::placeholder { color: rgba(31, 41, 55, 0.40) !important; }

/* ============================================================
 *  LIGHT MODE — Settings page + global page bg lift (Jun 2026)
 *  Marta reported the Settings cards washed out in light mode.
 *  Section labels, card borders, and field rows were all near-
 *  invisible. Overrides below give each card a clean white
 *  surface on a soft-gray page so they "lift," and bump the
 *  section-label purple to a darker shade for proper contrast.
 * ============================================================ */

/* Soft-gray app background so white cards have visible lift. */
[data-theme="light"] body,
[data-theme="light"] .app-shell,
[data-theme="light"] .app-content,
[data-theme="light"] .page,
[data-theme="light"] .page-container {
  background: #F3F4F6 !important;
}

/* Settings cards: white surface, slate border, gentle shadow. */
[data-theme="light"] #settings-page .card {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Uppercase eyebrow labels (RECURRING EXPENSES, BULK IMPORT,
   THEME, EMAIL PREFERENCES, etc.) — darker purple so they pop
   on a white card instead of fading into it. */
[data-theme="light"] #settings-page .section-title {
  color: #6D28D9 !important;
}

/* Field rows */
[data-theme="light"] #settings-page .settings-field {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] #settings-page .settings-field-label {
  color: rgba(31, 41, 55, 0.55) !important;
}
[data-theme="light"] #settings-page .settings-field-value {
  color: #111827 !important;
}

/* Subscription / plan card — keep the brand gradient but on a
   white base so it reads as a card, not a violet blob. */
[data-theme="light"] #settings-page .settings-plan-card {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.06) 0%, rgba(219, 39, 119, 0.04) 100%),
    #FFFFFF !important;
  border: 1px solid rgba(168, 85, 247, 0.30) !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.08);
}
[data-theme="light"] .settings-plan-desc {
  color: rgba(31, 41, 55, 0.60) !important;
}

/* Theme toggle row + hint */
[data-theme="light"] .theme-toggle-label {
  color: #111827 !important;
}
[data-theme="light"] .theme-toggle-hint {
  color: rgba(31, 41, 55, 0.60) !important;
}

/* Email-preference + daily-checkin rows (the toggle rows below) */
[data-theme="light"] #settings-page .settings-toggle-label {
  color: #111827 !important;
}
[data-theme="light"] #settings-page .settings-toggle-hint {
  color: rgba(31, 41, 55, 0.60) !important;
}
[data-theme="light"] #settings-page .settings-toggle-item {
  border-top-color: rgba(0, 0, 0, 0.06) !important;
}

/* Recurring-expense card empty state — the icon ring + title */
[data-theme="light"] #settings-page .empty-state-icon-wrap,
[data-theme="light"] #recurring-list svg {
  color: #7C3AED !important;
  stroke: #7C3AED !important;
}

/* Settings page-header h2 */
[data-theme="light"] #settings-page .page-header h2 {
  color: #111827 !important;
}

/* Section-header inline button (+ Add, Change) — already styled
   via .btn-sm; just make sure the border + text remain visible
   on white. */
[data-theme="light"] #settings-page .section-header .btn-sm {
  background: rgba(124, 58, 237, 0.06) !important;
  border: 1px solid rgba(124, 58, 237, 0.30) !important;
  color: #6D28D9 !important;
}
[data-theme="light"] #settings-page .section-header .btn-sm:hover {
  background: rgba(124, 58, 237, 0.12) !important;
  border-color: rgba(124, 58, 237, 0.50) !important;
}

/* "+ Import" pill in Bulk Import header */
[data-theme="light"] #settings-page .cal-card-pill {
  background: rgba(124, 58, 237, 0.10) !important;
  color: #6D28D9 !important;
  border: 1px solid rgba(124, 58, 237, 0.30) !important;
}

/* Empty-state body inside cards (e.g. "No recurring expenses" +
   "Add a monthly subscription..." hint). Currently rendered with
   white-tinted inline styles via JS — override the resulting
   nested h3/p. */
[data-theme="light"] #recurring-list h3 {
  color: #111827 !important;
}
[data-theme="light"] #recurring-list p {
  color: rgba(31, 41, 55, 0.55) !important;
}

/* Bottom nav remains white with darker icons in light mode */
[data-theme="light"] .bottom-nav {
  background: #FFFFFF !important;
  border-top: 1px solid #E5E7EB !important;
}
[data-theme="light"] .bottom-nav-item {
  color: rgba(31, 41, 55, 0.55) !important;
}
[data-theme="light"] .bottom-nav-item.active {
  color: #6D28D9 !important;
}

/* Bare <input> / <select> / <textarea> inside any settings card
   (Admin promo form, Language card, etc.). The existing rule at
   style.css line 7479 only covered .card .input — the class-less
   form inputs in the Admin block fell through with white-on-white. */
[data-theme="light"] #settings-page input[type="text"],
[data-theme="light"] #settings-page input[type="number"],
[data-theme="light"] #settings-page input[type="email"],
[data-theme="light"] #settings-page input[type="tel"],
[data-theme="light"] #settings-page input[type="password"],
[data-theme="light"] #settings-page select,
[data-theme="light"] #settings-page textarea,
[data-theme="light"] #admin-panel input,
[data-theme="light"] #admin-panel select,
[data-theme="light"] #admin-panel textarea {
  background-color: #F9FAFB !important;
  border: 1px solid #D1D5DB !important;
  color: #111827 !important;
}
[data-theme="light"] #settings-page input::placeholder,
[data-theme="light"] #settings-page textarea::placeholder,
[data-theme="light"] #admin-panel input::placeholder,
[data-theme="light"] #admin-panel textarea::placeholder {
  color: #9CA3AF !important;
  opacity: 1 !important;
}
[data-theme="light"] #settings-page select option,
[data-theme="light"] #admin-panel select option {
  background-color: #FFFFFF;
  color: #111827;
}
/* Focus state on light bg */
[data-theme="light"] #settings-page input:focus,
[data-theme="light"] #settings-page select:focus,
[data-theme="light"] #settings-page textarea:focus,
[data-theme="light"] #admin-panel input:focus,
[data-theme="light"] #admin-panel select:focus,
[data-theme="light"] #admin-panel textarea:focus {
  border-color: #7C3AED !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
  outline: none !important;
}

/* Admin promo list empty state ("No promo codes available.") */
[data-theme="light"] #admin-panel .admin-promo-empty,
[data-theme="light"] #admin-promo-list {
  color: rgba(31, 41, 55, 0.65) !important;
}
/* "Create New Code" sub-heading */
[data-theme="light"] #admin-panel h4 {
  color: #6D28D9 !important;
}
/* Language-card option rows still use dark-mode border-color
   (rgba(255,255,255,0.08)) for the inactive option — invisible in
   light mode. Recolor the inactive row's border + bg. */
[data-theme="light"] #lang-option-en,
[data-theme="light"] #lang-option-es {
  border-color: rgba(124, 58, 237, 0.20) !important;
}
[data-theme="light"] #lang-option-en {
  background: rgba(124, 58, 237, 0.06) !important;
  border-color: rgba(124, 58, 237, 0.45) !important;
}

/* ============================================================
 *  LIGHT MODE — Calendar accordion preview cards
 *  The stub events (Coffee w/ Sarah, Lunch w/ John, Property
 *  walkthrough) used dark-navy backgrounds + white text. On a
 *  white card they render as gray boxes with washed-out content.
 * ============================================================ */
[data-theme="light"] .cal-suggestion {
  background: #F9FAFB !important;
  border: 1px solid #E5E7EB !important;
}
[data-theme="light"] .cal-time {
  color: #6D28D9 !important;
}
[data-theme="light"] .cal-sug-title {
  color: #111827 !important;
}
[data-theme="light"] .cal-sug-loc {
  color: rgba(31, 41, 55, 0.55) !important;
}
[data-theme="light"] .cal-amt-muted {
  color: rgba(31, 41, 55, 0.55) !important;
  -webkit-text-fill-color: rgba(31, 41, 55, 0.55) !important;
}
[data-theme="light"] .cal-sug-log {
  background: #FFFFFF !important;
  color: #6D28D9 !important;
  border: 1px solid rgba(124, 58, 237, 0.35) !important;
}
[data-theme="light"] .cal-sug-log:hover {
  background: rgba(124, 58, 237, 0.06) !important;
  border-color: rgba(124, 58, 237, 0.55) !important;
}
[data-theme="light"] .cal-connect-hint {
  color: rgba(31, 41, 55, 0.55) !important;
}
[data-theme="light"] .cal-empty {
  color: rgba(31, 41, 55, 0.55) !important;
}
[data-theme="light"] .cal-disconnect-btn {
  color: rgba(31, 41, 55, 0.65) !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
}

/* ============================================================
 *  LIGHT MODE — Dashboard hero (header full-bleed, mic title,
 *  bell icon visibility). Hits all three of Marta's reports
 *  in one block.
 * ============================================================ */

/* Make the white .dash-header span the FULL viewport edge-to-edge
   AND start at y=0 (no gray gap above). Standard full-bleed trick:
   100vw width + negative left margin equal to the container's
   distance from the viewport edge. Combined with zero top padding
   on the page container so the bar truly sits at the top. */
[data-theme="light"] #dashboard-page .page-container {
  padding-top: 0 !important;
}
[data-theme="light"] .dash-header {
  background: #FFFFFF !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  padding: 14px max(16px, calc(50vw - 300px + 16px)) !important;
  border-bottom: 1px solid #E5E7EB !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  border-radius: 0 !important;
}

/* Reminders bell — SVG has stroke="rgba(255,255,255,0.65)" hardcoded
   inline. Force the stroke to a visible violet in light mode. */
[data-theme="light"] .reminders-bell-btn {
  background: rgba(124, 58, 237, 0.08) !important;
  border: 1px solid rgba(124, 58, 237, 0.25) !important;
}
[data-theme="light"] .reminders-bell-btn svg {
  stroke: #6D28D9 !important;
  color: #6D28D9 !important;
}
[data-theme="light"] .reminders-bell-btn:hover {
  background: rgba(124, 58, 237, 0.16) !important;
}

/* "Log an expense" / "Log a trip" / "Log your hours" headline
   uses a white→lavender gradient clipped to text — invisible on
   white. Force a dark→violet gradient instead so it reads. */
[data-theme="light"] .mic-headline,
[data-theme="light"] #dash-mic-headline {
  background: linear-gradient(135deg, #1F2937 0%, #6D28D9 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Mic hint subtitle ("Tap and say what you spent.") */
[data-theme="light"] .mic-hint,
[data-theme="light"] #dash-mic-hint {
  color: rgba(31, 41, 55, 0.65) !important;
}

/* "or enter manually" link — readable violet but quieter than the
   "Add a Note or Reminder" pill or the headline. Default mid-violet
   with ~75% opacity; hover deepens to full brand violet. */
[data-theme="light"] .dash-type-link {
  color: rgba(109, 40, 217, 0.72) !important;
}
[data-theme="light"] .dash-type-link:hover {
  color: #5B21B6 !important;
  background: rgba(124, 58, 237, 0.08) !important;
}

/* ============================================================
 *  LIGHT MODE — Entry modals (Expense / Mileage / Hours /
 *  Voice Note / Property / Recurring / Bulk Import)
 *  All used .expense-modal-content with hardcoded #0F1024 navy.
 *  Form inputs had rgba(255,255,255,0.04) bg + white text.
 * ============================================================ */

/* Outer modal sheet (covers full viewport behind the content card). */
[data-theme="light"] .expense-modal {
  background: #FFFFFF !important;
}

/* Content sheet — flip from dark navy to clean white with a hairline. */
[data-theme="light"] .expense-modal-content {
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.04) 0%, rgba(255, 255, 255, 0) 40%),
    #FFFFFF !important;
  border-top: 1px solid #E5E7EB !important;
  box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.08) !important;
}

/* Title + subtitle */
[data-theme="light"] .expense-modal-title {
  color: #111827 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #111827 !important;
}
[data-theme="light"] .expense-modal-subtitle {
  color: rgba(31, 41, 55, 0.65) !important;
}

/* Form inputs across all entry modals */
[data-theme="light"] .expense-input-lg,
[data-theme="light"] #editable-transcript,
[data-theme="light"] .expense-preview-fields input,
[data-theme="light"] .expense-preview-fields select,
[data-theme="light"] .expense-preview-fields textarea {
  background: #F9FAFB !important;
  border: 1px solid #D1D5DB !important;
  color: #111827 !important;
}
[data-theme="light"] .expense-input-lg::placeholder,
[data-theme="light"] #editable-transcript::placeholder,
[data-theme="light"] .expense-preview-fields input::placeholder,
[data-theme="light"] .expense-preview-fields textarea::placeholder {
  color: #9CA3AF !important;
  opacity: 1 !important;
}
[data-theme="light"] .expense-input-lg:focus,
[data-theme="light"] #editable-transcript:focus,
[data-theme="light"] .expense-preview-fields input:focus,
[data-theme="light"] .expense-preview-fields select:focus,
[data-theme="light"] .expense-preview-fields textarea:focus {
  border-color: #7C3AED !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
}
[data-theme="light"] .expense-preview-fields label,
[data-theme="light"] .expense-field label {
  color: rgba(31, 41, 55, 0.70) !important;
}

/* Voice examples box (Try saying any of these:) */
[data-theme="light"] .voice-examples-box {
  background: #F9FAFB !important;
  border: 1px solid #E5E7EB !important;
}
[data-theme="light"] .voice-examples-heading {
  color: #6D28D9 !important;
}
[data-theme="light"] .voice-example-tag {
  background: rgba(124, 58, 237, 0.10) !important;
  color: #6D28D9 !important;
  border: 1px solid rgba(124, 58, 237, 0.25) !important;
}
[data-theme="light"] .voice-example-text {
  color: rgba(31, 41, 55, 0.78) !important;
}
[data-theme="light"] .voice-examples-tip {
  color: rgba(31, 41, 55, 0.55) !important;
}

/* "Tap to start" status + live transcript inside listen step */
[data-theme="light"] .expense-listen-status {
  color: rgba(31, 41, 55, 0.65) !important;
}
[data-theme="light"] .expense-live-transcript {
  background: #F9FAFB !important;
  border: 1px solid #E5E7EB !important;
  color: #111827 !important;
}

/* Entry-options menu (REPS / STR cards on hours-step-choose) */
[data-theme="light"] .hours-type-card {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .hours-type-title {
  color: #111827 !important;
}
[data-theme="light"] .hours-type-subtitle {
  color: rgba(31, 41, 55, 0.60) !important;
}
[data-theme="light"] .hours-type-progress-count {
  color: #6D28D9 !important;
}
[data-theme="light"] .hours-type-progress-bar {
  background: rgba(124, 58, 237, 0.10) !important;
}
[data-theme="light"] .entry-options-title {
  color: #111827 !important;
}

/* Processing step ("Analyzing your expense...") */
[data-theme="light"] .expense-processing-text {
  color: #111827 !important;
}
[data-theme="light"] .expense-processing-sub {
  color: rgba(31, 41, 55, 0.60) !important;
}

/* Manual entry modal section labels + helper text */
[data-theme="light"] .form-group label {
  color: rgba(31, 41, 55, 0.78) !important;
}
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea {
  background: #F9FAFB !important;
  border: 1px solid #D1D5DB !important;
  color: #111827 !important;
}
[data-theme="light"] .form-group input::placeholder,
[data-theme="light"] .form-group textarea::placeholder {
  color: #9CA3AF !important;
  opacity: 1 !important;
}

/* Recurring / Property / Bulk-Import / Voice-Note modal-content
   (the .modal class, not .expense-modal) — already uses --bg-card
   which is white in light mode, but ensure text colors flip. */
[data-theme="light"] .modal-content {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  color: #111827 !important;
}
[data-theme="light"] .modal-header h3 {
  color: #111827 !important;
}
[data-theme="light"] .modal-close {
  color: rgba(31, 41, 55, 0.55) !important;
}
[data-theme="light"] .modal-close:hover {
  color: #111827 !important;
}

/* Mileage live deduction calc strip */
[data-theme="light"] .mileage-deduction-calc {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.30) !important;
}
[data-theme="light"] #mileage-deduction-text {
  color: #047857 !important;
}

/* Voice-edit-hint ("Tap to edit if needed") */
[data-theme="light"] .voice-edit-hint {
  color: rgba(31, 41, 55, 0.55) !important;
}

/* Success steps (Mileage Logged / Hours Logged / etc.) */
[data-theme="light"] .expense-success-title {
  color: #111827 !important;
}

/* ============================================================
 *  LIGHT MODE — Entry Details modal
 *  Opens when you tap a row on the Deductions page. The card
 *  used a dark-navy bg with white text, so detail rows ("Amount",
 *  "Date", "Entity") rendered as blank white slabs.
 * ============================================================ */
[data-theme="light"] .entry-detail-overlay {
  background: rgba(15, 23, 42, 0.45) !important;
}
[data-theme="light"] .entry-detail-card {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.04), rgba(219, 39, 119, 0.02)),
    #FFFFFF !important;
  border: 1px solid rgba(124, 58, 237, 0.20) !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18) !important;
}
[data-theme="light"] .ed-eyebrow {
  color: #6D28D9 !important;
}
[data-theme="light"] .ed-title {
  color: #111827 !important;
}
/* Big amount headline — replace white→lavender gradient with a
   dark→violet gradient so it pops on white. */
[data-theme="light"] .ed-amount {
  background: linear-gradient(135deg, #1F2937 0%, #6D28D9 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* Row dividers + label/value text — these were the invisible
   blank rows in the screenshot. */
[data-theme="light"] .ed-rows {
  border-top-color: rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .ed-row {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .ed-row-label {
  color: rgba(31, 41, 55, 0.55) !important;
}
[data-theme="light"] .ed-row-value {
  color: #111827 !important;
}

/* Receipt section — empty state dashed box + photo picker buttons */
[data-theme="light"] .ed-receipt-empty {
  background: #F9FAFB !important;
  border: 1px dashed rgba(124, 58, 237, 0.30) !important;
}
[data-theme="light"] .ed-receipt-empty-label {
  color: rgba(31, 41, 55, 0.60) !important;
}
[data-theme="light"] .ed-photo-btn {
  background: #FFFFFF !important;
  border: 1px solid rgba(124, 58, 237, 0.30) !important;
  color: #6D28D9 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .ed-photo-btn:hover {
  background: rgba(124, 58, 237, 0.06) !important;
  border-color: rgba(124, 58, 237, 0.50) !important;
}
[data-theme="light"] .ed-photo-btn-icon,
[data-theme="light"] .ed-photo-btn-label {
  color: #6D28D9 !important;
}

/* Edit / Delete action buttons */
[data-theme="light"] .ed-action-btn {
  background: #FFFFFF !important;
}
[data-theme="light"] .ed-action-edit {
  border: 1px solid rgba(124, 58, 237, 0.35) !important;
  color: #6D28D9 !important;
}
[data-theme="light"] .ed-action-edit:hover {
  background: rgba(124, 58, 237, 0.06) !important;
}
[data-theme="light"] .ed-action-delete {
  border: 1px solid rgba(239, 68, 68, 0.45) !important;
  color: #DC2626 !important;
}
[data-theme="light"] .ed-action-delete:hover {
  background: rgba(239, 68, 68, 0.06) !important;
}

/* NOTES section heading + empty hint */
[data-theme="light"] .ed-notes-eyebrow,
[data-theme="light"] .ed-add-note-btn ~ p,
[data-theme="light"] .ed-notes-section .ed-eyebrow {
  color: #6D28D9 !important;
}
[data-theme="light"] .ed-notes-empty {
  color: rgba(31, 41, 55, 0.55) !important;
}

/* Receipt action buttons (when a receipt IS attached) */
[data-theme="light"] .ed-receipt-btn {
  background: #FFFFFF !important;
  border: 1px solid rgba(124, 58, 237, 0.30) !important;
  color: #6D28D9 !important;
}
[data-theme="light"] .ed-receipt-img-wrap {
  border: 1px solid #E5E7EB !important;
}

/* ============================================================
 *  LIGHT MODE — GPS Trip tracker modal + Reminders accordion
 *  GPS modal had inline rgba(255,255,255,...) colors on detail/
 *  cancel/help text — invisible on the white modal in light
 *  mode. Reminders accordion had a few stragglers.
 * ============================================================ */

/* GPS Trip tracker modal */
[data-theme="light"] #trip-tracker-modal .expense-modal-content {
  background: #FFFFFF !important;
  color: #111827 !important;
}
[data-theme="light"] #trip-tracker-modal #trip-miles {
  color: #6D28D9 !important;
}
[data-theme="light"] #trip-tracker-modal #trip-miles + span {
  color: #6D28D9 !important;
  -webkit-text-fill-color: #6D28D9 !important;
}
[data-theme="light"] #trip-tracker-modal #trip-detail {
  color: rgba(31, 41, 55, 0.65) !important;
}
[data-theme="light"] #trip-tracker-modal .trip-status-pill {
  background: rgba(124, 58, 237, 0.10) !important;
  border-color: rgba(124, 58, 237, 0.30) !important;
  color: #6D28D9 !important;
}
/* Active recording state stays red so user knows it's live */
[data-theme="light"] #trip-tracker-modal .trip-status-pill.trip-status-live {
  background: rgba(239, 68, 68, 0.10) !important;
  border-color: rgba(239, 68, 68, 0.40) !important;
  color: #B91C1C !important;
}
[data-theme="light"] #trip-tracker-modal .trip-status-pill.trip-status-saved {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.40) !important;
  color: #047857 !important;
}
[data-theme="light"] #trip-tracker-modal button.btn-sm {
  color: rgba(31, 41, 55, 0.60) !important;
}
[data-theme="light"] #trip-tracker-modal p[style*="font-size:11px"] {
  color: rgba(31, 41, 55, 0.55) !important;
}

/* Reminders accordion — stragglers */
[data-theme="light"] .acc-row.acc-row-done {
  /* Past-due rows stay dimmed via opacity but on white that reads
     OK already. Just ensure the icon doesn't fade to nothing. */
  opacity: 0.65;
}
[data-theme="light"] .acc-row-thumb svg {
  color: #6D28D9 !important;
  stroke: #6D28D9 !important;
}

/* Trip accordion — Start a Trip CTA gradient + empty state are
   already light-mode safe (gradient bg, mid-gray empty). Nothing
   to add. */

/* dash-acc-body divider in light mode (already there but be
   explicit for accordions that get opened the first time). */
[data-theme="light"] .dash-acc-body {
  border-top-color: rgba(0, 0, 0, 0.06) !important;
}