:root {
  color-scheme: dark;
  --bg: #101915;
  --panel: #19231c;
  --panel-raised: #202b22;
  --line: #354033;
  --line-soft: #29352b;
  --text: #e9e6d6;
  --muted: #a7ae99;
  --gold: #d2b57a;
  --gold-dark: #8b744d;
  --green: #a0bc8b;
  --red: #e1a28c;
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }
button, a, input, select, summary, canvas { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
button, input, select { border-radius: 3px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible, canvas:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand > .icon { width: 38px; height: 44px; color: var(--gold); stroke-width: 1.15; }
.brand-wordmark { display: flex; flex-direction: column; font: 11px/1.25 system-ui, sans-serif; letter-spacing: .3em; }
.brand-wordmark strong { font: 23px/1.25 Georgia, "Times New Roman", serif; letter-spacing: .09em; }
.eyebrow { margin: 0; color: var(--gold); font-size: 10px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; }
.muted { color: var(--muted); }
.button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid #536047;
  background: #293528;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
.button:hover:not(:disabled) { background: #34432f; border-color: #778164; }
.button-primary { border-color: var(--gold); background: var(--gold); color: #20251b; }
.button-primary:hover:not(:disabled) { border-color: #e1c68f; background: #e1c68f; }
.button-subtle { background: transparent; border-color: var(--line); color: var(--muted); }
.button-subtle:hover:not(:disabled) { background: var(--panel-raised); color: var(--text); }
.button-danger { background: #4b2d25; border-color: #9c6956; color: #f1c4b2; }
.button-small { min-height: 32px; padding: 6px 10px; font-size: 11px; }
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  padding: 7px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
}
.icon-button:hover:not(:disabled) { background: var(--panel-raised); color: var(--gold); border-color: var(--gold-dark); }
input, select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #45513f;
  background: #111b15;
  color: var(--text);
}
input::placeholder { color: #89937d; }
input:disabled, select:disabled { opacity: .55; }
label { display: block; margin-bottom: 7px; color: #c2c7b4; font-size: 12px; }
kbd {
  display: inline-block;
  min-width: 22px;
  padding: 1px 5px;
  border: 1px solid #4a5442;
  border-bottom-width: 2px;
  border-radius: 3px;
  background: #252f24;
  color: #c9cfb8;
  font: 10px/1.6 ui-monospace, monospace;
  text-align: center;
}
.status-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #8c967f; }
.status-dot.online { background: var(--green); box-shadow: 0 0 8px #a0bc8b33; }
.sprite-thumb {
  --sprite-size: 44px;
  width: var(--sprite-size);
  height: var(--sprite-size);
  display: inline-block;
  flex: 0 0 auto;
  background: url("/sprites.svg") no-repeat;
  background-size: calc(var(--sprite-size) * 8) calc(var(--sprite-size) * 4);
  background-position: calc(var(--sprite-x) * var(--sprite-size)) calc(var(--sprite-y) * var(--sprite-size));
  image-rendering: pixelated;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}