:root {
  --bg: #f1ecf1; --surface: #fffbff; --surface2: #ebe6eb;
  --border: #cac4cf; --border2: #b0aab5;
  --text: #1d1b1e; --text2: #49454c; --text3: #5d5a62;
  --accent: #1a1a1a; --accent-light: #ebe6eb;
  --red: #d32f2f; --green: #2e7d32; --gold: #9a6b10;
  --radius: 24px; --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 1px 3px 1px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 6px 2px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.08);

  /* ── MATERIAL 3 DESIGN TOKENS (official M3 light neutral palette) ── */
  --md-sys-color-primary: #1a1a1a;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #ebe6eb;
  --md-sys-color-on-primary-container: #1a1a1a;
  --md-sys-color-secondary: #605d62;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e8def8;
  --md-sys-color-on-secondary-container: #1d192b;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  /* Inverted relationship: page bg is slightly tinted, containers are brighter */
  --md-sys-color-surface: #f1ecf1;
  --md-sys-color-surface-dim: #ddd8dd;
  --md-sys-color-surface-bright: #ffffff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #fffbff;
  --md-sys-color-surface-container: #f7f2f7;
  --md-sys-color-surface-container-high: #ebe6eb;
  --md-sys-color-surface-container-highest: #e5e0e6;
  --md-sys-color-on-surface: #1d1b1e;
  --md-sys-color-on-surface-variant: #49454c;
  --md-sys-color-outline: #7a757f;
  --md-sys-color-outline-variant: #cac4cf;

  /* Typography — Roboto (M3 default), with Inter as fallback */
  --md-ref-typeface-brand: 'Roboto', 'Inter', sans-serif;
  --md-ref-typeface-plain: 'Roboto', 'Inter', sans-serif;
  --md-sys-typescale-label-large-font: 'Roboto', 'Inter', sans-serif;
  --md-sys-typescale-body-large-font: 'Roboto', 'Inter', sans-serif;

  /* Component overrides — keep your pill aesthetic */
  --md-filled-button-container-shape: 50px;
  --md-filled-button-container-color: var(--md-sys-color-primary);
  --md-filled-button-label-text-color: var(--md-sys-color-on-primary);
  --md-filled-button-label-text-font: 'Roboto', 'Inter', sans-serif;
  --md-filled-button-label-text-weight: 600;
  --md-filled-button-container-height: 40px;
  --md-filled-button-leading-space: 24px;
  --md-filled-button-trailing-space: 24px;

  --md-outlined-button-container-shape: 50px;
  --md-outlined-button-label-text-color: var(--md-sys-color-primary);
  --md-outlined-button-label-text-font: 'Roboto', 'Inter', sans-serif;
  --md-outlined-button-label-text-weight: 600;
  --md-outlined-button-outline-color: var(--md-sys-color-outline);
  --md-outlined-button-container-height: 40px;
  --md-outlined-button-leading-space: 24px;
  --md-outlined-button-trailing-space: 24px;

  --md-text-button-label-text-color: var(--md-sys-color-on-surface-variant);
  --md-text-button-label-text-font: 'Roboto', 'Inter', sans-serif;
  --md-text-button-label-text-weight: 500;

  --md-filled-tonal-button-container-shape: 50px;
  --md-filled-tonal-button-container-color: var(--md-sys-color-secondary-container);
  --md-filled-tonal-button-label-text-color: var(--md-sys-color-on-secondary-container);
  --md-filled-tonal-button-label-text-font: 'Roboto', 'Inter', sans-serif;
  --md-filled-tonal-button-container-height: 40px;

  --md-icon-button-icon-size: 18px;
  --md-icon-button-state-layer-width: 36px;
  --md-icon-button-state-layer-height: 36px;
  --md-icon-button-icon-color: var(--md-sys-color-on-surface-variant);

  /* Outlined text field — keep your rounded aesthetic */
  --md-outlined-text-field-container-shape: 24px;
  --md-outlined-text-field-outline-color: var(--md-sys-color-outline);
  --md-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);
  --md-outlined-text-field-label-text-font: 'Roboto', 'Inter', sans-serif;
  --md-outlined-text-field-input-text-font: 'Roboto', 'Inter', sans-serif;
  --md-outlined-text-field-input-text-size: 14px;
  --md-outlined-text-field-label-text-size: 12px;

  /* State layer color (used for hover/active overlays) */
  --state-layer: 26, 26, 26;
  --state-disabled: rgba(26,26,26,0.12);
  --state-disabled-text: rgba(26,26,26,0.38);

  /* ── MATERIAL 3 MOTION TOKENS ──
   * 
   * MOTION RULES (when to animate, when not to):
   * 
   * 1. ENTRANCE animations (decelerate easing):
   *    - Use spring-default-spatial for "lifted" components (FAB, modals, cards)
   *    - Use emphasized-decelerate for cross-fades, page transitions
   *    - Stagger entrances by 30-50ms for collections (cards, list items)
   *    - Duration: medium4 (400ms) for major, long2 (500ms) for spring entries
   * 
   * 2. EXIT animations (accelerate easing):
   *    - emphasized-accelerate or standard-accelerate
   *    - Always faster than entrances: short4 (200ms) typically
   *    - Things should "throw away" faster than they "land softly"
   * 
   * 3. STATE CHANGES (standard easing):
   *    - Hover background shifts: short3 (150ms) standard
   *    - Press state layers: short3 (150ms) standard 
   *    - Card elevation/tonal hover: medium2 (300ms) standard
   *    - Toggle/switch thumb: medium2 (300ms) spring-default-spatial
   * 
   * 4. CONTENT TRANSITIONS:
   *    - Tab content cross-fade: medium2 (300ms) standard-decelerate
   *    - Accordion expand: medium3 (350ms) emphasized
   *    - Progress bar fill: medium4 (400ms) emphasized-decelerate
   * 
   * 5. NEVER ANIMATE:
   *    - Color (use snap or short3 max)
   *    - Layout-shifting properties on scroll
   *    - Font size or line height (causes reflow jank)
   * 
   * 6. RESPECT prefers-reduced-motion:
   *    - All animations are disabled when user requests reduced motion
   *    - See @media (prefers-reduced-motion: reduce) at bottom of file
   */
  /* Easing curves */
  --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-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-easing-linear: linear;

  /* M3 Expressive spring tokens (introduced with Material 3 Expressive) */
  /* Hand-tuned cubic-bezier approximations as fallback for browsers without linear() support */
  --md-sys-motion-spring-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.9);
  --md-sys-motion-spring-default-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);
  --md-sys-motion-spring-slow-spatial: cubic-bezier(0.27, 1.06, 0.18, 1);
  --md-sys-motion-spring-fast-effects: cubic-bezier(0.31, 0.94, 0.34, 1);
  --md-sys-motion-spring-default-effects: cubic-bezier(0.34, 0.8, 0.34, 1);
  --md-sys-motion-spring-slow-effects: cubic-bezier(0.34, 0.69, 0.1, 1);

  /* Durations */
  --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;
  --md-sys-motion-duration-long3: 550ms;
  --md-sys-motion-duration-long4: 600ms;
  --md-sys-motion-duration-extra-long1: 700ms;
  --md-sys-motion-duration-extra-long2: 800ms;
}

/* ── M3 PHYSICS-BASED SPRING TOKENS ── */
/* When the browser supports CSS linear() timing function (Chrome 113+, Safari 17.4+, 
   Firefox 119+), override the cubic-bezier spring approximations with actual 
   physics-simulated spring curves sampled at 50 points. This produces motion that's 
   indistinguishable from a true physics-based animation library. */
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --md-sys-motion-spring-fast-spatial: linear(
      0.0, 0.0234, 0.0866, 0.1792, 0.2914, 0.4144, 0.5407, 0.6638, 0.7788, 0.882, 
      0.9711, 1.0445, 1.1021, 1.1441, 1.1716, 1.1862, 1.1896, 1.1837, 1.1706, 1.1523, 
      1.1306, 1.1071, 1.0831, 1.06, 1.0385, 1.0193, 1.0029, 0.9895, 0.9791, 0.9716, 
      0.9668, 0.9644, 0.9641, 0.9655, 0.9682, 0.9718, 0.976, 0.9805, 0.985, 0.9893, 
      0.9933, 0.9969, 0.9999, 1.0024, 1.0042, 1.0056, 1.0064, 1.0068, 1.0068, 1.0065, 1.0059
    );
    --md-sys-motion-spring-default-spatial: linear(
      0.0, 0.0119, 0.0445, 0.0937, 0.1557, 0.227, 0.3042, 0.3848, 0.4662, 0.5465, 
      0.6241, 0.6975, 0.7657, 0.8282, 0.8842, 0.9338, 0.9766, 1.013, 1.0431, 1.0672, 
      1.0858, 1.0994, 1.1084, 1.1135, 1.1151, 1.1138, 1.1101, 1.1044, 1.0973, 1.0892, 
      1.0803, 1.071, 1.0616, 1.0524, 1.0435, 1.035, 1.0271, 1.0199, 1.0135, 1.0078, 
      1.0028, 0.9986, 0.9951, 0.9923, 0.9902, 0.9886, 0.9875, 0.987, 0.9868, 0.9869, 0.9873
    );
    --md-sys-motion-spring-slow-spatial: linear(
      0.0, 0.0051, 0.0193, 0.041, 0.069, 0.1018, 0.1385, 0.178, 0.2196, 0.2626, 
      0.3062, 0.3499, 0.3934, 0.4362, 0.4779, 0.5184, 0.5574, 0.5947, 0.6303, 0.6641, 
      0.696, 0.726, 0.754, 0.7802, 0.8045, 0.827, 0.8477, 0.8668, 0.8842, 0.9, 
      0.9145, 0.9275, 0.9392, 0.9497, 0.9591, 0.9675, 0.9749, 0.9814, 0.987, 0.992, 
      0.9962, 0.9998, 1.0029, 1.0054, 1.0076, 1.0093, 1.0106, 1.0117, 1.0124, 1.0129, 1.0133
    );
    --md-sys-motion-spring-fast-effects: linear(
      0.0, 0.0559, 0.1827, 0.3353, 0.4867, 0.622, 0.7347, 0.8235, 0.8902, 0.938, 
      0.9705, 0.9914, 1.0037, 1.0101, 1.0126, 1.0126, 1.0114, 1.0096, 1.0076, 1.0057, 
      1.0041, 1.0028, 1.0018, 1.0011, 1.0006, 1.0002, 1.0, 0.9999, 0.9999, 0.9998, 
      0.9998, 0.9999, 0.9999, 0.9999, 0.9999, 1.0, 1.0, 1.0, 1.0, 1.0, 
      1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0
    );
    --md-sys-motion-spring-default-effects: linear(
      0.0, 0.025, 0.0871, 0.1707, 0.2644, 0.3604, 0.4534, 0.5401, 0.6186, 0.688, 
      0.7482, 0.7996, 0.8427, 0.8784, 0.9076, 0.931, 0.9497, 0.9643, 0.9756, 0.9841, 
      0.9905, 0.9951, 0.9984, 1.0006, 1.002, 1.0029, 1.0033, 1.0034, 1.0033, 1.0031, 
      1.0028, 1.0025, 1.0022, 1.0019, 1.0016, 1.0013, 1.0011, 1.0009, 1.0007, 1.0005, 
      1.0004, 1.0003, 1.0002, 1.0002, 1.0001, 1.0001, 1.0001, 1.0, 1.0, 1.0, 1.0
    );
    --md-sys-motion-spring-slow-effects: linear(
      0.0, 0.0066, 0.0244, 0.0505, 0.0828, 0.1195, 0.1592, 0.2006, 0.2428, 0.2852, 
      0.3271, 0.3682, 0.408, 0.4464, 0.4832, 0.5183, 0.5517, 0.5832, 0.6129, 0.6409, 
      0.6671, 0.6917, 0.7147, 0.7361, 0.756, 0.7746, 0.7919, 0.8079, 0.8228, 0.8365, 
      0.8493, 0.8611, 0.872, 0.8821, 0.8914, 0.9, 0.9079, 0.9153, 0.922, 0.9282, 
      0.934, 0.9393, 0.9441, 0.9486, 0.9528, 0.9566, 0.9601, 0.9633, 0.9662, 0.969, 0.9715
    );
  }
}

/* ── DARK THEME ─────────────────────── */
/* Applied via [data-theme="dark"] on <html> OR via system preference */
:root[data-theme="dark"] {
  /* Base palette */
  --bg: #141218;
  --surface: #141218;
  --surface2: #211f24;
  --border: #38343c;
  --border2: #48454e;
  --text: #e6e1e6;
  --text2: #cac4cf;
  --text3: #a8a3ad;
  --accent: #e6e1e6;
  --accent-light: #211f24;
  --red: #ffb4ab;
  --green: #6fd979;
  --gold: #f3c04d;

  /* Material 3 system colors — official dark neutral palette */
  --md-sys-color-primary: #e6e1e6;
  --md-sys-color-on-primary: #1d1b1e;
  --md-sys-color-primary-container: #3a383c;
  --md-sys-color-on-primary-container: #e6e1e6;
  --md-sys-color-secondary: #cac4cf;
  --md-sys-color-on-secondary: #322f33;
  --md-sys-color-secondary-container: #48454e;
  --md-sys-color-on-secondary-container: #e6e1e6;
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffb4ab;

  /* Official M3 dark surface tonal palette — progressively lighter = higher elevation */
  --md-sys-color-surface: #141218;
  --md-sys-color-surface-dim: #0e0c12;
  --md-sys-color-surface-bright: #3b383e;
  --md-sys-color-surface-container-lowest: #0f0d13;
  --md-sys-color-surface-container-low: #1d1b20;
  --md-sys-color-surface-container: #211f24;
  --md-sys-color-surface-container-high: #2b292f;
  --md-sys-color-surface-container-highest: #36343a;
  --md-sys-color-on-surface: #e6e1e6;
  --md-sys-color-on-surface-variant: #cac4cf;
  --md-sys-color-outline: #948f99;
  --md-sys-color-outline-variant: #48454e;

  --state-layer: 230, 225, 230;
  --state-disabled: rgba(230,225,230,0.12);
  --state-disabled-text: rgba(230,225,230,0.38);
}

/* When theme is "system" (no explicit data-theme), follow OS preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141218;
    --surface: #141218;
    --surface2: #211f24;
    --border: #38343c;
    --border2: #48454e;
    --text: #e6e1e6;
    --text2: #cac4cf;
    --text3: #a8a3ad;
    --accent: #e6e1e6;
    --accent-light: #211f24;
    --red: #ffb4ab;
    --green: #6fd979;
    --gold: #f3c04d;

    --md-sys-color-primary: #e6e1e6;
    --md-sys-color-on-primary: #1d1b1e;
    --md-sys-color-primary-container: #3a383c;
    --md-sys-color-on-primary-container: #e6e1e6;
    --md-sys-color-secondary: #cac4cf;
    --md-sys-color-on-secondary: #322f33;
    --md-sys-color-secondary-container: #48454e;
    --md-sys-color-on-secondary-container: #e6e1e6;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffb4ab;
    --md-sys-color-surface: #141218;
    --md-sys-color-surface-dim: #0e0c12;
    --md-sys-color-surface-bright: #3b383e;
    --md-sys-color-surface-container-lowest: #0f0d13;
    --md-sys-color-surface-container-low: #1d1b20;
    --md-sys-color-surface-container: #211f24;
    --md-sys-color-surface-container-high: #2b292f;
    --md-sys-color-surface-container-highest: #36343a;
    --md-sys-color-on-surface: #e6e1e6;
    --md-sys-color-on-surface-variant: #cac4cf;
    --md-sys-color-outline: #948f99;
    --md-sys-color-outline-variant: #48454e;

    --state-layer: 230, 225, 230;
    --state-disabled: rgba(230,225,230,0.12);
    --state-disabled-text: rgba(230,225,230,0.38);
  }
}

/* Logo: invert in dark mode so the dark chevron becomes light */
:root[data-theme="dark"] img[src*="logo.svg"],
:root[data-theme="dark"] img[src*="estudiost.svg"] {
  filter: invert(1) hue-rotate(180deg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img[src*="logo.svg"],
  :root:not([data-theme="light"]) img[src*="estudiost.svg"] {
    filter: invert(1) hue-rotate(180deg);
  }
}

/* ── DARK MODE ELEVATION PHILOSOPHY ── */
/* In dark mode, elevation is expressed by TONAL SHIFT (lighter = higher), 
   not by shadows. We flatten most shadows and let the surface-container-* 
   tokens do the work. */
:root[data-theme="dark"] .summary-card,
:root[data-theme="dark"] .account-card,
:root[data-theme="dark"] .monthly-header,
:root[data-theme="dark"] .monthly-body,
:root[data-theme="dark"] .tx-card,
:root[data-theme="dark"] .bta-panel-card {
  box-shadow: none;
}
:root[data-theme="dark"] .summary-card:hover,
:root[data-theme="dark"] .account-card:hover,
:root[data-theme="dark"] .monthly-header:hover {
  box-shadow: none;
  background: var(--md-sys-color-surface-container-high);
}
:root[data-theme="dark"] header {
  box-shadow: none;
}
:root[data-theme="dark"] header.scrolled {
  box-shadow: 0 1px 0 var(--md-sys-color-outline-variant);
}
/* Modals keep their shadow in dark mode for focus, but softer */
:root[data-theme="dark"] .modal {
  box-shadow: 0 8px 12px 6px rgba(0,0,0,0.30), 0 4px 4px rgba(0,0,0,0.50);
}
/* Auth/setup cards keep elevation for visual focus */
:root[data-theme="dark"] .auth-card,
:root[data-theme="dark"] .setup-card {
  box-shadow: 0 4px 8px 3px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.50);
}
/* FAB keeps shadow in dark mode (it's the highest-elevation component) */
:root[data-theme="dark"] .fab-add {
  box-shadow: 0 3px 5px -1px rgba(0,0,0,0.4), 0 6px 10px rgba(0,0,0,0.3), 0 1px 18px rgba(0,0,0,0.25);
}
:root[data-theme="dark"] .fab-settings {
  box-shadow: 0 1px 3px 1px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .summary-card,
  :root:not([data-theme="light"]) .account-card,
  :root:not([data-theme="light"]) .monthly-header,
  :root:not([data-theme="light"]) .monthly-body,
  :root:not([data-theme="light"]) .tx-card,
  :root:not([data-theme="light"]) .bta-panel-card {
    box-shadow: none;
  }
  :root:not([data-theme="light"]) .summary-card:hover,
  :root:not([data-theme="light"]) .account-card:hover,
  :root:not([data-theme="light"]) .monthly-header:hover {
    box-shadow: none;
    background: var(--md-sys-color-surface-container-high);
  }
  :root:not([data-theme="light"]) header {
    box-shadow: none;
  }
  :root:not([data-theme="light"]) header.scrolled {
    box-shadow: 0 1px 0 var(--md-sys-color-outline-variant);
  }
  :root:not([data-theme="light"]) .modal {
    box-shadow: 0 8px 12px 6px rgba(0,0,0,0.30), 0 4px 4px rgba(0,0,0,0.50);
  }
  :root:not([data-theme="light"]) .auth-card,
  :root:not([data-theme="light"]) .setup-card {
    box-shadow: 0 4px 8px 3px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.50);
  }
  :root:not([data-theme="light"]) .fab-add {
    box-shadow: 0 3px 5px -1px rgba(0,0,0,0.4), 0 6px 10px rgba(0,0,0,0.3), 0 1px 18px rgba(0,0,0,0.25);
  }
  :root:not([data-theme="light"]) .fab-settings {
    box-shadow: 0 1px 3px 1px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.5);
  }
}

/* Ensure MWC text fields take full width and behave as block elements */
md-outlined-text-field, md-filled-text-field {
  display: block;
  width: 100%;
}
md-filled-button, md-outlined-button, md-text-button, md-filled-tonal-button {
  font-family: 'Roboto', 'Inter', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
*::-webkit-scrollbar { width: 4px; }
*::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
body { font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* ── BUTTONS (Material 3 styled) ────── */
.btn { 
  font-family: 'Roboto', 'Inter', sans-serif; font-size: 14px; 
  padding: 10px 24px; border-radius: 50px; cursor: pointer; 
  font-weight: 500; letter-spacing: 0.1px;
  border: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; 
  height: 40px; box-sizing: border-box; line-height: 1;
  position: relative; overflow: hidden;
  transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
/* M3 state layer overlay */
.btn::before {
  content: ''; position: absolute; inset: 0;
  background: currentColor; opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  pointer-events: none;
}
.btn:hover::before { opacity: 0.08; }
.btn:focus-visible::before { opacity: 0.12; }
.btn:active::before { opacity: 0.12; }

/* M3 Filled button */
.btn-primary { background: var(--accent); color: var(--md-sys-color-on-primary); }

/* M3 Outlined button */
.btn-secondary { background: transparent; color: var(--accent); border: 1px solid var(--border2); }

/* M3 Outlined error */
.btn-danger { background: transparent; color: var(--red); border: 1px solid var(--red); }

.btn:disabled { 
  opacity: 1; cursor: not-allowed; 
  background: var(--state-disabled) !important; 
  color: var(--state-disabled-text) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.btn:disabled::before { display: none; }

/* ── INPUTS (Material 3 outlined text field styling) ─── */
.input { 
  font-family: 'Roboto', 'Inter', sans-serif; font-size: 14px; 
  padding: 0 16px; border-radius: 50px; 
  border: 1px solid var(--border2); 
  background: var(--md-sys-color-surface-container-low); 
  color: var(--text); 
  outline: none; transition: border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard), border-width var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard); 
  width: 100%; height: 40px; box-sizing: border-box; 
}
.input:hover { border-color: var(--text2); }
.input:focus { border-color: var(--accent); border-width: 2px; padding: 0 15px; }
.input::placeholder { color: var(--text3); }

/* Utility: hide on mobile only */
@media (max-width: 430px) {
  .hide-mobile { display: none !important; }
  /* Mobile tabs: equal width, no flex-grow on active to avoid pushing siblings into wrap */
  .tab.active { flex-grow: 1; }
  .tab { padding: 8px 8px; font-size: 12px; }
}

/* Disable all hover effects on touch devices to prevent sticky grey highlights */
@media (hover: none) {
  tr:hover td,
  .pending-display:hover,
  .bta-code-row:hover,
  .summary-card:hover,
  .account-card:hover,
  .month-btn:hover,
  .show-more-btn:hover,
  .icon-btn:hover,
  .icon-btn.del:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-danger:hover,
  .filter-chip:hover,
  .fab:hover,
  .upload-zone:hover,
  th:hover {
    background: inherit !important;
    transform: none !important;
    box-shadow: inherit !important;
    border-color: inherit !important;
    color: inherit !important;
  }
  .filter-chip.active { border-color: var(--accent) !important; color: var(--md-sys-color-on-primary) !important; background: var(--accent) !important; }
}

/* TX expandable detail row — hidden on desktop always */
.tx-detail-row { display: none; }
.tx-detail-content { padding: 12px 16px 16px; background: var(--surface2); }
.tx-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-bottom: 12px; }
.tx-detail-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text3); margin-bottom: 2px; font-weight: 600; }
.tx-detail-grid > div > div:last-child { font-size: 13px; color: var(--text); }
.tx-detail-actions { display: flex; gap: 8px; }
.tx-detail-actions .btn { flex: 1; padding: 10px 16px !important; font-size: 12px !important; height: auto !important; }
.input::placeholder { color: var(--text3); }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 32px; }
.label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text2); font-weight: 500; margin-bottom: 6px; display: block; }

/* ── SEPARATOR ──────────────────────── */
.sep { height: 1px; background: var(--md-sys-color-outline-variant); margin: 24px 0; }

/* ── PROGRESS BAR ───────────────────── */
/* ── M3 Expressive Progress Indicator ── */
.progress-bar { 
  height: 4px; 
  background: var(--md-sys-color-surface-container-highest); 
  border-radius: 4px; 
  position: relative; 
  display: flex;
  align-items: center;
  gap: 4px;
}
.progress-bar .fill { 
  height: 100%; 
  background: var(--accent); 
  border-radius: 4px; 
  transition: width var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate);
  position: relative;
}
/* M3 stop indicator at the end of the filled portion */
.progress-bar .fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
/* Indeterminate/loading variant: animated wave */
.progress-bar.indeterminate .fill {
  width: 30% !important;
  animation: m3-progress-indeterminate 1.6s var(--md-sys-motion-easing-emphasized) infinite;
}
@keyframes m3-progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
.progress-text { font-size: 10px; color: var(--text3); font-style: normal; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; margin-top: 4px; text-align: center; }

/* ── CATEGORY PILL ──────────────────── */
.cat-pill { font-size: 12px; padding: 4px 12px; border-radius: 8px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; height: 24px; box-sizing: border-box; }

/* ── LAYOUT ─────────────────────────── */
.container { max-width: 1060px; margin: 0 auto; padding: 24px 32px 120px; }

/* ── LOGIN / SETUP ──────────────────── */
.auth-screen { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-card { 
  background: var(--md-sys-color-surface-container-low); 
  border: none; 
  border-radius: 28px; 
  padding: 40px 36px; 
  width: 100%; max-width: 420px; 
  box-shadow: 0 4px 8px 3px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.20);
  animation: m3-fade-slide-up var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized-decelerate);
}
.auth-title { font-size: 28px; font-weight: 500; letter-spacing: 0; margin-bottom: 6px; }
.auth-sub { font-size: 14px; color: var(--text2); margin-bottom: 24px; line-height: 1.5; }
.auth-error { 
  font-size: 12px; color: var(--md-sys-color-error); 
  min-height: 18px; margin-top: 8px; 
  display: flex; align-items: center; gap: 6px; 
  justify-content: center;
}
.auth-error:not(:empty)::before {
  font-family: 'Material Symbols Outlined';
  content: 'error';
  font-size: 16px;
  flex-shrink: 0;
}
/* Don't show icon for "loading" / "syncing" messages (color is text3 not red) */
.auth-error[style*="text3"]::before { display: none; }
.step-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent); margin-bottom: 12px; font-weight: 500; }

/* ── FORM GRID ──────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-grid .form-full { grid-column: 1 / -1; }
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.form-row { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.form-row > .form-group { flex: 1; min-width: 140px; margin-bottom: 0; }
.form-grid > .form-group { margin-bottom: 0; }
.form-full { grid-column: 1 / -1; }

/* ── HEADER ─────────────────────────── */
/* M3 Top App Bar */
header { 
  background: var(--md-sys-color-surface-container); 
  border-bottom: none; 
  padding: 14px 32px; 
  display: flex; align-items: center; justify-content: center; 
  position: sticky; top: 0; z-index: 100; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
header.scrolled { box-shadow: 0 2px 4px rgba(0,0,0,0.10), 0 1px 5px rgba(0,0,0,0.06); }
header.scrolled { box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.logo { font-size: 22px; font-weight: 500; letter-spacing: 0; color: var(--text); }

/* M3 Month Selector — like a navigation control */
.month-selector { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 24px; }
.month-btn { 
  background: none; border: none; 
  border-radius: 50%; 
  width: 40px; height: 40px; 
  display: flex; align-items: center; justify-content: center; 
  cursor: pointer; color: var(--text2); font-size: 18px; 
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  position: relative;
}
.month-btn:hover { background: rgba(var(--state-layer),0.08); color: var(--accent); }
.month-btn:active { background: rgba(var(--state-layer),0.12); }
.month-label { font-size: 22px; font-weight: 500; min-width: 180px; text-align: center; letter-spacing: 0; }

/* ── TABS ───────────────────────────── */
.tabs { display: flex; gap: 2px; margin-bottom: 24px; background: var(--md-sys-color-surface-container-high); border-radius: 50px; padding: 3px; }
/* Modifier for tabs sitting inside a modal (modal bg is already container-high, so use highest) */
.tabs.tabs-in-modal { background: var(--md-sys-color-surface-container-highest); margin-bottom: 14px; }
/* M3 Tabs (segmented button group with shape morphing) */
.tab { 
  flex: 1; padding: 8px 12px; border: none; background: transparent; 
  font-family: 'Roboto', 'Inter', sans-serif; font-size: 13px; font-weight: 500; 
  letter-spacing: 0.1px;
  color: var(--text2); cursor: pointer; border-radius: 50px; 
  transition: 
    background var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard), 
    color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
    border-radius var(--md-sys-motion-duration-medium2) var(--md-sys-motion-spring-default-spatial),
    flex-grow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-spring-default-spatial); 
  text-align: center; position: relative; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
  min-width: 0;
}
.tab::before {
  content: ''; position: absolute; inset: 0;
  background: currentColor; opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  pointer-events: none;
  border-radius: inherit;
}
.tab:hover::before { opacity: 0.08; }
/* M3 Expressive: active tab is a squircle (more rounded corners but not full pill),
   visually distinct from inactive pill siblings */
.tab.active { 
  background: var(--accent); color: var(--md-sys-color-on-primary); 
  font-weight: 500; 
  border-radius: 16px;
  flex-grow: 1.15;
}
.tab.active::before { display: none; }
/* M3 Bumping: when pressing any tab, it briefly squishes its rounding,
   neighbors react by squaring their inner-facing corners */
.tab:active:not(.active) { 
  border-radius: 16px;
}
/* Inactive tab adjacent to the pressed/active tab squares its inner corner */
.tabs:has(.tab.active:nth-child(1)) .tab:nth-child(2) { border-radius: 16px 50px 50px 16px; }
.tabs:has(.tab.active:nth-child(2)) .tab:nth-child(1) { border-radius: 50px 16px 16px 50px; }
.tabs:has(.tab.active:nth-child(2)) .tab:nth-child(3) { border-radius: 16px 50px 50px 16px; }
.tabs:has(.tab.active:nth-child(3)) .tab:nth-child(2) { border-radius: 50px 16px 16px 50px; }
.tabs:has(.tab.active:nth-child(3)) .tab:nth-child(4) { border-radius: 16px 50px 50px 16px; }
.tabs:has(.tab.active:nth-child(4)) .tab:nth-child(3) { border-radius: 50px 16px 16px 50px; }
.tabs:has(.tab.active:nth-child(4)) .tab:nth-child(5) { border-radius: 16px 50px 50px 16px; }
.tabs:has(.tab.active:nth-child(5)) .tab:nth-child(4) { border-radius: 50px 16px 16px 50px; }

/* ── TAB PANEL CONTENT TRANSITIONS ── */
/* M3 Shared X-axis transition for sibling navigation between modules */
@keyframes m3-shared-x-forward-in {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes m3-shared-x-backward-in {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Per-element direction classes — added by JS on tab switches */
.m3-tab-enter-forward {
  animation: m3-shared-x-forward-in var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate);
}
.m3-tab-enter-backward {
  animation: m3-shared-x-backward-in var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate);
}

/* Consistent height across tx form panes — prevents layout shift during tab slide */
.tx-form-pane { min-height: 340px; }
@media (max-width: 430px) {
  .tx-form-pane { min-height: 420px; }
}

/* ── TX ROW ENTRANCE ── */
tbody tr {
  animation: m3-stagger-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate) both;
  animation-delay: var(--stagger-delay, 0ms);
}

/* ── MONTHLY EXPENSE ITEM STAGGER ── */
.monthly-body.open .monthly-item {
  animation: m3-stagger-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate) both;
  animation-delay: var(--stagger-delay, 0ms);
}

/* ── BTA CODE ROW STAGGER ── */
.bta-code-row {
  animation: m3-stagger-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate) both;
  animation-delay: var(--stagger-delay, 0ms);
}

/* ── SUMMARY CARDS ──────────────────── */
.summary-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.summary-card { 
  background: var(--md-sys-color-surface-container-low); 
  border: none; 
  border-radius: 12px; 
  padding: 14px 16px; 
  display: flex; align-items: flex-start; gap: 12px; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 1px 3px 1px rgba(0,0,0,0.05);
  transition: box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard), background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  position: relative; overflow: hidden; cursor: default;
  animation: m3-fade-slide-up var(--md-sys-motion-duration-long1) var(--md-sys-motion-easing-emphasized-decelerate) both;
  animation-delay: var(--stagger-delay, 0ms);
}
.summary-card:hover { 
  background: var(--md-sys-color-surface-container-high);
}
.summary-card .accent-line { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.sc-icon { 
  width: 40px; height: 40px; border-radius: 12px; 
  background: var(--md-sys-color-surface-container); 
  display: flex; align-items: center; justify-content: center; 
  font-size: 18px; flex-shrink: 0; 
}
.sc-body { flex: 1; min-width: 0; }
.sc-label { 
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; 
  color: var(--text3); font-weight: 500; margin-bottom: 4px; 
}
.sc-value { 
  font-size: 22px; font-weight: 500; letter-spacing: 0; 
  font-variant-numeric: tabular-nums; 
}
.sc-sub { font-size: 12px; color: var(--text3); margin-top: 4px; }

/* ── ACCOUNTS SECTION ───────────────── */
.accounts-section { margin-bottom: 24px; }
.accounts-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text3); font-weight: 500; }
.account-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.account-card { 
  background: var(--md-sys-color-surface-container-low); 
  border: none; 
  border-radius: 12px; 
  padding: 14px 16px 14px; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 1px 3px 1px rgba(0,0,0,0.05);
  position: relative; overflow: hidden; 
  transition: box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard), background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  animation: m3-card-pop var(--md-sys-motion-duration-medium4) var(--md-sys-motion-spring-default-spatial) both;
  animation-delay: var(--stagger-delay, 0ms);
}
.account-card:hover { 
  background: var(--md-sys-color-surface-container-high);
}
.account-card .color-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.ac-name { font-size: 14px; font-weight: 500; margin-bottom: 1px; line-height: 1.3; }
.ac-type { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text3); font-weight: 500; line-height: 1.3; }
.ac-balance { font-size: 22px; font-weight: 500; margin: 8px 0 6px; font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1.2; }
.ac-detail { font-size: 12px; color: var(--text3); display: flex; justify-content: space-between; padding: 2px 0; line-height: 1.4; }
.ac-detail span:last-child { color: var(--text); font-weight: 500; }

/* ── MONTHLY EXPENSES (M3 elevated card) ── */
.monthly-section { margin-bottom: 24px; }
.monthly-header { 
  display: flex; align-items: center; justify-content: space-between; 
  padding: 16px 20px; 
  background: var(--md-sys-color-surface-container-low); 
  border: none; 
  border-radius: 12px; 
  cursor: pointer; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 1px 3px 1px rgba(0,0,0,0.05);
  transition: border-radius var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard), background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); 
}
.monthly-header:hover { background: var(--md-sys-color-surface-container); }
.monthly-body { 
  background: var(--md-sys-color-surface-container-low); 
  border: none; 
  border-top: 0 solid var(--md-sys-color-outline-variant); 
  border-radius: 0 0 12px 12px; 
  overflow: hidden; 
  max-height: 0; 
  transition: max-height var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-emphasized), border-top-width 0s linear 0s; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 1px 3px 1px rgba(0,0,0,0.05);
}
.monthly-body.open { 
  max-height: 2000px; 
  border-top-width: 1px;
}
.monthly-header.has-body { border-radius: 12px 12px 0 0; box-shadow: none; }
.monthly-header .collapse-chevron { transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized); display: inline-block; }
.monthly-item { 
  display: flex; align-items: center; 
  padding: 12px 20px; 
  border-bottom: 1px solid var(--md-sys-color-outline-variant); 
  gap: 12px; 
}
.monthly-item:last-child { border-bottom: none; }
.mi-info { flex: 1; min-width: 0; }
.mi-name { font-size: 14px; font-weight: 500; }
.mi-meta { font-size: 12px; color: var(--text3); display: flex; gap: 8px; align-items: center; margin-top: 2px; }
.mi-amount { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── TRANSACTION TABLE (M3 list card) ── */
.tx-card { 
  background: var(--md-sys-color-surface-container-low); 
  border: none; 
  border-radius: 12px; 
  overflow: hidden; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 1px 3px 1px rgba(0,0,0,0.05); 
  margin-bottom: 24px; 
}
.tx-header { 
  display: flex; align-items: center; justify-content: space-between; 
  padding: 16px 20px; 
  border-bottom: 1px solid var(--md-sys-color-outline-variant); 
  flex-wrap: wrap; gap: 8px; 
}
.tx-filters { display: flex; gap: 8px; flex-wrap: wrap; }
/* M3 Filter chip */
.filter-chip { 
  font-family: 'Roboto', 'Inter', sans-serif; font-size: 13px; 
  padding: 6px 16px; height: 32px; box-sizing: border-box;
  display: inline-flex; align-items: center;
  border-radius: 8px; 
  border: 1px solid var(--border2); background: transparent; 
  color: var(--text); cursor: pointer; 
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard), border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard); 
  font-weight: 500;
  position: relative; overflow: hidden;
}
.filter-chip::before {
  content: ''; position: absolute; inset: 0;
  background: currentColor; opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  pointer-events: none;
  border-radius: inherit;
}
.filter-chip:hover::before { opacity: 0.08; }
.filter-chip.active { 
  border-color: transparent; color: var(--md-sys-color-on-primary); 
  background: var(--accent); 
  padding-left: 12px;
}
.filter-chip.active::before { display: none; }
table { width: 100%; border-collapse: collapse; table-layout: auto; }
th { 
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; 
  color: var(--text3); 
  padding: 12px 12px; text-align: left; 
  border-bottom: 1px solid var(--md-sys-color-outline-variant); 
  background: transparent; 
  font-weight: 500; cursor: pointer; user-select: none; 
  white-space: nowrap;
}
th:first-child { padding-left: 20px; }
th:last-child { padding-right: 20px; }
th:hover { color: var(--text); }
td { 
  padding: 14px 12px; 
  border-bottom: 1px solid var(--md-sys-color-outline-variant); 
  font-size: 14px; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
/* First and last cells get a bit more side padding for visual breathing room */
td:first-child { padding-left: 20px; }
td:last-child { padding-right: 20px; }
/* Description column gets more room since it's the longest content */
td.td-desc { max-width: 220px; }
/* Inner wrapper enforces truncation reliably (table-layout:auto ignores td max-width when content is wide) */
td.td-desc .td-desc-inner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Fixed column widths for tx tables — prevents long content (descriptions, amounts, account names)
   from pushing right-edge columns (Exch Rate, Actions) past the .tx-card overflow:hidden edge.
   Without this, table-layout:auto lets columns expand past their max-width caps. */
#personal-tx-card table,
#bta-tab-content .tx-card table { table-layout: fixed; }

/* Tighter horizontal padding inside fixed-layout tx tables to reclaim room for content.
   First/last cells keep their breathing room via existing td:first-child / td:last-child rules. */
#personal-tx-card th, #personal-tx-card td,
#bta-tab-content .tx-card th, #bta-tab-content .tx-card td { padding-left: 8px; padding-right: 8px; }
#personal-tx-card th:first-child, #personal-tx-card td:first-child,
#bta-tab-content .tx-card th:first-child, #bta-tab-content .tx-card td:first-child { padding-left: 20px; }
#personal-tx-card th:last-child, #personal-tx-card td:last-child,
#bta-tab-content .tx-card th:last-child, #bta-tab-content .tx-card td:last-child { padding-right: 20px; }

#personal-tx-card th:nth-child(1) { width: 60px; }   /* Date */
#personal-tx-card th:nth-child(3) { width: 100px; }  /* Category */
#personal-tx-card th:nth-child(4) { width: 90px; }   /* Type */
#personal-tx-card th:nth-child(5) { width: 100px; }  /* Source */
#personal-tx-card th#th-target { width: 100px; }     /* Target (multi-curr only) — matches Source */
#personal-tx-card th:nth-child(7) { width: 110px; }  /* Amount */
#personal-tx-card th#th-exch { width: 80px; }        /* Exch Rate (multi-curr only) */
#personal-tx-card th:last-child { width: 110px !important; } /* Actions — overrides inline width:60px on <th> in index.php */

/* BTA table — same treatment. Column order: Date, Desc, Cat, Code, Account, Amount, Status, Actions */
#bta-tab-content .tx-card th:nth-child(1) { width: 60px; }
#bta-tab-content .tx-card th:nth-child(3) { width: 100px; }
#bta-tab-content .tx-card th:nth-child(4) { width: 90px; }
#bta-tab-content .tx-card th:nth-child(5) { width: 100px; }
#bta-tab-content .tx-card th:nth-child(6) { width: 130px; }
#bta-tab-content .tx-card th:nth-child(7) { width: 100px; }
#bta-tab-content .tx-card th:last-child { width: 110px !important; } /* Actions — overrides inline width:60px on <th> in index.php */
/* Amount cells should never wrap or truncate */
td.td-amount, td:has(.amount-pill) { max-width: none; overflow: visible; }
/* Actions column (edit/delete buttons) should never be constrained */
td.td-actions { max-width: none; overflow: visible; }
/* Detail row td is a full-width container, not a data cell — override all truncation rules */
.tx-detail-row td { 
  max-width: none !important; 
  overflow: visible !important; 
  white-space: normal !important; 
  padding: 0 !important;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(var(--state-layer),0.04); }
.amount-pill { display: inline-block; padding: 4px 12px; border-radius: 8px; font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount-expense { background: #d32f2f12; color: var(--red); }
.amount-income { background: #2e7d3215; color: var(--green); }
.amount-transfer { background: #1565c012; color: #1565c0; }
/* M3 Icon button */
.icon-btn { 
  background: none; border: none; cursor: pointer; 
  color: var(--text2); 
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard), color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard); 
  position: relative;
}
.icon-btn:hover { color: var(--accent); background: rgba(var(--state-layer),0.08); }
.icon-btn:active { background: rgba(var(--state-layer),0.12); }
.icon-btn.del:hover { color: var(--red); background: rgba(var(--state-layer),0.08); }
.icon-btn.del:active { background: rgba(var(--state-layer),0.12); }
.no-data { 
  padding: 48px; text-align: center; 
  color: var(--text3); font-size: 14px; 
  background: var(--md-sys-color-surface-dim);
  border-radius: 16px;
  border: 1px dashed var(--md-sys-color-outline-variant);
}
.show-more-btn { 
  display: block; width: 100%; padding: 14px; 
  background: transparent; border: none; 
  border-top: 1px solid var(--md-sys-color-outline-variant); 
  font-family: 'Roboto', 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  color: var(--text2); cursor: pointer; 
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard); 
}
.show-more-btn:hover { background: rgba(var(--state-layer),0.04); color: var(--text); }

/* ── MODAL / OVERLAY ────────────────── */
/* ── M3 RIPPLE EFFECT ── */
@keyframes m3-ripple-expand {
  from { transform: scale(0); opacity: 0.12; }
  to { transform: scale(1); opacity: 0; }
}

/* ── VIEW TRANSITIONS API (container transform) ── */
/* Customize the default cross-fade with M3 emphasized motion */
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--md-sys-motion-duration-medium4);
    animation-timing-function: var(--md-sys-motion-easing-emphasized);
  }
  ::view-transition-old(root) {
    animation-name: m3-vt-fade-out;
  }
  ::view-transition-new(root) {
    animation-name: m3-vt-fade-in;
  }
  /* Container transform: when an element morphs into a modal */
  ::view-transition-old(m3-container-transform),
  ::view-transition-new(m3-container-transform) {
    animation-duration: var(--md-sys-motion-duration-long2);
    animation-timing-function: var(--md-sys-motion-easing-emphasized);
    /* Use blend mode so old and new are visible during the morph */
    mix-blend-mode: normal;
  }
  ::view-transition-old(m3-container-transform) {
    animation-name: m3-vt-fade-out;
  }
  ::view-transition-new(m3-container-transform) {
    animation-name: m3-vt-fade-in;
  }
}
@keyframes m3-vt-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes m3-vt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.m3-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  pointer-events: none;
  transform: scale(0);
  animation: m3-ripple-expand var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard);
  z-index: 0;
}

/* ── M3 ANIMATIONS ─────────────────── */
@keyframes m3-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes m3-overlay-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes m3-modal-in {
  from { opacity: 0; transform: translateY(20px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes m3-modal-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(12px) scale(0.96); }
}
@keyframes m3-bottom-sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes m3-bottom-sheet-out {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}
@keyframes m3-fab-in {
  from { opacity: 0; transform: scale(0.3); }
  60% { transform: scale(1.05); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes m3-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes m3-fade-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes m3-stagger-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes m3-card-pop {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 200; align-items: center; justify-content: center; }
.overlay.open { display: flex; animation: m3-overlay-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard-decelerate); }
.overlay.open .modal { animation: m3-modal-in var(--md-sys-motion-duration-long1) var(--md-sys-motion-spring-default-spatial); }
.overlay.closing { display: flex; animation: m3-overlay-out var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard-accelerate) forwards; }
.overlay.closing .modal { animation: m3-modal-out var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards; }
.modal { 
  background: var(--md-sys-color-surface-container-high); 
  border-radius: 28px; 
  padding: 24px; 
  width: 100%; max-width: 520px; max-height: 90vh; 
  overflow-y: auto; overflow-x: hidden;
  box-shadow: 0 8px 12px 6px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.30); 
  position: relative; 
}
.modal-title { 
  font-size: 24px; font-weight: 400; margin-bottom: 16px; 
  letter-spacing: 0; color: var(--text);
}
.modal-actions { 
  display: flex; gap: 8px; margin-top: 24px; 
  justify-content: flex-end;
}
.modal-actions .btn { flex: 0 0 auto; padding: 10px 24px; }

/* ── M3 Expressive Button Group ── */
/* Connected button group where adjacent buttons "bump" on press */
.btn-group {
  display: inline-flex;
  gap: 2px;
  background: var(--md-sys-color-surface-container-highest);
  padding: 2px;
  border-radius: 50px;
}
.btn-group .btn {
  border-radius: 50px;
  transition: 
    border-radius var(--md-sys-motion-duration-medium2) var(--md-sys-motion-spring-default-spatial),
    flex var(--md-sys-motion-duration-medium2) var(--md-sys-motion-spring-default-spatial),
    background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
/* When a button in the group is pressed/active, it expands its rounding 
   (becomes more pronounced) while its neighbors contract slightly */
.btn-group .btn:active {
  border-radius: 16px;
}
.btn-group .btn:active + .btn,
.btn-group .btn:has(+ .btn:active) {
  border-radius: 50px 16px 16px 50px;
}

/* ── FABs ───────────────────────────── */
/* M3 FAB */
.fab { 
  position: fixed; z-index: 150; 
  width: 56px; height: 56px; border-radius: 16px; 
  border: none; cursor: pointer; 
  display: flex; align-items: center; justify-content: center; 
  transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  overflow: hidden;
  animation: m3-fab-in var(--md-sys-motion-duration-long2) var(--md-sys-motion-spring-default-spatial);
}
.fab::before {
  content: ''; position: absolute; inset: 0;
  background: currentColor; opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  pointer-events: none;
  border-radius: inherit;
}
.fab:hover::before { opacity: 0.08; }
.fab:active::before { opacity: 0.12; }
.fab-add { 
  bottom: 24px; right: 24px; 
  background: var(--accent); color: var(--md-sys-color-on-primary); 
  box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px rgba(0,0,0,0.14), 0 1px 18px rgba(0,0,0,0.12);
  width: 48px; height: 48px;
}
.fab-add:hover { box-shadow: 0 5px 5px -3px rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12); }
.fab-settings { 
  bottom: 24px; left: 24px; 
  background: var(--md-sys-color-surface-container-high); color: var(--text2); 
  box-shadow: 0 1px 3px 1px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.30);
  width: 48px; height: 48px;
}
.fab-add .material-symbols-outlined { font-size: 26px; }
.fab-settings .material-symbols-outlined { font-size: 22px; }

/* ── SETUP WIZARD ───────────────────── */
.setup-screen { position: fixed; inset: 0; z-index: 10000; background: var(--bg); display: none; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
.setup-card { 
  background: var(--md-sys-color-surface-container-low); 
  border: none; 
  border-radius: 28px; 
  padding: 36px; 
  width: 100%; max-width: 520px; 
  box-shadow: 0 4px 8px 3px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.20);
  animation: m3-fade-slide-up var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized-decelerate);
}
#setup-content > * {
  animation: m3-fade-slide-up var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate);
}
.setup-progress { margin-bottom: 28px; }
.setup-progress .progress-bar { height: 4px; }

/* ── COLOR PICKER ───────────────────── */
.color-swatch { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; position: relative; overflow: hidden; flex-shrink: 0; box-sizing: border-box; }
.color-swatch input[type="color"] { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); opacity: 0; cursor: pointer; }

/* ── TOGGLE ─────────────────────────── */
/* M3 Switch */
.toggle-wrap { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.toggle { 
  width: 52px; height: 32px; border-radius: 16px; 
  background: var(--md-sys-color-surface-container-highest); 
  border: 2px solid var(--text3);
  position: relative; cursor: pointer; 
  transition: background var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized), border-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized); 
  flex-shrink: 0; 
}
.toggle.on { 
  background: var(--accent); 
  border-color: var(--accent); 
}
.toggle::after { 
  content: ''; position: absolute; 
  top: 50%; left: 6px; 
  width: 16px; height: 16px; 
  border-radius: 50%; 
  background: var(--text3); 
  transform: translate(0, -50%);
  transition: 
    left var(--md-sys-motion-duration-medium2) var(--md-sys-motion-spring-default-spatial),
    width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-spring-default-spatial),
    height var(--md-sys-motion-duration-medium2) var(--md-sys-motion-spring-default-spatial),
    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.toggle.on::after { 
  left: 22px;
  width: 24px; height: 24px;
  background: var(--md-sys-color-on-primary); 
}
.toggle:active::after {
  width: 28px;
  transition: 
    left var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
    width var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
    height var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.toggle.on:active::after {
  left: 20px;
}
/* State-layer hover glow around the thumb (M3 standard) */
.toggle::before {
  content: ''; position: absolute;
  top: 50%; left: 6px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: translate(-12px, -50%);
  transition: 
    opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    left var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  pointer-events: none;
  color: var(--text3);
}
.toggle:hover::before { opacity: 0.08; }
.toggle:active::before { opacity: 0.12; }
.toggle.on::before { 
  left: 24px; 
  color: var(--accent);
}

/* ── EXCHANGE RATE BOX ──────────────── */
.exch-box { background: var(--md-sys-color-surface-container-highest); border-radius: 16px; padding: 16px; margin-top: 12px; }

/* ── BTA MODULE ──────────────────────── */
.bta-container { display: none; }
.bta-container.active { display: block; }
.bta-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.bta-panel-card { 
  background: var(--md-sys-color-surface-container-low); 
  border: none; 
  border-left: 3px solid var(--gold); 
  border-radius: 12px; 
  overflow: hidden; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 1px 3px 1px rgba(0,0,0,0.05); 
  margin-bottom: 24px; 
}
.bta-panel-header { 
  display: flex; align-items: center; justify-content: space-between; 
  padding: 16px 20px; 
  border-bottom: 1px solid var(--md-sys-color-outline-variant); 
}
.bta-code-row { 
  display: grid; grid-template-columns: 1.5fr auto auto auto auto; 
  align-items: center; gap: 16px; 
  padding: 14px 20px; 
  border-bottom: 1px solid var(--md-sys-color-outline-variant); 
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard); 
  cursor: pointer; 
}
.bta-code-row:last-child { border-bottom: none; }
.bta-code-row:hover { background: rgba(var(--state-layer),0.04); }
.bta-stat { text-align: right; }
.bta-stat-label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; font-weight: 500; }
.bta-stat-value { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.bta-status-badge { font-size: 11px; padding: 4px 12px; border-radius: 8px; font-weight: 500; white-space: nowrap; }
.bta-detail-row { 
  display: flex; align-items: center; justify-content: space-between; 
  padding: 8px 0; font-size: 13px; 
  border-bottom: 1px solid var(--md-sys-color-outline-variant); 
}
.bta-detail-row:last-child { border-bottom: none; }
.charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.chart-card-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); margin-bottom: 12px; font-weight: 600; }
/* M3 Upload zone */
.upload-zone { 
  border: 1px dashed var(--md-sys-color-outline); 
  border-radius: 12px; 
  padding: 16px; text-align: center; cursor: pointer; 
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard), border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard); 
  position: relative; min-height: 80px; 
  display: flex; align-items: center; justify-content: center; 
  flex-direction: column; gap: 6px; 
  background: var(--md-sys-color-surface-container-low);
}
.upload-zone:hover { 
  border-color: var(--accent); 
  background: var(--md-sys-color-surface-container);
}
.upload-zone.has-file { 
  border-style: solid; 
  border-color: var(--accent); 
  background: var(--md-sys-color-surface-container-low);
}
.upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-zone .upload-label { font-size: 12px; color: var(--text2); pointer-events: none; }
.upload-zone .upload-preview { max-width: 100%; max-height: 80px; border-radius: 8px; pointer-events: none; }
.upload-zone .upload-remove { 
  position: absolute; top: 6px; right: 6px; 
  background: var(--red); color: #fff; border: none; 
  border-radius: 50%; width: 20px; height: 20px; 
  font-size: 10px; cursor: pointer; 
  display: flex; align-items: center; justify-content: center; z-index: 2; 
}

/* ── PENDING TX INLINE EDIT ──────── */
.pending-row { border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.pending-row:last-child { border-bottom: none; }
.pending-display { 
  display: flex; align-items: center; gap: 8px; 
  padding: 12px 16px; font-size: 13px; cursor: pointer; 
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard); 
}
.pending-display:hover { background: rgba(var(--state-layer),0.04); }
.pending-edit { 
  max-height: 0; overflow: hidden; 
  background: var(--md-sys-color-surface-container-high); 
  transition: max-height var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized), padding var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized); 
  padding: 0 16px; 
}
.pending-edit.open { max-height: 300px; padding: 16px; }
.pe-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.pe-field { display: flex; flex-direction: column; min-width: 100px; }
.pe-field.pe-grow { flex: 1; min-width: 140px; }
.pe-field .label { margin-bottom: 4px; }
.pe-input { font-size: 13px !important; padding: 8px 12px !important; height: 36px !important; }
.pe-actions { display: flex; gap: 6px; margin-left: auto; }
.pe-actions .btn { padding: 8px 16px !important; font-size: 12px !important; height: 36px !important; }

/* ── MATERIAL SYMBOLS ──────── */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
.ms { /* shorthand */
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
.ms-sm { font-size: 14px; }
.ms-md { font-size: 18px; }
.ms-lg { font-size: 24px; }
.ms-xl { font-size: 32px; }

/* Material icons inside buttons should not get the button's font color filter weirdness */
.btn .ms, .btn .material-symbols-outlined { vertical-align: middle; }
.icon-btn .ms { font-size: 16px; }
.icon-btn .material-symbols-outlined { font-size: 16px; }
.ac-chevron.material-symbols-outlined { font-size: 16px; transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized); }
.collapse-chevron.material-symbols-outlined { font-size: 18px; transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized); }
/* Drag handle Material icon */
.drag-handle.material-symbols-outlined { font-size: 18px; }

/* ── M3 FOCUS INDICATORS (keyboard accessibility) ── */
/* Per M3 spec: 3px outline with 2px offset, using secondary color for high contrast */
:focus-visible {
  outline: none;
}
.btn:focus-visible,
.icon-btn:focus-visible,
.fab:focus-visible,
.tab:focus-visible,
.filter-chip:focus-visible,
.month-btn:focus-visible,
.toggle:focus-visible,
.show-more-btn:focus-visible,
.account-card:focus-visible,
.summary-card:focus-visible,
.bta-code-row:focus-visible {
  outline: 3px solid var(--md-sys-color-secondary);
  outline-offset: 2px;
  z-index: 1;
}
.input:focus-visible,
md-outlined-text-field:focus-visible {
  outline: none; /* outlined text fields use border thickening for focus */
}
/* Ensure interactive elements are keyboard-reachable */
.account-card, .summary-card, .bta-code-row, .toggle {
  /* These are clickable divs — make them focusable */
}

/* ── ACCESSIBILITY: 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;
  }
}

/* ── ARRANGE MODE / DRAG-DROP ──────── */
.account-grid.arranging .account-card { cursor: grab; }
.account-grid.arranging .account-card.dragging { cursor: grabbing; opacity: 0.5; transform: rotate(1deg); box-shadow: var(--shadow-md); }
.account-card.draggable { position: relative; user-select: none; -webkit-user-select: none; }
.drag-handle { 
  position: absolute; top: 8px; right: 8px; 
  width: 28px; height: 28px; 
  display: flex; align-items: center; justify-content: center; 
  background: var(--surface2); border-radius: 50%; 
  font-size: 14px; color: var(--text2); 
  cursor: grab; touch-action: none;
  z-index: 5;
}
.drag-handle:active { cursor: grabbing; }
.drag-placeholder { 
  background: var(--accent-light); 
  border: 2px dashed var(--border2); 
  border-radius: var(--radius-lg); 
  margin-bottom: 12px;
}

/* ── ACCOUNT CARD COLLAPSIBLE ──────── */
/* Desktop: show desktop head (name/type/balance), hide mobile summary, always show details */
.ac-summary { display: none; }
.ac-chevron { display: none; }
.ac-desktop-head { display: block; }
.ac-details { display: block; }

/* ── TABLET ─────────────────────────── */
@media (max-width: 900px) {
  .container { padding: 16px 16px 120px; }
  .summary-cards { grid-template-columns: repeat(2, 1fr); }
  .account-grid { grid-template-columns: 1fr 1fr; }
  .charts-row { grid-template-columns: 1fr; }
  header { padding: 14px 16px; }
}

/* ── MOBILE (430px — matches S26 Ultra viewport) ─────── */
@media (max-width: 430px) {
  body { font-size: 14px; }

  /* Disable hover effects on mobile */
  .summary-card:hover, .account-card:hover { background: var(--md-sys-color-surface-container-low); }

  /* Header — compact */
  header { padding: 10px 12px; }
  header img { height: 22px !important; }

  /* Container — extra bottom padding for FABs */
  .container { padding: 12px 12px 100px; }

  /* Summary cards — single column, compact */
  .summary-cards { grid-template-columns: 1fr; gap: 8px; margin-bottom: 18px; }
  .summary-card { padding: 14px 16px; }
  .sc-icon { display: none; }
  .sc-label { font-size: 10px; }
  .sc-value { font-size: 18px; }
  .sc-sub { font-size: 11px; }
  .accent-line { height: 2px; }

  /* Account cards — stacked list style, collapsible */
  .account-grid { 
    grid-template-columns: 1fr; gap: 0; 
    background: var(--md-sys-color-surface-container-low); 
    border: none; 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 1px 3px 1px rgba(0,0,0,0.05);
  }
  .account-card { 
    border-radius: 0; border: none; 
    border-bottom: 1px solid var(--md-sys-color-outline-variant); 
    padding: 0; box-shadow: none; cursor: pointer; 
    transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard); 
    background: transparent;
  }
  .account-card:hover { background: rgba(var(--state-layer),0.04); }
  .account-card:last-child { border-bottom: none; }
  .account-card .color-bar { display: none; }

  /* Hide desktop head on mobile */
  .ac-desktop-head { display: none !important; }

  /* Summary row — always visible on mobile */
  .ac-summary { display: flex; align-items: center; padding: 14px 16px; gap: 12px; }
  .ac-summary > div:first-child { flex: 1; min-width: 0; }
  .ac-summary .ac-name { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
  .ac-summary .ac-type { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; }
  .ac-summary .ac-balance { font-size: 18px; font-weight: 500; letter-spacing: 0; flex-shrink: 0; }
  .ac-chevron { display: block; font-size: 16px !important; color: var(--text3); margin-left: 4px; transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized); flex-shrink: 0; }

  /* Details — hidden by default on mobile, animated slide */
  .ac-details { display: block; max-height: 0; overflow: hidden; padding: 0 16px; border-top: none; transition: max-height var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-emphasized), padding var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-emphasized); }

  /* Hide desktop-only elements inside card (name/type/balance rendered in summary instead) */
  .account-card > .ac-name, .account-card > .ac-type, .account-card > .ac-balance { display: none; }

  /* Expanded state */
  .account-card.expanded { background: var(--md-sys-color-surface-container); }
  .account-card.expanded .ac-details { max-height: 300px; padding: 0 16px 16px; border-top: 1px solid var(--md-sys-color-outline-variant); }
  .account-card.expanded .ac-chevron { transform: rotate(180deg); }

  /* Color indicator dot instead of full bar */
  .ac-summary::before { content: ''; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--card-color, #888); }

  /* Section labels */
  .section-label { font-size: 11px; }

  /* Module tabs */
  #module-tabs { gap: 4px; }
  #module-tabs .tab { font-size: 12px; padding: 8px 14px; }

  /* ─── MONTHLY EXPENSES (clean stacked layout) ─── */
  .monthly-header { padding: 16px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .monthly-header > div:first-child { width: 100%; }
  .monthly-header > div:last-child { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .monthly-header > div:last-child > span:first-child { font-size: 16px; }

  /* Each monthly item — name on top, meta+amount+button below */
  .monthly-item { 
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas: "info amount" "info button";
    gap: 4px 12px;
    padding: 14px 16px !important;
    align-items: center;
    min-height: auto !important;
  }
  .monthly-item .mi-info { grid-area: info; flex: none !important; min-width: 0; }
  .mi-name { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
  .mi-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; flex-wrap: wrap; }
  .mi-meta .cat-pill { font-size: 11px; padding: 3px 10px; height: auto; }
  .mi-amount { 
    grid-area: amount; 
    font-size: 14px !important; 
    font-weight: 500; 
    text-align: right;
    min-width: auto !important;
    align-self: end;
  }
  /* Pay button on its own row right side */
  .monthly-item > .btn { 
    grid-area: button; 
    justify-self: end; 
    height: 32px !important; 
    padding: 0 16px !important; 
    font-size: 12px !important; 
    min-width: auto !important;
    align-self: start;
    margin-top: 4px;
  }
  /* Hide edit/delete icons on mobile (use long-press or swipe later) */
  .monthly-item > .icon-btn { display: none !important; }
  /* Hide installment progress section on mobile (too cramped) */
  .monthly-item > div[style*="flex:0 0 300px"] { display: none !important; }
  /* Show installment count inline next to name instead */
  .mi-name::after { content: attr(data-installments); font-size: 11px; color: var(--text3); font-weight: 400; margin-left: 6px; }

  /* ─── TRANSACTION TABLE (clean card rows) ─── */
  .tx-header { padding: 16px; flex-wrap: wrap; gap: 10px; }
  .tx-header > div:first-child { width: 100%; flex-wrap: wrap; gap: 6px; }
  .filter-chip { font-size: 12px; padding: 6px 14px; }
  table thead { display: none; }
  table, tbody { display: block; width: 100%; }
  tbody tr { cursor: pointer; }
  tbody tr.tx-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    gap: 10px;
  }
  tbody tr.tx-row td { display: none !important; border: none; padding: 0; }
  tbody tr.tx-row { -webkit-tap-highlight-color: transparent; }
  /* Show ONLY: description + amount */
  tbody tr.tx-row td.td-desc { 
    display: block !important; 
    flex: 1; min-width: 0;
    font-size: 14px; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  tbody tr.tx-row td.td-amount { 
    display: block !important; 
    font-size: 14px; font-weight: 500;
    text-align: right; white-space: nowrap;
    flex-shrink: 0;
  }
  tbody tr.tx-row td.td-amount .amount-pill { padding: 3px 10px; font-size: 13px; }

  /* Mobile detail row — spans full width when expanded */
  .tx-detail-row { display: none; }
  .tx-detail-row.open { display: block; width: 100%; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
  .tx-detail-row.open td { display: block !important; padding: 0; border: none; width: 100%; }
  .tx-detail-row.open .tx-detail-content { width: 100%; box-sizing: border-box; }

  /* Charts — single column, compact */
  .charts-row { grid-template-columns: 1fr; gap: 10px; }

  /* BTA panel */
  .bta-stats-row { grid-template-columns: 1fr; gap: 8px; }
  .bta-code-row { grid-template-columns: 1fr auto auto; gap: 8px; padding: 12px 16px; font-size: 13px; }
  .bta-stat { display: none; }
  .bta-stat:last-of-type { display: block; }
  .bta-code-id { font-size: 12px; }
  .bta-panel-header { padding: 14px 16px; }

  /* Modals — slide up as bottom sheet (M3) */
  .overlay { align-items: flex-end; }
  .overlay.open .modal { animation: m3-bottom-sheet-in var(--md-sys-motion-duration-long1) var(--md-sys-motion-easing-emphasized-decelerate); }
  .overlay.closing .modal { animation: m3-bottom-sheet-out var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-accelerate) forwards; }
  .modal {
    border-radius: 28px 28px 0 0;
    max-width: 100%; width: 100%;
    max-height: 92vh;
    padding: 24px 20px 32px;
    margin: 0;
  }
  /* Settings modal — full screen */
  #settings-overlay .modal {
    border-radius: 0;
    max-height: 100vh; height: 100vh;
    padding: 24px 20px 40px;
    overflow-y: auto;
  }
  .modal-title { font-size: 22px; margin-bottom: 16px; }
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .modal-actions { gap: 8px; margin-top: 16px; padding-top: 14px; }

  /* Auth screens — compact */
  .auth-card { padding: 32px 24px; border-radius: 28px; }
  .auth-title { font-size: 24px; }

  /* Tab pills in modals */
  .modal .tab { font-size: 12px; padding: 8px 14px; }
}