:root {
  color-scheme: dark;
  --bg: #182535;
  --panel: #223449;
  --panel-raised: #2b4055;
  --inset: #142233;
  --line: #3b5268;
  --text: #edf3f9;
  --muted: #9eafc1;
  --accent: #e9b16b;
  --accent-hover: #f4c78e;
  --success: #9cb79b;
  --danger: #f3b2a6;
  --focus: #f3c58c;
  --shadow: 0 18px 48px #0b17272b;
  --font-body: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --font-heading: Bahnschrift, "Arial Narrow", "Segoe UI", sans-serif;
  font: 14px/1.55 var(--font-body);
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 300px; min-height: 100vh; }
button, input, textarea, select { font: inherit; }
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-raised); color: var(--text); cursor: pointer; text-decoration: none; font-weight: 600; line-height: 1.35; transition: background .15s, border-color .15s; }
button:hover:enabled, .button:hover { background: #354c63; border-color: #607a92; }
button:active:enabled { transform: translateY(1px); }
button:disabled { opacity: .48; cursor: default; }
button.primary, .button.primary { border-color: var(--accent); background: var(--accent); color: #213043; }
button.primary:hover:enabled, .button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.quiet, .button.quiet { background: transparent; }
button.quiet:hover:enabled, .button.quiet:hover { background: #ffffff08; }
a { color: var(--accent); text-underline-offset: 3px; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
input, select, textarea { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; background: var(--inset); color: var(--text); }
input::placeholder, textarea::placeholder { color: #8498ad; opacity: 1; }
input[readonly] { background: #203145; color: #bfcede; border-color: #364b61; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); }
textarea { min-height: 104px; resize: vertical; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 500; }
h1 { font-size: clamp(29px, 3.3vw, 42px); line-height: 1.15; letter-spacing: -.7px; margin-bottom: 11px; }
h2 { font-size: 20px; line-height: 1.35; margin-bottom: 10px; }
h3 { font-size: 17px; line-height: 1.4; margin-bottom: 8px; }
p { margin-bottom: 16px; }
svg { display: block; }
.full, .wide { width: 100%; }
.muted, .field-help, .small-note { color: var(--muted); }
.field { margin-bottom: 22px; }
.field label, .avatar-picker legend { display: block; font-size: 13px; font-weight: 600; margin-bottom: 9px; color: #c7d4e1; }
.field-help { font-size: 12px; line-height: 1.65; margin: 8px 0 0; max-width: 65ch; }
.field-error { display: block; font-size: 12px; color: var(--danger); margin-top: 6px; }
.field-error:empty { display: none; }
.message, .notice { padding: 12px 15px; border: 1px solid #527465; border-radius: 8px; background: #263f3f; color: #d1e8d2; font-size: 13px; line-height: 1.65; margin-bottom: 19px; }
.message.error, .notice.error { border-color: #93635e; background: #483337; color: #f5c9bc; }
.avatar { --avatar: #b6b987; display: grid; place-items: center; flex-shrink: 0; background: var(--avatar); color: #203044; font-family: var(--font-heading); font-weight: 600; border: 1px solid #ffffff20; border-radius: 11px; }
.avatar.small { width: 35px; height: 35px; font-size: 13px; border-radius: 9px; }
.avatar.large { width: 50px; height: 50px; font-size: 19px; }
.avatar.hero { width: 83px; height: 83px; font-size: 30px; border-radius: 16px; }
.visually-hidden, .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; left: 16px; top: 10px; z-index: 100; transform: translateY(-160%); padding: 10px 15px; border-radius: 6px; background: var(--accent); color: var(--inset); font-weight: 600; }
.skip-link:focus { transform: none; }
progress { display: block; width: 100%; appearance: none; height: 7px; border: 0; border-radius: 6px; overflow: hidden; background: var(--inset); }
progress::-webkit-progress-bar { background: var(--inset); border-radius: 6px; }
progress::-webkit-progress-value { background: var(--accent); border-radius: 6px; }
progress::-moz-progress-bar { background: var(--accent); }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; max-width: calc(100vw - 32px); transform: translateX(-50%); padding: 13px 20px; border: 1px solid #60778e; border-radius: 10px; background: #2c4259; color: var(--text); box-shadow: 0 8px 35px #0b14275c; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }