/* Copied from the design playground (branch claude/modest-shtern-f64ddd @ 887b161, assets/webui/css/base.css) for the release backend's portal and admin panel (D-144). Do not edit here: changes go to the design branch and are copied again. */
/* Reset, type and the browser surfaces nobody draws by default. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ground); color: var(--ink);
  font: 400 var(--t-14)/1.45 var(--font);
  font-feature-settings: "tnum" 1; /* tabular numerals everywhere: live numbers never shift */
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow: hidden; caret-color: var(--accent);
}
h1, h2, h3, p { margin: 0; }
h1 { font: 500 var(--t-24)/1.2 var(--font-display); letter-spacing: -.015em; }
h2 { font: 600 var(--t-16)/1.3 var(--font); letter-spacing: -.005em; }
h3 { font: 600 var(--t-13)/1.3 var(--font); color: var(--ink-2); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img { display: block; max-width: 100%; }
svg { display: block; flex: none; }
[hidden] { display: none !important; }

::selection { background: rgba(62, 131, 255, .38); color: #fff; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-small); }

/* scrollbars from the palette (WebView2 is Chromium) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .09); border: 3px solid transparent; background-clip: padding-box; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .18); }
::-webkit-scrollbar-corner { background: transparent; }

.num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: var(--t-12); }
.gold { color: var(--gold); } .elixir { color: var(--elixir); } .dark { color: var(--dark); }
.ok { color: var(--ok); } .bad { color: var(--bad); } .warn { color: var(--warn); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }