/* ═══════════════════════════════════════════════════════
   Material 3 Expressive — Design System
   Seed color: #1B6B5A (Expressive Teal)
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800;14..32,900&family=Noto+Sans+SC:wght@300;400;500;600;700;800;900&family=Caveat:wght@400;500;600;700&display=swap');

/* ─── M3 Ref Tokens ─── */
:root {
  /* Seed color based palette */
  --m3-primary: #1B6B5A;
  --m3-on-primary: #FFFFFF;
  --m3-primary-container: #BEF2E0;
  --m3-on-primary-container: #002018;

  --m3-secondary: #4B6358;
  --m3-on-secondary: #FFFFFF;
  --m3-secondary-container: #CDE8DA;
  --m3-on-secondary-container: #082016;

  --m3-tertiary: #3F6374;
  --m3-on-tertiary: #FFFFFF;
  --m3-tertiary-container: #C1E8FC;
  --m3-on-tertiary-container: #001F29;

  --m3-error: #BA1A1A;
  --m3-on-error: #FFFFFF;
  --m3-error-container: #FFDAD6;
  --m3-on-error-container: #410002;

  /* Surface colors - warm neutral */
  --m3-background: #F5F3F0;
  --m3-on-background: #1C1A18;
  --m3-surface: #FBF9F6;
  --m3-on-surface: #1C1A18;
  --m3-surface-variant: #DEE4DC;
  --m3-on-surface-variant: #42483E;
  --m3-outline: #72786D;
  --m3-outline-variant: #C2C8BC;
  --m3-shadow: #000000;
  --m3-surface-tint: #1B6B5A;

  /* Surface elevations */
  --m3-surface-1: linear-gradient(0deg, rgba(27,107,90,0.05), rgba(27,107,90,0.05)), #FBF9F6;
  --m3-surface-2: linear-gradient(0deg, rgba(27,107,90,0.08), rgba(27,107,90,0.08)), #FBF9F6;
  --m3-surface-3: linear-gradient(0deg, rgba(27,107,90,0.11), rgba(27,107,90,0.11)), #FBF9F6;
  --m3-surface-4: linear-gradient(0deg, rgba(27,107,90,0.12), rgba(27,107,90,0.12)), #FBF9F6;
  --m3-surface-5: linear-gradient(0deg, rgba(27,107,90,0.14), rgba(27,107,90,0.14)), #FBF9F6;

  /* Expressive additions */
  --m3-expressive-accent: #D4885A;
  --m3-expressive-on-accent: #FFFFFF;
  --m3-expressive-accent-container: #FFDCC2;
  --m3-expressive-gradient-1: linear-gradient(135deg, #1B6B5A, #3F6374);
  --m3-expressive-gradient-2: linear-gradient(135deg, #BEF2E0, #C1E8FC);
  --m3-expressive-gradient-surface: linear-gradient(180deg, #FDFCFA 0%, #F5F3F0 100%);
  --m3-noise-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");

  /* Typography */
  --m3-font-display: 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
  --m3-font-body: 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
  --m3-font-mono: 'SF Mono', 'JetBrains Mono', monospace;

  /* Shape - M3 Expressive uses larger radii */
  --m3-shape-xs: 8px;
  --m3-shape-sm: 12px;
  --m3-shape-md: 16px;
  --m3-shape-lg: 24px;
  --m3-shape-xl: 28px;
  --m3-shape-full: 9999px;

  /* Motion */
  --m3-motion-snappy: cubic-bezier(0.2, 0, 0, 1);
  --m3-motion-emphatic: cubic-bezier(0.05, 0.7, 0.1, 1);
  --m3-motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --m3-motion-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --m3-duration-sm: 150ms;
  --m3-duration-md: 250ms;
  --m3-duration-lg: 400ms;
  --m3-duration-xl: 600ms;

  /* Elevation */
  --m3-elevation-0: none;
  --m3-elevation-1: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --m3-elevation-2: 0 4px 8px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --m3-elevation-3: 0 10px 20px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.04);
  --m3-elevation-4: 0 16px 32px rgba(0,0,0,0.08), 0 6px 12px rgba(0,0,0,0.04);
  --m3-elevation-5: 0 24px 48px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.04);

  /* Data colors */
  --m3-chart-1: #1B6B5A;
  --m3-chart-2: #D4885A;
  --m3-chart-3: #4A90D9;
  --m3-chart-4: #8B5CF6;
  --m3-chart-5: #EC4899;
  --m3-chart-6: #F59E0B;
  --m3-chart-7: #10B981;
  --m3-chart-8: #6366F1;
  --m3-income: #D4885A;
  --m3-expense: #1B6B5A;
}

/* ─── M3 Dark Theme ─── */
[data-theme="dark"] {
  /* Primary */
  --m3-primary: #7FD9C2;
  --m3-on-primary: #00382B;
  --m3-primary-container: #005143;
  --m3-on-primary-container: #BEF2E0;

  /* Secondary */
  --m3-secondary: #B1CCC0;
  --m3-on-secondary: #1C352A;
  --m3-secondary-container: #334C40;
  --m3-on-secondary-container: #CDE8DA;

  /* Tertiary */
  --m3-tertiary: #B1CBE0;
  --m3-on-tertiary: #1B3544;
  --m3-tertiary-container: #2A4B5C;
  --m3-on-tertiary-container: #C1E8FC;

  /* Error */
  --m3-error: #FFB4AB;
  --m3-on-error: #690005;
  --m3-error-container: #93000A;
  --m3-on-error-container: #FFDAD6;

  /* Surface - warm dark */
  --m3-background: #1C1A18;
  --m3-on-background: #E3E1DE;
  --m3-surface: #252321;
  --m3-on-surface: #E3E1DE;
  --m3-surface-variant: #42483E;
  --m3-on-surface-variant: #C2C8BC;
  --m3-outline: #8C9287;
  --m3-outline-variant: #42483E;
  --m3-shadow: #000000;
  --m3-surface-tint: #7FD9C2;

  /* Surface elevations */
  --m3-surface-1: linear-gradient(0deg, rgba(127,217,194,0.07), rgba(127,217,194,0.07)), #252321;
  --m3-surface-2: linear-gradient(0deg, rgba(127,217,194,0.10), rgba(127,217,194,0.10)), #252321;
  --m3-surface-3: linear-gradient(0deg, rgba(127,217,194,0.13), rgba(127,217,194,0.13)), #252321;

  /* Expressive dark */
  --m3-expressive-accent: #E8A87C;
  --m3-expressive-on-accent: #3E2600;
  --m3-expressive-accent-container: #5A3C1A;
  --m3-expressive-gradient-1: linear-gradient(135deg, #7FD9C2, #B1CBE0);
  --m3-expressive-gradient-2: linear-gradient(135deg, #005143, #2A4B5C);
  --m3-expressive-gradient-surface: linear-gradient(180deg, #252321 0%, #1C1A18 100%);
  --m3-noise-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");

  /* Data colors */
  --m3-chart-1: #7FD9C2;
  --m3-chart-2: #E8A87C;
  --m3-chart-3: #8DB7FF;
  --m3-chart-4: #B794F4;
  --m3-chart-5: #F687B3;
  --m3-chart-6: #FBBF24;
  --m3-chart-7: #6EE7B7;
  --m3-chart-8: #A5B4FC;
  --m3-income: #E8A87C;
  --m3-expense: #7FD9C2;

  /* Elevation */
  --m3-elevation-1: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --m3-elevation-2: 0 4px 8px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
  --m3-elevation-3: 0 10px 20px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.2);
  --m3-elevation-4: 0 16px 32px rgba(0,0,0,0.35), 0 6px 12px rgba(0,0,0,0.2);
  --m3-elevation-5: 0 24px 48px rgba(0,0,0,0.4), 0 8px 16px rgba(0,0,0,0.2);
}

/* ─── M3 Typography Classes ─── */
.m3-display-large {
  font-family: var(--m3-font-display);
  font-size: 57px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.m3-display-medium {
  font-family: var(--m3-font-display);
  font-size: 45px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.m3-display-small {
  font-family: var(--m3-font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}
.m3-headline-large {
  font-family: var(--m3-font-display);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
}
.m3-headline-medium {
  font-family: var(--m3-font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
}
.m3-headline-small {
  font-family: var(--m3-font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
}
.m3-title-large {
  font-family: var(--m3-font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}
.m3-title-medium {
  font-family: var(--m3-font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.m3-title-small {
  font-family: var(--m3-font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.m3-body-large {
  font-family: var(--m3-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.m3-body-medium {
  font-family: var(--m3-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.m3-body-small {
  font-family: var(--m3-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.03em;
}
.m3-label-large {
  font-family: var(--m3-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.m3-label-medium {
  font-family: var(--m3-font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.m3-label-small {
  font-family: var(--m3-font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

/* ─── M3 Motion Keyframes ─── */
@keyframes m3-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes m3-fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes m3-fade-in-down {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes m3-fade-in-scale {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes m3-slide-in-right {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes m3-slide-in-left {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes m3-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes m3-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}
@keyframes m3-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
@keyframes m3-ripple-expand {
  from { transform: scale(0); opacity: 0.5; }
  to { transform: scale(4); opacity: 0; }
}
@keyframes m3-draw-line {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}
@keyframes m3-count-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Staggered Animation Classes ─── */
.m3-enter {
  animation: m3-fade-in-up 0.4s var(--m3-motion-emphatic) both;
}
.m3-enter-scale {
  animation: m3-fade-in-scale 0.35s var(--m3-motion-spring) both;
}
.m3-stagger > * {
  animation: m3-fade-in-up 0.4s var(--m3-motion-smooth) both;
}
.m3-stagger > *:nth-child(1) { animation-delay: 0ms; }
.m3-stagger > *:nth-child(2) { animation-delay: 60ms; }
.m3-stagger > *:nth-child(3) { animation-delay: 120ms; }
.m3-stagger > *:nth-child(4) { animation-delay: 180ms; }
.m3-stagger > *:nth-child(5) { animation-delay: 240ms; }
.m3-stagger > *:nth-child(6) { animation-delay: 300ms; }
.m3-stagger > *:nth-child(7) { animation-delay: 360ms; }
.m3-stagger > *:nth-child(8) { animation-delay: 420ms; }
.m3-stagger > *:nth-child(9) { animation-delay: 480ms; }
.m3-stagger > *:nth-child(10) { animation-delay: 540ms; }

/* ─── M3 Filled Button ─── */
.m3-button-filled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 24px;
  border: none;
  border-radius: 20px;
  background: var(--m3-primary);
  color: var(--m3-on-primary);
  font-family: var(--m3-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: box-shadow var(--m3-duration-md) var(--m3-motion-smooth),
              transform var(--m3-duration-sm) var(--m3-motion-snappy),
              background var(--m3-duration-md) var(--m3-motion-smooth);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.m3-button-filled:hover {
  box-shadow: var(--m3-elevation-2);
  background: color-mix(in srgb, var(--m3-primary) 90%, black);
}
.m3-button-filled:active {
  transform: scale(0.96);
}
.m3-button-filled:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ─── M3 Tonal Button ─── */
.m3-button-tonal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 24px;
  border: none;
  border-radius: 20px;
  background: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
  font-family: var(--m3-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: box-shadow var(--m3-duration-md) var(--m3-motion-smooth),
              transform var(--m3-duration-sm) var(--m3-motion-snappy),
              background var(--m3-duration-md) var(--m3-motion-smooth);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.m3-button-tonal:hover {
  box-shadow: var(--m3-elevation-1);
  background: color-mix(in srgb, var(--m3-secondary-container) 90%, black);
}
.m3-button-tonal:active {
  transform: scale(0.96);
}

/* ─── M3 Outlined Button ─── */
.m3-button-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 24px;
  border: 1px solid var(--m3-outline);
  border-radius: 20px;
  background: transparent;
  color: var(--m3-primary);
  font-family: var(--m3-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color var(--m3-duration-md) var(--m3-motion-smooth),
              transform var(--m3-duration-sm) var(--m3-motion-snappy),
              background var(--m3-duration-md) var(--m3-motion-smooth);
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.m3-button-outlined:hover {
  border-color: var(--m3-primary);
  background: rgba(27, 107, 90, 0.04);
}
.m3-button-outlined:active {
  transform: scale(0.96);
}

/* ─── M3 Text Button ─── */
.m3-button-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 20px;
  background: transparent;
  color: var(--m3-primary);
  font-family: var(--m3-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--m3-duration-sm) var(--m3-motion-smooth),
              transform var(--m3-duration-sm) var(--m3-motion-snappy);
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.m3-button-text:hover {
  background: rgba(27, 107, 90, 0.08);
}
.m3-button-text:active {
  transform: scale(0.96);
}

/* ─── M3 Filled Icon Button ─── */
.m3-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--m3-on-surface-variant);
  font-size: 18px;
  cursor: pointer;
  transition: background var(--m3-duration-sm) var(--m3-motion-smooth),
              transform var(--m3-duration-sm) var(--m3-motion-snappy);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.m3-icon-button:hover {
  background: rgba(28, 26, 24, 0.08);
}
.m3-icon-button:active {
  transform: scale(0.88);
}

/* ─── M3 Text Field ─── */
.m3-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.m3-field-label {
  font-family: var(--m3-font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--m3-on-surface-variant);
  padding: 0 4px;
}
.m3-field-input {
  min-height: 56px;
  padding: 8px 16px;
  border: 1px solid var(--m3-outline);
  border-radius: 4px 4px 0 0;
  background: var(--m3-surface);
  color: var(--m3-on-surface);
  font-family: var(--m3-font-body);
  font-size: 16px;
  line-height: 1.5;
  outline: none;
  transition: border-color var(--m3-duration-sm) var(--m3-motion-smooth),
              padding var(--m3-duration-sm) var(--m3-motion-smooth);
  caret-color: var(--m3-primary);
}
.m3-field-input::placeholder {
  color: var(--m3-outline);
}
.m3-field-input:focus {
  border-width: 2px;
  border-color: var(--m3-primary);
  padding-top: 16px;
  padding-bottom: 16px;
}
.m3-field-input.error {
  border-color: var(--m3-error);
}
.m3-field-support {
  font-family: var(--m3-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--m3-on-surface-variant);
  padding: 0 4px;
}
.m3-field-support.error {
  color: var(--m3-error);
}

/* ─── M3 Card ─── */
.m3-card {
  background: var(--m3-surface);
  border: 1px solid var(--m3-outline-variant);
  border-radius: var(--m3-shape-md);
  padding: 16px;
  transition: box-shadow var(--m3-duration-md) var(--m3-motion-smooth),
              transform var(--m3-duration-md) var(--m3-motion-smooth);
}
.m3-card-elevated {
  background: var(--m3-surface);
  border: none;
  border-radius: var(--m3-shape-md);
  padding: 16px;
  box-shadow: var(--m3-elevation-1);
  transition: box-shadow var(--m3-duration-md) var(--m3-motion-smooth),
              transform var(--m3-duration-md) var(--m3-motion-smooth);
}
.m3-card-elevated:hover {
  box-shadow: var(--m3-elevation-2);
}

/* ─── M3 Segmented Button ─── */
.m3-segment {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--m3-outline);
  border-radius: 20px;
  overflow: hidden;
}
.m3-segment button {
  min-height: 32px;
  padding: 0 16px;
  border: none;
  background: transparent;
  color: var(--m3-on-surface-variant);
  font-family: var(--m3-font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--m3-duration-sm) var(--m3-motion-smooth),
              color var(--m3-duration-sm) var(--m3-motion-smooth);
}
.m3-segment button:not(:last-child) {
  border-right: 1px solid var(--m3-outline);
}
.m3-segment button.active {
  background: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
  font-weight: 600;
}

/* ─── M3 Chip ─── */
.m3-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--m3-outline);
  border-radius: 8px;
  background: transparent;
  color: var(--m3-on-surface-variant);
  font-family: var(--m3-font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--m3-duration-sm) var(--m3-motion-smooth),
              background var(--m3-duration-sm) var(--m3-motion-smooth),
              color var(--m3-duration-sm) var(--m3-motion-smooth);
  user-select: none;
}
.m3-chip:hover {
  border-color: var(--m3-on-surface);
}
.m3-chip.active {
  background: var(--m3-secondary-container);
  border-color: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
}
.m3-chip-filled {
  background: var(--m3-secondary-container);
  border-color: transparent;
  color: var(--m3-on-secondary-container);
}

/* ─── M3 Switch ─── */
.m3-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.m3-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.m3-switch-track {
  width: 52px;
  height: 32px;
  border-radius: 16px;
  background: var(--m3-surface-variant);
  border: 2px solid var(--m3-outline);
  transition: background var(--m3-duration-md) var(--m3-motion-smooth),
              border-color var(--m3-duration-md) var(--m3-motion-smooth);
  position: relative;
}
.m3-switch-track::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--m3-on-surface);
  top: 2px;
  left: 2px;
  transition: transform var(--m3-duration-md) var(--m3-motion-emphatic),
              background var(--m3-duration-md) var(--m3-motion-smooth);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.m3-switch input:checked + .m3-switch-track {
  background: var(--m3-primary);
  border-color: var(--m3-primary);
}
.m3-switch input:checked + .m3-switch-track::after {
  transform: translateX(20px);
  background: var(--m3-on-primary);
}
.m3-switch-label {
  font-family: var(--m3-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--m3-on-surface);
}

/* ─── M3 Tabs ─── */
.m3-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--m3-outline-variant);
}
.m3-tab {
  flex: 1;
  min-height: 48px;
  padding: 0 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--m3-on-surface-variant);
  font-family: var(--m3-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color var(--m3-duration-sm) var(--m3-motion-smooth),
              border-color var(--m3-duration-sm) var(--m3-motion-smooth);
  text-align: center;
}
.m3-tab.active {
  color: var(--m3-primary);
  border-bottom-color: var(--m3-primary);
}

/* ─── M3 Navigation Rail ─── */
.m3-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 80px;
  padding: 16px 0;
  background: var(--m3-surface);
  border-right: 1px solid var(--m3-outline-variant);
  min-height: 100vh;
}
.m3-rail-brand {
  padding: 20px 0 8px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.m3-rail-brand-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--m3-shape-md);
  background: var(--m3-expressive-gradient-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(27, 107, 90, 0.3);
}
.m3-rail-brand-text {
  font-family: var(--m3-font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--m3-primary);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.m3-rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 64px;
  min-height: 56px;
  padding: 8px 0;
  border: none;
  border-radius: var(--m3-shape-md);
  background: transparent;
  color: var(--m3-on-surface-variant);
  font-family: var(--m3-font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--m3-duration-sm) var(--m3-motion-smooth),
              color var(--m3-duration-sm) var(--m3-motion-smooth),
              transform var(--m3-duration-sm) var(--m3-motion-spring);
  position: relative;
}
.m3-rail-item:hover {
  background: rgba(28, 26, 24, 0.06);
}
.m3-rail-item:active {
  transform: scale(0.92);
}
.m3-rail-item.active {
  background: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
  font-weight: 600;
}
.m3-rail-item.active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--m3-primary);
}
.m3-rail-icon {
  font-size: 24px;
  line-height: 1;
  font-weight: 300;
}

/* ─── M3 Badge ─── */
.m3-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--m3-error);
  color: var(--m3-on-error);
  font-family: var(--m3-font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* ─── M3 Dialog ─── */
.m3-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: m3-fade-in 0.2s ease;
}
.m3-dialog {
  background: var(--m3-surface);
  border-radius: var(--m3-shape-xl);
  padding: 24px;
  min-width: 280px;
  max-width: 560px;
  box-shadow: var(--m3-elevation-3);
  animation: m3-fade-in-up 0.25s var(--m3-motion-emphatic);
}

/* ─── M3 Toast ─── */
.m3-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 4px;
  background: var(--m3-on-surface);
  color: var(--m3-surface);
  font-family: var(--m3-font-body);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--m3-elevation-3);
  animation: m3-fade-in-up 0.3s var(--m3-motion-emphatic);
}
.m3-toast button {
  background: transparent;
  border: none;
  color: var(--m3-primary-container);
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 14px;
}

/* ─── M3 Skeleton / Shimmer ─── */
.m3-skeleton {
  background: linear-gradient(90deg,
    var(--m3-surface-variant) 25%,
    color-mix(in srgb, var(--m3-surface-variant) 60%, white) 50%,
    var(--m3-surface-variant) 75%
  );
  background-size: 200% 100%;
  animation: m3-shimmer 1.5s infinite;
  border-radius: var(--m3-shape-xs);
}

/* ─── M3 Expressive Decorative Elements ─── */
.m3-expressive-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.m3-expressive-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.m3-expressive-blob-1 {
  width: 600px;
  height: 600px;
  top: -180px;
  right: -150px;
  background: linear-gradient(135deg, var(--m3-primary-container), var(--m3-tertiary-container));
  opacity: 0.20;
  animation: m3-blob-float 14s ease-in-out infinite, m3-blob-breathe 8s ease-in-out infinite;
}
.m3-expressive-blob-2 {
  width: 500px;
  height: 500px;
  bottom: -120px;
  left: -120px;
  background: linear-gradient(225deg, var(--m3-tertiary-container), var(--m3-expressive-accent-container));
  opacity: 0.15;
  animation: m3-blob-float 16s ease-in-out infinite 2s, m3-blob-breathe 10s ease-in-out infinite 1s;
}
.m3-expressive-blob-3 {
  width: 320px;
  height: 320px;
  top: 30%;
  left: 65%;
  background: var(--m3-expressive-accent-container);
  opacity: 0.10;
  animation: m3-blob-float 18s ease-in-out infinite 4s, m3-blob-breathe 6s ease-in-out infinite 2s;
}

@keyframes m3-blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(40px, -50px) scale(1.06); }
  50% { transform: translate(-25px, 25px) scale(0.94); }
  75% { transform: translate(50px, 35px) scale(1.03); }
}

@keyframes m3-blob-breathe {
  0%, 100% { opacity: var(--blob-opacity, 0.20); }
  50% { opacity: calc(var(--blob-opacity, 0.20) * 1.5); }
}

[data-theme="dark"] .m3-expressive-blob-1 { opacity: 0.12; }
[data-theme="dark"] .m3-expressive-blob-2 { opacity: 0.09; }
[data-theme="dark"] .m3-expressive-blob-3 { opacity: 0.06; }