/*
 * m3.css — Standalone Material Design 3 (Material You) CSS
 * Drop-in replacement / alternative to BeerCSS's CSS layer.
 * No JavaScript required for styling. Zero dependencies.
 * --------------------------------------------------------
 * Usage: <link rel="stylesheet" href="m3.css">
 *
 * Semantic HTML elements map directly to M3 components:
 *   <nav>          → Navigation Rail / Drawer
 *   <header>       → Top App Bar
 *   <main>         → Page content area
 *   <article>      → Card (Filled)
 *   <aside>        → Card (Outlined)
 *   <button>       → Filled Button
 *   <button class="tonal">  → Filled Tonal Button
 *   <button class="outlined">→ Outlined Button
 *   <button class="text">   → Text Button
 *   <button class="fab">    → FAB
 *   <input type="text">     → Outlined Text Field
 *   <input type="checkbox"> → Checkbox
 *   <input type="radio">    → Radio
 *   <input type="range">    → Slider
 *   <input type="color">    → Color Picker (styled)
 *   <select>                → Dropdown
 *   <progress>              → Linear Progress
 *   <dialog>                → Modal Dialog
 *   <details>               → Expansion Panel
 *   <table>                 → Data Table
 *   <ul class="list">       → List
 *   <div class="chip">      → Assist Chip
 *   <div class="badge">     → Badge
 *   <div class="snackbar">  → Snackbar
 *   <div class="divider">   → Divider
 *   <div class="tabs">      → Tab Bar
 */

/* ===================== DESIGN TOKENS ===================== */
:root {
  /* --- Typescale --- */
  --md-font: 'Google Sans', 'Segoe UI', Roboto, sans-serif;
  --md-font-mono: 'Roboto Mono', 'Fira Code', monospace;

  /* --- Shape --- */
  --md-shape-xs:   4px;
  --md-shape-sm:   8px;
  --md-shape-md:   12px;
  --md-shape-lg:   16px;
  --md-shape-xl:   28px;
  --md-shape-full: 9999px;

  /* --- Elevation (box-shadow levels) --- */
  --md-elev-0: none;
  --md-elev-1: 0 1px 2px rgba(0,0,0,.15), 0 1px 3px 1px rgba(0,0,0,.10);
  --md-elev-2: 0 1px 2px rgba(0,0,0,.20), 0 2px 6px 2px rgba(0,0,0,.12);
  --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.20);
  --md-elev-4: 0 6px 10px 4px rgba(0,0,0,.12), 0 2px 3px rgba(0,0,0,.20);

  /* --- Motion --- */
  --md-dur-short:  150ms;
  --md-dur-med:    250ms;
  --md-dur-long:   400ms;
  --md-ease-std:   cubic-bezier(.2,0,0,1);
  --md-ease-decel: cubic-bezier(0,0,0,1);
  --md-ease-accel: cubic-bezier(.3,0,1,1);

  /* ===================== LIGHT THEME COLORS =====================
     Generated from a tonal palette (hue 250° — indigo-purple).
     Override any variable to theme the entire UI instantly.       */
  --md-primary:            #6750A4;
  --md-on-primary:         #FFFFFF;
  --md-primary-container:  #EADDFF;
  --md-on-primary-container:#21005D;

  --md-secondary:          #625B71;
  --md-on-secondary:       #FFFFFF;
  --md-secondary-container:#E8DEF8;
  --md-on-secondary-container:#1D192B;

  --md-tertiary:           #7D5260;
  --md-on-tertiary:        #FFFFFF;
  --md-tertiary-container: #FFD8E4;
  --md-on-tertiary-container:#31111D;

  --md-error:              #B3261E;
  --md-on-error:           #FFFFFF;
  --md-error-container:    #F9DEDC;
  --md-on-error-container: #410E0B;

  --md-surface:            #FEF7FF;
  --md-surface-dim:        #DED8E1;
  --md-surface-bright:     #FEF7FF;
  --md-surface-container-lowest:  #FFFFFF;
  --md-surface-container-low:     #F7F2FA;
  --md-surface-container:         #F3EDF7;
  --md-surface-container-high:    #ECE6F0;
  --md-surface-container-highest: #E6E0E9;

  --md-on-surface:         #1C1B1F;
  --md-on-surface-variant: #49454F;
  --md-outline:            #79747E;
  --md-outline-variant:    #CAC4D0;

  --md-inverse-surface:    #313033;
  --md-inverse-on-surface: #F4EFF4;
  --md-inverse-primary:    #D0BCFF;

  --md-scrim:              rgba(0,0,0,.32);

  /* Surface tint (primary color overlaid on surface, per M3 spec) */
  --md-surface-tint: var(--md-primary);
}

/* ===================== DARK THEME ===================== */
@media (prefers-color-scheme: dark) {
  :root {
    --md-primary:            #D0BCFF;
    --md-on-primary:         #381E72;
    --md-primary-container:  #4F378B;
    --md-on-primary-container:#EADDFF;

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

    --md-tertiary:           #EFB8C8;
    --md-on-tertiary:        #492532;
    --md-tertiary-container: #633B48;
    --md-on-tertiary-container:#FFD8E4;

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

    --md-surface:            #141218;
    --md-surface-dim:        #141218;
    --md-surface-bright:     #3B383E;
    --md-surface-container-lowest:  #0F0D13;
    --md-surface-container-low:     #1D1B20;
    --md-surface-container:         #211F26;
    --md-surface-container-high:    #2B2930;
    --md-surface-container-highest: #36343B;

    --md-on-surface:         #E6E1E5;
    --md-on-surface-variant: #CAC4D0;
    --md-outline:            #938F99;
    --md-outline-variant:    #49454F;

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

    --md-scrim:              rgba(0,0,0,.60);
  }
}

/* Force dark: add class="dark" to <html> or <body> */
.dark, [data-theme="dark"] {
  --md-primary:            #D0BCFF;
  --md-on-primary:         #381E72;
  --md-primary-container:  #4F378B;
  --md-on-primary-container:#EADDFF;
  --md-secondary:          #CCC2DC;
  --md-on-secondary:       #332D41;
  --md-secondary-container:#4A4458;
  --md-on-secondary-container:#E8DEF8;
  --md-tertiary:           #EFB8C8;
  --md-on-tertiary:        #492532;
  --md-tertiary-container: #633B48;
  --md-on-tertiary-container:#FFD8E4;
  --md-error:              #F2B8B5;
  --md-on-error:           #601410;
  --md-error-container:    #8C1D18;
  --md-on-error-container: #F9DEDC;
  --md-surface:            #141218;
  --md-surface-dim:        #141218;
  --md-surface-bright:     #3B383E;
  --md-surface-container-lowest:  #0F0D13;
  --md-surface-container-low:     #1D1B20;
  --md-surface-container:         #211F26;
  --md-surface-container-high:    #2B2930;
  --md-surface-container-highest: #36343B;
  --md-on-surface:         #E6E1E5;
  --md-on-surface-variant: #CAC4D0;
  --md-outline:            #938F99;
  --md-outline-variant:    #49454F;
  --md-inverse-surface:    #E6E1E5;
  --md-inverse-on-surface: #313033;
  --md-inverse-primary:    #6750A4;
  --md-scrim:              rgba(0,0,0,.60);
}

/* ===================== RESET & BASE ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--md-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light dark;
}

body {
  background: var(--md-surface);
  color: var(--md-on-surface);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ===================== TYPOGRAPHY SCALE ===================== */
/* Display */
.display-large  { font-size: 57px; line-height: 64px; letter-spacing: -.25px; font-weight: 400; }
.display-medium { font-size: 45px; line-height: 52px; letter-spacing: 0;      font-weight: 400; }
.display-small  { font-size: 36px; line-height: 44px; letter-spacing: 0;      font-weight: 400; }
/* Headline */
h1, .headline-large  { font-size: 32px; line-height: 40px; letter-spacing: 0; font-weight: 400; }
h2, .headline-medium { font-size: 28px; line-height: 36px; letter-spacing: 0; font-weight: 400; }
h3, .headline-small  { font-size: 24px; line-height: 32px; letter-spacing: 0; font-weight: 400; }
/* Title */
h4, .title-large  { font-size: 22px; line-height: 28px; letter-spacing: 0;    font-weight: 400; }
h5, .title-medium { font-size: 16px; line-height: 24px; letter-spacing: .15px;font-weight: 500; }
h6, .title-small  { font-size: 14px; line-height: 20px; letter-spacing: .1px; font-weight: 500; }
/* Body */
p, .body-large  { font-size: 16px; line-height: 24px; letter-spacing: .5px;  font-weight: 400; }
.body-medium    { font-size: 14px; line-height: 20px; letter-spacing: .25px; font-weight: 400; }
.body-small     { font-size: 12px; line-height: 16px; letter-spacing: .4px;  font-weight: 400; }
/* Label */
.label-large    { font-size: 14px; line-height: 20px; letter-spacing: .1px;  font-weight: 500; }
.label-medium   { font-size: 12px; line-height: 16px; letter-spacing: .5px;  font-weight: 500; }
.label-small    { font-size: 11px; line-height: 16px; letter-spacing: .5px;  font-weight: 500; }

/* ===================== LAYOUT ===================== */
main {
  flex: 1;
  padding: 16px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.row    { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.col    { display: flex; flex-direction: column; gap: 8px; }
.grid   { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.center { display: flex; align-items: center; justify-content: center; }
.space  { flex: 1; }
.fill   { width: 100%; }

/* ===================== TOP APP BAR ===================== */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  height: 64px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--md-elev-1);
  transition: box-shadow var(--md-dur-med) var(--md-ease-std),
              background var(--md-dur-med) var(--md-ease-std);
}
header.small { height: 56px; }
header.medium { height: 112px; flex-direction: column; align-items: flex-start; padding: 20px 16px 24px; }
header.large  { height: 152px; flex-direction: column; align-items: flex-start; padding: 20px 16px 28px; }
header h1, header h2, header h3, header h4 { font-weight: 400; }
header .title { flex: 1; }
header.scrolled { box-shadow: var(--md-elev-2); }

/* ===================== NAVIGATION ===================== */
nav {
  background: var(--md-surface-container);
  display: flex;
  flex-direction: column;
  width: 80px;
  min-height: 100vh;
  padding: 12px 0;
  gap: 4px;
  align-items: center;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  z-index: 50;
  transition: width var(--md-dur-med) var(--md-ease-std);
}
nav.rail  { width: 80px; }
nav.drawer { width: 260px; align-items: flex-start; padding: 12px 12px; }
nav a, nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 56px;
  min-height: 56px;
  border-radius: var(--md-shape-full);
  text-decoration: none;
  color: var(--md-on-surface-variant);
  font-size: 12px;
  letter-spacing: .5px;
  font-weight: 500;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color var(--md-dur-short) var(--md-ease-std),
              background var(--md-dur-short) var(--md-ease-std);
}
nav a:hover, nav button:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
nav a.active, nav button.active {
  color: var(--md-on-secondary-container);
  background: var(--md-secondary-container);
}
nav.drawer a, nav.drawer button {
  flex-direction: row;
  width: 100%;
  padding: 0 16px;
  border-radius: var(--md-shape-full);
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
}
/* Bottom navigation bar */
nav.bottom {
  flex-direction: row;
  width: 100%;
  min-height: unset;
  height: 80px;
  position: fixed;
  left: 0; right: 0; bottom: 0; top: auto;
  padding: 12px 0 16px;
  justify-content: space-around;
  z-index: 100;
  box-shadow: 0 -1px 0 var(--md-outline-variant);
}
nav.bottom a, nav.bottom button { min-height: 32px; }

/* ===================== BUTTONS ===================== */
button, [role="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  border-radius: var(--md-shape-full);
  font-family: var(--md-font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1px;
  cursor: pointer;
  border: none;
  outline: none;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--md-dur-short) var(--md-ease-std),
              background var(--md-dur-short) var(--md-ease-std);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Filled (default) */
button {
  background: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: var(--md-elev-0);
}
button:hover    { box-shadow: var(--md-elev-1); background: color-mix(in srgb, var(--md-primary) 92%, var(--md-on-primary)); }
button:active   { box-shadow: var(--md-elev-0); background: color-mix(in srgb, var(--md-primary) 88%, var(--md-on-primary)); }
button:disabled { opacity: .38; pointer-events: none; box-shadow: none; }

/* Tonal */
button.tonal {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
button.tonal:hover { background: color-mix(in srgb, var(--md-secondary-container) 92%, var(--md-on-secondary-container)); box-shadow: var(--md-elev-1); }

/* Outlined */
button.outlined {
  background: transparent;
  color: var(--md-primary);
  border: 1px solid var(--md-outline);
  box-shadow: none;
}
button.outlined:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }

/* Text */
button.text {
  background: transparent;
  color: var(--md-primary);
  box-shadow: none;
  padding: 0 12px;
}
button.text:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }

/* Elevated */
button.elevated {
  background: var(--md-surface-container-low);
  color: var(--md-primary);
  box-shadow: var(--md-elev-1);
}
button.elevated:hover { box-shadow: var(--md-elev-2); }

/* FAB */
button.fab {
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: var(--md-shape-lg);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  box-shadow: var(--md-elev-3);
  font-size: 24px;
}
button.fab:hover { box-shadow: var(--md-elev-4); }
button.fab.small { width: 40px; height: 40px; border-radius: var(--md-shape-md); font-size: 18px; }
button.fab.large { width: 96px; height: 96px; border-radius: var(--md-shape-xl); font-size: 36px; }

/* Icon button */
button.icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--md-shape-full);
  background: transparent;
  color: var(--md-on-surface-variant);
  box-shadow: none;
  font-size: 20px;
}
button.icon:hover { background: color-mix(in srgb, var(--md-on-surface-variant) 8%, transparent); }

/* Ripple effect via ::after pseudo */
button::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-dur-short);
}
button:active::after { opacity: .12; }

/* ===================== CARDS ===================== */
article, .card {
  background: var(--md-surface-container-low);
  border-radius: var(--md-shape-md);
  padding: 16px;
  box-shadow: var(--md-elev-1);
  color: var(--md-on-surface);
  transition: box-shadow var(--md-dur-med) var(--md-ease-std);
  overflow: hidden;
  position: relative;
}
article:hover, .card:hover { box-shadow: var(--md-elev-2); }
article.filled, .card.filled {
  background: var(--md-surface-container-highest);
  box-shadow: none;
}
article.outlined, .card.outlined, aside {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  box-shadow: none;
}
article.outlined:hover, .card.outlined:hover, aside:hover { box-shadow: var(--md-elev-1); }

/* ===================== INPUTS ===================== */
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
  height: 56px;
  padding: 16px;
  border-radius: var(--md-shape-xs) var(--md-shape-xs) 0 0;
  border: none;
  border-bottom: 1px solid var(--md-outline);
  background: var(--md-surface-container-highest);
  color: var(--md-on-surface);
  font-family: var(--md-font);
  font-size: 16px;
  outline: none;
  transition: border-color var(--md-dur-short) var(--md-ease-std),
              border-bottom-width var(--md-dur-short) var(--md-ease-std);
  width: 100%;
}
textarea { height: auto; min-height: 120px; resize: vertical; padding-top: 16px; }
select   { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2349454F' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }

input:focus, textarea:focus, select:focus {
  border-bottom: 2px solid var(--md-primary);
  background: var(--md-surface-container-highest);
}

/* Outlined variant */
input.outlined, textarea.outlined, select.outlined {
  border: 1px solid var(--md-outline);
  border-radius: var(--md-shape-xs);
  background: transparent;
}
input.outlined:focus, textarea.outlined:focus, select.outlined:focus {
  border: 2px solid var(--md-primary);
}

label {
  font-size: 12px;
  letter-spacing: .4px;
  color: var(--md-on-surface-variant);
  font-weight: 500;
}

/* Checkbox */
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: 2px solid var(--md-outline);
  background: transparent;
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--md-dur-short), border-color var(--md-dur-short);
  position: relative;
}
input[type="checkbox"]:checked {
  background: var(--md-primary);
  border-color: var(--md-primary);
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  width: 4px; height: 8px;
  border: 2px solid var(--md-on-primary);
  border-top: none; border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* Radio */
input[type="radio"] {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--md-outline);
  background: transparent;
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--md-dur-short);
  position: relative;
}
input[type="radio"]:checked { border-color: var(--md-primary); }
input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--md-primary);
}

/* Range (Slider) */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--md-secondary-container);
  border-radius: var(--md-shape-full);
  outline: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--md-primary);
  cursor: pointer;
  transition: transform var(--md-dur-short) var(--md-ease-std);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }

/* Switch (use <input type="checkbox" class="switch">) */
input[type="checkbox"].switch {
  width: 52px;
  height: 32px;
  border-radius: var(--md-shape-full);
  border: 2px solid var(--md-outline);
  background: var(--md-surface-container-highest);
  position: relative;
}
input[type="checkbox"].switch::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--md-outline);
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  transition: left var(--md-dur-med) var(--md-ease-std),
              width var(--md-dur-short) var(--md-ease-std),
              background var(--md-dur-short);
}
input[type="checkbox"].switch:checked {
  background: var(--md-primary);
  border-color: var(--md-primary);
}
input[type="checkbox"].switch:checked::after {
  left: 26px;
  width: 24px;
  background: var(--md-on-primary);
  transform: translateY(-50%) translateX(-8px);
}

/* ===================== PROGRESS ===================== */
progress {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border: none;
  border-radius: var(--md-shape-full);
  background: var(--md-secondary-container);
  overflow: hidden;
}
progress::-webkit-progress-bar { background: var(--md-secondary-container); }
progress::-webkit-progress-value {
  background: var(--md-primary);
  border-radius: var(--md-shape-full);
  transition: width var(--md-dur-med) var(--md-ease-std);
}
progress::-moz-progress-bar { background: var(--md-primary); border-radius: var(--md-shape-full); }

/* Circular progress (use <div class="progress-circle"> with --pct CSS var) */
.progress-circle {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: conic-gradient(var(--md-primary) calc(var(--pct, 0) * 1%), var(--md-secondary-container) 0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress-circle::after {
  content: '';
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--md-surface);
}

/* Indeterminate */
.progress-linear {
  width: 100%;
  height: 4px;
  background: var(--md-secondary-container);
  border-radius: var(--md-shape-full);
  overflow: hidden;
  position: relative;
}
.progress-linear::after {
  content: '';
  position: absolute;
  top: 0; left: -40%;
  width: 40%;
  height: 100%;
  background: var(--md-primary);
  border-radius: var(--md-shape-full);
  animation: md-indeterminate 1.4s infinite var(--md-ease-std);
}
@keyframes md-indeterminate {
  0%   { left: -40%; width: 40%; }
  60%  { left: 100%; width: 60%; }
  100% { left: 100%; width: 60%; }
}

/* ===================== DIALOG ===================== */
dialog {
  border: none;
  border-radius: var(--md-shape-xl);
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  padding: 24px;
  max-width: 560px;
  width: calc(100% - 32px);
  box-shadow: var(--md-elev-3);
  animation: md-dialog-in var(--md-dur-med) var(--md-ease-decel);
}
dialog::backdrop { background: var(--md-scrim); }
dialog h4 { margin-bottom: 16px; }
dialog p  { color: var(--md-on-surface-variant); margin-bottom: 24px; }
dialog .actions { display: flex; justify-content: flex-end; gap: 8px; }
@keyframes md-dialog-in {
  from { opacity: 0; transform: scale(.92) translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ===================== DETAILS / EXPANSION ===================== */
details {
  background: var(--md-surface-container);
  border-radius: var(--md-shape-md);
  overflow: hidden;
}
details summary {
  padding: 16px;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: '▼';
  font-size: 12px;
  color: var(--md-on-surface-variant);
  transition: transform var(--md-dur-med) var(--md-ease-std);
}
details[open] summary::after { transform: rotate(180deg); }
details > *:not(summary) { padding: 0 16px 16px; }

/* ===================== TABLE ===================== */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 500;
  letter-spacing: .1px;
  color: var(--md-on-surface-variant);
  border-bottom: 1px solid var(--md-outline-variant);
}
tbody tr {
  border-bottom: 1px solid var(--md-outline-variant);
  transition: background var(--md-dur-short);
}
tbody tr:hover { background: color-mix(in srgb, var(--md-on-surface) 4%, transparent); }
tbody td {
  padding: 14px 16px;
  color: var(--md-on-surface);
}

/* ===================== LISTS ===================== */
ul.list, ol.list {
  list-style: none;
  background: var(--md-surface);
  border-radius: var(--md-shape-md);
  overflow: hidden;
}
ul.list li, ol.list li {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--md-outline-variant);
  transition: background var(--md-dur-short);
  cursor: default;
}
ul.list li:last-child, ol.list li:last-child { border-bottom: none; }
ul.list li:hover, ol.list li:hover { background: color-mix(in srgb, var(--md-on-surface) 6%, transparent); }
ul.list li .meta  { margin-left: auto; color: var(--md-on-surface-variant); font-size: 12px; }
ul.list li .icon  { color: var(--md-on-surface-variant); }

/* ===================== CHIPS ===================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--md-shape-sm);
  border: 1px solid var(--md-outline);
  background: transparent;
  color: var(--md-on-surface);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--md-dur-short), box-shadow var(--md-dur-short);
  user-select: none;
}
.chip:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.chip.selected {
  background: var(--md-secondary-container);
  border-color: transparent;
  color: var(--md-on-secondary-container);
}
.chip.filter  { background: var(--md-surface-container-low); }
.chip.input   { background: var(--md-surface-container); }
.chip.suggestion { background: transparent; }

/* ===================== BADGE ===================== */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--md-shape-full);
  background: var(--md-error);
  color: var(--md-on-error);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .5px;
}
.badge.large { min-width: 24px; height: 24px; font-size: 12px; }

/* ===================== SNACKBAR ===================== */
.snackbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  padding: 14px 16px;
  border-radius: var(--md-shape-xs);
  min-width: 280px;
  max-width: 600px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--md-elev-3);
  z-index: 200;
  animation: md-snack-in var(--md-dur-med) var(--md-ease-decel);
  font-size: 14px;
}
.snackbar button {
  background: transparent;
  color: var(--md-inverse-primary);
  margin-left: auto;
  padding: 0 8px;
  height: 32px;
}
@keyframes md-snack-in {
  from { opacity: 0; transform: translateX(-50%) translateY(100%); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===================== DIVIDER ===================== */
.divider, hr {
  border: none;
  border-top: 1px solid var(--md-outline-variant);
  margin: 0;
  width: 100%;
}
.divider.inset { margin-left: 16px; }

/* ===================== TABS ===================== */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--md-outline-variant);
  background: var(--md-surface);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button {
  flex: none;
  height: 48px;
  padding: 0 24px;
  border-radius: 0;
  color: var(--md-on-surface-variant);
  background: transparent;
  box-shadow: none;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1px;
  transition: color var(--md-dur-short), border-color var(--md-dur-short);
}
.tabs a:hover, .tabs button:hover { background: color-mix(in srgb, var(--md-on-surface) 6%, transparent); }
.tabs a.active, .tabs button.active {
  color: var(--md-primary);
  border-bottom-color: var(--md-primary);
}

/* ===================== TOOLTIP ===================== */
[data-tooltip] { position: relative; }
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(.8);
  background: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  padding: 4px 8px;
  border-radius: var(--md-shape-xs);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--md-dur-short), transform var(--md-dur-short);
  z-index: 300;
}
[data-tooltip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ===================== MENU ===================== */
.menu {
  position: absolute;
  background: var(--md-surface-container);
  border-radius: var(--md-shape-xs);
  box-shadow: var(--md-elev-2);
  min-width: 112px;
  overflow: hidden;
  z-index: 150;
  animation: md-menu-in var(--md-dur-short) var(--md-ease-decel);
}
.menu li, .menu a, .menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--md-on-surface);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .25px;
  cursor: pointer;
  transition: background var(--md-dur-short);
}
.menu li:hover, .menu a:hover, .menu button:hover {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}
@keyframes md-menu-in {
  from { opacity: 0; transform: scaleY(.8); transform-origin: top; }
  to   { opacity: 1; transform: none; }
}

/* ===================== UTILITIES ===================== */
.surface                  { background: var(--md-surface); color: var(--md-on-surface); }
.surface-container        { background: var(--md-surface-container); }
.surface-container-low    { background: var(--md-surface-container-low); }
.surface-container-high   { background: var(--md-surface-container-high); }
.primary                  { background: var(--md-primary); color: var(--md-on-primary); }
.secondary                { background: var(--md-secondary); color: var(--md-on-secondary); }
.tertiary                 { background: var(--md-tertiary); color: var(--md-on-tertiary); }
.error                    { background: var(--md-error); color: var(--md-on-error); }
.primary-container        { background: var(--md-primary-container); color: var(--md-on-primary-container); }

.text-primary             { color: var(--md-primary); }
.text-secondary           { color: var(--md-secondary); }
.text-on-surface          { color: var(--md-on-surface); }
.text-on-surface-variant  { color: var(--md-on-surface-variant); }
.text-error               { color: var(--md-error); }

.rounded-none  { border-radius: 0; }
.rounded-xs    { border-radius: var(--md-shape-xs); }
.rounded-sm    { border-radius: var(--md-shape-sm); }
.rounded-md    { border-radius: var(--md-shape-md); }
.rounded-lg    { border-radius: var(--md-shape-lg); }
.rounded-xl    { border-radius: var(--md-shape-xl); }
.rounded-full  { border-radius: var(--md-shape-full); }

.elev-0 { box-shadow: var(--md-elev-0); }
.elev-1 { box-shadow: var(--md-elev-1); }
.elev-2 { box-shadow: var(--md-elev-2); }
.elev-3 { box-shadow: var(--md-elev-3); }
.elev-4 { box-shadow: var(--md-elev-4); }

.p-0  { padding: 0; }        .p-1  { padding: 4px; }    .p-2  { padding: 8px; }
.p-3  { padding: 12px; }     .p-4  { padding: 16px; }   .p-6  { padding: 24px; }
.p-8  { padding: 32px; }
.m-0  { margin: 0; }         .m-1  { margin: 4px; }     .m-2  { margin: 8px; }
.m-3  { margin: 12px; }      .m-4  { margin: 16px; }    .m-auto { margin: auto; }
.gap-1 { gap: 4px; }         .gap-2 { gap: 8px; }       .gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }        .gap-6 { gap: 24px; }

.w-full   { width: 100%; }
.h-full   { height: 100%; }
.flex     { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-1   { flex: 1; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end   { justify-content: flex-end; }
.wrap     { flex-wrap: wrap; }
.hidden   { display: none; }
.opacity-50 { opacity: .5; }
.truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sr-only  { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 600px) {
  main { padding: 8px; }
  .grid { grid-template-columns: 1fr; }
  .hide-mobile { display: none !important; }
  header { height: 56px; }
}
@media (min-width: 601px) and (max-width: 1240px) {
  .hide-tablet { display: none !important; }
}
@media (min-width: 1241px) {
  .hide-desktop { display: none !important; }
}