:root {
  --bg: #e6eeee;
  --surface: #f5f8f7;
  --surface-raised: #f5f8f7;
  --surface-muted: #e0eae8;
  --surface-hover: rgba(255, 255, 255, 0.32);
  --ink: #19333a;
  --muted: #435f64;
  --line: rgba(41, 78, 84, 0.2);
  --line-strong: rgba(36, 74, 78, 0.4);
  --green: #126e70;
  --green-dark: #11565e;
  --green-soft: rgba(215, 242, 236, 0.6);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  --glass-chrome: rgba(255, 255, 255, 0.2);
  --glass-toolbar: rgba(255, 255, 255, 0.18);
  --glass-panel: rgba(255, 255, 255, 0.24);
  --glass-data: rgba(255, 255, 255, 0.28);
  --glass-control: rgba(255, 255, 255, 0.32);
  --crystal-row: rgba(255, 255, 255, 0.18);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-highlight: rgba(255, 255, 255, 0.45);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 0 var(--glass-highlight);
  --glass-blur: blur(24px) saturate(190%);
  --glass-motion: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --wallpaper: linear-gradient(145deg, transparent 8%, rgba(102, 202, 188, 0.2) 26%, transparent 45%, rgba(220, 151, 188, 0.16) 68%, transparent 85%),
    linear-gradient(128deg, #edf6f7 0%, #b8e1eb 24%, #c7eee3 47%, #ead9ee 73%, #f4dbd3 100%);
  font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI",
    "Noto Sans Arabic", sans-serif;
}

:root[data-theme="dark"] {
  --bg: #142720;
  --surface: #1d2b29;
  --surface-raised: #243b37;
  --surface-muted: #2b4942;
  --surface-hover: rgba(255, 255, 255, 0.14);
  --ink: #f2f7f3;
  --muted: #bacdc4;
  --line: rgba(219, 246, 230, 0.2);
  --line-strong: rgba(219, 246, 230, 0.38);
  --green: #9be4bf;
  --green-dark: #c4f1d9;
  --green-soft: rgba(155, 228, 191, 0.17);
  --danger-bg: rgba(130, 42, 42, 0.27);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
  --glass-chrome: rgba(0, 0, 0, 0.22);
  --glass-toolbar: rgba(0, 0, 0, 0.2);
  --glass-panel: rgba(0, 0, 0, 0.19);
  --glass-data: rgba(0, 0, 0, 0.16);
  --glass-control: rgba(255, 255, 255, 0.08);
  --crystal-row: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.25);
  --glass-highlight: rgba(255, 255, 255, 0.45);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 0 var(--glass-highlight);
  --glass-blur: blur(24px) saturate(190%);
  --wallpaper: linear-gradient(145deg, transparent 8%, rgba(129, 220, 173, 0.18) 26%, transparent 46%, rgba(236, 131, 163, 0.13) 68%, transparent 84%),
    linear-gradient(126deg, #142720 0%, #245346 26%, #293a4f 52%, #48354e 75%, #473537 100%);
}

body {
  background: var(--wallpaper) fixed;
}

.topbar,
.workspace-toolbar {
  border: 1px solid var(--glass-border);
  border-radius: 0 0 16px 16px;
  box-shadow: var(--glass-shadow);
}

.metric-card,
.pace-strip,
.chart-panel,
.store-band,
.table-band,
.budget-band,
.report-card,
.skeleton-heading,
.skeleton-card,
.skeleton-panel,
.confirmation-dialog,
.browser-report-dialog,
.report-preview-scroll {
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-data);
  box-shadow: var(--glass-shadow);
}

.metric-card,
.skeleton-heading,
.skeleton-card,
.skeleton-panel {
  background: var(--glass-panel);
}

.metric-card { border-top: 4px solid var(--blue); }
.metric-card.primary-metric { border-top-color: var(--green); }
.metric-card.average-metric { border-top-color: var(--violet); }
.metric-card.receipt-metric { border-top-color: var(--coral); }
.pace-strip { background: var(--glass-toolbar); }

/* List pages remain unframed so each purchase can be its own glass item. */
.table-band:is(.activity-band, .compare-band, .shopping-band, .reports-band) {
  border: 0;
  padding-inline: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.receipt-row,
.payment-row,
.shopping-row,
.price-watch-product,
.product-catalog-row,
.compare-option,
.compare-result-row,
.payments-total,
.filter-chip,
.activity-band tbody tr {
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--crystal-row);
  box-shadow: var(--glass-shadow);
}

.receipt-row,
.payment-row,
.shopping-row,
.price-watch-product,
.product-catalog-row {
  background: var(--crystal-row);
}

.icon-button,
.command-button,
.filter-button,
.month-stepper,
.segmented-control,
.view-tab.active,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="month"],
textarea,
select {
  border-radius: 14px;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea {
  min-width: 0;
  border: 1px solid var(--glass-border);
  padding: 8px 10px;
  background: var(--glass-control);
  color: var(--ink);
}

.month-field input {
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.icon-button,
.command-button,
.filter-button,
.receipt-row,
.payment-row,
.shopping-row,
.product-catalog-row,
.view-tab,
.segmented-control label {
  transition: transform var(--glass-motion), opacity var(--glass-motion),
    background-color var(--glass-motion), border-color var(--glass-motion),
    color var(--glass-motion), box-shadow var(--glass-motion);
}

.icon-button:active,
.command-button:active,
.filter-button:active,
.view-tab:active,
.receipt-row:active,
button.payment-row:active {
  transform: scale(0.97);
}

.view-tab.active,
.filter-button[aria-expanded="true"] {
  background: var(--glass-control);
  box-shadow: inset 0 1px 0 0 var(--glass-highlight);
}

.icon-button:hover,
.filter-button:hover,
.receipt-row:hover,
button.payment-row:hover {
  background: var(--surface-hover);
}

.brand-mark,
.state-mark {
  border-radius: 12px;
}

:root[data-theme="dark"] .brand-mark,
:root[data-theme="dark"] .state-mark,
:root[data-theme="dark"] .command-button:not(.secondary):not(.quiet),
:root[data-theme="dark"] .segmented-control input:checked + label,
:root[data-theme="dark"] .filter-count {
  border-color: #64b394;
  background: #286e58;
  color: #ffffff;
}

:root[data-theme="dark"] .command-button:not(.secondary):not(.quiet):hover {
  background: #1f5a49;
}

.chart-tooltip {
  border-color: var(--glass-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-raised) 74%, transparent);
  color: var(--ink);
  box-shadow: var(--glass-shadow);
}

.report-preview-table th {
  background: color-mix(in srgb, var(--surface-raised) 78%, transparent);
  box-shadow: inset 0 1px 0 0 var(--glass-highlight);
}

.detail-drawer {
  background: var(--glass-chrome);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.24),
    inset 1px 0 0 0 var(--glass-highlight);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .metric-card,
  .pace-strip,
  .chart-panel,
  .store-band,
  .table-band,
  .budget-band,
  .report-card,
  .skeleton-heading,
  .skeleton-card,
  .skeleton-panel,
  .confirmation-dialog,
  .browser-report-dialog,
  .report-preview-scroll,
  .receipt-row,
  .payment-row,
  .shopping-row,
  .price-watch-product,
  .product-catalog-row,
  .compare-option,
  .compare-result-row,
  .payments-total,
  .filter-chip,
  .activity-band tbody tr,
  .chart-tooltip,
  .report-preview-table th,
  .icon-button,
  .filter-button,
  .month-stepper,
  .segmented-control,
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  input[type="month"],
  textarea,
  select {
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}

@media (max-width: 620px) {
  .filter-panel,
  .confirmation-dialog,
  .detail-drawer {
    border-radius: 16px 16px 0 0;
  }

  .filter-panel,
  .filter-panel-actions {
    background: var(--glass-chrome);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #142720;
    --surface: #1d2b29;
    --surface-raised: #243b37;
    --surface-muted: #2b4942;
    --surface-hover: rgba(255, 255, 255, 0.14);
    --ink: #f2f7f3;
    --muted: #bacdc4;
    --line: rgba(219, 246, 230, 0.2);
    --line-strong: rgba(219, 246, 230, 0.38);
    --green: #9be4bf;
    --green-dark: #c4f1d9;
    --green-soft: rgba(155, 228, 191, 0.17);
    --glass-chrome: rgba(0, 0, 0, 0.22);
    --glass-toolbar: rgba(0, 0, 0, 0.2);
    --glass-panel: rgba(0, 0, 0, 0.19);
    --glass-data: rgba(0, 0, 0, 0.16);
    --glass-control: rgba(255, 255, 255, 0.08);
    --crystal-row: rgba(255, 255, 255, 0.07);
    --glass-border: rgba(255, 255, 255, 0.25);
    --glass-highlight: rgba(255, 255, 255, 0.45);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 0 var(--glass-highlight);
    --glass-blur: blur(24px) saturate(190%);
    --wallpaper: linear-gradient(145deg, transparent 8%, rgba(129, 220, 173, 0.18) 26%, transparent 46%, rgba(236, 131, 163, 0.13) 68%, transparent 84%),
      linear-gradient(126deg, #142720 0%, #245346 26%, #293a4f 52%, #48354e 75%, #473537 100%);
  }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root,
  :root[data-theme="dark"],
  :root:not([data-theme="light"]) {
    --glass-chrome: var(--surface-raised);
    --glass-toolbar: var(--surface-muted);
    --glass-panel: var(--surface-raised);
    --glass-data: var(--surface-raised);
    --glass-control: var(--surface);
    --crystal-row: var(--surface-raised);
    --glass-border: var(--line-strong);
    --glass-highlight: transparent;
  }

  .topbar,
  .workspace-toolbar,
  .detail-drawer,
  .filter-panel,
  .filter-panel-actions,
  .metric-card,
  .pace-strip,
  .chart-panel,
  .store-band,
  .table-band,
  .budget-band,
  .report-card,
  .receipt-row,
  .payment-row,
  .shopping-row,
  .price-watch-product,
  .product-catalog-row,
  .compare-option,
  .compare-result-row,
  .payments-total,
  .filter-chip,
  .activity-band tbody tr,
  .icon-button,
  input,
  textarea,
  select {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .table-band:is(.activity-band, .compare-band, .shopping-band, .reports-band) {
    background: transparent;
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root,
  :root[data-theme="dark"],
  :root:not([data-theme="light"]) {
    --glass-chrome: var(--surface-raised);
    --glass-toolbar: var(--surface-muted);
    --glass-panel: var(--surface-raised);
    --glass-data: var(--surface-raised);
    --glass-control: var(--surface);
    --crystal-row: var(--surface-raised);
  }
}

@media (forced-colors: active) {
  body { background: Canvas; }
  .topbar,
  .workspace-toolbar,
  .metric-card,
  .pace-strip,
  .chart-panel,
  .store-band,
  .table-band,
  .budget-band,
  .report-card,
  .receipt-row,
  .payment-row,
  .shopping-row,
  .price-watch-product,
  .product-catalog-row,
  .compare-option,
  .compare-result-row,
  .activity-band tbody tr {
    border-color: CanvasText;
    background: Canvas;
    box-shadow: none;
  }
}