/*
  VibeCurb visual redesign
  Loaded after styles.css so the complete upgrade can be removed in one step.
  Bookkeeping behavior, selectors, and application logic stay untouched.
*/

:root {
  --ink: #172724;
  --ink-2: #344b45;
  --muted: #66766f;
  --line: rgba(27, 55, 48, 0.13);
  --line-strong: rgba(27, 55, 48, 0.24);
  --paper: #f1efe7;
  --card: rgba(255, 254, 249, 0.92);
  --navy: #082f32;
  --navy-2: #16474a;
  --mint: #bdf0d2;
  --mint-strong: #177b58;
  --amber: #c77728;
  --amber-soft: #fff0d4;
  --red: #b84e43;
  --red-soft: #fff0ed;
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, sans-serif;
  --font-label: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.82) inset, 0 12px 36px rgba(34, 55, 49, 0.055);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 20px 46px rgba(34, 55, 49, 0.1);
}

html {
  background: var(--paper);
}

body {
  min-width: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% -12%, rgba(189, 240, 210, 0.28), transparent 31rem),
    radial-gradient(circle at 18% 92%, rgba(205, 167, 112, 0.12), transparent 34rem),
    var(--paper);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
}

body::after {
  content: "";
  position: fixed;
  z-index: 90;
  inset: 0;
  pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,
h2,
.empty-state strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 2.7vw, 2.65rem); }
h2 { font-size: clamp(1.65rem, 2.2vw, 2.1rem); }
h3 { letter-spacing: -0.015em; }

.eyebrow,
.data-table th,
.scenario span,
.date-tile small {
  font-family: var(--font-label);
  font-weight: 650;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.app-shell {
  grid-template-columns: 276px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  isolation: isolate;
  padding: 24px 18px 20px;
  border-right: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    radial-gradient(circle at 30% 2%, #185257 0, transparent 30rem),
    var(--navy);
  background-size: 28px 28px, 28px 28px, auto, auto;
  box-shadow: 18px 0 60px rgba(4, 33, 34, 0.08);
}

.sidebar::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 8%;
  width: 1px;
  height: 54%;
  background: linear-gradient(transparent, rgba(189, 240, 210, 0.4), transparent);
}

.brand {
  min-height: 64px;
  padding: 0 8px 22px;
  border-bottom-color: rgba(255, 255, 255, 0.11);
}

.brand-mark {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(189, 240, 210, 0.2);
  border-radius: 14px;
  background: rgba(189, 240, 210, 0.1);
  box-shadow: 0 10px 28px rgba(2, 21, 22, 0.18);
}

.brand strong { font-size: 15px; }
.brand span { color: #a9beb8; }

.main-nav {
  gap: 5px;
  margin-top: 22px;
}

.nav-item {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #b8cbc6;
  font-size: 13px;
  transition:
    color 280ms var(--ease-out),
    background-color 280ms var(--ease-out),
    border-color 280ms var(--ease-out),
    transform 360ms var(--ease-snap);
}

.nav-item:hover {
  border-color: rgba(189, 240, 210, 0.1);
  background: rgba(255, 255, 255, 0.055);
  transform: translateX(2px);
}

.nav-item.active {
  border-color: rgba(189, 240, 210, 0.16);
  background: linear-gradient(90deg, rgba(189, 240, 210, 0.17), rgba(189, 240, 210, 0.07));
  box-shadow: inset 3px 0 #9ce8c5, 0 8px 24px rgba(1, 22, 23, 0.12);
}

.nav-icon { color: #9ce8c5; }
.sidebar-bottom { padding-top: 24px; }
.company-card { border-top-color: rgba(255, 255, 255, 0.11); }

.main-content {
  max-width: 1660px;
  padding: 0 clamp(28px, 3.3vw, 54px) 72px;
}

.topbar {
  height: 124px;
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(241, 239, 231, 0.98) 72%, rgba(241, 239, 231, 0));
  backdrop-filter: blur(16px) saturate(120%);
}

.topbar h1 { font-size: clamp(2.15rem, 3vw, 2.9rem); }

.eyebrow {
  margin-bottom: 8px;
  color: #5d716a;
  font-size: 9px;
}

.button,
.google-signin-button {
  border-radius: 999px;
  transition:
    transform 360ms var(--ease-snap),
    box-shadow 360ms var(--ease-snap),
    border-color 260ms var(--ease-out),
    background-color 260ms var(--ease-out);
}

.button:hover,
.google-signin-button:hover {
  transform: translateY(-2px);
}

.button:active,
.google-signin-button:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 90ms;
}

.button.primary {
  color: #082f32;
  background: var(--mint);
  box-shadow: 0 8px 20px rgba(36, 113, 81, 0.16);
}

.button.primary:hover {
  color: #072a2c;
  background: #a8eac5;
  box-shadow: 0 12px 28px rgba(36, 113, 81, 0.22);
}

.button.secondary {
  border-color: var(--line-strong);
  background: rgba(255, 254, 249, 0.68);
}

.theme-toggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-2);
  background: rgba(255, 254, 249, 0.68);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition:
    color 260ms var(--ease-out),
    background-color 260ms var(--ease-out),
    border-color 260ms var(--ease-out),
    transform 360ms var(--ease-snap),
    box-shadow 360ms var(--ease-snap);
}

.theme-toggle:hover {
  color: var(--navy);
  border-color: #78b69d;
  background: rgba(189, 240, 210, 0.34);
  box-shadow: 0 10px 24px rgba(34, 79, 62, 0.11);
  transform: translateY(-2px);
}

.theme-toggle:active { transform: translateY(0) scale(0.98); transition-duration: 90ms; }
.theme-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-sun { display: none; }
.auth-card { position: relative; }
.auth-theme-toggle { position: absolute; top: 18px; right: 18px; min-width: 44px; padding-inline: 12px; }
.auth-theme-toggle [data-theme-label] { display: none; }

.filter-bar {
  min-height: 78px;
  gap: 18px;
  padding: 14px 18px;
  border-color: rgba(27, 55, 48, 0.16);
  border-radius: var(--radius-lg);
  background: rgba(255, 254, 249, 0.7);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px) saturate(125%);
}

.segmented {
  border: 1px solid rgba(27, 55, 48, 0.08);
  border-radius: 999px;
  background: rgba(224, 228, 219, 0.72);
}

.segmented button {
  border-radius: 999px;
  transition: color 240ms var(--ease-out), background-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}

.field input,
.field select,
.search-box input,
.redirect-uri-row input,
textarea {
  border-color: var(--line-strong);
  border-radius: 10px;
  color: var(--ink);
  background: rgba(255, 255, 252, 0.9);
  transition: border-color 260ms var(--ease-out), box-shadow 260ms var(--ease-out), background-color 260ms var(--ease-out);
}

.field input:focus,
.field select:focus,
.search-box input:focus,
textarea:focus {
  border-color: #398f70;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(34, 128, 91, 0.12);
}

.view { padding-top: 38px; }
.view-header { margin-bottom: 26px; }
.view-header h2 { font-size: clamp(1.75rem, 2.35vw, 2.25rem); }
.view-header p { color: var(--muted); font-size: 12px; }

.kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.kpi-card {
  min-height: 156px;
  padding: 22px;
  border-color: var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  transition: transform 440ms var(--ease-snap), border-color 320ms var(--ease-out), box-shadow 440ms var(--ease-snap);
}

.kpi-card:first-child { grid-column: span 2; }

.kpi-card:hover {
  border-color: rgba(27, 55, 48, 0.22);
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.kpi-card.accent {
  border-color: rgba(189, 240, 210, 0.16);
  background:
    radial-gradient(circle at 88% 96%, rgba(189, 240, 210, 0.18), transparent 44%),
    linear-gradient(145deg, #082f32, #124b4d);
  box-shadow: 0 20px 44px rgba(6, 46, 48, 0.18);
}

.kpi-card::after {
  right: -40px;
  bottom: -68px;
  width: 160px;
  height: 160px;
  border: 1px solid rgba(189, 240, 210, 0.1);
  background: transparent;
}

.kpi-label { font-size: 10px; }
.kpi-value,
.forecast-value,
.scenario strong,
.tax-card strong,
.mini-stat strong,
.detail-metric strong,
.salary-result-card strong {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

.kpi-value { margin-top: 22px; font-size: clamp(1.6rem, 2.25vw, 2.2rem); }
.kpi-card.accent .kpi-value { font-size: clamp(2rem, 2.8vw, 2.75rem); }

.content-grid {
  grid-template-columns: minmax(0, 1.9fr) minmax(320px, 0.82fr);
  gap: 18px;
  margin-top: 18px;
}

.content-grid.equal { gap: 18px; }

.card,
.document-card,
.subscription-stat,
.app-summary-card,
.mini-stat,
.tax-card,
.salary-result-card,
.vendor-card {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

.card-header {
  min-height: 68px;
  padding: 0 22px;
  border-bottom-color: rgba(27, 55, 48, 0.09);
}

.card-header h3 { font-size: 14px; }
.card-header div > span,
.card-subtitle { color: var(--muted); }

.forecast-card { padding: 28px; }
.forecast-value { font-size: 2.25rem; }
.scenario { border-color: rgba(27, 55, 48, 0.1); background: rgba(238, 240, 232, 0.62); }

.chart-wrap {
  height: 314px;
  padding: 22px 22px 14px;
  background: linear-gradient(180deg, rgba(249, 248, 242, 0.24), rgba(241, 245, 238, 0.46));
}

.chart-svg text { fill: #66766f; font-family: var(--font-label); }
.chart-svg .grid { stroke: rgba(27, 55, 48, 0.095); }
.chart-svg .axis { stroke: rgba(27, 55, 48, 0.16); }
.chart-svg .revenue-line { stroke: #198660; stroke-width: 2.7; }
.chart-svg .expense-line { stroke: #d18a36; stroke-width: 2.2; }
.chart-tooltip rect { fill: #082f32; }

.deadline-item,
.action-item,
.salary-breakdown-row {
  border-bottom-color: rgba(27, 55, 48, 0.085);
}

.date-tile {
  color: var(--navy);
  border: 1px solid rgba(27, 55, 48, 0.08);
  background: #edf1e9;
}

.data-table th {
  color: #536960;
  background: rgba(238, 240, 232, 0.68);
}

.data-table td { border-top-color: rgba(27, 55, 48, 0.08); }
.data-table tbody tr { transition: background-color 260ms var(--ease-out); }
.data-table tbody tr:hover { background: rgba(189, 240, 210, 0.13); }

.vendor-card,
.document-card,
.app-summary-card {
  transition: transform 420ms var(--ease-snap), border-color 300ms var(--ease-out), box-shadow 420ms var(--ease-snap);
}

.vendor-card:hover,
.document-card:hover,
.app-summary-card:hover {
  border-color: rgba(27, 55, 48, 0.22);
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.catalog-filters button,
.pill,
.forecast-badge {
  border-radius: 999px;
}

.modal-backdrop {
  background: rgba(4, 28, 29, 0.7);
  backdrop-filter: blur(12px) saturate(80%);
}

.modal {
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(189, 240, 210, 0.2), transparent 18rem),
    #fffef9;
  box-shadow: 0 36px 110px rgba(3, 27, 27, 0.34);
}

.modal-close {
  border: 1px solid rgba(27, 55, 48, 0.08);
  background: rgba(235, 239, 232, 0.9);
  transition: color 240ms var(--ease-out), background-color 240ms var(--ease-out), transform 320ms var(--ease-snap);
}

.modal-close:hover { color: var(--navy); background: var(--mint); transform: rotate(4deg); }
.drop-zone { border-color: rgba(27, 55, 48, 0.3); background: rgba(238, 242, 234, 0.64); }
.drop-zone:hover,
.drop-zone.dragging { border-color: #2b8f69; background: rgba(189, 240, 210, 0.2); }
.modal-tip,
.apple-setup-steps,
.selected-vendor,
.detail-file-bar { border: 1px solid rgba(27, 55, 48, 0.09); }

.auth-screen {
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 50% 8%, #276365, transparent 34rem),
    #062b2e;
  background-size: 30px 30px, 30px 30px, auto, auto;
}

.auth-card {
  border-radius: 26px;
  background: rgba(255, 254, 249, 0.97);
  box-shadow: 0 40px 120px rgba(0, 15, 16, 0.38);
}

.auth-card h1 { font-family: var(--font-display); font-size: 2.55rem; }

:root[data-theme="dark"] {
  --ink: #e6f0ec;
  --ink-2: #bdcec8;
  --muted: #8fa39c;
  --line: rgba(198, 229, 216, 0.13);
  --line-strong: rgba(198, 229, 216, 0.24);
  --paper: #081b1d;
  --card: rgba(13, 34, 35, 0.94);
  --navy: #061f22;
  --navy-2: #123d40;
  --mint: #a5e9c6;
  --mint-strong: #6bd0a2;
  --amber: #e5a650;
  --amber-soft: rgba(202, 125, 34, 0.16);
  --red: #ee8b80;
  --red-soft: rgba(197, 77, 66, 0.16);
  --blue: #8dadff;
  --blue-soft: rgba(82, 118, 205, 0.17);
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 16px 42px rgba(0, 8, 9, 0.19);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.055) inset, 0 24px 56px rgba(0, 7, 8, 0.32);
}

[data-theme="dark"] body {
  color: var(--ink);
  background:
    radial-gradient(circle at 82% -10%, rgba(53, 130, 103, 0.22), transparent 34rem),
    radial-gradient(circle at 12% 96%, rgba(166, 105, 47, 0.1), transparent 38rem),
    var(--paper);
}

[data-theme="dark"] body::after { opacity: 0.03; filter: invert(1); }
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] .empty-state strong { color: var(--ink); }

[data-theme="dark"] .sidebar {
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 30% 2%, #174c50 0, transparent 30rem),
    #061f22;
  background-size: 28px 28px, 28px 28px, auto, auto;
  box-shadow: 20px 0 70px rgba(0, 7, 8, 0.24);
}

[data-theme="dark"] .topbar {
  background: linear-gradient(180deg, rgba(8, 27, 29, 0.97) 72%, rgba(8, 27, 29, 0));
}

[data-theme="dark"] .eyebrow { color: #89a49b; }
[data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }

[data-theme="dark"] .button.secondary,
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .cloud-account,
[data-theme="dark"] .filter-bar,
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .search-box input,
[data-theme="dark"] .redirect-uri-row input,
[data-theme="dark"] textarea {
  color: var(--ink);
  border-color: var(--line-strong);
  background: rgba(12, 34, 35, 0.84);
}

[data-theme="dark"] .button.secondary:hover,
[data-theme="dark"] .theme-toggle:hover {
  color: var(--ink);
  border-color: rgba(165, 233, 198, 0.42);
  background: rgba(165, 233, 198, 0.11);
}

[data-theme="dark"] .button.primary {
  color: #06282a;
  background: var(--mint);
}

[data-theme="dark"] .filter-bar { box-shadow: var(--shadow-soft); }
[data-theme="dark"] .segmented { border-color: rgba(198, 229, 216, 0.09); background: rgba(3, 18, 19, 0.48); }
[data-theme="dark"] .segmented button { color: var(--muted); }
[data-theme="dark"] .segmented button.active { color: var(--ink); background: #173638; box-shadow: 0 4px 12px rgba(0, 7, 8, 0.24); }
[data-theme="dark"] .filter-reset,
[data-theme="dark"] .text-button { color: #9fc2b5; }
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field select:focus,
[data-theme="dark"] .search-box input:focus,
[data-theme="dark"] textarea:focus { border-color: #6bd0a2; background: #102f30; box-shadow: 0 0 0 4px rgba(107, 208, 162, 0.13); }

[data-theme="dark"] .kpi-card,
[data-theme="dark"] .card,
[data-theme="dark"] .document-card,
[data-theme="dark"] .subscription-stat,
[data-theme="dark"] .app-summary-card,
[data-theme="dark"] .mini-stat,
[data-theme="dark"] .tax-card,
[data-theme="dark"] .salary-result-card,
[data-theme="dark"] .vendor-card,
[data-theme="dark"] .apple-ads-card,
[data-theme="dark"] .apple-key-generator,
[data-theme="dark"] .selected-vendor,
[data-theme="dark"] .provider-detail-intro,
[data-theme="dark"] .detail-file-bar,
[data-theme="dark"] .detail-metric,
[data-theme="dark"] .salary-rate-summary,
[data-theme="dark"] .salary-credit-toggle,
[data-theme="dark"] .detail-table {
  color: var(--ink);
  border-color: var(--line);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

[data-theme="dark"] .kpi-card:hover,
[data-theme="dark"] .vendor-card:hover,
[data-theme="dark"] .document-card:hover,
[data-theme="dark"] .app-summary-card:hover { border-color: rgba(165, 233, 198, 0.28); box-shadow: var(--shadow-lift); }

[data-theme="dark"] .kpi-card.accent {
  border-color: rgba(165, 233, 198, 0.2);
  background:
    radial-gradient(circle at 88% 96%, rgba(165, 233, 198, 0.18), transparent 44%),
    linear-gradient(145deg, #0d4143, #17605c);
}

[data-theme="dark"] .kpi-icon,
[data-theme="dark"] .empty-state span,
[data-theme="dark"] .subscription-stat > span { color: #8ce0b8; background: rgba(107, 208, 162, 0.11); }
[data-theme="dark"] .card-header { border-bottom-color: rgba(198, 229, 216, 0.1); }
[data-theme="dark"] .scenario,
[data-theme="dark"] .date-tile,
[data-theme="dark"] .file-icon,
[data-theme="dark"] .secondary-metrics .detail-metric { color: var(--ink-2); border-color: var(--line); background: rgba(18, 44, 44, 0.74); }
[data-theme="dark"] .progress-rail,
[data-theme="dark"] .scan-track { background: rgba(198, 229, 216, 0.11); }

[data-theme="dark"] .chart-wrap { background: linear-gradient(180deg, rgba(6, 27, 28, 0.18), rgba(3, 21, 22, 0.55)); }
[data-theme="dark"] .chart-svg text { fill: #91a79f; }
[data-theme="dark"] .chart-svg .grid { stroke: rgba(198, 229, 216, 0.1); }
[data-theme="dark"] .chart-svg .axis { stroke: rgba(198, 229, 216, 0.18); }
[data-theme="dark"] .chart-hover-dot { fill: #0b2527; }
[data-theme="dark"] .chart-tooltip rect { fill: #03191b; stroke: rgba(198, 229, 216, 0.18); }

[data-theme="dark"] .data-table th { color: #9aafa8; background: rgba(6, 26, 27, 0.72); }
[data-theme="dark"] .data-table td,
[data-theme="dark"] .deadline-item,
[data-theme="dark"] .action-item,
[data-theme="dark"] .salary-breakdown-row { border-color: rgba(198, 229, 216, 0.09); }
[data-theme="dark"] .data-table tbody tr:hover { background: rgba(107, 208, 162, 0.08); }
[data-theme="dark"] .amount.revenue,
[data-theme="dark"] .trend-up,
[data-theme="dark"] .salary-credit { color: #7fddb1; }

[data-theme="dark"] .pill,
[data-theme="dark"] .forecast-badge { color: #91e2b9; background: rgba(76, 175, 128, 0.14); }
[data-theme="dark"] .pill.amber,
[data-theme="dark"] .forecast-badge.medium { color: #efbd70; background: rgba(202, 125, 34, 0.17); }
[data-theme="dark"] .pill.red { color: #f3a198; background: rgba(197, 77, 66, 0.18); }
[data-theme="dark"] .pill.gray { color: #b2c2bd; background: rgba(198, 229, 216, 0.09); }
[data-theme="dark"] .pill.blue { color: #a9bdff; background: rgba(82, 118, 205, 0.18); }
[data-theme="dark"] .catalog-filters button { color: var(--muted); border-color: var(--line); background: rgba(12, 34, 35, 0.76); }
[data-theme="dark"] .catalog-filters button.active { color: #9fe4c0; border-color: rgba(107, 208, 162, 0.31); background: rgba(107, 208, 162, 0.11); }

[data-theme="dark"] .salary-result-card.pocket,
[data-theme="dark"] .tax-card.primary-tax { color: #fff; border-color: rgba(165, 233, 198, 0.18); background: linear-gradient(145deg, #0d4143, #155554); }
[data-theme="dark"] .salary-result-card.company,
[data-theme="dark"] .salary-tax-bands .tax-credit-band { border-color: rgba(107, 208, 162, 0.22); background: rgba(48, 133, 96, 0.13); }
[data-theme="dark"] .salary-tax-bands > div { border-color: var(--line); }

[data-theme="dark"] .modal-backdrop { background: rgba(0, 10, 11, 0.8); }
[data-theme="dark"] .modal {
  color: var(--ink);
  border-color: rgba(198, 229, 216, 0.13);
  background:
    radial-gradient(circle at 100% 0, rgba(72, 153, 118, 0.15), transparent 20rem),
    #0d2527;
  box-shadow: 0 42px 120px rgba(0, 5, 6, 0.58);
}

[data-theme="dark"] .modal-close { color: var(--muted); border-color: var(--line); background: rgba(198, 229, 216, 0.08); }
[data-theme="dark"] .modal-close:hover { color: #082b2d; background: var(--mint); }
[data-theme="dark"] .drop-zone { color: var(--ink); border-color: rgba(165, 233, 198, 0.3); background: rgba(6, 29, 30, 0.58); }
[data-theme="dark"] .drop-zone:hover,
[data-theme="dark"] .drop-zone.dragging { border-color: #79d6aa; background: rgba(107, 208, 162, 0.1); }
[data-theme="dark"] .modal-tip,
[data-theme="dark"] .apple-setup-steps { color: #b9d7cb; border-color: rgba(107, 208, 162, 0.14); background: rgba(54, 128, 94, 0.12); }
[data-theme="dark"] .modal-tip.amber,
[data-theme="dark"] .notice { color: #e7c486; border-color: rgba(229, 166, 80, 0.25); background: rgba(171, 103, 27, 0.12); }

[data-theme="dark"] .toast { color: #bce3d3; border-color: rgba(107, 208, 162, 0.23); background: #12352f; }
[data-theme="dark"] .toast.error { color: #f2b2aa; border-color: rgba(238, 139, 128, 0.24); background: #3c2322; }
[data-theme="dark"] .vendor-logo { border-color: rgba(27, 55, 48, 0.16); background: #fff; }

[data-theme="dark"] .auth-screen {
  background:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
    radial-gradient(circle at 50% 8%, #18585a, transparent 34rem),
    #041b1d;
  background-size: 30px 30px, 30px 30px, auto, auto;
}

[data-theme="dark"] .auth-card { color: var(--ink); border-color: rgba(198, 229, 216, 0.15); background: rgba(11, 34, 35, 0.98); }
[data-theme="dark"] .auth-card h1 { color: var(--ink); }
[data-theme="dark"] .auth-card .eyebrow,
[data-theme="dark"] .auth-card > p:not(.eyebrow):not(.auth-error),
[data-theme="dark"] .auth-card small { color: var(--muted); }
[data-theme="dark"] .google-signin-button { color: var(--ink); border-color: var(--line-strong); background: #153234; box-shadow: 0 10px 28px rgba(0, 7, 8, 0.26); }

@media (max-width: 1320px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-card:first-child { grid-column: span 1; }
  .content-grid { grid-template-columns: minmax(0, 1.55fr) minmax(290px, .82fr); }
}

@media (max-width: 1080px) {
  .app-shell { grid-template-columns: 86px minmax(0, 1fr); }
  .sidebar { padding-inline: 12px; }
  .brand { justify-content: center; padding-inline: 0; }
  .brand > div:last-child,
  .company-card > div,
  .local-note { display: none; }
  .nav-item { justify-content: center; padding-inline: 8px; font-size: 0; }
  .nav-icon { margin: 0; }
  .nav-count { position: absolute; top: 4px; right: 4px; font-size: 9px; }
  .company-card { justify-content: center; }
  .icon-button { display: none; }
  .main-content { padding-inline: 24px; }
  .topbar { height: 110px; }
  .filter-bar { flex-wrap: wrap; }
  .filter-reset { margin-left: 0; }
  .content-grid,
  .content-grid.equal,
  .salary-detail-grid { grid-template-columns: 1fr; }
  .document-grid,
  .vendor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .app-shell { display: block; }
  .sidebar { position: sticky; z-index: 60; top: 0; width: 100%; height: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 12px; }
  .sidebar::after,
  .sidebar-bottom { display: none; }
  .brand { min-height: 0; padding: 0; border: 0; }
  .brand-mark { width: 38px; height: 38px; }
  .main-nav { display: flex; gap: 4px; margin: 0; overflow-x: auto; }
  .nav-item { min-width: 44px; min-height: 42px; flex: 0 0 44px; }
  .main-content { padding: 0 16px 44px; }
  .topbar { position: static; height: auto; min-height: 112px; flex-wrap: wrap; gap: 14px; padding: 20px 0 16px; background: transparent; }
  .topbar h1 { font-size: 2.1rem; }
  .top-actions { width: 100%; }
  .top-actions .theme-toggle { min-width: 44px; padding-inline: 12px; }
  .top-actions .theme-toggle [data-theme-label] { display: none; }
  .top-actions > .button { flex: 1; }
  .filter-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .segmented { grid-column: 1 / -1; }
  .compact-field { display: grid; gap: 6px; padding: 0; }
  .compact-field input,
  .compact-field select,
  .compact-field:nth-of-type(3) select { width: 100%; min-width: 0; }
  .filter-reset { justify-self: start; }
  .view { padding-top: 28px; }
  .view-header { align-items: flex-start; flex-direction: column; gap: 12px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-card:first-child { grid-column: auto; }
  .content-grid { grid-template-columns: 1fr; }
  .document-grid,
  .vendor-grid,
  .subscription-summary,
  .app-summary-grid,
  .reconcile-summary,
  .salary-hero,
  .tax-hero { grid-template-columns: 1fr; }
  .chart-wrap { height: 270px; overflow-x: auto; }
  .modal-backdrop { padding: 12px; }
  .modal { max-height: calc(100vh - 24px); padding: 26px 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
}

@media print {
  body { background: #fff; }
  body::after { display: none; }
  .card,
  .kpi-card { background: #fff; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}