/* =========================================================
   Legion UI: the shared look for the website, the staff panel and Legion Panel.
   Colours, type and spacing come from the main site (styles.css): near-black navy, the Legion red, Archivo for text,
   IBM Plex Mono for labels and data, Syncopate for the wordmark, hairline borders and soft 12px cards.
   No themes, music or cursor effects: just the style.
   ========================================================= */
:root {
  color-scheme: dark;
  --bg: #04060b;
  --bg-2: #070b18;
  --surface: #090b10;
  --surface-2: #0e1118;
  --surface-3: #151923;
  --raise: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  --fg: #fff;
  --text: #e8ebf0;
  --muted: #9298a6;
  --faint: #656b78;
  --line: rgba(255,255,255,.09);
  --line-2: rgba(255,255,255,.15);
  --accent: #ff2a3a;
  --accent-rgb: 255, 42, 58;
  --accent-hover: #ff4452;
  --accent-2: #ff7a84;
  --accent-soft: rgba(var(--accent-rgb), .12);
  /* Glass: translucent panel fills read against the page's ambient gradient (see body). */
  --glass: rgba(20, 24, 38, .55);
  --glass-2: rgba(28, 33, 52, .5);
  --glass-line: rgba(255,255,255,.14);
  --blur: blur(22px);
  --glow: 0 0 34px rgba(var(--accent-rgb), .4);
  --inset-hi: inset 0 1px 0 rgba(255,255,255,.08);
  --ok: #3ddc84;
  --warn: #ffb02e;
  --err: #ff4d5e;
  --info: #5aa9ff;
  --sans: "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --mark: "Syncopate", "Archivo", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --r: 18px;
  --r-sm: 12px;
  --gap: 16px;
  --pad: clamp(16px, 2.4vw, 32px);
  --shadow: 0 30px 70px rgba(0,0,0,.55), var(--inset-hi);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px rgba(var(--accent-rgb), .7);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; background: var(--bg); }
/* Ambient gradient field the glass panels sample through their blur. Fixed so it stays put while content scrolls. */
body { min-height: 100vh; color: var(--text); font: 14px/1.5 var(--sans);
  background:
    radial-gradient(1100px 760px at 86% -12%, rgba(255,42,58,.20), transparent 56%),
    radial-gradient(1000px 780px at -8% 32%, rgba(96,74,255,.15), transparent 55%),
    radial-gradient(820px 680px at 62% 118%, rgba(0,168,255,.11), transparent 55%),
    linear-gradient(165deg, #0a0b16, var(--bg) 62%);
  background-attachment: fixed; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: none; box-shadow: var(--focus); }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The site's faint grid, behind everything, faded toward the top-right glow so it reads as atmosphere not wallpaper */
.ui-grid-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 54px 54px; background-position: center;
  -webkit-mask-image: radial-gradient(1000px 680px at 72% 4%, #000, transparent 82%); mask-image: radial-gradient(1000px 680px at 72% 4%, #000, transparent 82%); }

/* ---------- Type ---------- */
.mono, .eyebrow, .label { font-family: var(--mono); letter-spacing: .04em; }
.eyebrow { font-size: 10px; text-transform: uppercase; color: var(--accent); }
.label { font-size: 11px; color: var(--muted); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.h1 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; font-stretch: 110%; letter-spacing: -.01em; color: var(--fg); }
.h2 { font-size: 17px; font-weight: 600; font-stretch: 106%; color: var(--fg); }
.h3 { font-size: 14px; font-weight: 600; color: var(--fg); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wordmark { font-family: var(--mark); font-weight: 700; font-size: 14px; letter-spacing: -.01em; color: var(--fg); }
code, kbd, .code { font-family: var(--mono); font-size: 12px; }
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; color: var(--text); background: var(--surface-2); font-size: 10px; }

/* ---------- Buttons: pills, like the site ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--glass-line); color: var(--fg); font-size: 13px; font-weight: 500; white-space: nowrap; user-select: none;
  background: var(--glass-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  transition: background .25s var(--ease), color .25s, border-color .25s, box-shadow .25s, transform .25s var(--ease); }
.btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.26); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn .bi { font-size: 14px; }
.btn--primary { border: 0; color: #fff; background: linear-gradient(135deg, var(--accent-2), #d4101f); box-shadow: var(--glow), var(--inset-hi); }
.btn--primary:hover { background: linear-gradient(135deg, #ff8f97, var(--accent)); box-shadow: 0 0 42px rgba(var(--accent-rgb), .55), var(--inset-hi); }
.btn--ghost { border-color: transparent; color: var(--text); }
.btn--ghost:hover { background: rgba(255,255,255,.07); border-color: transparent; color: var(--fg); }
.btn--danger { border-color: rgba(var(--accent-rgb), .55); color: #ff8a94; }
.btn--danger:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--ok { border-color: rgba(61,220,132,.5); color: #8ff0b9; }
.btn--ok:hover { background: var(--ok); border-color: var(--ok); color: #04130a; }
.btn--sm { height: 28px; padding: 0 12px; font-size: 12px; }
.btn--icon { width: 34px; padding: 0; }
.btn--sm.btn--icon { width: 28px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- Cards ---------- */
.card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--glass-line); border-radius: var(--r);
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: 0 22px 54px rgba(0,0,0,.42), var(--inset-hi); }
.card__head { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.card__head .h2, .card__head .h3 { margin-right: auto; }
.card__body { padding: 18px; min-width: 0; }
.card__body--flush { padding: 0; }
.card__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }
.card--hover { transition: border-color .3s, box-shadow .4s, translate .5s var(--ease); }
.card--hover:hover { border-color: rgba(var(--accent-rgb), .45); translate: 0 -3px; box-shadow: 0 28px 60px rgba(0,0,0,.5), 0 0 30px rgba(var(--accent-rgb), .18), var(--inset-hi); }
.stack { display: grid; gap: var(--gap); }
.cols { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 280px)), 1fr)); }

/* ---------- Status ---------- */
.dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--faint); }
.dot--running { background: var(--ok); box-shadow: 0 0 0 3px rgba(61,220,132,.15), 0 0 9px rgba(61,220,132,.75); }
.dot--starting, .dot--stopping, .dot--installing { background: var(--warn); box-shadow: 0 0 9px rgba(255,176,46,.7); animation: ui-pulse 1.2s ease-in-out infinite; }
.dot--install_failed, .dot--suspended { background: var(--err); box-shadow: 0 0 9px rgba(255,77,94,.7); }
.dot--offline { background: #4a4f59; }
.dot--crashed { background: var(--err); box-shadow: 0 0 0 3px rgba(255,77,94,.18), 0 0 11px rgba(255,77,94,.8); }
@keyframes ui-pulse { 50% { opacity: .35; } }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03);
  font: 10px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.badge--running, .badge--ok { color: #9ff5c2; border-color: rgba(61,220,132,.38); background: rgba(61,220,132,.08); box-shadow: 0 0 16px rgba(61,220,132,.16); }
.badge--starting, .badge--stopping, .badge--installing, .badge--warn { color: #ffd28f; border-color: rgba(255,176,46,.38); background: rgba(255,176,46,.08); }
.badge--crashed, .badge--install_failed, .badge--suspended, .badge--err { color: #ffa0a8; border-color: rgba(255,77,94,.42); background: rgba(255,77,94,.09); box-shadow: 0 0 16px rgba(255,77,94,.2); }
.badge--accent { color: #ff8a94; border-color: rgba(var(--accent-rgb), .35); background: var(--accent-soft); }
.badge--info { color: #9cc9ff; border-color: rgba(90,169,255,.3); background: rgba(90,169,255,.06); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--surface-3); color: var(--text); font-size: 12px; }
.tag-swatch { width: 10px; height: 10px; flex: none; border-radius: 3px; background: var(--tag, var(--faint)); }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field > span:first-child { font: 11px var(--mono); letter-spacing: .04em; color: var(--muted); }
.field small { color: var(--faint); font-size: 12px; }
.input, .select, .textarea { width: 100%; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2);
  color: var(--fg); transition: border-color .2s, box-shadow .2s; }
.textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-2); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: rgba(var(--accent-rgb), .7); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }
.input--mono { font-family: var(--mono); font-size: 13px; }
.select { appearance: none; padding-right: 32px; background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b8f98' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; }
.input-group { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); }
.input-group:focus-within { border-color: rgba(var(--accent-rgb), .7); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }
.input-group input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; }
.input-group .bi { color: var(--muted); }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { accent-color: var(--accent); width: 15px; height: 15px; }
/* Toggle switch: <label class="switch"><input type="checkbox"><span></span></label> */
.switch { position: relative; display: inline-block; flex: none; width: 36px; height: 20px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-2); transition: background .25s, border-color .25s; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #9a9ea6; transition: transform .3s var(--ease), background .25s; }
.switch input:checked + span { background: var(--accent); border-color: var(--accent); }
.switch input:checked + span::after { transform: translateX(16px); background: #fff; }
.switch input:focus-visible + span { box-shadow: var(--focus); }
/* Segmented control */
.seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); }
.seg button, .seg a { height: 28px; padding: 0 12px; border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; transition: background .2s, color .2s; display: inline-flex; align-items: center; gap: 6px; }
.seg button:hover, .seg a:hover { color: var(--fg); }
.seg [aria-pressed="true"], .seg [aria-current="page"], .seg [aria-selected="true"] { background: var(--fg); color: #000; }
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* ---------- Tables / lists ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { position: sticky; top: 0; padding: 10px 14px; text-align: left; font: 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  background: var(--surface); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: rgba(255,255,255,.025); }
.table .actions { text-align: right; white-space: nowrap; }
.list { display: grid; }
.list__item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 18px; border-bottom: 1px solid rgba(255,255,255,.05); }
.list__item:last-child { border-bottom: 0; }
a.list__item:hover, button.list__item:hover { background: rgba(255,255,255,.03); }
.list__main { display: grid; min-width: 0; flex: 1; }
.list__main b { font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list__main small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Key / value ---------- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; font-size: 13px; }
.kv dt { color: var(--muted); font: 11px var(--mono); letter-spacing: .04em; padding-top: 2px; }
.kv dd { min-width: 0; overflow-wrap: anywhere; color: var(--text); }
.link { color: var(--accent); } .link:hover { text-decoration: underline; }

/* ---------- Meters ---------- */
.meter { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.meter > i { display: block; height: 100%; width: calc(var(--v, 0) * 100%); border-radius: inherit; background: var(--accent); transition: width .6s var(--ease); }
.meter--ok > i { background: var(--ok); } .meter--warn > i { background: var(--warn); }
.stat { display: grid; gap: 4px; }
.stat b { font: 600 22px/1.1 var(--sans); font-stretch: 108%; color: var(--fg); font-variant-numeric: tabular-nums; }
.stat b small { font-size: 12px; font-weight: 400; color: var(--muted); }

/* ---------- Empty / notice ---------- */
.empty { display: grid; justify-items: center; gap: 10px; padding: 48px 20px; text-align: center; color: var(--muted); }
.empty .bi { font-size: 28px; color: var(--faint); }
.empty b { color: var(--fg); font-size: 15px; font-weight: 600; }
.empty p { max-width: 440px; font-size: 13px; }
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); font-size: 13px; }
.notice .bi { margin-top: 2px; color: var(--info); }
.notice--warn { border-color: rgba(255,176,46,.3); background: rgba(255,176,46,.05); } .notice--warn .bi { color: var(--warn); }
.notice--err { border-color: rgba(255,77,94,.35); background: rgba(255,77,94,.06); } .notice--err .bi { color: var(--err); }
.notice--ok { border-color: rgba(61,220,132,.3); background: rgba(61,220,132,.05); } .notice--ok .bi { color: var(--ok); }
.skeleton { border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: ui-shimmer 1.4s linear infinite; }
@keyframes ui-shimmer { to { background-position: -200% 0; } }

/* ---------- Overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 16px; background: rgba(2,3,6,.72); backdrop-filter: blur(6px);
  animation: ui-fade .2s ease; }
@keyframes ui-fade { from { opacity: 0; } }
.dialog { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow);
  animation: ui-rise .35s var(--ease); }
.dialog--wide { width: min(860px, 100%); }
@keyframes ui-rise { from { transform: translateY(12px); opacity: 0; } }
.dialog__head { display: flex; align-items: center; gap: 10px; padding: 18px 20px 0; }
.dialog__head .h2 { margin-right: auto; }
.dialog__body { padding: 16px 20px; display: grid; gap: 14px; }
.dialog__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 18px; flex-wrap: wrap; }
.menu { position: fixed; z-index: 520; min-width: 200px; padding: 6px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(12,14,20,.97); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.menu button, .menu a { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border-radius: 6px; font-size: 13px; color: var(--text); text-align: left; }
.menu button:hover, .menu a:hover, .menu button:focus-visible { background: rgba(var(--accent-rgb), .12); color: var(--fg); box-shadow: none; }
.menu .is-danger { color: #ff8a94; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.toasts { position: fixed; z-index: 600; right: 16px; bottom: 16px; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: #14161c; border: 1px solid var(--line-2); box-shadow: var(--shadow); font-size: 13px;
  animation: ui-rise .35s var(--ease); }
.toast .bi { margin-top: 1px; }
.toast--ok .bi { color: var(--ok); } .toast--err { border-color: rgba(var(--accent-rgb), .45); } .toast--err .bi { color: var(--err); } .toast--warn .bi { color: var(--warn); }
.tooltip { position: relative; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button, .tabs a { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.tabs button:hover, .tabs a:hover { color: var(--fg); }
.tabs [aria-selected="true"], .tabs [aria-current="page"] { color: var(--fg); }
.tabs button::after, .tabs a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .6); transform: scaleX(0); transform-origin: center; transition: transform .28s var(--ease); }
.tabs [aria-selected="true"]::after, .tabs [aria-current="page"]::after { transform: scaleX(1); }

/* ---------- Scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: #2a2e38 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2a2e38; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}