/* Reset, typography, and form/button primitives. */

* { box-sizing: border-box; }
/* Screens are toggled via the hidden attribute; it must beat class display rules. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font: 14px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--page);
  color: var(--ink);
}
.muted { color: var(--muted); }
a { color: var(--series); }

.spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--grid); border-top-color: var(--series);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

input, select, textarea {
  font: inherit; color: var(--ink); background: var(--page);
  border: 1px solid var(--baseline); border-radius: 8px; padding: 8px 10px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--series); outline-offset: -1px; border-color: transparent; }

.btn {
  font: inherit; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--ink); background: var(--surface); border: 1px solid var(--baseline); border-radius: 8px; padding: 8px 14px;
}
.btn:hover { border-color: var(--muted); }
.btn-primary { background: var(--series); border-color: var(--series); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); border-color: var(--series); }
.btn-danger { border-color: var(--critical); color: var(--critical); }
.btn-block { width: 100%; }
.btn-sm { padding: 4px 10px; font-size: 12.5px; border-radius: 7px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.alert {
  background: color-mix(in srgb, var(--critical) 10%, var(--surface));
  border: 1px solid var(--critical); color: var(--ink);
  border-radius: 8px; padding: 9px 12px; font-size: 13px; margin-bottom: 12px;
}