/* Headless universal interface system.
   This layer intentionally sits after legacy styles so existing hooks and
   renderers can migrate without changing their behavioral contracts. */

@font-face {
  font-family: "Manrope";
  src: url("./ManropeLatin.woff2") format("woff2"), url("./assets/fonts/ManropeLatin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("./SpaceGroteskLatin.woff2") format("woff2"), url("./assets/fonts/SpaceGroteskLatin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg-primary: #0b0b0d;
  --bg-secondary: #101013;
  --bg-elevated: #17171b;
  --surface: #131316;
  --surface-hover: #1b1a1e;
  --border-subtle: rgba(255, 224, 198, .09);
  --border-strong: rgba(255, 190, 133, .18);
  --text-primary: #f7f3ee;
  --text-secondary: #c1b9b1;
  --text-muted: #817970;
  --pumpkin: #f4872f;
  --pumpkin-hot: #ffb45f;
  --pumpkin-deep: #d85b18;
  --accent: var(--pumpkin);
  --accent-hover: var(--pumpkin-hot);
  --accent-soft: rgba(244, 135, 47, .13);
  --accent-contrast: #160d07;
  --ember: #ff7022;
  --success: #63c995;
  --warning: #d8a657;
  --danger: #ed6978;
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 10px;
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, .22);
  --shadow-md: 0 20px 52px rgba(0, 0, 0, .32);
  --transition-fast: 180ms cubic-bezier(.2, .8, .2, 1);
  --font-sans: "Manrope", "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", "Manrope", "Inter", sans-serif;
  --font-mono: "Cascadia Code", "Fira Code", "SFMono-Regular", Consolas, monospace;

  /* Compatibility aliases used by the existing renderers. */
  --bg: var(--bg-primary);
  --bg-2: var(--bg-secondary);
  --bg-soft: var(--bg-secondary);
  --sidebar: #0d0d10;
  --panel: var(--surface);
  --panel-bg: var(--surface);
  --panel-strong: var(--bg-elevated);
  --panel-hover: var(--surface-hover);
  --surface-2: var(--bg-elevated);
  --surface-3: #201b18;
  --surface-solid: var(--surface);
  --line: var(--border-subtle);
  --border: var(--border-subtle);
  --border-mid: var(--border-strong);
  --line-strong: var(--border-strong);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --soft: var(--text-muted);
  --ok: var(--success);
  --warn: var(--warning);
  --radius: var(--radius-md);
  --radius-xs: var(--radius-sm);
  --shadow: var(--shadow-md);
  --font: var(--font-sans);
  --display: var(--font-display);
  --mono: var(--font-mono);
  --neon-blue: var(--accent);
  --neon-purple: #c4682d;
  --cyber-green: var(--success);
  --cyber-red: var(--danger);
  --accent-2: #ffc06b;
}

* {
  scrollbar-color: rgba(244, 135, 47, .42) transparent;
}

html {
  background: var(--bg-primary);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background:
    linear-gradient(rgba(244, 135, 47, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 135, 47, .014) 1px, transparent 1px),
    var(--bg-primary);
  background-size: 52px 52px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}

body::before,
body::after,
.animated-background::before,
.animated-background::after {
  opacity: .12;
}

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  min-height: 48px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(244, 135, 47, .34);
  background-clip: padding-box;
  box-shadow: none;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 180, 95, .58); background-clip: padding-box; }

::selection { color: #fff; background: rgba(244, 135, 47, .42); }

a { color: #f3a65f; transition: color var(--transition-fast); }
a:hover { color: #ffd09b; text-decoration: none; }

button,
input,
select,
textarea { letter-spacing: 0; }

button,
a,
input,
select,
textarea,
[tabindex] { outline: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

h1, h2, h3, h4,
.brand-title,
.topbar-brand,
.workspace-title,
.topbar-server {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: 0;
}

p { color: var(--text-secondary); }
code, pre, kbd, samp,
.metric-value,
.workspace-stat strong,
.chip,
.badge,
.select-code,
.command-card h3 {
  font-family: var(--font-mono);
}

.eyebrow,
.panel-kicker,
.workspace-kicker,
.section-title,
.server-section-title,
.category-label,
.side-nav-heading,
.side-active-title {
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.btn,
.mini-btn,
.icon-link {
  min-height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: #19181c;
  box-shadow: none;
  color: var(--text-primary);
  font-weight: 650;
  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.btn:hover,
.mini-btn:hover,
.icon-link:hover {
  border-color: rgba(244, 135, 47, .44);
  background: #211b18;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: none;
}

.btn:active,
.mini-btn:active,
.icon-link:active { transform: translateY(0) scale(.985); }

.btn.primary {
  border-color: #ff9b4c;
  background: var(--accent);
  color: var(--accent-contrast);
}
.btn.primary:hover { border-color: #ffc17c; background: var(--accent-hover); }
.btn.warn { border-color: rgba(216, 166, 87, .35); background: rgba(216, 166, 87, .09); color: #eac580; }
.btn.danger { border-color: rgba(237, 105, 120, .38); background: rgba(237, 105, 120, .10); color: #ffadb6; }
.btn:disabled { cursor: not-allowed; opacity: .42; transform: none; }

.input,
.server-search,
.field input,
.field select,
.field textarea,
input,
select,
textarea {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: #0f0f12;
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.input:hover,
.server-search:hover,
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--border-strong); background: #11151d; }

.input:focus,
.server-search:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgba(244, 135, 47, .72);
  background: #151317;
  box-shadow: 0 0 0 3px rgba(244, 135, 47, .11);
}

.field { gap: 7px; }
.field label { color: var(--text-secondary); font-size: 12px; font-weight: 650; }
.field small, .field-help { color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.field textarea, textarea { min-height: 108px; resize: vertical; }

.panel,
.card,
.metric,
.module-card,
.preview-box,
.audit-row,
.log-row,
.status-card,
.command-card,
.feature-card,
.legal-card,
.server-card,
.workspace-header,
.sidebar-panel,
.admin-control-card {
  border-color: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: none;
}

.panel:hover,
.card:hover,
.module-card:hover,
.command-card:hover,
.server-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  box-shadow: var(--shadow-sm);
}

.metric {
  min-height: 92px;
  padding: 15px;
  overflow: hidden;
}
.metric::before { display: none; }
.metric span,
.metric-label { color: var(--text-muted); font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.metric strong,
.metric-value { color: var(--text-primary); font-size: 25px; font-weight: 650; }

.chip,
.badge,
.draft-chip {
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  color: var(--text-secondary);
  box-shadow: none;
  font-size: 10px;
}
.chip.ok, .badge.ok { border-color: rgba(99, 201, 149, .25); color: #8cddb1; background: rgba(99, 201, 149, .08); }
.chip.warn, .badge.warn { border-color: rgba(216, 166, 87, .25); color: #e6c27f; background: rgba(216, 166, 87, .08); }
.chip.danger, .badge.danger { border-color: rgba(237, 105, 120, .25); color: #ff9faa; background: rgba(237, 105, 120, .08); }

.switch,
.switch-row {
  border-color: var(--border-subtle);
  background: rgba(255, 255, 255, .025);
}

.switch input,
.switch-row input[type="checkbox"] {
  position: relative;
  box-sizing: border-box;
  width: 36px;
  min-width: 36px;
  height: 20px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: #222733;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.switch input::after,
.switch-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #949bad;
  transform: translateY(-50%);
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.switch input:checked,
.switch-row input[type="checkbox"]:checked { border-color: var(--accent); background: rgba(244, 135, 47, .42); }
.switch input:checked::after,
.switch-row input[type="checkbox"]:checked::after { background: #fff; transform: translate(16px, -50%); }

.sidebar,
.docs-sidebar {
  border-color: var(--border-subtle);
  background: rgba(13, 16, 22, .98);
  box-shadow: none;
}

.brand,
.topbar,
.docs-main > .topbar {
  border-color: var(--border-subtle);
  background: rgba(11, 11, 13, .9);
  backdrop-filter: none;
}

/* The local control center keeps its surfaces crisp and inexpensive. */
.app .topbar,
.app .sidebar,
.app .panel,
.app .runtime-card,
.app .metric,
.app .landing-card,
.app .server-picker-card,
.app .global-summary-card,
.app .workspace-header,
.app .module-header,
.app .universal-module-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.app .runtime-card,
.app .metric,
.app .panel,
.app .landing-card,
.app .server-picker-card,
.app .global-summary-card {
  clip-path: none;
  transition-duration: 180ms;
}

.app {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transform: none;
  filter: none;
}

.app .brand-mark,
.app .workspace-header::before,
.app .module-header::before,
.app .universal-module-header::before,
.app .dashboard-hero::before {
  animation-duration: 12s;
}

.brand-mark,
.avatar {
  border-radius: var(--radius-md);
  background: #211a15;
  color: var(--accent);
}

.status-dot,
.pulse { box-shadow: none; animation: none; }

.side-group-grid { grid-template-columns: 1fr; gap: 3px; }
.side-group-button,
.side-nav-item,
.tab-button,
.docs-nav button,
.docs-nav a {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  transform: none;
}
.side-group-button { min-height: 44px; grid-template-columns: 28px minmax(0, 1fr); }
.side-group-button:hover,
.side-group-button.active,
.side-nav-item:hover,
.side-nav-item.active,
.tab-button:hover,
.tab-button.active,
.docs-nav button:hover,
.docs-nav button.active,
.docs-nav a:hover,
.docs-nav a.active {
  border-color: var(--border-subtle);
  background: rgba(255, 255, 255, .045);
  color: var(--text-primary);
  transform: none;
  box-shadow: inset 2px 0 0 var(--accent);
}

.side-group-icon,
.side-nav-icon,
.docs-nav .nav-icon {
  border-color: var(--border-subtle);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .025);
  color: var(--text-muted);
  box-shadow: none;
}

.main,
.docs-main {
  background: transparent;
}

.topbar { min-height: 64px; padding: 11px 22px; }
.page-wrap { width: min(100%, 1540px); padding: 18px 24px 52px; gap: 14px; }

.workspace-header {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .75fr);
  padding: 16px;
  background: linear-gradient(135deg, rgba(244, 135, 47, .065), transparent 48%), var(--surface);
}
.workspace-tabs { gap: 4px; }
.workspace-tab {
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
}
.workspace-tab:hover,
.workspace-tab.active { border: 0; background: var(--accent-soft); color: #ffd0a2; }
.workspace-stat { border-color: var(--border-subtle); background: var(--bg-secondary); }

.module-header,
.universal-module-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.universal-module-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: #ffc17d;
  font: 700 11px/1 var(--font-mono);
}
.universal-module-copy h3 { margin: 0; font-size: 17px; }
.universal-module-copy p { margin: 3px 0 0; color: var(--text-muted); font-size: 12px; }
.universal-module-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.settings-accordion {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.settings-accordion > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 15px;
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}
.settings-accordion > summary::-webkit-details-marker { display: none; }
.settings-accordion > summary > span { min-width: 0; flex: 1 1 auto; }
.settings-accordion > summary > small { flex: 0 0 auto; color: var(--text-muted); font-size: 9px; font-weight: 550; }
.settings-accordion > summary::after { content: "+"; color: var(--text-muted); font: 16px/1 var(--font-mono); }
.settings-accordion[open] > summary::after { content: "−"; }
.settings-accordion[open] > summary { border-bottom: 1px solid var(--border-subtle); }
.settings-accordion-body { padding: 15px; }

.form-grid { gap: 13px; }
.module-grid { gap: 10px; }
.module-card { min-height: 0; padding: 15px; }
.module-card p { font-size: 12px; line-height: 1.5; }

.table-shell {
  overflow: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface);
}
table { width: 100%; border-collapse: collapse; }
th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #151923;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: .065em;
  text-align: left;
  text-transform: uppercase;
}
th, td { padding: 11px 13px; border-bottom: 1px solid var(--border-subtle); }
tbody tr { transition: background var(--transition-fast); }
tbody tr:hover { background: rgba(255, 255, 255, .025); }

.empty,
.empty-state {
  min-height: 180px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .012);
  color: var(--text-muted);
  text-align: center;
}

.toast {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: #1a1f2a;
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
}

.danger-zone {
  border: 1px solid rgba(237, 105, 120, .23);
  border-radius: var(--radius-md);
  background: rgba(237, 105, 120, .045);
}

@media (max-width: 1180px) {
  .workspace-header { grid-template-columns: 1fr; }
  .workspace-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .page-wrap { padding: 14px 14px 88px; }
  .topbar { position: sticky; padding: 10px 14px; }
  .topbar-actions { max-width: none; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
  .topbar-actions .btn { white-space: nowrap; }
  .form-grid, .module-grid, .metric-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .universal-module-header { grid-template-columns: auto minmax(0, 1fr); }
  .universal-module-actions { grid-column: 1 / -1; justify-content: stretch; }
  .universal-module-actions .btn { flex: 1; }
}

@media (max-width: 640px) {
  body { font-size: 13px; }
  .workspace-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .metric { min-height: 78px; }
  .btn { min-height: 40px; }
  .settings-accordion-body { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) *,
  html:not([data-motion="full"]) *::before,
  html:not([data-motion="full"]) *::after {
    scroll-behavior: auto;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@keyframes headlessEmberPulse {
  0%, 100% { opacity: .72; filter: saturate(.92) brightness(.96); }
  42% { opacity: 1; filter: saturate(1.16) brightness(1.08); }
  56% { opacity: .82; filter: saturate(1.02) brightness(1); }
}

@keyframes headlessFlameTrace {
  0%, 100% { opacity: .18; transform: scaleX(.24); }
  48% { opacity: .82; transform: scaleX(1); }
  64% { opacity: .42; transform: scaleX(.62); }
}

@keyframes headlessOpsPulse {
  0%, 100% { opacity: .48; transform: scale(.82); box-shadow: 0 0 0 0 rgba(244, 135, 47, .05); }
  46% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 6px rgba(244, 135, 47, .08); }
}

@keyframes headlessTerminalScan {
  0% { transform: translate3d(0, -120%, 0); opacity: 0; }
  18% { opacity: .24; }
  72% { opacity: .12; }
  100% { transform: translate3d(0, 520%, 0); opacity: 0; }
}

@keyframes headlessCursorBlink {
  0%, 44% { opacity: 1; }
  45%, 100% { opacity: .14; }
}

@keyframes headlessTerminalFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -5px, 0); }
}

.brand-mark {
  position: relative;
  border-color: rgba(244, 135, 47, .28);
  box-shadow: 0 0 18px rgba(216, 91, 24, .08);
  animation: headlessEmberPulse 5.6s ease-in-out infinite;
}

.workspace-header,
.module-header,
.universal-module-header,
.dashboard-hero {
  position: relative;
  overflow: hidden;
}

.workspace-header::before,
.module-header::before,
.universal-module-header::before,
.dashboard-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 12%;
  width: 76%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 112, 34, .34), #ffb45f, rgba(255, 112, 34, .34), transparent);
  transform-origin: center;
  animation: headlessFlameTrace 7.2s ease-in-out infinite;
}

.workspace-header > *,
.module-header > *,
.universal-module-header > *,
.dashboard-hero > * { position: relative; z-index: 2; }

.topbar-ops {
  min-width: 0;
  flex: 0 1 390px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-inline: auto;
  padding: 8px 11px;
  border: 1px solid rgba(244, 135, 47, .14);
  border-radius: var(--radius-md);
  background: rgba(9, 9, 11, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
}

.topbar-ops code {
  min-width: 0;
  display: flex;
  align-items: center;
  color: #c8b7a8;
  font: 600 10px/1.2 var(--font-mono);
  white-space: nowrap;
}

.topbar-ops code > span:last-of-type {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-ops code i {
  width: 6px;
  height: 12px;
  margin-left: 4px;
  background: var(--accent);
  animation: headlessCursorBlink 1.05s steps(1, end) infinite;
}

.ops-prefix { margin-right: 4px; color: var(--accent); }
.ops-beacon {
  width: 7px;
  min-width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: headlessOpsPulse 2.2s ease-in-out infinite;
}
.ops-beacon.is-warning { background: var(--warning); }

.section-head h2,
.two-column h2,
.legal-overview h2,
.app .section-header h2,
.app .section-header h3 {
  color: #f8eee4;
  text-shadow: 0 8px 28px rgba(216, 91, 24, .08);
}

/* Public product surface -------------------------------------------------- */
.animated-background .bg-ray,
.animated-background .bg-water,
.animated-background .bg-ribbon,
.animated-background .bg-scan { display: none; }

.animated-background .bg-ray,
.animated-background .bg-water { display: block; }

html[data-performance="lite"] .animated-background .bg-ray,
html[data-performance="lite"] .animated-background .bg-water {
  opacity: .1;
  animation-duration: 34s;
}

.hero-embers,
.section-embers,
.hero-fire-glow {
  display: block;
  contain: strict;
}

.animated-background .bg-grid {
  opacity: .12;
  background-image:
    linear-gradient(rgba(244, 135, 47, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 135, 47, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: none;
  transform: perspective(860px) rotateX(65deg) translateY(-11%);
}

.docs-shell { grid-template-columns: 252px minmax(0, 1fr); max-width: 1920px; margin: 0 auto; }
.docs-sidebar { width: 252px; padding: 16px 12px; }
.docs-sidebar .brand { margin: 0 0 12px; padding: 8px; border: 0; }
.sidebar-status { margin: 0 4px 16px; border-color: var(--border-subtle); background: #151317; }
.docs-nav { padding-right: 3px; }
.docs-nav section { margin-bottom: 15px; }
.docs-nav h2,
.docs-nav h3 { padding: 0 9px 5px; color: var(--text-muted); font-size: 9px; letter-spacing: .08em; }
body .docs-nav h2,
body .docs-nav h3 { color: var(--text-muted); }
.docs-nav button { padding: 7px 9px; }
.docs-nav button span:last-child { font-size: 12px; }
.docs-nav .nav-item.active::before { background: var(--accent); }
.sidebar-actions { padding: 12px 4px 0; border-color: var(--border-subtle); }

.docs-main { min-width: 0; }
.docs-main > .topbar { min-height: 72px; padding: 12px clamp(18px, 4vw, 54px); }
.topbar-brand { font-size: 18px; }
.doc-section { width: min(100% - 48px, 1320px); margin-inline: auto; padding: clamp(44px, 6vw, 78px) 0; }
.doc-section:not(.hero-section) { border-top: 1px solid var(--border-subtle); }
.doc-section.active-doc-section:not(.hero-section)::before {
  opacity: .58;
  filter: saturate(1.22) contrast(1.08) brightness(.72);
}
.doc-section:not(.hero-section)::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 112, 34, .28), #ffb45f, rgba(255, 112, 34, .28), transparent);
  transform-origin: center;
  animation: headlessFlameTrace 8.4s ease-in-out infinite;
}

.hero-section {
  width: min(100% - 48px, 1320px);
  min-height: min(790px, calc(100vh - 72px));
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, .78fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 32px;
  overflow: hidden;
  border: 0;
  background: transparent;
}
.hero-scene { inset: 0; opacity: .36; }
.hero-figure {
  background-position: 75% center;
  filter: saturate(.92) contrast(1.1) brightness(.9);
  opacity: .76;
}
.hero-shade {
  background:
    linear-gradient(90deg, rgba(11, 11, 13, .99) 0%, rgba(11, 11, 13, .84) 43%, rgba(11, 11, 13, .24) 75%, rgba(11, 11, 13, .72) 100%),
    linear-gradient(0deg, var(--bg-primary), transparent 28%);
}
.hero-copy { position: relative; z-index: 2; min-width: 0; max-width: 620px; padding: 44px 0; }
.hero-copy h1 {
  margin: 18px 0 14px;
  color: #ffd09a;
  max-width: 100%;
  font-size: 76px;
  line-height: .88;
  letter-spacing: 0;
  background: linear-gradient(180deg, #fff8ef 0%, #ffd29d 52%, #f4872f 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 10px 34px rgba(216, 91, 24, .14);
}
.hero-copy h1::before,
.hero-copy h1::after { display: none; }
.hero-copy > p { max-width: 650px; color: var(--text-secondary); font-size: 18px; }
.hero-copy .hero-tagline { margin-bottom: 10px; color: #f6a85f; font: 650 13px/1.4 var(--font-mono); text-transform: uppercase; }
.hero-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 430px); gap: 8px; }
.hero-actions .btn { min-height: 42px; justify-content: center; padding-inline: 9px; font-size: 10px; white-space: nowrap; }

.hero-product-preview {
  position: relative;
  z-index: 3;
  width: min(100%, 520px);
  justify-self: end;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: rgba(9, 9, 11, .96);
  box-shadow: var(--shadow-md), 0 0 60px rgba(216, 91, 24, .08);
  animation: headlessTerminalFloat 7s ease-in-out infinite;
}
.hero-product-preview::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 112, 34, .58), #ffd09a, rgba(255, 112, 34, .3), transparent);
  animation: headlessFlameTrace 5.8s ease-in-out infinite;
}
.product-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); }
.product-preview-brand { color: var(--text-muted); font: 700 10px/1 var(--font-mono); letter-spacing: .08em; }
.terminal-clock { color: #e7a265; font: 600 10px/1 var(--font-mono); }
.product-preview-body { display: grid; grid-template-columns: 104px minmax(0, 1fr); min-height: 294px; }
.product-preview-body nav { display: grid; align-content: start; gap: 5px; padding: 14px 10px; border-right: 1px solid var(--border-subtle); background: #0d0d10; }
.product-preview-body nav button {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font: 650 11px/1.2 var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.product-preview-body nav button:hover { color: var(--text-primary); background: rgba(255, 255, 255, .035); }
.product-preview-body nav button.active { border-color: rgba(255, 142, 61, .18); background: var(--accent-soft); color: #ffd3a7; }
.product-preview-body nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.product-preview-content { min-width: 0; display: grid; align-content: stretch; gap: 10px; padding: 14px; background: linear-gradient(145deg, rgba(244, 135, 47, .075), transparent 52%); }
.terminal-window {
  position: relative;
  min-width: 0;
  min-height: 232px;
  display: grid;
  align-content: start;
  gap: 9px;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(255, 190, 133, .12);
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.016) 0 1px, transparent 1px 4px),
    #09090b;
  box-shadow: inset 0 0 34px rgba(0, 0, 0, .48);
  font-family: var(--font-mono);
}
.terminal-window::after {
  content: "";
  position: absolute;
  inset: 0;
  height: 28%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(244, 135, 47, .07), transparent);
  animation: headlessTerminalScan 7.8s linear infinite;
}
.terminal-command { margin-bottom: 3px; color: #8f867d; font-size: 10px; }
.terminal-command span { color: #f6a45b; }
.terminal-line {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px 48px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: #b9afa6;
  font-size: 9px;
  line-height: 1.45;
}
.terminal-line time { color: #6f675f; }
.terminal-line b { font-size: 8px; letter-spacing: .04em; }
.terminal-line > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terminal-ok { color: #75d49f; }
.terminal-warn { color: #eab766; }
.terminal-accent { color: #ff9f4e; }
.terminal-live-line { padding-top: 9px; border-top: 1px solid rgba(244, 135, 47, .12); }
.terminal-cursor {
  position: absolute;
  right: 14px;
  bottom: 17px;
  width: 5px;
  height: 10px;
  background: var(--accent);
  animation: headlessCursorBlink 1.05s steps(1, end) infinite;
}
.terminal-footer { display: flex; justify-content: space-between; gap: 12px; color: #776f67; font: 600 8px/1 var(--font-mono); text-transform: uppercase; }
.terminal-footer span { display: inline-flex; align-items: center; gap: 6px; }
.terminal-footer i { width: 5px; height: 5px; border-radius: 50%; background: #63c995; box-shadow: 0 0 8px rgba(99,201,149,.42); }
.terminal-window.is-switching > * { animation: headlessTerminalViewIn 190ms ease-out both; }
.terminal-window.is-switching > :nth-child(2) { animation-delay: 25ms; }
.terminal-window.is-switching > :nth-child(3) { animation-delay: 50ms; }
.terminal-window.is-switching > :nth-child(4) { animation-delay: 75ms; }
.terminal-window.is-switching > :nth-child(5) { animation-delay: 100ms; }
.product-preview-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 18px; }
.product-preview-metrics span { padding: 9px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 9px; }
.product-preview-metrics b { display: block; margin-bottom: 5px; color: var(--text-primary); font: 650 14px/1 var(--font-mono); }

.status-board { grid-column: 1 / -1; position: relative; z-index: 2; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: rgba(15, 18, 25, .88); }
.status-board .metric { min-height: 86px; border-right-color: var(--border-subtle); background: transparent; }

.headless-network-showcase {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 18px;
  padding-top: 54px;
  border-top: 1px solid var(--border-subtle);
}
.network-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .64fr);
  align-items: end;
  gap: 48px;
  margin-bottom: 34px;
}
.network-section-head h2 { max-width: 720px; margin: 7px 0 0; color: var(--text-primary); font-size: 38px; line-height: 1.08; }
.network-section-head p { max-width: 520px; margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.7; }
.network-scale {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 32px;
  border-block: 1px solid var(--border-subtle);
  background: rgba(9, 10, 13, .72);
}
.network-metric {
  position: relative;
  min-width: 0;
  padding: 26px 28px;
  border-right: 1px solid var(--border-subtle);
}
.network-metric:last-child { border-right: 0; }
.network-metric-code { display: block; margin-bottom: 14px; color: var(--accent); font: 750 10px/1 var(--font-mono); }
.network-metric strong { display: block; overflow: hidden; color: #fff4e8; font: 750 46px/1 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.network-metric small { display: block; margin-top: 11px; color: var(--text-muted); font: 700 10px/1.2 var(--font-mono); text-transform: uppercase; }
.guild-network-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: stretch; gap: 28px; }
.guild-network-stage {
  position: relative;
  isolation: isolate;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px),
    #0b0c10;
  background-size: 32px 32px;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .42);
}
.guild-network-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 130, 40, .12), transparent 18%),
    linear-gradient(115deg, transparent 42%, rgba(255, 155, 74, .07) 50%, transparent 58%);
  opacity: .72;
  animation: headlessNetworkScan 12s linear infinite;
}
.guild-network-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 16px;
  border: 1px solid rgba(255, 144, 55, .08);
  pointer-events: none;
  clip-path: polygon(0 0, 18% 0, 18% 1px, 82% 1px, 82% 0, 100% 0, 100% 18%, calc(100% - 1px) 18%, calc(100% - 1px) 82%, 100% 82%, 100% 100%, 82% 100%, 82% calc(100% - 1px), 18% calc(100% - 1px), 18% 100%, 0 100%, 0 82%, 1px 82%, 1px 18%, 0 18%);
}
.network-core {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 150, 72, .45);
  border-radius: 50%;
  background: #15100d;
  box-shadow: 0 0 0 14px rgba(255, 119, 31, .06), 0 0 38px rgba(255, 105, 20, .12);
}
.network-core img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; }
.network-core > span { position: absolute; inset: -15px; border: 1px solid rgba(255, 147, 66, .24); border-radius: 50%; animation: headlessNetworkPulse 2.8s ease-out infinite; }
.guild-network-nodes { position: absolute; inset: 0; z-index: 5; }
.guild-network-node {
  position: absolute;
  width: 214px;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.guild-network-node.node-1 { left: 5%; top: 12%; }
.guild-network-node.node-2 { right: 5%; top: 12%; flex-direction: row-reverse; text-align: right; }
.guild-network-node.node-3 { left: 2%; top: 44%; }
.guild-network-node.node-4 { right: 2%; top: 44%; flex-direction: row-reverse; text-align: right; }
.guild-network-node.node-5 { left: 13%; bottom: 9%; }
.guild-network-node.node-6 { right: 13%; bottom: 9%; flex-direction: row-reverse; text-align: right; }
.guild-network-avatar,
.guild-spotlight-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  background: #17191f;
  color: #ffc58f;
  font: 750 12px/1 var(--font-mono);
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.guild-network-avatar img,
.guild-spotlight-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.guild-network-label { min-width: 0; opacity: .62; transition: opacity var(--transition-fast), transform var(--transition-fast); }
.guild-network-label strong,
.guild-network-label small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guild-network-label strong { color: var(--text-primary); font-size: 11px; }
.guild-network-label small { margin-top: 4px; color: var(--text-muted); font: 600 9px/1 var(--font-mono); }
.guild-network-node:hover .guild-network-avatar,
.guild-network-node.active .guild-network-avatar { transform: scale(1.06); border-color: rgba(255, 143, 60, .7); box-shadow: 0 0 22px rgba(255, 111, 25, .16); }
.guild-network-node:hover .guild-network-label,
.guild-network-node.active .guild-network-label { opacity: 1; transform: translateY(-1px); }
.guild-network-node.active::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -4px -6px;
  border: 1px solid rgba(255, 143, 60, .18);
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, rgba(255, 132, 38, .09), transparent 72%);
  animation: headlessNodeLock 1.8s ease-out both;
}
.guild-network-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.network-link { position: absolute; z-index: 1; left: 50%; top: 50%; width: 31%; height: 1px; transform-origin: left center; background: linear-gradient(90deg, rgba(255, 130, 44, .22), rgba(255, 130, 44, .035)); }
.network-link::after { content: ""; position: absolute; left: calc(100% - 6px); top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #fff1d6; box-shadow: 0 0 6px #ffb15e, 0 0 15px rgba(255, 108, 24, .86); animation: headlessNetworkPacket 4.2s ease-in-out infinite; }
.network-link-1 { transform: rotate(210deg); }
.network-link-2 { transform: rotate(330deg); }
.network-link-3 { transform: rotate(180deg); }
.network-link-4 { transform: rotate(0deg); }
.network-link-5 { transform: rotate(145deg); }
.network-link-6 { transform: rotate(35deg); }
.network-link-2::after, .network-link-5::after { animation-delay: -1.1s; }
.network-link-3::after, .network-link-6::after { animation-delay: -2.2s; }
.network-loading { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); color: var(--text-muted); font: 600 10px/1 var(--font-mono); white-space: nowrap; }
.network-route.is-active { stroke: rgba(255, 189, 117, .58); stroke-width: 1.8; filter: drop-shadow(0 0 5px rgba(255, 116, 28, .34)); }
.network-signal.is-active { stroke: #fff0d6; stroke-width: 4.6; filter: drop-shadow(0 0 4px #ffb15e) drop-shadow(0 0 10px rgba(255, 101, 19, .92)); animation-duration: 2.8s; }
.network-stage-status {
  position: absolute;
  z-index: 7;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 32px);
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 142, 55, .18);
  border-radius: var(--radius-sm);
  background: rgba(10, 11, 15, .8);
  color: #d7c7b8;
  font: 650 9px/1.2 var(--font-mono);
  backdrop-filter: blur(8px);
}
.network-stage-status i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #72d6a4; box-shadow: 0 0 10px rgba(114, 214, 164, .65); }
.network-stage-status.is-updating span { animation: headlessStatusRefresh 260ms ease-out both; }
.guild-spotlight { align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 28px 4px 28px 12px; border-block: 1px solid var(--border-subtle); }
.guild-spotlight-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.guild-spotlight-avatar { width: 62px; height: 62px; }
.guild-rank { color: var(--accent); font: 750 9px/1 var(--font-mono); }
.guild-spotlight h3 { overflow-wrap: anywhere; margin: 22px 0 16px; color: var(--text-primary); font-size: 22px; line-height: 1.18; }
.guild-spotlight p { margin: 15px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.65; }
.guild-spotlight-metric { padding-block: 16px; border-block: 1px solid var(--border-subtle); }
.guild-spotlight-metric strong { display: block; color: #fff3e6; font: 750 30px/1 var(--font-display); }
.guild-spotlight-metric span { display: block; margin-top: 7px; color: var(--text-muted); font: 650 9px/1 var(--font-mono); text-transform: uppercase; }
.guild-safe-label { align-self: flex-start; margin-top: 22px; padding: 6px 8px; border: 1px solid rgba(99, 201, 149, .18); border-radius: var(--radius-sm); color: #78d6a6; font: 700 8px/1 var(--font-mono); text-transform: uppercase; }

.section-head { max-width: 800px; margin-bottom: 28px; }
.section-head h2, .two-column h2, .legal-overview h2 { margin: 6px 0 10px; font-size: 38px; line-height: 1.05; background: none; -webkit-text-fill-color: currentColor; }

.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--border-subtle); }
.feature-chapter {
  display: grid;
  grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr);
  gap: clamp(24px, 5vw, 72px);
  padding: 30px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.feature-chapter-head { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
.feature-chapter-head > span { color: var(--accent); font: 650 11px/1.5 var(--font-mono); }
.feature-chapter h3 { margin: 0 0 7px; font-size: 25px; }
.feature-chapter p { margin: 0; font-size: 13px; }
.feature-capability-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 22px; }
.feature-capability { padding: 0 0 14px; border-bottom: 1px solid var(--border-subtle); }
.feature-capability strong { display: block; margin-bottom: 4px; color: var(--text-primary); font-size: 13px; }
.feature-capability p { color: var(--text-muted); font-size: 11px; line-height: 1.5; }

.command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.command-card { min-height: 0; padding: 14px; }
.command-card h3 { font-size: 13px; }
.command-card p { font-size: 11px; }
.category-doc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.server-dashboard { grid-template-columns: 224px minmax(0, 1fr); gap: 12px; align-items: start; }
.server-picker { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.dashboard-nav { position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow-y: auto; padding: 12px 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface); }
.dashboard-nav-group { display: grid; gap: 2px; margin-top: 13px; }
.dashboard-nav-group:first-of-type { margin-top: 8px; }
.dashboard-nav-label { padding: 0 9px 4px; color: var(--text-muted); font-size: 9px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.tab-button { justify-content: flex-start; padding: 8px 9px; }
.tab-button > span { width: 24px; color: var(--text-muted); font: 650 9px/1 var(--font-mono); }
.dashboard-content { min-width: 0; border: 0; background: transparent; }
.server-card:hover { transform: none; }
.server-card.active { border-color: var(--border-strong); background: var(--surface); }

body.public-dashboard-mode #dashboard-preview.active-doc-section {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
}
body.public-dashboard-mode #serverPicker { grid-template-columns: minmax(0, 1fr); }
body.public-dashboard-mode #serverDashboard { grid-template-columns: 220px minmax(0, 1fr); gap: 12px; }
body.public-dashboard-mode .dashboard-hero h1,
body.public-dashboard-mode .dashboard-content h2,
body.public-dashboard-mode .dashboard-content h3 {
  color: var(--text-primary);
  background: none;
  -webkit-text-fill-color: currentColor;
}
body.public-dashboard-mode .dashboard-hero h1 { font-size: 36px; line-height: 1.08; }
body.public-dashboard-mode .dashboard-content .tab-heading h3 { font-size: 30px; line-height: 1.12; }
.dashboard-hero { margin-bottom: 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface); }
.dashboard-tab-surface { display: grid; gap: 12px; }
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.settings-stack { display: grid; gap: 10px; }
.module-live-preview { position: sticky; top: 88px; min-height: 220px; padding: 18px; }
.module-live-preview > strong { display: block; margin: 13px 0 7px; font-size: 16px; }
.mobile-save-bar { display: none; }
.universal-overview-grid { grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); }
.overview-activity, .overview-health { padding: 16px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface); }
.compact-list { gap: 0; }
.compact-list .audit-row { display: grid; grid-template-columns: minmax(120px, .4fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0; background: transparent; }
.compact-list .audit-row p { margin: 0; color: var(--text-muted); font-size: 11px; }
.compact-list .audit-row span { color: var(--text-muted); font: 10px/1 var(--font-mono); }
.health-list { display: grid; margin-top: 12px; }
.health-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.status-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 7px; border: 1px solid var(--border-subtle); border-radius: 999px; color: var(--text-secondary); background: rgba(255,255,255,.025); font: 650 9px/1 var(--font-mono); }
.status-badge.ok { border-color: rgba(99,201,149,.24); color: #90dab2; background: rgba(99,201,149,.07); }
.status-badge.muted { color: var(--text-muted); }

.legal-page { background: var(--bg-primary); }
.legal-shell { width: min(100% - 40px, 980px); }
.legal-nav { position: sticky; top: 0; z-index: 5; padding: 14px 0; border-bottom: 1px solid var(--border-subtle); background: rgba(11,13,18,.9); backdrop-filter: blur(14px); }
.legal-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.legal-brand { display: flex; align-items: center; gap: 10px; color: var(--text-primary); }
.legal-brand img { width: 34px; height: 34px; border-radius: var(--radius-md); object-fit: cover; }
.legal-brand strong, .legal-brand small { display: block; }
.legal-brand strong { font: 650 13px/1.2 var(--font-display); }
.legal-brand small { margin-top: 2px; color: var(--text-muted); font-size: 9px; }
.legal-nav-links { display: flex; align-items: center; gap: 4px; }
.legal-nav-links a { padding: 7px 9px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 11px; }
.legal-nav-links a:hover, .legal-nav-links a.active { background: rgba(255,255,255,.045); color: var(--text-primary); }
.legal-hero { padding: 72px 0 38px; }
.legal-hero h1 { max-width: 760px; color: var(--text-primary); background: none; -webkit-text-fill-color: currentColor; font-size: 58px; }
.legal-content { max-width: 780px; gap: 0; }
.legal-card { padding: 24px 0; border: 0; border-top: 1px solid var(--border-subtle); background: transparent; }
.legal-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 60px; padding: 20px 0 34px; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 11px; }

@media (max-width: 1040px) {
  .docs-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .docs-sidebar { width: 220px; }
  .hero-section { grid-template-columns: 1fr; min-height: auto; }
  .hero-product-preview { justify-self: start; width: min(100%, 620px); }
  .topbar-ops { flex-basis: 260px; }
  .guild-network-layout { grid-template-columns: 1fr; }
  .guild-spotlight { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 24px; padding: 22px 0; }
  .guild-spotlight-head { grid-row: 1 / span 3; display: grid; justify-items: center; }
  .guild-spotlight h3, .guild-spotlight p, .guild-spotlight-metric, .guild-safe-label { grid-column: 2; }
  .guild-spotlight h3 { margin: 0; }
  .guild-spotlight p { margin-top: 4px; }
  .guild-safe-label { margin-top: 10px; }
  .settings-layout { grid-template-columns: 1fr; }
  .module-live-preview { position: static; }
  body.public-dashboard-mode #dashboard-preview.active-doc-section { grid-template-columns: 1fr; min-height: auto; }
  body.public-dashboard-mode #userPanel,
  body.public-dashboard-mode #serverPicker,
  body.public-dashboard-mode #serverDashboard { grid-column: 1; }
  body.public-dashboard-mode #serverPicker { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-height: none; overflow: visible; }
  body.public-dashboard-mode #serverDashboard { grid-row: auto; grid-template-columns: 1fr; min-height: auto; }
  body.public-dashboard-mode .dashboard-nav { position: static; display: flex; gap: 5px; max-height: none; overflow-x: auto; overflow-y: hidden; }
  body.public-dashboard-mode .dashboard-nav-group { display: contents; }
  body.public-dashboard-mode .dashboard-side-title,
  body.public-dashboard-mode .dashboard-nav-label { display: none; }
  body.public-dashboard-mode .tab-button { min-width: max-content; }
  body.public-dashboard-mode .dashboard-content { max-height: none; overflow: visible; }
}

@media (max-width: 760px) {
  .docs-shell { display: block; }
  .docs-sidebar { position: sticky; top: 0; z-index: 30; width: 100%; height: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .docs-sidebar .brand { margin: 0; }
  .sidebar-status, .docs-nav { display: none; }
  .sidebar-actions { padding: 0; border: 0; }
  .sidebar-actions .btn:not(.primary) { display: none; }
  .docs-main > .topbar { top: 58px; min-height: 56px; padding: 8px 12px; }
  .topbar-ops { display: none; }
  .topbar-actions .icon-link, .topbar-actions .btn:not(.primary) { display: none; }
  .doc-section, .hero-section { width: min(100% - 28px, 1320px); padding: 42px 0; }
  .hero-copy { padding: 12px 0; }
  .hero-copy h1 { font-size: 56px; }
  .hero-copy > p { font-size: 16px; }
  .hero-actions { grid-template-columns: 1fr; width: 100%; }
  .section-head h2, .two-column h2, .legal-overview h2 { font-size: 30px; }
  .legal-hero h1 { font-size: 42px; }
  .hero-product-preview { display: block; width: 100%; margin-top: 4px; animation: none; }
  .product-preview-body { grid-template-columns: 1fr; min-height: 0; }
  .product-preview-body nav { display: flex; gap: 5px; overflow-x: auto; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--border-subtle); scrollbar-width: none; }
  .product-preview-body nav::-webkit-scrollbar { display: none; }
  .product-preview-body nav button { width: auto; min-width: max-content; text-align: center; }
  .product-preview-content { padding: 10px; }
  .terminal-window { min-height: 210px; padding: 13px; }
  .terminal-line { grid-template-columns: 34px 44px minmax(0, 1fr); gap: 6px; }
  .status-board { grid-template-columns: repeat(2, 1fr); }
  .network-section-head { grid-template-columns: 1fr; gap: 14px; }
  .network-section-head h2 { font-size: 30px; }
  .network-scale { grid-template-columns: 1fr; }
  .network-metric { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 20px 12px; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .network-metric:last-child { border-bottom: 0; }
  .network-metric-code { grid-row: 1 / span 2; margin: 0; }
  .network-metric strong { font-size: 36px; }
  .network-metric small { margin-top: 7px; }
  .feature-chapter { grid-template-columns: 1fr; gap: 18px; }
  .feature-capability-list, .command-grid, .category-doc-grid { grid-template-columns: 1fr; }
  .server-dashboard { grid-template-columns: 1fr; }
  .dashboard-nav { position: static; display: flex; gap: 5px; overflow-x: auto; max-height: none; padding: 8px; }
  .dashboard-side-title, .dashboard-nav-label { display: none; }
  .dashboard-nav-group { display: contents; }
  .tab-button { min-width: max-content; }
  .universal-overview-grid { grid-template-columns: 1fr; }
  .compact-list .audit-row { grid-template-columns: 1fr; }
  .mobile-save-bar { position: sticky; bottom: 8px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: rgba(21,25,35,.96); box-shadow: var(--shadow-md); }
  .mobile-save-bar span { color: var(--text-muted); font-size: 10px; }
  .table-shell table { min-width: 720px; }
  .legal-nav { align-items: flex-start; }
  .legal-nav-links { max-width: 62vw; overflow-x: auto; }
  .legal-nav-links a { white-space: nowrap; }
}

@media (max-width: 700px) {
  .headless-network-showcase { padding-top: 42px; }
  .guild-network-stage { min-height: 0; padding: 24px 14px; }
  .network-core { position: relative; left: auto; top: auto; width: 82px; height: 82px; margin: 4px auto 30px; transform: none; }
  .network-core img { width: 58px; height: 58px; }
  .network-link { display: none; }
  .guild-network-nodes { position: relative; inset: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .guild-network-node,
  .guild-network-node.node-1,
  .guild-network-node.node-2,
  .guild-network-node.node-3,
  .guild-network-node.node-4,
  .guild-network-node.node-5,
  .guild-network-node.node-6 { position: relative; inset: auto; width: 100%; min-width: 0; flex-direction: row; padding: 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: rgba(12, 13, 17, .82); text-align: left; }
  .guild-network-avatar { width: 40px; height: 40px; }
  .guild-network-label { opacity: .82; }
  .guild-network-label strong { font-size: 10px; }
  .guild-network-label small { font-size: 8px; }
  .guild-spotlight { grid-template-columns: 54px minmax(0, 1fr); gap: 8px 14px; }
  .guild-spotlight-head { grid-row: 1 / span 2; }
  .guild-spotlight-avatar { width: 50px; height: 50px; }
  .guild-spotlight-metric { padding-block: 12px; }
  .guild-spotlight p, .guild-safe-label { grid-column: 1 / -1; }
}

@keyframes headlessTerminalViewIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes headlessNetworkPulse {
  0% { opacity: .7; transform: scale(.88); }
  70%, 100% { opacity: 0; transform: scale(1.28); }
}

@keyframes headlessNetworkPacket {
  0%, 16% { left: calc(100% - 6px); opacity: 0; transform: scale(.65); }
  22% { opacity: 1; transform: scale(1); }
  74% { left: 0; opacity: 1; transform: scale(.86); }
  82%, 100% { left: 0; opacity: 0; transform: scale(.45); }
}

@media (max-width: 420px) {
  .hero-copy h1 { font-size: 48px; }
}

/* Local Control Center ---------------------------------------------------- */
.app { grid-template-columns: 252px minmax(0, 1fr); }
.app .admin-sidebar { width: 252px; }
.app .brand { padding: 13px 14px 11px; }
.brand-controls { display: flex; align-items: center; gap: 7px; }
.sidebar-collapse-button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font: 18px/1 var(--font-mono);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.sidebar-collapse-button:hover { border-color: var(--border-strong); background: rgba(255,255,255,.04); color: var(--text-primary); }
.app .admin-control-card { margin: 8px; padding: 9px; }
.app .sidebar-panel { margin: 0 8px 8px; }
.app .global-button { width: calc(100% - 16px); margin: 0 8px 8px; }
.app .server-list { padding-bottom: 10px; }
.app .side-module-nav { gap: 8px; padding: 7px; }
.app .side-active-tabs { gap: 2px; }
.app .side-nav-item { padding: 7px 8px; }
.app .side-nav-desc { display: block; }
.app .servers-panel { flex-basis: clamp(170px, 25vh, 230px); }
.app .topbar { min-height: 70px; }
.app .topbar-server { font-size: 15px; }
.app .page-wrap { max-width: 1540px; }
.app #tabContent { display: grid; gap: 12px; }
.app .section-header { padding: 2px 1px 8px; }
.app .section-header h2,
.app .section-header h3 { font-size: 20px; }
.app .module-actions { gap: 7px; }
.app .metric-grid { gap: 9px; }
.app .metric { min-height: 86px; }
.app .form-grid { align-items: start; }
.app .panel { padding: 16px; }
.app .command-card { animation: none; }
.app .command-grid { gap: 8px; }
.app .log-list,
.app .logs-list { gap: 6px; }
.app .log-row { padding: 11px 12px; }
.app .topbar-chips { gap: 4px; }
.app .draft-chip { white-space: nowrap; }
.sidebar-profile { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: center; }
.sidebar-profile .avatar { width: 30px; height: 30px; }
.sidebar-profile strong, .sidebar-profile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-profile strong { color: var(--text-primary); font-size: 11px; }
.sidebar-profile small { color: var(--text-muted); font-size: 9px; }

.app.sidebar-collapsed { grid-template-columns: 74px minmax(0, 1fr); }
.app.sidebar-collapsed .admin-sidebar { width: 74px; }
.app.sidebar-collapsed .brand { padding: 11px 8px; }
.app.sidebar-collapsed .brand-copy,
.app.sidebar-collapsed .brand-status,
.app.sidebar-collapsed .admin-control-card,
.app.sidebar-collapsed .global-button span:not(.gb-icon),
.app.sidebar-collapsed .server-section-title,
.app.sidebar-collapsed .server-search,
.app.sidebar-collapsed .server-item > span:not(.avatar),
.app.sidebar-collapsed .side-group-copy,
.app.sidebar-collapsed .side-active-title,
.app.sidebar-collapsed .side-nav-item > span:last-child,
.app.sidebar-collapsed .sidebar-profile > span:last-child { display: none; }
.app.sidebar-collapsed .brand-title { justify-content: center; }
.app.sidebar-collapsed .brand-controls { flex-direction: column-reverse; }
.app.sidebar-collapsed .global-button { justify-content: center; padding: 7px; }
.app.sidebar-collapsed .sidebar-panel { margin-inline: 6px; }
.app.sidebar-collapsed .servers-panel { flex-basis: 190px; }
.app.sidebar-collapsed .server-list { padding: 4px; justify-items: center; }
.app.sidebar-collapsed .server-item { display: grid; grid-template-columns: 1fr; justify-items: center; padding: 5px; }
.app.sidebar-collapsed .side-module-nav { padding: 5px; }
.app.sidebar-collapsed .side-group-button,
.app.sidebar-collapsed .side-nav-item { grid-template-columns: 1fr; justify-items: center; padding: 6px; }
.app.sidebar-collapsed .side-group-icon,
.app.sidebar-collapsed .side-nav-icon { width: 30px; height: 30px; }
.app.sidebar-collapsed .sidebar-profile { grid-template-columns: 1fr; justify-items: center; padding: 10px; }

@media (max-width: 900px) {
  .app,
  .app.sidebar-collapsed { display: block; }
  .app .admin-sidebar,
  .app.sidebar-collapsed .admin-sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100%;
    height: auto;
    max-height: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .app .brand,
  .app.sidebar-collapsed .brand { padding: 9px 12px; border: 0; }
  .app.sidebar-collapsed .brand-copy { display: inline; }
  .app .brand-status,
  .app .admin-control-card,
  .app .global-button,
  .app .sidebar-panel,
  .app .sidebar-footer,
  .app .sidebar-collapse-button { display: none; }
  .app .topbar { top: 58px; display: block; padding: 9px 12px; }
  .app .topbar-left { margin-bottom: 8px; }
  .app .topbar-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  .app .topbar-actions { width: 100%; overflow-x: auto; justify-content: flex-start; }
  .app .topbar-actions #saveBtn { position: fixed; right: 12px; bottom: 12px; z-index: 50; box-shadow: var(--shadow-md); }
  .app .workspace-header { padding: 13px; }
  .app .workspace-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .app .workspace-tab { white-space: nowrap; }
}

@media (max-width: 760px), (update: slow) {
  .hero-embers span:nth-child(n + 9),
  .section-embers span:nth-child(n + 9) { display: none; }

  .hero-fire-glow { opacity: .34; }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .section-embers { display: none; }
  html:not([data-motion="full"]) .hero-fire-glow { display: block; opacity: .34; animation: none !important; }
  html:not([data-motion="full"]) .hero-embers span { animation: none !important; opacity: .28; }
  html:not([data-motion="full"]) .brand-mark,
  html:not([data-motion="full"]) .workspace-header::before,
  html:not([data-motion="full"]) .module-header::before,
  html:not([data-motion="full"]) .universal-module-header::before,
  html:not([data-motion="full"]) .dashboard-hero::before,
  html:not([data-motion="full"]) .hero-product-preview,
  html:not([data-motion="full"]) .hero-product-preview::after,
  html:not([data-motion="full"]) .terminal-window::after,
  html:not([data-motion="full"]) .terminal-window.is-switching > *,
  html:not([data-motion="full"]) .network-core > span,
  html:not([data-motion="full"]) .network-link::after,
  html:not([data-motion="full"]) .ops-beacon,
  html:not([data-motion="full"]) .topbar-ops code i,
  html:not([data-motion="full"]) .terminal-cursor { animation: none !important; }
}

html[data-performance="lite"] .network-link::after { animation-duration: 5.8s; box-shadow: 0 0 6px rgba(255, 157, 76, .7); }
html[data-performance="lite"] .network-core > span { animation-duration: 4.2s; }
html[data-performance="lite"] .terminal-window.is-switching > * { animation: none; }

/* Unified public motion system ------------------------------------------- */
.animated-background {
  background: #08090c;
  contain: strict;
}

.animated-background::before,
.animated-background::after,
.animated-background .bg-grid,
.animated-background .bg-ray,
.animated-background .bg-water,
.animated-background .bg-ribbon,
.animated-background .bg-scan {
  display: none;
}

.background-scene {
  position: absolute;
  inset: -7%;
  background:
    linear-gradient(90deg, rgba(8, 9, 12, .98) 0%, rgba(8, 9, 12, .86) 42%, rgba(8, 9, 12, .58) 72%, rgba(8, 9, 12, .82) 100%),
    linear-gradient(180deg, rgba(8, 9, 12, .72), transparent 38%, rgba(8, 9, 12, .9)),
    url("./assets/HeadlessHero.webp?v=20260730n") 72% center / cover no-repeat;
  opacity: .23;
  filter: saturate(1.12) contrast(1.08) brightness(.7);
  transform: translate3d(-1.5%, 0, 0) scale(1.035);
  transform-origin: 70% 45%;
  animation: headlessBackdropDrift 24s ease-in-out infinite alternate;
  will-change: transform;
}

.background-flames {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: .76;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 100%);
}

.background-flames span {
  position: absolute;
  left: var(--ember-x);
  bottom: -24px;
  width: 2px;
  height: var(--ember-size);
  border-radius: 2px;
  opacity: 0;
  background: linear-gradient(180deg, #fff0cc 0%, #ff9a45 34%, #f45f1d 68%, transparent 100%);
  box-shadow: 0 0 7px rgba(255, 112, 34, .68);
  transform: rotate(var(--ember-rotate));
  animation: headlessFlameRise var(--ember-duration) linear var(--ember-delay) infinite;
}

.doc-section:not(.hero-section) {
  background: transparent;
  border-top-color: rgba(255, 224, 198, .065);
}

.doc-section:not(.hero-section)::before,
.doc-section:not(.hero-section)::after,
.section-embers {
  display: none !important;
}

.panel::after,
.feature-card::after,
.command-card::after,
.doc-detail-card::after,
.category-doc-card::after,
.category-doc-panel::before,
.section-head h2::after,
.two-column h2::after,
.category-doc-hero h3::after,
.dashboard-hero h3::after,
.tab-heading h3::after {
  display: none !important;
}

.section-head h2,
.two-column h2,
.category-doc-hero h3,
.dashboard-hero h3,
.tab-heading h3 {
  padding-bottom: 0;
  animation: none;
}

/* Branded boot sequence without a generic floating card. */
.boot-screen {
  align-items: center;
  justify-items: stretch;
  padding: clamp(24px, 7vw, 108px);
  background:
    linear-gradient(90deg, rgba(7, 7, 9, .99) 0%, rgba(7, 7, 9, .95) 45%, rgba(7, 7, 9, .56) 78%, rgba(7, 7, 9, .76) 100%),
    url("./assets/HeadlessHero.webp?v=20260730n") 72% center / cover no-repeat;
}

.boot-screen::before {
  display: block;
  inset: -6%;
  z-index: -1;
  opacity: .28;
  background:
    linear-gradient(180deg, transparent 0%, rgba(244, 135, 47, .08) 48%, transparent 100%),
    url("./assets/HeadlessHero.webp?v=20260730n") 72% center / cover no-repeat;
  background-size: 100% 100%, cover;
  transform: translate3d(-1%, 0, 0) scale(1.03);
  animation: headlessBootBackdrop 11s ease-in-out infinite alternate;
}

.boot-screen::after { display: none; }

.boot-shell {
  width: min(940px, 100%);
  min-height: min(540px, calc(100vh - 48px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: stretch;
  gap: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: headlessBootEnter .46s cubic-bezier(.2, .9, .2, 1) both;
  will-change: auto;
}

.boot-shell::before,
.boot-shell::after { display: none; }

.boot-brandline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 174, 99, .18);
  color: #9b8d82;
  font: 720 10px/1 var(--font-mono);
  text-transform: uppercase;
}

.boot-brandline code {
  display: inline;
  width: auto;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #ffad67;
  font: inherit;
}

.boot-main {
  display: flex;
  align-items: center;
  gap: clamp(24px, 5vw, 56px);
  padding-block: clamp(38px, 8vh, 92px);
}

.boot-orbit {
  flex: 0 0 auto;
  width: clamp(104px, 13vw, 148px);
  height: clamp(104px, 13vw, 148px);
  border-color: rgba(255, 157, 77, .32);
  background: rgba(11, 9, 8, .48);
  box-shadow: 0 0 0 18px rgba(244, 112, 30, .035), 0 0 62px rgba(244, 112, 30, .12);
}

.boot-orbit .boot-logo {
  width: 66%;
  height: 66%;
  border-radius: 50%;
  transform: none;
  animation: headlessBootMark 2.8s ease-in-out infinite;
}

.boot-copy { width: auto; text-align: left; }
.boot-copy .eyebrow { color: #f39449; font: 760 10px/1 var(--font-mono); }
.boot-copy h1 {
  margin: 10px 0 13px;
  font-size: clamp(54px, 10vw, 112px);
  line-height: .86;
  background: linear-gradient(90deg, #fff1df 0%, #ffc17e 45%, #ed7627 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: none;
  overflow-wrap: normal;
}
.boot-copy p { color: #b9ada3; font: 600 clamp(12px, 1.4vw, 15px)/1.5 var(--font-mono); }

.boot-telemetry {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 174, 99, .18);
}

.boot-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  color: #81766f;
  font: 700 9px/1 var(--font-mono);
  text-transform: uppercase;
}
.boot-progress-label b { color: #65d59d; }
.boot-progress {
  width: 100%;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, .08);
}
.boot-progress span {
  border-radius: 0;
  background: linear-gradient(90deg, #e26520, #ffb05f, #fff0d8);
  box-shadow: 0 0 16px rgba(255, 119, 34, .44);
}
.boot-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 13px;
}
.boot-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #6f6761;
  font: 700 10px/1 var(--font-mono);
  text-transform: uppercase;
}
.boot-step b { color: #4d4844; font: inherit; }
.boot-step.is-active,
.boot-step.is-done { border: 0; background: transparent; color: #f6c08d; }
.boot-step.is-active { transform: none; }
.boot-step.is-active b,
.boot-step.is-done b { color: #f4872f; }

.boot-flames {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.boot-flames i {
  --boot-flame-x: 8%;
  --boot-flame-delay: 0s;
  --boot-flame-duration: 5.8s;
  position: absolute;
  left: var(--boot-flame-x);
  bottom: -26px;
  width: 2px;
  height: 18px;
  border-radius: 2px;
  opacity: 0;
  background: linear-gradient(180deg, #fff1d1, #ff8e39 45%, transparent);
  box-shadow: 0 0 9px rgba(255, 108, 28, .7);
  animation: headlessBootFlame var(--boot-flame-duration) linear var(--boot-flame-delay) infinite;
}
.boot-flames i:nth-child(2) { --boot-flame-x: 17%; --boot-flame-delay: -3.6s; --boot-flame-duration: 7.1s; }
.boot-flames i:nth-child(3) { --boot-flame-x: 28%; --boot-flame-delay: -1.4s; --boot-flame-duration: 6.4s; }
.boot-flames i:nth-child(4) { --boot-flame-x: 39%; --boot-flame-delay: -5.1s; --boot-flame-duration: 7.6s; }
.boot-flames i:nth-child(5) { --boot-flame-x: 49%; --boot-flame-delay: -2.7s; --boot-flame-duration: 5.9s; }
.boot-flames i:nth-child(6) { --boot-flame-x: 58%; --boot-flame-delay: -.8s; --boot-flame-duration: 7.4s; }
.boot-flames i:nth-child(7) { --boot-flame-x: 67%; --boot-flame-delay: -4.4s; --boot-flame-duration: 6.2s; }
.boot-flames i:nth-child(8) { --boot-flame-x: 75%; --boot-flame-delay: -2.1s; --boot-flame-duration: 7.8s; }
.boot-flames i:nth-child(9) { --boot-flame-x: 83%; --boot-flame-delay: -5.8s; --boot-flame-duration: 6.7s; }
.boot-flames i:nth-child(10) { --boot-flame-x: 91%; --boot-flame-delay: -1.9s; --boot-flame-duration: 7.2s; }
.boot-flames i:nth-child(11) { --boot-flame-x: 34%; --boot-flame-delay: -6.2s; --boot-flame-duration: 8.1s; }
.boot-flames i:nth-child(12) { --boot-flame-x: 71%; --boot-flame-delay: -3.1s; --boot-flame-duration: 6.9s; }

/* Signals follow real server-to-core paths instead of rotated elements. */
.network-connections {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.network-route,
.network-signal {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.network-route {
  stroke: rgba(255, 133, 47, .16);
  stroke-width: 1;
}
.network-signal {
  stroke: #ffe1bd;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 2 98;
  stroke-dashoffset: 0;
  opacity: 0;
  filter: drop-shadow(0 0 3px #ff9d4d) drop-shadow(0 0 7px rgba(255, 103, 25, .8));
  animation: headlessSignalToCore 4.4s linear infinite;
}
.network-signal-2 { animation-delay: -.75s; }
.network-signal-3 { animation-delay: -1.5s; }
.network-signal-4 { animation-delay: -2.25s; }
.network-signal-5 { animation-delay: -3s; }
.network-signal-6 { animation-delay: -3.75s; }
.network-receiver {
  fill: #fff0d7;
  opacity: .28;
  filter: drop-shadow(0 0 8px #ff822d);
  transform-box: fill-box;
  transform-origin: center;
  animation: headlessReceiverPulse 2.2s ease-out infinite;
}

@keyframes headlessBackdropDrift {
  0% { transform: translate3d(-1.5%, -.8%, 0) scale(1.035); }
  100% { transform: translate3d(1.5%, .8%, 0) scale(1.075); }
}

@keyframes headlessFlameRise {
  0% { opacity: 0; transform: translate3d(0, 18px, 0) rotate(var(--ember-rotate)) scaleY(.75); }
  12% { opacity: .76; }
  72% { opacity: .3; }
  100% { opacity: 0; transform: translate3d(var(--ember-drift), calc(var(--ember-rise) * -1), 0) rotate(calc(var(--ember-rotate) + 10deg)) scaleY(1.15); }
}

@keyframes headlessBootBackdrop {
  from { transform: translate3d(-1%, -.4%, 0) scale(1.03); }
  to { transform: translate3d(1.2%, .6%, 0) scale(1.07); }
}

@keyframes headlessBootEnter {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes headlessBootMark {
  0%, 100% { box-shadow: 0 0 24px rgba(244, 122, 36, .14); }
  50% { box-shadow: 0 0 42px rgba(244, 122, 36, .32); }
}

@keyframes headlessBootFlame {
  0% { opacity: 0; transform: translate3d(0, 16px, 0) scaleY(.7); }
  15% { opacity: .78; }
  100% { opacity: 0; transform: translate3d(18px, -46vh, 0) scaleY(1.18); }
}

@keyframes headlessSignalToCore {
  0%, 8% { stroke-dashoffset: 0; opacity: 0; }
  14% { opacity: 1; }
  82% { stroke-dashoffset: -96; opacity: 1; }
  90%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

@keyframes headlessReceiverPulse {
  0%, 58% { opacity: .18; transform: scale(.75); }
  78% { opacity: .75; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(2.1); }
}

@keyframes headlessNetworkScan {
  from { transform: translate3d(-20%, 0, 0); }
  to { transform: translate3d(20%, 0, 0); }
}

@keyframes headlessNodeLock {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes headlessStatusRefresh {
  from { opacity: .25; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

html[data-performance="lite"] .background-scene { animation-duration: 34s; }
html[data-performance="lite"] .network-signal { animation-duration: 5.6s; }

/* Reduced motion keeps the product alive without pointer parallax or fast travel. */
html[data-motion="reduced"] .background-scene {
  animation-name: headlessBackdropDriftReduced !important;
  animation-duration: 54s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
  opacity: .2;
  will-change: auto;
}
html[data-motion="reduced"] .background-flames {
  display: block;
  opacity: .3;
}
html[data-motion="reduced"] .background-flames span {
  animation-duration: 13s !important;
  animation-iteration-count: infinite !important;
  filter: blur(.2px);
  box-shadow: 0 0 7px rgba(255, 126, 39, .32);
}
html[data-motion="reduced"] .boot-screen::before {
  animation-name: headlessBootBackdropReduced !important;
  animation-duration: 46s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
  will-change: auto;
}
html[data-motion="reduced"] .boot-flames {
  display: block;
  opacity: .32;
}
html[data-motion="reduced"] .boot-flames i {
  animation-duration: 14s !important;
  animation-iteration-count: infinite !important;
}
html[data-motion="reduced"] .network-signal {
  display: block;
  stroke-width: 2.5;
  animation-duration: 8.5s !important;
  animation-iteration-count: infinite !important;
  filter: drop-shadow(0 0 3px rgba(255, 157, 77, .72));
}
html[data-motion="reduced"] .boot-orbit .boot-logo,
html[data-motion="reduced"] .network-receiver { animation: none; }

@keyframes headlessBackdropDriftReduced {
  from { transform: translate3d(-.3%, -.1%, 0) scale(1.025); }
  to { transform: translate3d(.3%, .15%, 0) scale(1.035); }
}

@keyframes headlessBootBackdropReduced {
  from { transform: translate3d(-.25%, 0, 0) scale(1.025); }
  to { transform: translate3d(.25%, .12%, 0) scale(1.035); }
}

@media (max-width: 700px) {
  .network-connections { display: none; }
  .boot-screen { padding: 22px; background-position: 64% center; }
  .boot-shell { min-height: min(560px, calc(100vh - 44px)); }
  .boot-main { align-items: flex-start; flex-direction: column; justify-content: center; gap: 22px; }
  .boot-orbit { width: 94px; height: 94px; }
  .boot-copy h1 { font-size: clamp(50px, 18vw, 78px); }
  .boot-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Local owner dashboard: opaque, crisp surfaces without public-site texture. */
body.admin-dashboard,
body.admin-dashboard .main,
body.admin-dashboard .mode-shell {
  background: #09090b;
  background-image: none;
}

body.admin-dashboard::before,
body.admin-dashboard::after,
body.admin-dashboard .animated-background::before,
body.admin-dashboard .animated-background::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

body.admin-dashboard .topbar,
body.admin-dashboard .mode-topbar,
body.admin-dashboard .sidebar,
body.admin-dashboard .admin-sidebar {
  background: #0d0d10;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.admin-dashboard .hero-panel,
body.admin-dashboard .global-summary-card,
body.admin-dashboard .section-pill,
body.admin-dashboard .section-shell,
body.admin-dashboard .panel,
body.admin-dashboard .metric,
body.admin-dashboard .landing-card,
body.admin-dashboard .server-picker-card,
body.admin-dashboard .runtime-card {
  background: #131316;
  background-image: none;
  opacity: 1;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

body.admin-dashboard .hero-panel {
  background: linear-gradient(100deg, #151311 0%, #121316 45%, #111319 100%);
}

body.admin-dashboard .section-pill.active {
  background: #1b2028;
  border-color: rgba(244, 135, 47, .44);
}