/* ═══════════════════════════════════════════════════════════════════
   Hatian Solver — Material Design 3 Design Token System
   Source: m3.material.io | Indigo primary · Amber tertiary
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. COLOR TOKENS ────────────────────────────────────────────── */
/* Light theme (default) */
:root {
  /* Primary — Indigo */
  --md-sys-color-primary: #6750A4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #EADDFF;
  --md-sys-color-on-primary-container: #21005D;

  /* Secondary — Muted violet */
  --md-sys-color-secondary: #625B71;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E8DEF8;
  --md-sys-color-on-secondary-container: #1D192B;

  /* Tertiary — Warm amber (fun pop) */
  --md-sys-color-tertiary: #BA591E;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFDCC3;
  --md-sys-color-on-tertiary-container: #391600;

  /* Error */
  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #F9DEDC;
  --md-sys-color-on-error-container: #410E0B;

  /* Surface */
  --md-sys-color-surface: #FFFBFE;
  --md-sys-color-on-surface: #1C1B1F;
  --md-sys-color-surface-variant: #E7E0EC;
  --md-sys-color-on-surface-variant: #49454F;

  /* Surface containers (tonal elevation hierarchy) */
  --md-sys-color-surface-dim: #D8D4DB;
  --md-sys-color-surface-bright: #FFFBFE;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F7F2FA;
  --md-sys-color-surface-container: #F2ECF5;
  --md-sys-color-surface-container-high: #ECE6F0;
  --md-sys-color-surface-container-highest: #E6E0EB;

  /* Outline */
  --md-sys-color-outline: #79747E;
  --md-sys-color-outline-variant: #CAC4D0;

  /* Inverse */
  --md-sys-color-inverse-surface: #313033;
  --md-sys-color-inverse-on-surface: #F4EFF4;
  --md-sys-color-inverse-primary: #D0BCFF;

  /* Utility */
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;

  /* Success (extension — not in core M3 but needed for payment badges) */
  --md-sys-color-success: #146C3A;
  --md-sys-color-on-success: #FFFFFF;
  --md-sys-color-success-container: #C7F6D4;
  --md-sys-color-on-success-container: #00210D;

  /* Warning (extension) */
  --md-sys-color-warning: #964900;
  --md-sys-color-on-warning: #FFFFFF;
  --md-sys-color-warning-container: #FFDDB1;
  --md-sys-color-on-warning-container: #412300;

  color-scheme: light;
}

/* Dark theme */
[data-theme="dark"] {
  --md-sys-color-primary: #D0BCFF;
  --md-sys-color-on-primary: #381E72;
  --md-sys-color-primary-container: #4F378B;
  --md-sys-color-on-primary-container: #EADDFF;

  --md-sys-color-secondary: #CCC2DC;
  --md-sys-color-on-secondary: #332D41;
  --md-sys-color-secondary-container: #4A4458;
  --md-sys-color-on-secondary-container: #E8DEF8;

  --md-sys-color-tertiary: #FFB68C;
  --md-sys-color-on-tertiary: #552400;
  --md-sys-color-tertiary-container: #8B3F0A;
  --md-sys-color-on-tertiary-container: #FFDCC3;

  --md-sys-color-error: #F2B8B5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8C1D18;
  --md-sys-color-on-error-container: #F9DEDC;

  --md-sys-color-surface: #1C1B1F;
  --md-sys-color-on-surface: #E6E1E5;
  --md-sys-color-surface-variant: #49454F;
  --md-sys-color-on-surface-variant: #CAC4D0;

  --md-sys-color-surface-dim: #141317;
  --md-sys-color-surface-bright: #3A383C;
  --md-sys-color-surface-container-lowest: #0F0D12;
  --md-sys-color-surface-container-low: #1C1B1F;
  --md-sys-color-surface-container: #201F23;
  --md-sys-color-surface-container-high: #2A292E;
  --md-sys-color-surface-container-highest: #353438;

  --md-sys-color-outline: #938F99;
  --md-sys-color-outline-variant: #49454F;

  --md-sys-color-inverse-surface: #E6E1E5;
  --md-sys-color-inverse-on-surface: #313033;
  --md-sys-color-inverse-primary: #6750A4;

  --md-sys-color-success: #75DC9C;
  --md-sys-color-on-success: #003917;
  --md-sys-color-success-container: #005228;
  --md-sys-color-on-success-container: #C7F6D4;

  --md-sys-color-warning: #FFB863;
  --md-sys-color-on-warning: #4D2500;
  --md-sys-color-warning-container: #6E3800;
  --md-sys-color-on-warning-container: #FFDDB1;

  color-scheme: dark;
}

/* ── 2. TYPOGRAPHY TOKENS ──────────────────────────────────────── */
:root {
  /* Display */
  --md-sys-typescale-display-large: 400 57px/64px Inter, system-ui;
  --md-sys-typescale-display-medium: 400 45px/52px Inter, system-ui;
  --md-sys-typescale-display-small: 400 36px/44px Inter, system-ui;

  /* Headline */
  --md-sys-typescale-headline-large: 400 32px/40px Inter, system-ui;
  --md-sys-typescale-headline-medium: 400 28px/36px Inter, system-ui;
  --md-sys-typescale-headline-small: 400 24px/32px Inter, system-ui;

  /* Title */
  --md-sys-typescale-title-large: 400 22px/28px Inter, system-ui;
  --md-sys-typescale-title-medium: 500 16px/24px Inter, system-ui;
  --md-sys-typescale-title-small: 500 14px/20px Inter, system-ui;

  /* Label */
  --md-sys-typescale-label-large: 500 14px/20px Inter, system-ui;
  --md-sys-typescale-label-medium: 500 12px/16px Inter, system-ui;
  --md-sys-typescale-label-small: 500 11px/16px Inter, system-ui;

  /* Body */
  --md-sys-typescale-body-large: 400 16px/24px Inter, system-ui;
  --md-sys-typescale-body-medium: 400 14px/20px Inter, system-ui;
  --md-sys-typescale-body-small: 400 12px/16px Inter, system-ui;
}

/* ── 3. SHAPE TOKENS ───────────────────────────────────────────── */
:root {
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 999px;
}

/* ── 4. ELEVATION TOKENS ───────────────────────────────────────── */
:root {
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0 1px 2px 0 rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-sys-elevation-level2: 0 1px 2px 0 rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-sys-elevation-level3: 0 1px 3px 0 rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15);
  --md-sys-elevation-level4: 0 2px 3px 0 rgba(0,0,0,.3), 0 6px 10px 4px rgba(0,0,0,.15);
  --md-sys-elevation-level5: 0 4px 4px 0 rgba(0,0,0,.3), 0 8px 12px 6px rgba(0,0,0,.15);
}

/* Tonal elevation overlays (surface tint approach) */
[data-theme="light"] {
  --md-sys-elevation-tint-1: rgba(103,80,164,.05);
  --md-sys-elevation-tint-2: rgba(103,80,164,.08);
  --md-sys-elevation-tint-3: rgba(103,80,164,.11);
  --md-sys-elevation-tint-4: rgba(103,80,164,.12);
  --md-sys-elevation-tint-5: rgba(103,80,164,.14);
}

/* ── 5. MOTION TOKENS ──────────────────────────────────────────── */
:root {
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);

  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;
}

/* ── 6. SPACING SYSTEM ─────────────────────────────────────────── */
:root {
  --md-sys-spacing-0: 0;
  --md-sys-spacing-1: 4px;
  --md-sys-spacing-2: 8px;
  --md-sys-spacing-3: 12px;
  --md-sys-spacing-4: 16px;
  --md-sys-spacing-5: 20px;
  --md-sys-spacing-6: 24px;
  --md-sys-spacing-8: 32px;
  --md-sys-spacing-10: 40px;
  --md-sys-spacing-12: 48px;
  --md-sys-spacing-14: 56px;
}


/* ═══════════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font: var(--md-sys-typescale-body-medium);
  min-height: 100dvh;
  background: inherit;
  color: inherit;
}

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

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Focus ring — M3 spec: 3px primary, 2px offset */
:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

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

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--md-sys-color-outline-variant);
  border-radius: 3px;
}


/* ═══════════════════════════════════════════════════════════════════
   LAYOUT — App Shell & Navigation
   ═══════════════════════════════════════════════════════════════════ */

.app {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}

/* ── Navigation Drawer (desktop, permanent) ───────────────────── */
.drawer {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-6);
  padding: var(--md-sys-spacing-5) var(--md-sys-spacing-3);
  background: var(--md-sys-color-surface-container-low);
  border-inline-end: 1px solid var(--md-sys-color-outline-variant);
}

.brand {
  display: flex;
  gap: var(--md-sys-spacing-3);
  align-items: center;
  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-3);
}

.mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font: var(--md-sys-typescale-title-medium);
  font-weight: 800;
}

.brand h2 {
  font: var(--md-sys-typescale-title-large);
  font-weight: 700;
  margin: 0;
}

.brand p {
  font: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 2px;
}

.nav-label {
  font: var(--md-sys-typescale-label-medium);
  color: var(--md-sys-color-on-surface-variant);
  padding: 0 var(--md-sys-spacing-4) var(--md-sys-spacing-2);
  letter-spacing: .5px;
  text-transform: uppercase;
}

.nav {
  display: grid;
  gap: var(--md-sys-spacing-1);
}

.nav-btn {
  height: 56px;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  text-align: start;
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-3);
  padding: 0 var(--md-sys-spacing-4);
  font: var(--md-sys-typescale-label-large);
  color: var(--md-sys-color-on-surface-variant);
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}

.nav-btn:hover { background: var(--md-sys-color-surface-container-highest); }
.nav-btn:active { background: var(--md-sys-color-surface-container-highest); }

.nav-btn.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

/* Material Symbols base */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.nav-icon {
  font-size: 20px;
  width: 24px;
  text-align: center;
  flex: none;
  line-height: 1;
}

.nav-spacer { flex: 1; }

.theme-box {
  border-top: 1px solid var(--md-sys-color-outline-variant);
  padding: var(--md-sys-spacing-4) var(--md-sys-spacing-3) 0;
}

.theme-box label {
  display: block;
  font: var(--md-sys-typescale-label-medium);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: var(--md-sys-spacing-2);
}

/* ── Main content area ─────────────────────────────────────────── */
main {
  min-width: 0;
  padding-bottom: var(--md-sys-spacing-10);
}

.top-bar {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-spacing-5);
  padding: 0 clamp(24px, 4vw, 56px);
}

.top-bar .kicker {
  font: var(--md-sys-typescale-label-medium);
  color: var(--md-sys-color-on-surface-variant);
  letter-spacing: .5px;
  margin: 0 0 2px;
}

.top-bar h1 {
  font: var(--md-sys-typescale-headline-medium);
  font-weight: 700;
  margin: 0;
}

.content {
  width: min(100%, 1440px);
  margin: auto;
  padding: 0 clamp(24px, 4vw, 56px);
}

.page {
  display: none;
}

.page.active {
  display: block;
  animation: page-enter var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate) both;
}

@keyframes page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Buttons ───────────────────────────────────────────────────── */

/* Base button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-sys-spacing-2);
  min-height: 48px;
  min-width: 48px;
  padding: 0 var(--md-sys-spacing-6);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-large);
  letter-spacing: .1px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              filter var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-emphasized);
  -webkit-tap-highlight-color: transparent;
}

/* Filled button — highest emphasis, one per screen max */
.btn-filled {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.btn-filled:hover { box-shadow: var(--md-sys-elevation-level1); }
.btn-filled:active { filter: brightness(.88); }
.btn-filled:disabled {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
  box-shadow: none;
  cursor: not-allowed;
}

/* Filled tonal — high emphasis */
.btn-tonal {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.btn-tonal:hover {
  box-shadow: var(--md-sys-elevation-level1);
  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container));
}
.btn-tonal:active { filter: brightness(.88); }

/* Elevated — medium-high emphasis */
.btn-elevated {
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-primary);
  box-shadow: var(--md-sys-elevation-level1);
}
.btn-elevated:hover {
  box-shadow: var(--md-sys-elevation-level2);
  background: color-mix(in srgb, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface-container-low));
}
.btn-elevated:active { box-shadow: var(--md-sys-elevation-level1); }

/* Outlined — medium emphasis */
.btn-outlined {
  background: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
}
.btn-outlined:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
.btn-outlined:active {
  background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}

/* Text — low emphasis */
.btn-text {
  background: transparent;
  color: var(--md-sys-color-primary);
  padding: 0 var(--md-sys-spacing-3);
}
.btn-text:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
.btn-text:active {
  background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}

/* Icon button */
.icon-btn {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: transparent;
  font-size: 20px;
  display: grid;
  place-items: center;
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.icon-btn:hover { background: var(--md-sys-color-surface-container-highest); }
.icon-btn:active {
  background: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, var(--md-sys-color-surface-container-highest));
}

/* ── Cards ─────────────────────────────────────────────────────── */

.card {
  padding: var(--md-sys-spacing-6);
  border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-surface-container-low);
}

.card-filled {
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-large);
}

.card-outlined {
  background: transparent;
  border: 1px solid var(--md-sys-color-outline-variant);
}

.card h2 {
  font: var(--md-sys-typescale-title-large);
  font-weight: 700;
  margin: 0 0 var(--md-sys-spacing-1);
}

.card-sub {
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0;
}

.field label .card-sub {
  font: inherit;
  color: var(--md-sys-color-on-surface-variant);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--md-sys-spacing-3);
  margin-bottom: var(--md-sys-spacing-5);
}

/* ── Chips ─────────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--md-sys-spacing-4);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  background: transparent;
  font: var(--md-sys-typescale-label-medium);
  color: var(--md-sys-color-on-surface-variant);
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.chip:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
}
.chip.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}
.chip:active {
  background: var(--md-sys-color-secondary-container);
}

/* ── Text Fields & Select ──────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-2);
  min-width: 0;
  overflow: hidden;
  contain: inline-size;
}

.field label {
  font: var(--md-sys-typescale-label-medium);
  color: var(--md-sys-color-on-surface-variant);
  margin-inline-start: var(--md-sys-spacing-1);
}

.control {
  height: 56px;
  width: 100%;
  min-width: 0;
  padding: 0 var(--md-sys-spacing-4);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: transparent;
  font: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-on-surface);
  transition: border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}

.control:focus {
  border: 2px solid var(--md-sys-color-primary);
  padding-inline: calc(var(--md-sys-spacing-4) - 1px);
  outline: none;
}

.control:disabled {
  opacity: .38;
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent);
}

/* Select — custom M3 chevron */
select.control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%2379747E' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px;
  padding-inline-end: 48px;
}
[data-theme="dark"] select.control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23938F99' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

/* Theme select */
.select {
  height: 48px;
  width: 100%;
  padding: 0 var(--md-sys-spacing-3);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-medium);
  background: transparent;
  font: var(--md-sys-typescale-body-medium);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%2379747E' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-inline-end: 40px;
}
[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23938F99' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

/* Date input — force to respect grid column width */
input[type="date"] {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
input[type="date"]::-webkit-datetime-edit {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Money field */
.money-wrap {
  display: flex;
  align-items: center;
  height: 56px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: transparent;
  transition: border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.money-wrap:focus-within {
  border: 2px solid var(--md-sys-color-primary);
}
.money-wrap .peso-sign {
  padding-inline-start: var(--md-sys-spacing-4);
  font: var(--md-sys-typescale-headline-small);
  font-weight: 700;
  color: var(--md-sys-color-on-surface-variant);
  flex: none;
  user-select: none;
}
.money-wrap input {
  height: 100%;
  flex: 1;
  min-width: 0;
  border: none;
  padding: 0 var(--md-sys-spacing-4);
  background: transparent;
  font: var(--md-sys-typescale-headline-small);
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
}
.money-wrap input:focus {
  outline: none;
}

/* ── Checkboxes (person selection) ─────────────────────────────── */

.check-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--md-sys-spacing-2);
}

.person-check {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-3);
  padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container-low);
  font: var(--md-sys-typescale-label-large);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.person-check:hover {
  background: var(--md-sys-color-surface-container);
}
.person-check:has(input:checked) {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: var(--md-sys-color-secondary);
}
.person-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--md-sys-color-primary);
}

/* ── Segmented button ──────────────────────────────────────────── */

.segmented-btn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  margin: var(--md-sys-spacing-6) 0;
}

.segmented-btn button {
  height: 40px;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  font: var(--md-sys-typescale-label-large);
  color: var(--md-sys-color-on-surface-variant);
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.segmented-btn button:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
.segmented-btn button.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

/* ── Badge ─────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--md-sys-spacing-2);
  border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-small);
  font-weight: 800;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.badge.success {
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}

/* ── Avatar ────────────────────────────────────────────────────── */

.avatar {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: var(--md-sys-typescale-label-medium);
  font-weight: 800;
}
.avatar.small {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

/* ── Toast / Snackbar ──────────────────────────────────────────── */

.toast {
  position: fixed;
  z-index: 100;
  bottom: var(--md-sys-spacing-6);
  inset-inline-start: 50%;
  transform: translate(-50%, 140px);
  min-width: min(420px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-spacing-3);
  padding: var(--md-sys-spacing-4) var(--md-sys-spacing-5);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  box-shadow: var(--md-sys-elevation-level3);
  font: var(--md-sys-typescale-body-medium);
  transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
}
.toast.show {
  transform: translate(-50%, 0);
}
.toast button {
  border: none;
  background: transparent;
  color: var(--md-sys-color-inverse-primary);
  font: var(--md-sys-typescale-label-large);
  white-space: nowrap;
}

/* ── Dialog / Modal ────────────────────────────────────────────── */

.dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 64px);
  margin: auto;
  border: none;
  padding: 0;
  border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-level3);
  overflow: visible;
}
.dialog::backdrop {
  background: rgba(0,0,0,.32);
}
.dialog-body {
  padding: var(--md-sys-spacing-6);
}
.dialog-body h2 {
  font: var(--md-sys-typescale-headline-small);
  font-weight: 700;
  margin: 0 0 var(--md-sys-spacing-2);
}
.dialog-body p {
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--md-sys-spacing-2);
  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4) var(--md-sys-spacing-4);
}

/* ── Progress indicator (linear) ───────────────────────────────── */

.linear-progress {
  position: fixed;
  z-index: 200;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 4px;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
}
.linear-progress.active {
  opacity: 1;
}
.linear-progress::after {
  content: '';
  display: block;
  width: 30%;
  height: 100%;
  background: var(--md-sys-color-primary);
  border-radius: 0 2px 2px 0;
  animation: indeterminate 1.4s var(--md-sys-motion-easing-emphasized) infinite;
}
@keyframes indeterminate {
  0%   { transform: translateX(-100%) scaleX(1); }
  50%  { transform: translateX(150%) scaleX(1.2); }
  100% { transform: translateX(400%) scaleX(.8); }
}

/* ── Table ─────────────────────────────────────────────────────── */

.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th {
  text-align: start;
  font: var(--md-sys-typescale-label-medium);
  color: var(--md-sys-color-on-surface-variant);
  padding: var(--md-sys-spacing-3) var(--md-sys-spacing-3);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.data-table td {
  font: var(--md-sys-typescale-body-medium);
  padding: var(--md-sys-spacing-3) var(--md-sys-spacing-3);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  vertical-align: middle;
}
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Empty state ───────────────────────────────────────────────── */

.empty {
  padding: var(--md-sys-spacing-8) var(--md-sys-spacing-2);
  text-align: center;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-medium);
}

/* ── Amount display ────────────────────────────────────────────── */

.amount {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.amount.negative {
  color: var(--md-sys-color-error);
}

/* ── Helper text ───────────────────────────────────────────────── */

.helper {
  font: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-on-surface-variant);
  margin-top: var(--md-sys-spacing-2);
}


/* ═══════════════════════════════════════════════════════════════════
   PAGE-SPECIFIC — Record
   ═══════════════════════════════════════════════════════════════════ */

.record-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: var(--md-sys-spacing-6);
  align-items: start;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--md-sys-spacing-4);
}
.form-grid .full { grid-column: 1 / -1; }

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--md-sys-spacing-2);
  margin-top: var(--md-sys-spacing-6);
}

/* Preview card */
/* ── Preview card — squircle top, flat bottom ─────────────────── */
.preview-hero {
  padding: var(--md-sys-spacing-6);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
}
.preview-hero .eyebrow {
  font: var(--md-sys-typescale-label-medium);
  letter-spacing: .5px;
  text-transform: uppercase;
  opacity: .72;
  margin: 0 0 var(--md-sys-spacing-2);
}
.preview-hero .big-amount {
  font: var(--md-sys-typescale-display-small);
  font-weight: 800;
  margin: 0;
}
.preview-hero p:last-child {
  font: var(--md-sys-typescale-body-medium);
  margin: var(--md-sys-spacing-2) 0 0;
  opacity: .85;
}
.preview-lines {
  padding: var(--md-sys-spacing-3) var(--md-sys-spacing-5) var(--md-sys-spacing-5);
}
.preview-line {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: var(--md-sys-spacing-3);
  align-items: center;
  padding: var(--md-sys-spacing-3) 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.preview-line:last-child { border: none; }
.preview-line strong {
  display: block;
  font-weight: 700;
}
.preview-line small {
  display: block;
  font: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-on-surface-variant);
}

/* Callout (payment preview) */
.callout {
  display: flex;
  gap: var(--md-sys-spacing-3);
  padding: var(--md-sys-spacing-4);
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
  font: var(--md-sys-typescale-body-small);
  margin-top: var(--md-sys-spacing-4);
}
.callout b { display: block; font-weight: 700; margin-bottom: 4px; }
.callout p { margin: 0; }

/* Recent activity */
.recent-activity {
  margin-top: var(--md-sys-spacing-6);
}
.recent-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: var(--md-sys-spacing-3);
  align-items: center;
  padding: var(--md-sys-spacing-4) 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.recent-row:last-child { border: none; }
.recent-row b {
  display: block;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-row small {
  display: block;
  font: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-on-surface-variant);
}


/* ═══════════════════════════════════════════════════════════════════
   PAGE-SPECIFIC — Balances
   ═══════════════════════════════════════════════════════════════════ */

.settlement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--md-sys-spacing-4);
}

.settlement-group {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  overflow: hidden;
  background: var(--md-sys-color-surface-container-low);
}

.settlement-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: var(--md-sys-spacing-3);
  align-items: center;
  padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.settlement-head b {
  display: block;
  font: var(--md-sys-typescale-label-large);
}
.settlement-head small {
  display: block;
  font: var(--md-sys-typescale-body-small);
  opacity: .78;
}
.settlement-total {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.settlement-items {
  padding: var(--md-sys-spacing-1) var(--md-sys-spacing-4) var(--md-sys-spacing-2);
}
.settlement-item {
  min-height: 52px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: var(--md-sys-spacing-2);
  align-items: center;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.settlement-item:last-child { border: none; }
.settlement-item b {
  display: block;
  font: var(--md-sys-typescale-body-medium);
  font-weight: 700;
}
.settlement-item small {
  display: block;
  font: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-on-surface-variant);
}
.settlement-item .item-right {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-2);
}

.chip-row {
  display: flex;
  gap: var(--md-sys-spacing-2);
  flex-wrap: wrap;
  margin: var(--md-sys-spacing-4) 0 var(--md-sys-spacing-2);
}

.ledger-section { margin-top: var(--md-sys-spacing-6); }


/* ═══════════════════════════════════════════════════════════════════
   PAGE-SPECIFIC — People
   ═══════════════════════════════════════════════════════════════════ */

.people-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .45fr);
  gap: var(--md-sys-spacing-6);
  align-items: start;
}

.member-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--md-sys-spacing-4);
  padding: var(--md-sys-spacing-4) 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.member-row:last-child { border: none; }

.member-info {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-2);
  min-width: 0;
}
.member-name-row {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-2);
  flex-wrap: wrap;
}
.member-name-row b {
  font: var(--md-sys-typescale-title-small);
  font-weight: 700;
}
.member-info small {
  font: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-on-surface-variant);
}

.member-actions {
  display: flex;
  gap: var(--md-sys-spacing-2);
  flex: none;
  align-items: center;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 24px;
  padding: 0 var(--md-sys-spacing-2);
  border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-small);
  font-weight: 800;
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}
.status-chip.archived {
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface-variant);
}

.settings-group {
  margin-top: var(--md-sys-spacing-5);
}
.settings-group:first-child { margin-top: 0; }
.settings-group h3 {
  font: var(--md-sys-typescale-label-large);
  font-weight: 700;
  margin: 0 0 var(--md-sys-spacing-3);
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--md-sys-spacing-3);
  padding: var(--md-sys-spacing-3) 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.setting-row b { display: block; font-weight: 700; }
.setting-row small {
  display: block;
  font: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 2px;
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE NAVIGATION
   ═══════════════════════════════════════════════════════════════════ */

.mobile-nav {
  display: none;
  position: fixed;
  z-index: 50;
  bottom: var(--md-sys-spacing-4);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 420px;
  height: 80px;
  padding: var(--md-sys-spacing-2);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-surface-container);
  box-shadow: var(--md-sys-elevation-level2);
}

.mobile-nav .nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  height: 100%;
}

.mobile-nav .nav-btn {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--md-sys-shape-corner-large);
}
.mobile-nav .nav-btn .nav-icon {
  font-size: 24px;
  width: auto;
}


/* ═══════════════════════════════════════════════════════════════════
   BREAKPOINTS (M3 window size classes)
   ═══════════════════════════════════════════════════════════════════ */

/* Compact: 0–599dp → bottom nav bar replaces drawer */
@media (max-width: 599px) {
  .app { display: block; }
  .drawer { display: none; }
  .top-bar { height: 72px; padding: 0 var(--md-sys-spacing-5); }
  .top-bar h1 { font-size: 24px; }
  .content { padding: 0 var(--md-sys-spacing-4); }
  .card { padding: var(--md-sys-spacing-5); }

  .record-layout,
  .people-layout {
    grid-template-columns: 1fr;
    gap: var(--md-sys-spacing-4);
  }

  .settlement-grid {
    grid-template-columns: 1fr;
    gap: var(--md-sys-spacing-3);
  }

  .mobile-nav { display: block; }
  body { padding-bottom: 120px; }

  /* Shrink date text on mobile — Android date picker format is too long */
  input[type="date"] {
    font: var(--md-sys-typescale-body-medium);
    padding: 0 var(--md-sys-spacing-2);
    letter-spacing: -0.2px;
  }
  input[type="date"]::-webkit-datetime-edit {
    font: var(--md-sys-typescale-body-medium);
  }
}

/* Medium: 600–839dp → navigation rail (compact side nav) */
@media (min-width: 600px) and (max-width: 839px) {
  .app { grid-template-columns: 80px minmax(0, 1fr); }
  .drawer {
    padding: var(--md-sys-spacing-4) var(--md-sys-spacing-2);
    align-items: center;
    text-align: center;
  }
  .brand { justify-content: center; padding: var(--md-sys-spacing-2); }
  .brand .brand-copy,
  .nav-label,
  .nav-btn span:not(.nav-icon),
  .theme-box { display: none; }
  .nav-btn { justify-content: center; padding: 0; }
  .nav-icon { font-size: 22px; }

  .record-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  .form-grid,
  .check-group {
    grid-template-columns: 1fr;
  }
  .form-grid .full { grid-column: auto; }
  .settlement-grid { grid-template-columns: 1fr 1fr; }
}

/* Expanded: 840–1199dp */
@media (min-width: 840px) and (max-width: 1199px) {
  .settlement-grid { grid-template-columns: 1fr 1fr; }
}

/* Large: 1200–1599dp */
@media (min-width: 1200px) and (max-width: 1599px) {
  /* Permanent drawer already in base layout */
}

/* Extra-Large: 1600dp+ */
@media (min-width: 1600px) {
  .content { max-width: 1600px; }
}