/* Material Design 3 — токены и компоненты (CSS-only, без фреймворков). */

:root {
  /* --- Color (baseline M3, light) --- */
  --md-sys-color-primary: #415f91;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d6e3ff;
  --md-sys-color-on-primary-container: #001b3e;
  --md-sys-color-secondary: #565f71;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #dae2f9;
  --md-sys-color-on-secondary-container: #131c2b;
  --md-sys-color-tertiary: #705575;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #fad8fd;
  --md-sys-color-on-tertiary-container: #28132e;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-surface: #f9f9ff;
  --md-sys-color-on-surface: #191c20;
  --md-sys-color-on-surface-variant: #43474e;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f3f3fa;
  --md-sys-color-surface-container: #eeedf4;
  --md-sys-color-surface-container-high: #e8e7ef;
  --md-sys-color-surface-container-highest: #e2e2e9;
  --md-sys-color-outline: #73777f;
  --md-sys-color-outline-variant: #c3c6cf;
  --md-sys-color-inverse-surface: #2e3036;
  --md-sys-color-inverse-on-surface: #eff0f7;

  /* --- Shape --- */
  --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;

  --md-sys-typescale-font: "Roboto", system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #aac7ff;
    --md-sys-color-on-primary: #0a305f;
    --md-sys-color-primary-container: #284777;
    --md-sys-color-on-primary-container: #d6e3ff;
    --md-sys-color-secondary: #bec6dc;
    --md-sys-color-on-secondary: #283141;
    --md-sys-color-secondary-container: #3e4759;
    --md-sys-color-on-secondary-container: #dae2f9;
    --md-sys-color-tertiary: #ddbce0;
    --md-sys-color-on-tertiary: #3f2844;
    --md-sys-color-tertiary-container: #573e5c;
    --md-sys-color-on-tertiary-container: #fad8fd;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-surface: #111318;
    --md-sys-color-on-surface: #e2e2e9;
    --md-sys-color-on-surface-variant: #c3c6cf;
    --md-sys-color-surface-container-lowest: #0c0e13;
    --md-sys-color-surface-container-low: #191c20;
    --md-sys-color-surface-container: #1d2024;
    --md-sys-color-surface-container-high: #282a2f;
    --md-sys-color-surface-container-highest: #33353a;
    --md-sys-color-outline: #8d9199;
    --md-sys-color-outline-variant: #43474e;
    --md-sys-color-inverse-surface: #e2e2e9;
    --md-sys-color-inverse-on-surface: #2e3036;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--md-sys-typescale-font);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--md-sys-color-primary); }

/* --- Typography --- */
.display-small { font: 400 36px/44px var(--md-sys-typescale-font); }
.headline-medium { font: 400 28px/36px var(--md-sys-typescale-font); }
.headline-small { font: 400 24px/32px var(--md-sys-typescale-font); }
.title-large { font: 500 22px/28px var(--md-sys-typescale-font); }
.title-medium { font: 500 16px/24px var(--md-sys-typescale-font); letter-spacing: .15px; }
.body-large { font: 400 16px/24px var(--md-sys-typescale-font); }
.body-medium { font: 400 14px/20px var(--md-sys-typescale-font); color: var(--md-sys-color-on-surface-variant); }
.label-large { font: 500 14px/20px var(--md-sys-typescale-font); letter-spacing: .1px; }

/* --- Layout --- */
.m3-appbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 16px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  position: sticky;
  top: 0;
  z-index: 10;
}
.m3-appbar__title { font: 500 22px/28px var(--md-sys-typescale-font); flex: 1; }
.m3-appbar .brand { display: flex; align-items: center; gap: 8px; }

.m3-container { max-width: 720px; margin: 0 auto; padding: 16px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.center { text-align: center; }

/* --- Card --- */
.m3-card {
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-large);
  padding: 24px;
}
.m3-card--outlined {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.m3-card--primary {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

/* --- Buttons --- */
.m3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  font: 500 14px/20px var(--md-sys-typescale-font);
  letter-spacing: .1px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, box-shadow .15s ease;
  user-select: none;
}
.m3-btn--filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.m3-btn--filled:hover { box-shadow: 0 1px 3px rgba(0,0,0,.3); background: color-mix(in srgb, var(--md-sys-color-primary) 92%, #fff); }
.m3-btn--tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.m3-btn--tonal:hover { box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.m3-btn--outlined { background: transparent; color: var(--md-sys-color-primary); border: 1px solid var(--md-sys-color-outline); }
.m3-btn--outlined:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
.m3-btn--text { background: transparent; color: var(--md-sys-color-primary); padding: 0 12px; }
.m3-btn--text:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
.m3-btn--full { width: 100%; }
.m3-btn:disabled { opacity: .4; cursor: not-allowed; }

/* --- Text field (outlined) --- */
.m3-field { display: flex; flex-direction: column; gap: 6px; }
.m3-field label { font: 500 12px/16px var(--md-sys-typescale-font); color: var(--md-sys-color-on-surface-variant); }
.m3-field input {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  font: 400 16px/24px var(--md-sys-typescale-font);
  color: var(--md-sys-color-on-surface);
  background: transparent;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  outline: none;
}
.m3-field input:focus { border: 2px solid var(--md-sys-color-primary); }

/* --- Linear progress --- */
.m3-progress {
  height: 8px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest);
  overflow: hidden;
}
.m3-progress__bar { height: 100%; background: var(--md-sys-color-primary); border-radius: inherit; transition: width .3s; }

/* --- Misc --- */
.m3-divider { height: 1px; background: var(--md-sys-color-outline-variant); border: none; margin: 8px 0; }
.m3-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font: 500 14px/20px var(--md-sys-typescale-font);
}
.m3-chip--primary { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.code-box {
  display: block;
  padding: 12px 16px;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-small);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 13px;
  word-break: break-all;
}
.material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 400; vertical-align: middle; }
.banner {
  padding: 12px 16px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}
.banner--error { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }