/* ============================================================================
 * crypto-system — Material Design 3 stylesheet
 * Volgt de M3 spec strikt: tokens, shape, typography, state layers.
 * Drie color schemes selecteerbaar via data-scheme={purple|blue|green}.
 * ============================================================================ */

/* --- M3 PURPLE (baseline) — LIGHT --- */
:root,
[data-theme="light"][data-scheme="purple"],
[data-theme="light"]:not([data-scheme]) {
  --md-sys-color-primary: #6750A4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #EADDFF;
  --md-sys-color-on-primary-container: #21005D;
  --md-sys-color-secondary: #625B71;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E8DEF8;
  --md-sys-color-on-secondary-container: #1D192B;
  --md-sys-color-tertiary: #7D5260;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFD8E4;
  --md-sys-color-on-tertiary-container: #31111D;
  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #F9DEDC;
  --md-sys-color-on-error-container: #410E0B;
  --md-sys-color-surface: #FEF7FF;
  --md-sys-color-surface-dim: #DED8E1;
  --md-sys-color-surface-bright: #FEF7FF;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F7F2FA;
  --md-sys-color-surface-container: #F3EDF7;
  --md-sys-color-surface-container-high: #ECE6F0;
  --md-sys-color-surface-container-highest: #E6E0E9;
  --md-sys-color-on-surface: #1D1B20;
  --md-sys-color-on-surface-variant: #49454F;
  --md-sys-color-outline: #79747E;
  --md-sys-color-outline-variant: #CAC4D0;
}

/* --- M3 PURPLE (baseline) — DARK --- */
[data-theme="dark"][data-scheme="purple"],
[data-theme="dark"]:not([data-scheme]) {
  --md-sys-color-primary: #D0BCFF;
  --md-sys-color-on-primary: #381E72;
  --md-sys-color-primary-container: #4F378B;
  --md-sys-color-on-primary-container: #EADDFF;
  --md-sys-color-secondary: #CCC2DC;
  --md-sys-color-on-secondary: #332D41;
  --md-sys-color-secondary-container: #4A4458;
  --md-sys-color-on-secondary-container: #E8DEF8;
  --md-sys-color-tertiary: #EFB8C8;
  --md-sys-color-on-tertiary: #492532;
  --md-sys-color-tertiary-container: #633B48;
  --md-sys-color-on-tertiary-container: #FFD8E4;
  --md-sys-color-error: #F2B8B5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8C1D18;
  --md-sys-color-on-error-container: #F9DEDC;
  --md-sys-color-surface: #141218;
  --md-sys-color-surface-dim: #141218;
  --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: #211F26;
  --md-sys-color-surface-container-high: #2B2930;
  --md-sys-color-surface-container-highest: #36343B;
  --md-sys-color-on-surface: #E6E0E9;
  --md-sys-color-on-surface-variant: #CAC4D0;
  --md-sys-color-outline: #938F99;
  --md-sys-color-outline-variant: #49454F;
}

/* --- BLUE — LIGHT --- */
[data-theme="light"][data-scheme="blue"] {
  --md-sys-color-primary: #00658F;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #C7E7FF;
  --md-sys-color-on-primary-container: #001E2E;
  --md-sys-color-secondary: #4F616E;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #D2E5F4;
  --md-sys-color-on-secondary-container: #0B1D29;
  --md-sys-color-tertiary: #5F5A7D;
  --md-sys-color-tertiary-container: #E5DEFF;
  --md-sys-color-error: #BA1A1A;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-surface: #FBFCFF;
  --md-sys-color-surface-dim: #DBE2EA;
  --md-sys-color-surface-bright: #FBFCFF;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F4F8FB;
  --md-sys-color-surface-container: #EEF2F6;
  --md-sys-color-surface-container-high: #E8ECF0;
  --md-sys-color-surface-container-highest: #E2E6EA;
  --md-sys-color-on-surface: #191C1E;
  --md-sys-color-on-surface-variant: #41484D;
  --md-sys-color-outline: #71787D;
  --md-sys-color-outline-variant: #C1C7CD;
}
/* --- BLUE — DARK --- */
[data-theme="dark"][data-scheme="blue"] {
  --md-sys-color-primary: #84CFFF;
  --md-sys-color-on-primary: #00344C;
  --md-sys-color-primary-container: #004C6C;
  --md-sys-color-on-primary-container: #C7E7FF;
  --md-sys-color-secondary: #B6C9D8;
  --md-sys-color-on-secondary: #21323E;
  --md-sys-color-secondary-container: #374955;
  --md-sys-color-on-secondary-container: #D2E5F4;
  --md-sys-color-tertiary: #C8C2EA;
  --md-sys-color-tertiary-container: #47436A;
  --md-sys-color-error: #FFB4AB;
  --md-sys-color-error-container: #93000A;
  --md-sys-color-surface: #0F1417;
  --md-sys-color-surface-dim: #0F1417;
  --md-sys-color-surface-bright: #353A3E;
  --md-sys-color-surface-container-lowest: #0A0F12;
  --md-sys-color-surface-container-low: #181C20;
  --md-sys-color-surface-container: #1C2024;
  --md-sys-color-surface-container-high: #262A2E;
  --md-sys-color-surface-container-highest: #313539;
  --md-sys-color-on-surface: #E1E2E6;
  --md-sys-color-on-surface-variant: #C1C7CD;
  --md-sys-color-outline: #8B9197;
  --md-sys-color-outline-variant: #41484D;
}

/* --- GREEN — LIGHT --- */
[data-theme="light"][data-scheme="green"] {
  --md-sys-color-primary: #006D43;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #92F7BD;
  --md-sys-color-on-primary-container: #002112;
  --md-sys-color-secondary: #4E6356;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #D0E8D8;
  --md-sys-color-on-secondary-container: #0C1F15;
  --md-sys-color-tertiary: #3D6473;
  --md-sys-color-tertiary-container: #C1E8FB;
  --md-sys-color-error: #BA1A1A;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-surface: #F5FBF4;
  --md-sys-color-surface-dim: #D6DBD4;
  --md-sys-color-surface-bright: #F5FBF4;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #EFF5EE;
  --md-sys-color-surface-container: #E9EFE8;
  --md-sys-color-surface-container-high: #E3E9E2;
  --md-sys-color-surface-container-highest: #DEE4DD;
  --md-sys-color-on-surface: #181D18;
  --md-sys-color-on-surface-variant: #404943;
  --md-sys-color-outline: #707972;
  --md-sys-color-outline-variant: #BFC9C0;
}
/* --- GREEN — DARK --- */
[data-theme="dark"][data-scheme="green"] {
  --md-sys-color-primary: #76DAA2;
  --md-sys-color-on-primary: #003920;
  --md-sys-color-primary-container: #005232;
  --md-sys-color-on-primary-container: #92F7BD;
  --md-sys-color-secondary: #B5CCBC;
  --md-sys-color-on-secondary: #213528;
  --md-sys-color-secondary-container: #374B3E;
  --md-sys-color-on-secondary-container: #D0E8D8;
  --md-sys-color-tertiary: #A4CCDE;
  --md-sys-color-tertiary-container: #234C5B;
  --md-sys-color-error: #FFB4AB;
  --md-sys-color-error-container: #93000A;
  --md-sys-color-surface: #101511;
  --md-sys-color-surface-dim: #101511;
  --md-sys-color-surface-bright: #353B36;
  --md-sys-color-surface-container-lowest: #0B100C;
  --md-sys-color-surface-container-low: #181D18;
  --md-sys-color-surface-container: #1C211D;
  --md-sys-color-surface-container-high: #262B27;
  --md-sys-color-surface-container-highest: #313631;
  --md-sys-color-on-surface: #DFE4DC;
  --md-sys-color-on-surface-variant: #BFC9C0;
  --md-sys-color-outline: #89938B;
  --md-sys-color-outline-variant: #404943;
}

/* Elevation — same per scheme */
:root {
  --md-sys-elevation-1: 0 1px 2px 0 rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-sys-elevation-2: 0 1px 2px 0 rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px 0 rgba(0,0,0,.30);
  --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px 0 rgba(0,0,0,.30);
}
[data-theme="dark"] {
  --md-sys-elevation-1: 0 1px 2px 0 rgba(0,0,0,.50), 0 1px 3px 1px rgba(0,0,0,.30);
  --md-sys-elevation-2: 0 1px 2px 0 rgba(0,0,0,.50), 0 2px 6px 2px rgba(0,0,0,.30);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,.30), 0 1px 3px 0 rgba(0,0,0,.50);
  --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,.30), 0 2px 3px 0 rgba(0,0,0,.50);
}

/* Shape tokens */
:root {
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;
}

/* Typography */
:root {
  --md-sys-typescale-font: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-medium-size: 45px;
  --md-sys-typescale-display-small-size: 36px;
  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-small-size: 24px;
  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-small-size: 14px;
  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-small-size: 12px;
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-medium-size: 12px;
  --md-sys-typescale-label-small-size: 11px;
}

/* Resets en globals */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overscroll-behavior-y: contain; }
body {
  font-family: var(--md-sys-typescale-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
body, .m3-card, .m3-button, .m3-top-app-bar, .m3-nav-bar, .m3-nav-rail, .m3-chip, .m3-segmented button {
  transition: background-color 200ms ease, color 200ms ease,
              box-shadow 200ms ease, border-color 200ms ease;
}

/* Focus visible — accessibility */
:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
  border-radius: var(--md-sys-shape-corner-extra-small);
}

/* Top App Bar */
.m3-top-app-bar {
  position: sticky; top: 0; z-index: 10;
  height: 64px;
  display: grid; grid-template-columns: 56px 1fr 56px; align-items: center;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  padding: 0 4px;
}
.m3-top-app-bar.scrolled { background: var(--md-sys-color-surface-container); }
.m3-top-app-bar .title {
  text-align: center;
  font-size: var(--md-sys-typescale-title-large-size);
  font-weight: 500;
}
.m3-icon-button {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  border: 0; cursor: pointer; position: relative;
  font-size: 20px;
}
.m3-icon-button::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: 0; transition: opacity 120ms ease;
}
.m3-icon-button:hover::before { opacity: .08; }
.m3-icon-button:focus-visible::before { opacity: .12; }
.m3-icon-button:active::before { opacity: .12; }

/* Page shell */
.m3-page {
  padding: 16px 16px 96px 16px;
  max-width: 720px; margin: 0 auto;
}
.m3-page-title {
  font-size: var(--md-sys-typescale-headline-small-size);
  font-weight: 400; margin: 8px 0 16px;
  color: var(--md-sys-color-on-surface);
}
.m3-section-title {
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: 500;
  margin: 20px 0 8px;
  color: var(--md-sys-color-on-surface-variant);
}

/* Cards */
.m3-card {
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  padding: 16px;
  margin: 0 0 12px;
  box-shadow: var(--md-sys-elevation-1);
}
.m3-card.elevated  { box-shadow: var(--md-sys-elevation-2); }
.m3-card.filled    { background: var(--md-sys-color-surface-container-high); box-shadow: none; }
.m3-card.outlined  { background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); box-shadow: none; }
.m3-card .card-title {
  font-size: var(--md-sys-typescale-title-medium-size);
  margin: 0 0 4px;
}
.m3-card .card-supporting {
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface-variant);
}
.m3-card.interactive { cursor: pointer; position: relative; }
.m3-card.interactive::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--md-sys-color-on-surface);
  opacity: 0; transition: opacity 120ms ease;
  pointer-events: none;
}
.m3-card.interactive:hover::after { opacity: .04; }
.m3-card.interactive:focus-visible::after { opacity: .08; }
.m3-card.interactive:active::after { opacity: .08; }

/* KPI */
.m3-kpi {
  font-size: var(--md-sys-typescale-display-small-size);
  font-weight: 400; line-height: 1.1;
}
.m3-kpi.small { font-size: var(--md-sys-typescale-headline-small-size); }
.m3-kpi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m3-kpi-row .m3-card { margin: 0; }
.m3-kpi-label {
  font-size: var(--md-sys-typescale-label-medium-size);
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase; letter-spacing: .5px;
}
.m3-kpi.positive { color: #2E7D32; }
.m3-kpi.negative { color: var(--md-sys-color-error); }
[data-theme="dark"] .m3-kpi.positive { color: #81C784; }

/* Buttons */
.m3-button {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; min-width: 48px;
  padding: 0 24px;
  font-family: inherit;
  font-size: var(--md-sys-typescale-label-large-size); font-weight: 500;
  border-radius: var(--md-sys-shape-corner-full);
  border: 0; cursor: pointer; letter-spacing: .1px;
}
.m3-button.filled    { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.m3-button.tonal     { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.m3-button.outlined  { background: transparent; color: var(--md-sys-color-primary); border: 1px solid var(--md-sys-color-outline); }
.m3-button.text      { background: transparent; color: var(--md-sys-color-primary); padding: 0 12px; }
.m3-button.danger    { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }
.m3-button:disabled  { opacity: .38; cursor: not-allowed; }
.m3-button::before {
  content: ""; position: absolute; inset: 0;
  background: currentColor; opacity: 0;
  transition: opacity 120ms ease; border-radius: inherit;
}
.m3-button:hover::before { opacity: .08; }
.m3-button:focus-visible::before { opacity: .12; }
.m3-button:active::before { opacity: .12; }

/* FAB */
.m3-fab {
  position: fixed; right: 16px; bottom: 96px; z-index: 12;
  width: 56px; height: 56px;
  border-radius: var(--md-sys-shape-corner-large);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  border: 0; cursor: pointer;
  box-shadow: var(--md-sys-elevation-3);
  font-size: 26px; font-weight: 700;
}
.m3-fab.secondary {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  right: 84px;
  font-size: 22px;
}

/* Bottom Navigation Bar */
.m3-nav-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 11;
  height: 80px;
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: var(--md-sys-color-surface-container);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -1px 0 var(--md-sys-color-outline-variant);
}
.m3-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: transparent; border: 0; cursor: pointer;
  font-family: inherit;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-medium-size);
  padding: 0;
  min-height: 48px; position: relative;
}
.m3-nav-item .icon {
  width: 56px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 16px;
  font-size: 18px; transition: background-color 200ms ease, color 200ms ease;
}
.m3-nav-item.active { color: var(--md-sys-color-on-surface); }
.m3-nav-item.active .icon {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.m3-nav-item .label { font-weight: 500; }

/* Navigation Rail (≥600px) */
.m3-nav-rail {
  display: none;
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 11;
  width: 80px; padding: 16px 0;
  background: var(--md-sys-color-surface-container);
  flex-direction: column; align-items: center; gap: 8px;
  border-right: 1px solid var(--md-sys-color-outline-variant);
}
.m3-nav-rail .rail-brand {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-weight: 700; font-size: 22px;
}
.m3-nav-rail .m3-nav-item { min-height: 56px; }

@media (min-width: 600px) {
  .m3-nav-bar { display: none; }
  .m3-nav-rail { display: flex; }
  main { margin-left: 80px; }
  .m3-page { max-width: 960px; padding: 24px; }
  .m3-fab { bottom: 24px; }
  .m3-fab.secondary { right: 84px; }
}

/* Chips */
.m3-chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.m3-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 16px;
  border-radius: var(--md-sys-shape-corner-small);
  border: 1px solid var(--md-sys-color-outline);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-large-size);
  cursor: pointer; user-select: none;
}
.m3-chip.selected {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}

/* Slider */
.m3-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; background: transparent; }
.m3-slider::-webkit-slider-runnable-track,
.m3-slider::-moz-range-track {
  height: 4px; background: var(--md-sys-color-surface-container-highest); border-radius: 2px;
}
.m3-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary); margin-top: -8px; cursor: pointer;
}
.m3-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary); border: 0; cursor: pointer;
}

/* Dialog */
.m3-dialog-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: none; align-items: center; justify-content: center;
  z-index: 50;
}
.m3-dialog-scrim.open { display: flex; }
.m3-dialog {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-extra-large);
  padding: 24px;
  width: min(560px, 92vw);
  box-shadow: var(--md-sys-elevation-3);
}
.m3-dialog .dialog-title {
  font-size: var(--md-sys-typescale-headline-small-size);
  margin: 0 0 16px;
}
.m3-dialog .dialog-content { margin-bottom: 24px; color: var(--md-sys-color-on-surface-variant); }
.m3-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Bottom sheet */
.m3-bottom-sheet-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: none;
  z-index: 49;
}
.m3-bottom-sheet-scrim.open { display: block; }
.m3-bottom-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: var(--md-sys-elevation-4);
  max-height: 80vh; overflow-y: auto;
  z-index: 50;
  transform: translateY(100%);
  transition: transform 200ms ease;
}
.m3-bottom-sheet.open { transform: translateY(0); }
.m3-bottom-sheet .drag-handle {
  display: block; width: 32px; height: 4px;
  margin: 0 auto 16px;
  background: var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-full);
  opacity: .4;
}
@media (min-width: 600px) {
  .m3-bottom-sheet {
    left: 50%; right: auto; bottom: 24px;
    transform: translate(-50%, calc(100% + 20px));
    width: min(560px, 92vw);
    border-radius: var(--md-sys-shape-corner-extra-large);
  }
  .m3-bottom-sheet.open { transform: translate(-50%, 0); }
}

/* Snackbar */
.m3-snackbar {
  position: fixed; bottom: 100px; left: 50%;
  background: var(--md-sys-color-on-surface);
  color: var(--md-sys-color-surface);
  padding: 14px 16px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  font-size: var(--md-sys-typescale-body-medium-size);
  box-shadow: var(--md-sys-elevation-3);
  z-index: 60;
  display: flex; align-items: center; gap: 16px;
  min-width: 280px; max-width: 520px;
  transform: translate(-50%, calc(100% + 20px));
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
}
.m3-snackbar.show { transform: translateX(-50%); opacity: 1; }
.m3-snackbar.success { background: #2E7D32; color: white; }
.m3-snackbar.error { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }
.m3-snackbar.warning { background: #F9A825; color: #1d1b20; }
.m3-snackbar .close {
  background: transparent; border: 0; color: inherit; font-size: 18px; cursor: pointer; line-height: 1; padding: 4px;
}
@media (min-width: 600px) {
  .m3-snackbar {
    left: 96px; bottom: 24px;
    transform: translate(0, calc(100% + 20px));
  }
  .m3-snackbar.show { transform: translate(0, 0); }
}

/* Lists */
.m3-list { list-style: none; padding: 0; margin: 0; }
.m3-list-item {
  display: grid; grid-template-columns: 40px 1fr auto;
  gap: 12px; align-items: center;
  padding: 12px 16px;
  border-radius: var(--md-sys-shape-corner-medium);
  cursor: pointer; min-height: 56px; position: relative;
}
.m3-list-item:hover { background: var(--md-sys-color-surface-container); }
.m3-list-item .leading { color: var(--md-sys-color-primary); }
.m3-list-item .headline { font-size: var(--md-sys-typescale-body-large-size); }
.m3-list-item .supporting {
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface-variant);
}
.m3-list-item .trailing { color: var(--md-sys-color-on-surface-variant); font-variant-numeric: tabular-nums; }

/* Linear Progress */
.m3-progress { height: 4px; background: var(--md-sys-color-surface-container-highest); border-radius: 2px; overflow: hidden; position: relative; }
.m3-progress .bar { height: 100%; background: var(--md-sys-color-primary); width: 0%; transition: width 200ms ease; }
.m3-progress.indeterminate .bar { width: 30%; animation: m3-indet 1.5s linear infinite; }
@keyframes m3-indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }

/* Segmented button */
.m3-segmented {
  display: inline-flex;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden; width: 100%;
}
.m3-segmented button {
  flex: 1; height: 40px;
  background: transparent; border: 0;
  border-right: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface);
  cursor: pointer; font-family: inherit;
  font-size: var(--md-sys-typescale-label-large-size);
}
.m3-segmented button:last-child { border-right: 0; }
.m3-segmented button.selected {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

/* Inputs */
.m3-field { margin: 8px 0; }
.m3-field label {
  display: block;
  font-size: var(--md-sys-typescale-label-medium-size);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 4px;
}
.m3-field input, .m3-field select {
  width: 100%; height: 48px;
  padding: 0 16px;
  font-family: inherit;
  font-size: var(--md-sys-typescale-body-large-size);
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
  border: 1px solid transparent;
  border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;
  border-bottom: 1px solid var(--md-sys-color-outline);
}
.m3-field input:focus, .m3-field select:focus {
  outline: 0; border-bottom: 2px solid var(--md-sys-color-primary);
}
.m3-field-checkbox {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; cursor: pointer;
  font-size: var(--md-sys-typescale-body-large-size);
}
.m3-field-checkbox input { width: 18px; height: 18px; accent-color: var(--md-sys-color-primary); margin: 0; }

/* Login screen */
.m3-login {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; gap: 16px;
}
.m3-login .brand {
  font-size: var(--md-sys-typescale-display-small-size);
  font-weight: 500; color: var(--md-sys-color-primary);
  margin: 0;
}
.m3-login .m3-card { width: min(380px, 100%); }

/* Hidden helper */
.hidden { display: none !important; }

/* Charts */
.chart-wrap { position: relative; height: 240px; }
.chart-wrap.donut { height: 220px; max-width: 260px; margin: 0 auto; }

/* Trade rows */
.trade-row { display: grid; grid-template-columns: 1fr auto; padding: 10px 4px; align-items: center; gap: 12px; cursor: pointer; }
.trade-row:hover { background: var(--md-sys-color-surface-container); border-radius: var(--md-sys-shape-corner-small); }
.trade-row .pair { font-weight: 500; }
.trade-row .meta { color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-small-size); }
.trade-row .pnl { font-variant-numeric: tabular-nums; font-weight: 500; }
.trade-row .pnl.up { color: #2E7D32; }
.trade-row .pnl.down { color: var(--md-sys-color-error); }
[data-theme="dark"] .trade-row .pnl.up { color: #81C784; }

/* Strategy badge */
.strategy-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: 500;
}

/* Empty state */
.m3-empty {
  text-align: center; padding: 32px 16px;
}
.m3-empty .icon {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-high);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 32px; color: var(--md-sys-color-on-surface-variant);
}
.m3-empty .title {
  font-size: var(--md-sys-typescale-title-medium-size);
  margin: 0 0 4px;
}
.m3-empty .supporting {
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 16px;
}

/* Skeleton */
.m3-skel {
  background: linear-gradient(90deg,
    var(--md-sys-color-surface-container-high) 25%,
    var(--md-sys-color-surface-container-highest) 50%,
    var(--md-sys-color-surface-container-high) 75%);
  background-size: 200% 100%;
  border-radius: var(--md-sys-shape-corner-small);
  height: 14px;
  margin: 6px 0;
  animation: m3-skel 1.4s linear infinite;
}
.m3-skel.tall { height: 24px; }
.m3-skel.kpi { height: 36px; width: 60%; }
@keyframes m3-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Onboarding tour overlay */
.tour-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6); z-index: 70;
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.tour-scrim.open { display: flex; }
.tour-card {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-extra-large);
  padding: 24px;
  width: min(420px, 100%);
  box-shadow: var(--md-sys-elevation-3);
}
.tour-card .step {
  font-size: var(--md-sys-typescale-label-medium-size);
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 8px;
}
.tour-card h3 {
  font-size: var(--md-sys-typescale-headline-small-size);
  margin: 0 0 12px;
}
.tour-card p {
  font-size: var(--md-sys-typescale-body-large-size);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 24px;
}
.tour-card .actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tour-card .dots { display: flex; gap: 6px; }
.tour-card .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--md-sys-color-outline-variant); }
.tour-card .dot.active { background: var(--md-sys-color-primary); }

/* Signal table (in strategy detail) */
.signal-table { width: 100%; border-collapse: collapse; font-size: var(--md-sys-typescale-body-medium-size); }
.signal-table th, .signal-table td {
  text-align: left; padding: 8px 4px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.signal-table th {
  font-size: var(--md-sys-typescale-label-medium-size);
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase; letter-spacing: .5px; font-weight: 500;
}
.signal-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.trend-up { color: #2E7D32; }
.trend-down { color: var(--md-sys-color-error); }
[data-theme="dark"] .trend-up { color: #81C784; }

/* Backtest compare */
.bt-compare-list { display: flex; flex-direction: column; gap: 4px; }
.bt-compare-list label {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: var(--md-sys-shape-corner-small);
  cursor: pointer; min-height: 48px;
}
.bt-compare-list label:hover { background: var(--md-sys-color-surface-container); }

/* Donut legend */
.donut-legend { display: flex; flex-direction: column; gap: 8px; }
.donut-legend .row { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center; font-size: var(--md-sys-typescale-body-small-size); }
.donut-legend .swatch { width: 12px; height: 12px; border-radius: 3px; }
.donut-legend .pct { font-variant-numeric: tabular-nums; font-weight: 500; }