* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "kern" 1, "liga" 1, "tnum" 1, "lnum" 1;
  font-kerning: normal;
  /* Crisp, lighter variable-font rendering on the dark backdrop (premium dark-UI norm). */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  margin: 0;
  background: var(--bg);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--text);
  font-feature-settings: "kern" 1, "liga" 1, "tnum" 1, "lnum" 1;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(h1, h2, h3, h4, .section-title h1, .section-title h2, .hero h1, .boot-loader-copy strong) {
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

.app-root {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, var(--page-halo), transparent 62%),
    radial-gradient(ellipse 58% 36% at 82% 12%, var(--page-brand-halo), transparent 66%),
    transparent;
}

/* Cinematic arena backdrop: a fixed layer behind all content. Revealed at the
   top with an electric-blue broadcast bloom, darkened toward the bottom so dense
   tables stay legible. Replaces the old near-opaque overlay that crushed the
   arena to black, and avoids background-attachment:fixed jank on mobile. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(125% 85% at 50% -12%, var(--arena-brand-bloom), transparent 52%),
    linear-gradient(180deg, var(--arena-scrim-top), var(--arena-scrim-mid) 58%, var(--arena-scrim-bottom)),
    url("../../../assets/arena-liquid-glass.webp") center top / cover no-repeat,
    var(--bg);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: var(--focus-shadow);
}

.app-shell {
  display: grid;
  gap: var(--space-5);
  width: min(1480px, 100%);
  min-width: 0;
  margin: 0 auto;
  padding: var(--space-5);
}

.workspace {
  display: grid;
  gap: var(--space-7);
  min-width: 0;
  width: min(1080px, 100%);
  margin: 0 auto;
}

.page-stack {
  display: grid;
  gap: var(--space-7);
  min-width: 0;
}

.page-stack > * {
  min-width: 0;
}

@media (min-width: 1101px) {
  .app-shell[data-surface="desktop-browser"] {
    gap: var(--space-3);
    padding: 14px 18px 22px;
  }

  .workspace--desktop-ops {
    width: min(1320px, 100%);
  }

  .app-shell[data-surface="desktop-browser"] .workspace,
  .app-shell[data-surface="desktop-browser"] .page-stack {
    gap: var(--space-5);
  }
}