/*
 * StrikeNetwork panel — design system
 *
 * One stylesheet for every page: the dashboard shell (body.st-app), the auth pages
 * (body.st-auth), and the public landing page (body.st-landing, styles scoped under .st-landing).
 * Dark premium "gaming" theme: deep indigo surfaces, accents taken from the StrikeNetwork logo
 * (gold "SECRET" + starry royal-blue "SMP"), neon green for success/online states.
 * System fonts only; no external assets. Colours were checked against WCAG 2.2 AA
 * (text >= 4.5:1, UI boundaries and focus rings >= 3:1).
 *
 * Numeric custom property --value (unitless 0-100) drives .st-meter-fill, .st-progress-bar and
 * .st-gauge; it is registered below so changes animate smoothly.
 */

@property --value {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* ============================================================================================
   1. Tokens
   ============================================================================================ */

:root {
  color-scheme: dark;
  accent-color: #f5b324;

  /* Contract tokens */
  --st-bg: #070a14;
  --st-surface: #0d1222;
  --st-surface-2: #141b2e;
  --st-border: #232d4a;
  --st-text: #e8ecf8;
  --st-muted: #9aa8c4;
  --st-accent: #f5b324; /* logo gold */
  --st-accent-2: #6f8fff; /* logo royal blue, lightened for AA text contrast */
  --st-success: #3dff8f; /* neon green */
  --st-warning: #ff9f43;
  --st-danger: #ff6b86;
  --st-info: #38bdf8;
  --st-radius: 14px;
  --st-shadow: 0 18px 40px -22px rgb(0 0 0 / 0.85), 0 2px 10px -4px rgb(0 0 0 / 0.5);
  --st-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, Cantarell, 'Helvetica Neue', Arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  --st-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', 'Cascadia Code', 'Fira Code', Menlo, Consolas,
    'Liberation Mono', 'DejaVu Sans Mono', monospace;

  /* Extended palette */
  --st-bg-2: #0a0e1c;
  --st-surface-3: #1c2540;
  --st-border-strong: #2f3b60;
  --st-input-border: #5b6d94;
  --st-input-border-hover: #7486b0;
  --st-text-strong: #fbfcff;
  --st-text-soft: #bcc7de;
  --st-faint: #66749a; /* decorative / disabled only — not for essential text */
  --st-focus: #8fb0ff;
  --st-accent-ink: #1a1200;
  --st-accent-strong: #ffc94d;
  --st-accent-deep: #c98a0c;
  --st-royal: #2f4fe0; /* fills with white text (6.3:1) */
  --st-royal-strong: #3d5cf0;
  --st-success-ink: #02170a;
  --st-violet: #8b5cf6;
  --st-term-bg: #05070f;
  --st-sidebar-bg: #090d1b;
  --st-elevated: #121a2d;

  /* RGB channels for translucent mixes: rgb(var(--st-accent-rgb) / 0.2) */
  --st-bg-rgb: 7 10 20;
  --st-surface-rgb: 13 18 34;
  --st-surface-2-rgb: 20 27 46;
  --st-accent-rgb: 245 179 36;
  --st-accent-2-rgb: 111 143 255;
  --st-royal-rgb: 47 79 224;
  --st-success-rgb: 61 255 143;
  --st-warning-rgb: 255 159 67;
  --st-danger-rgb: 255 107 134;
  --st-info-rgb: 56 189 248;
  --st-muted-rgb: 154 168 196;
  --st-faint-rgb: 102 116 154;
  --st-violet-rgb: 139 92 246;

  /* Shape & depth */
  --st-radius-sm: 10px;
  --st-radius-lg: 20px;
  --st-radius-pill: 999px;
  --st-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.45);
  --st-shadow-lg: 0 32px 80px -24px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.03);
  --st-glow: 0 0 0 1px rgb(var(--st-accent-rgb) / 0.4), 0 8px 26px -8px rgb(var(--st-accent-rgb) / 0.6);
  --st-glow-strong: 0 0 0 1px rgb(var(--st-accent-rgb) / 0.6), 0 10px 34px -6px rgb(var(--st-accent-rgb) / 0.75);
  --st-ring: 0 0 0 3px rgb(var(--st-accent-2-rgb) / 0.32);

  /* Layout */
  --st-sidebar-w: 264px;
  --st-topbar-h: 68px;
  --st-gutter: 28px;
  --st-gap: 20px;
  --st-content-max: 1480px;

  /* Type scale */
  --st-text-xs: 0.75rem;
  --st-text-sm: 0.8125rem;
  --st-text-md: 0.9375rem;
  --st-text-lg: 1.125rem;
  --st-text-xl: 1.375rem;
  --st-text-2xl: 1.75rem;

  /* Motion */
  --st-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --st-fast: 120ms;
  --st-med: 200ms;
  --st-slow: 360ms;

  /* Layers */
  --st-z-topbar: 40;
  --st-z-sidebar: 50;
  --st-z-savebar: 60;
  --st-z-modal: 1000;
  --st-z-toast: 1100;
}

/* ============================================================================================
   2. Base
   ============================================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--st-border-strong) transparent;
  scrollbar-width: thin;
}

html.st-modal-open {
  overflow: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--st-font);
  font-size: var(--st-text-md);
  line-height: 1.55;
  color: var(--st-text);
  background-color: var(--st-bg);
  background-image: radial-gradient(1200px 600px at 100% -10%, rgb(var(--st-royal-rgb) / 0.12), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgb(var(--st-accent-rgb) / 0.05), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.5em;
  color: var(--st-text-strong);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--st-text-2xl);
}

h2 {
  font-size: var(--st-text-xl);
}

h3 {
  font-size: var(--st-text-lg);
}

h4,
h5,
h6 {
  font-size: var(--st-text-md);
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--st-accent-2);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--st-fast) ease;
}

a:hover {
  color: var(--st-focus);
  text-decoration: underline;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

img {
  height: auto;
}

hr {
  height: 1px;
  margin: 1.25rem 0;
  border: 0;
  background: var(--st-border);
}

code,
kbd,
samp,
pre {
  font-family: var(--st-mono);
  font-size: 0.9em;
}

code {
  padding: 0.1em 0.4em;
  border: 1px solid var(--st-border);
  border-radius: 6px;
  background: var(--st-surface-2);
  color: var(--st-text);
}

kbd {
  display: inline-block;
  padding: 0.05em 0.45em;
  border: 1px solid var(--st-border-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--st-surface-2);
  color: var(--st-text);
  font-size: 0.8em;
}

pre {
  margin: 0;
  overflow: auto;
}

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

button {
  cursor: pointer;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

table {
  border-collapse: collapse;
}

::selection {
  background: rgb(var(--st-accent-2-rgb) / 0.35);
  color: var(--st-text-strong);
}

:focus {
  outline: none;
}

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

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--st-border-strong);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--st-input-border);
}

[hidden] {
  display: none !important;
}

.st-icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -0.25em;
  stroke: currentColor;
}

/* ============================================================================================
   3. Utilities
   ============================================================================================ */

.st-hidden {
  display: none !important;
}

.st-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.st-muted {
  color: var(--st-muted);
}

.st-mono {
  font-family: var(--st-mono);
  font-size: 0.92em;
  font-variant-ligatures: none;
}

.st-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}

.st-flex-between {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.st-gap-sm {
  gap: 0.5rem;
}

.st-gap {
  gap: 1rem;
}

.st-mt {
  margin-top: 1rem;
}

.st-mb {
  margin-bottom: 1rem;
}

.st-text-right {
  text-align: right;
}

.st-truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-nowrap {
  white-space: nowrap;
}

.st-grow {
  flex: 1 1 auto;
  min-width: 0;
}

.st-text-success {
  color: var(--st-success);
}

.st-text-warning {
  color: var(--st-warning);
}

.st-text-danger {
  color: var(--st-danger);
}

.st-text-accent {
  color: var(--st-accent);
}

.st-skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: calc(var(--st-z-toast) + 1);
  padding: 0.6rem 1rem;
  border-radius: var(--st-radius-sm);
  background: var(--st-accent);
  color: var(--st-accent-ink);
  font-weight: 700;
  box-shadow: var(--st-glow);
  transform: translateY(-160%);
  transition: transform var(--st-med) var(--st-ease);
}

.st-skip-link:focus,
.st-skip-link:focus-visible {
  color: var(--st-accent-ink);
  text-decoration: none;
  transform: translateY(0);
}

.st-skeleton {
  display: inline-block;
  min-width: 3ch;
  height: 1em;
  border-radius: 6px;
  vertical-align: middle;
  color: transparent !important;
  background: linear-gradient(
      90deg,
      rgb(255 255 255 / 0.04) 0%,
      rgb(255 255 255 / 0.1) 40%,
      rgb(255 255 255 / 0.04) 80%
    )
    0 0 / 300% 100% var(--st-surface-2);
  animation: st-shimmer 1.4s ease-in-out infinite;
  user-select: none;
}

/* ============================================================================================
   4. App shell: layout, sidebar, topbar
   ============================================================================================ */

.st-layout {
  display: grid;
  grid-template-columns: var(--st-sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.st-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.st-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--st-gap);
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--st-content-max);
  margin-inline: auto;
  padding: var(--st-gutter);
}

.st-content:focus {
  outline: none;
}

.st-sidebar {
  position: sticky;
  top: 0;
  z-index: var(--st-z-sidebar);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--st-border);
  background: radial-gradient(120% 260px at 0% 0%, rgb(var(--st-royal-rgb) / 0.16), transparent 70%),
    linear-gradient(180deg, var(--st-sidebar-bg) 0%, var(--st-bg) 100%);
}

.st-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: var(--st-topbar-h);
  padding: 0.75rem 1rem 0.75rem 1.25rem;
  border-bottom: 1px solid var(--st-border);
}

.st-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  color: var(--st-text-strong);
  border-radius: var(--st-radius-sm);
}

.st-brand:hover {
  color: var(--st-text-strong);
  text-decoration: none;
}

.st-brand-logo {
  display: block;
  width: auto;
  height: 40px;
  flex: none;
  filter: drop-shadow(0 2px 10px rgb(var(--st-accent-rgb) / 0.3));
}

.st-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.st-brand-name {
  overflow: hidden;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-brand-sub {
  color: var(--st-muted);
  font-size: var(--st-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.st-sidebar-toggle {
  display: none;
}

.st-sidebar-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.st-nav {
  flex: 1 1 auto;
  padding: 1rem 0.75rem;
}

.st-nav-section {
  margin: 0.75rem 0 0.35rem;
  padding: 0 0.75rem;
  color: var(--st-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.st-nav-section:first-child {
  margin-top: 0;
}

.st-nav-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 42px;
  padding: 0.55rem 0.75rem;
  border-radius: var(--st-radius-sm);
  color: var(--st-muted);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--st-fast) ease, background-color var(--st-fast) ease, box-shadow var(--st-med) ease;
}

.st-nav-link .st-icon {
  width: 20px;
  height: 20px;
  transition: color var(--st-fast) ease;
}

.st-nav-link:hover {
  color: var(--st-text);
  background: rgb(255 255 255 / 0.045);
  text-decoration: none;
}

.st-nav-link:active {
  background: rgb(255 255 255 / 0.07);
}

.st-nav-link:focus-visible {
  outline-offset: -2px;
}

.st-nav-link.is-active,
.st-nav-link[aria-current='page'] {
  color: var(--st-text-strong);
  background: linear-gradient(90deg, rgb(var(--st-accent-rgb) / 0.16), rgb(var(--st-accent-rgb) / 0.03));
  box-shadow: inset 0 0 0 1px rgb(var(--st-accent-rgb) / 0.2);
}

.st-nav-link.is-active .st-icon,
.st-nav-link[aria-current='page'] .st-icon {
  color: var(--st-accent);
  filter: drop-shadow(0 0 6px rgb(var(--st-accent-rgb) / 0.55));
}

.st-nav-link.is-active::before,
.st-nav-link[aria-current='page']::before {
  content: '';
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: -0.75rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--st-accent);
  box-shadow: 0 0 12px rgb(var(--st-accent-rgb) / 0.8);
}

.st-nav-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-nav-badge {
  margin-left: auto;
}

.st-nav-skeleton {
  display: grid;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
}

.st-nav-skeleton .st-skeleton {
  width: 100%;
  height: 26px;
}

.st-sidebar-footer {
  position: relative;
  padding: 0.75rem;
  border-top: 1px solid var(--st-border);
}

.st-user {
  position: relative;
}

.st-user-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--st-radius-sm);
  background: transparent;
  color: var(--st-text);
  text-align: left;
  transition: background-color var(--st-fast) ease, border-color var(--st-fast) ease;
}

.st-user-btn:hover {
  border-color: var(--st-border);
  background: rgb(255 255 255 / 0.045);
}

.st-user-btn[aria-expanded='true'] {
  border-color: var(--st-border-strong);
  background: var(--st-surface-2);
}

.st-user-btn .st-icon {
  margin-left: auto;
  color: var(--st-muted);
  transition: transform var(--st-med) var(--st-ease);
}

.st-user-btn[aria-expanded='true'] .st-icon {
  transform: rotate(180deg);
}

.st-user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.st-user-name {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-user-role {
  color: var(--st-muted);
  font-size: var(--st-text-xs);
}

.st-user-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 5;
  display: grid;
  gap: 2px;
  padding: 0.35rem;
  border: 1px solid var(--st-border-strong);
  border-radius: var(--st-radius-sm);
  background: var(--st-surface-2);
  box-shadow: var(--st-shadow-lg);
  animation: st-pop-in var(--st-med) var(--st-ease);
}

.st-user-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 40px;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--st-text);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}

.st-user-item:hover {
  background: var(--st-surface-3);
  color: var(--st-text-strong);
  text-decoration: none;
}

.st-user-item:focus-visible {
  outline-offset: -2px;
}

.st-user-item.is-danger {
  color: var(--st-danger);
}

.st-user-item.is-danger:hover {
  background: rgb(var(--st-danger-rgb) / 0.12);
  color: var(--st-danger);
}

.st-topbar {
  position: sticky;
  top: 0;
  z-index: var(--st-z-topbar);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  min-height: var(--st-topbar-h);
  padding: 0.75rem var(--st-gutter);
  border-bottom: 1px solid var(--st-border);
  background: rgb(var(--st-bg-rgb) / 0.8);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
}

.st-topbar-heading {
  min-width: 0;
}

.st-page-title {
  margin: 0;
  font-size: 1.3125rem;
  line-height: 1.2;
}

.st-page-sub {
  margin: 0.15rem 0 0;
  color: var(--st-muted);
  font-size: var(--st-text-sm);
}

.st-topbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.st-conn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--st-warning);
  font-size: var(--st-text-sm);
  font-weight: 600;
}

.st-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 34px;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--st-border-strong);
  border-radius: var(--st-radius-pill);
  background: var(--st-surface);
  color: var(--st-text);
  font-size: var(--st-text-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: border-color var(--st-med) ease, box-shadow var(--st-med) ease;
}

.st-status-pill[data-state='running'] {
  border-color: rgb(var(--st-success-rgb) / 0.45);
  box-shadow: 0 0 18px -6px rgb(var(--st-success-rgb) / 0.6);
}

.st-status-pill[data-state='starting'],
.st-status-pill[data-state='stopping'] {
  border-color: rgb(var(--st-warning-rgb) / 0.45);
}

.st-status-pill[data-state='crashed'] {
  border-color: rgb(var(--st-danger-rgb) / 0.55);
  box-shadow: 0 0 18px -6px rgb(var(--st-danger-rgb) / 0.6);
}

.st-status-pill-extra {
  padding-left: 0.55rem;
  border-left: 1px solid var(--st-border-strong);
  color: var(--st-muted);
  font-weight: 600;
}

.st-status-pill-extra:empty {
  display: none;
}

a.st-status-pill {
  text-decoration: none;
}

a.st-status-pill:hover {
  border-color: var(--st-input-border-hover);
  color: var(--st-text-strong);
  text-decoration: none;
}

a.st-status-pill:active {
  transform: translateY(1px);
}

/* ============================================================================================
   5. Cards & grid
   ============================================================================================ */

.st-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.025), rgb(255 255 255 / 0) 120px), var(--st-surface);
  box-shadow: var(--st-shadow);
}

a.st-card,
.st-card.is-interactive {
  color: inherit;
  text-decoration: none;
  transition: border-color var(--st-med) ease, transform var(--st-med) var(--st-ease), box-shadow var(--st-med) ease;
}

a.st-card:hover,
.st-card.is-interactive:hover {
  border-color: var(--st-border-strong);
  box-shadow: var(--st-shadow), 0 0 0 1px rgb(var(--st-accent-2-rgb) / 0.12);
  transform: translateY(-2px);
}

.st-card.is-highlight {
  border-color: rgb(var(--st-accent-rgb) / 0.35);
  box-shadow: var(--st-shadow), 0 0 28px -14px rgb(var(--st-accent-rgb) / 0.7);
}

.st-card.is-danger {
  border-color: rgb(var(--st-danger-rgb) / 0.4);
}

.st-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  min-height: 58px;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--st-border);
}

.st-card-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  margin: 0;
  color: var(--st-text-strong);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.st-card-title .st-icon {
  color: var(--st-accent-2);
}

.st-card-subtitle {
  margin: 0.15rem 0 0;
  color: var(--st-muted);
  font-size: var(--st-text-sm);
  font-weight: 400;
}

.st-card-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.25rem;
}

.st-card-body > :last-child {
  margin-bottom: 0;
}

.st-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--st-border);
  border-radius: 0 0 calc(var(--st-radius) - 1px) calc(var(--st-radius) - 1px);
  background: rgb(0 0 0 / 0.14);
}

.st-card > .st-table-wrap {
  border: 0;
  border-radius: 0;
}

.st-card > .st-table-wrap:last-child {
  border-radius: 0 0 calc(var(--st-radius) - 1px) calc(var(--st-radius) - 1px);
}

.st-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--st-gap);
  min-width: 0;
}

.st-grid > * {
  min-width: 0;
}

.st-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.st-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.st-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.st-span-2 {
  grid-column: span 2;
}

.st-span-full {
  grid-column: 1 / -1;
}

/* ============================================================================================
   6. Buttons
   ============================================================================================ */

.st-btn,
.st-power-btn {
  --btn-bg: var(--st-surface-2);
  --btn-bg-hover: var(--st-surface-3);
  --btn-fg: var(--st-text);
  --btn-fg-hover: var(--st-text-strong);
  --btn-border: var(--st-border-strong);
  --btn-border-hover: var(--st-input-border);
  --btn-shadow: none;
  --btn-shadow-hover: none;
  --btn-glow-rgb: var(--st-accent-2-rgb);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--st-radius-sm);
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  color: var(--btn-fg);
  font: inherit;
  font-size: var(--st-text-md);
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--st-fast) ease, border-color var(--st-fast) ease, color var(--st-fast) ease,
    box-shadow var(--st-med) ease, transform var(--st-fast) ease, filter var(--st-fast) ease;
}

.st-btn .st-icon,
.st-power-btn .st-icon {
  width: 18px;
  height: 18px;
}

.st-btn:hover:not(:disabled, [aria-disabled='true'], .is-disabled, .is-loading),
.st-power-btn:hover:not(:disabled, [aria-disabled='true'], .is-disabled, .is-loading) {
  border-color: var(--btn-border-hover);
  background: var(--btn-bg-hover);
  box-shadow: var(--btn-shadow-hover);
  color: var(--btn-fg-hover);
  text-decoration: none;
}

.st-btn:active:not(:disabled, [aria-disabled='true'], .is-disabled, .is-loading),
.st-power-btn:active:not(:disabled, [aria-disabled='true'], .is-disabled, .is-loading) {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.95);
}

.st-btn:focus-visible,
.st-power-btn:focus-visible {
  outline: 2px solid var(--st-focus);
  outline-offset: 2px;
}

.st-btn:disabled,
.st-btn[aria-disabled='true'],
.st-btn.is-disabled,
.st-power-btn:disabled,
.st-power-btn[aria-disabled='true'],
.st-power-btn.is-disabled {
  opacity: 0.45;
  box-shadow: none;
  cursor: not-allowed;
  filter: saturate(0.6);
}

.st-btn[aria-pressed='true'],
.st-btn.is-active {
  border-color: rgb(var(--st-accent-2-rgb) / 0.6);
  background: rgb(var(--st-accent-2-rgb) / 0.12);
  color: var(--st-text-strong);
}

.st-btn.is-loading,
.st-power-btn.is-loading {
  color: transparent !important;
  pointer-events: none;
}

.st-btn.is-loading > *,
.st-power-btn.is-loading > * {
  visibility: hidden;
}

.st-btn.is-loading::after,
.st-power-btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid var(--btn-fg);
  border-right-color: transparent;
  border-radius: 50%;
  animation: st-spin 0.7s linear infinite;
}

.st-btn-primary {
  --btn-bg: linear-gradient(135deg, #ffd56b 0%, var(--st-accent) 55%, #e39a12 100%);
  --btn-bg-hover: linear-gradient(135deg, #ffe08f 0%, var(--st-accent-strong) 55%, #f0a91f 100%);
  --btn-fg: var(--st-accent-ink);
  --btn-fg-hover: var(--st-accent-ink);
  --btn-border: transparent;
  --btn-border-hover: transparent;
  --btn-shadow: var(--st-glow);
  --btn-shadow-hover: var(--st-glow-strong);
  --btn-glow-rgb: var(--st-accent-rgb);
}

.st-btn-success {
  --btn-bg: #2ee67f;
  --btn-bg-hover: var(--st-success);
  --btn-fg: var(--st-success-ink);
  --btn-fg-hover: var(--st-success-ink);
  --btn-border: transparent;
  --btn-border-hover: transparent;
  --btn-shadow-hover: 0 8px 24px -10px rgb(var(--st-success-rgb) / 0.8);
  --btn-glow-rgb: var(--st-success-rgb);
}

.st-btn-danger {
  --btn-bg: #e11d48;
  --btn-bg-hover: #be123c;
  --btn-fg: #ffffff;
  --btn-fg-hover: #ffffff;
  --btn-border: transparent;
  --btn-border-hover: transparent;
  --btn-shadow-hover: 0 8px 24px -10px rgb(225 29 72 / 0.85);
  --btn-glow-rgb: 225 29 72;
}

.st-btn-warning {
  --btn-bg: #ff9f43;
  --btn-bg-hover: #ffb36b;
  --btn-fg: #1f0f00;
  --btn-fg-hover: #1f0f00;
  --btn-border: transparent;
  --btn-border-hover: transparent;
  --btn-shadow-hover: 0 8px 24px -10px rgb(var(--st-warning-rgb) / 0.8);
  --btn-glow-rgb: var(--st-warning-rgb);
}

/* Royal-blue secondary action (matches the "SMP" half of the logo) */
.st-btn-royal {
  --btn-bg: var(--st-royal);
  --btn-bg-hover: var(--st-royal-strong);
  --btn-fg: #ffffff;
  --btn-fg-hover: #ffffff;
  --btn-border: transparent;
  --btn-border-hover: transparent;
  --btn-shadow-hover: 0 8px 24px -10px rgb(var(--st-royal-rgb) / 0.9);
  --btn-glow-rgb: var(--st-royal-rgb);
}

.st-btn-ghost {
  --btn-bg: transparent;
  --btn-bg-hover: rgb(255 255 255 / 0.06);
  --btn-fg: var(--st-muted);
  --btn-fg-hover: var(--st-text-strong);
  --btn-border: transparent;
  --btn-border-hover: transparent;
}

.st-btn-ghost.st-text-danger,
.st-btn-ghost.is-danger {
  --btn-fg: var(--st-danger);
  --btn-fg-hover: var(--st-danger);
  --btn-bg-hover: rgb(var(--st-danger-rgb) / 0.12);
}

.st-btn-sm {
  gap: 0.35rem;
  min-height: 32px;
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  font-size: var(--st-text-sm);
}

.st-btn-sm .st-icon {
  width: 16px;
  height: 16px;
}

.st-btn-lg {
  gap: 0.65rem;
  min-height: 52px;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-size: 1.0625rem;
}

.st-btn-lg .st-icon {
  width: 22px;
  height: 22px;
}

.st-btn-block {
  display: flex;
  width: 100%;
}

.st-btn-icon {
  width: 40px;
  min-width: 40px;
  padding: 0;
}

.st-btn-icon.st-btn-sm {
  width: 32px;
  min-width: 32px;
  padding: 0;
}

.st-btn-icon.st-btn-lg {
  width: 52px;
  min-width: 52px;
  padding: 0;
}

.st-btn-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Big power controls (Start / Stop / Restart / Kill): combine with a .st-btn-* colour variant. */
.st-power-btn {
  flex-direction: column;
  gap: 0.45rem;
  min-width: 120px;
  min-height: 92px;
  padding: 0.9rem 1.25rem;
  border-radius: var(--st-radius);
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.st-power-btn .st-icon {
  width: 28px;
  height: 28px;
}

.st-power-btn:hover:not(:disabled, [aria-disabled='true'], .is-disabled, .is-loading) {
  box-shadow: 0 0 0 1px rgb(var(--btn-glow-rgb) / 0.55), 0 14px 36px -12px rgb(var(--btn-glow-rgb) / 0.85);
  transform: translateY(-2px);
}

.st-power-btn.is-loading::after {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-width: 3px;
}

/* ============================================================================================
   7. Badges, status dots, chips
   ============================================================================================ */

.st-badge {
  --badge-rgb: var(--st-muted-rgb);

  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 22px;
  padding: 0.1rem 0.55rem;
  border: 1px solid rgb(var(--badge-rgb) / 0.38);
  border-radius: var(--st-radius-pill);
  background: rgb(var(--badge-rgb) / 0.12);
  color: rgb(var(--badge-rgb));
  font-size: var(--st-text-xs);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: middle;
}

.st-badge .st-icon {
  width: 13px;
  height: 13px;
}

.st-badge-success {
  --badge-rgb: var(--st-success-rgb);
}

.st-badge-danger {
  --badge-rgb: var(--st-danger-rgb);
}

.st-badge-warning {
  --badge-rgb: var(--st-warning-rgb);
}

.st-badge-info {
  --badge-rgb: var(--st-info-rgb);
}

.st-badge-muted {
  --badge-rgb: var(--st-muted-rgb);
}

.st-badge-accent {
  --badge-rgb: var(--st-accent-rgb);
}

.st-badge-count {
  justify-content: center;
  min-width: 22px;
  padding-inline: 0.4rem;
}

.st-status-dot {
  --dot-rgb: 102 118 143;

  position: relative;
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(var(--dot-rgb));
  box-shadow: 0 0 0 3px rgb(var(--dot-rgb) / 0.18);
  vertical-align: middle;
}

.st-status-dot.is-running {
  --dot-rgb: var(--st-success-rgb);

  box-shadow: 0 0 0 3px rgb(var(--dot-rgb) / 0.2), 0 0 10px rgb(var(--dot-rgb) / 0.8);
}

.st-status-dot.is-running::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgb(var(--dot-rgb));
  animation: st-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.st-status-dot.is-starting,
.st-status-dot.is-stopping {
  --dot-rgb: var(--st-warning-rgb);

  animation: st-blink 1.1s ease-in-out infinite;
}

.st-status-dot.is-stopped {
  --dot-rgb: 102 118 143;
}

.st-status-dot.is-crashed {
  --dot-rgb: var(--st-danger-rgb);

  box-shadow: 0 0 0 3px rgb(var(--dot-rgb) / 0.22), 0 0 10px rgb(var(--dot-rgb) / 0.8);
}

/* ============================================================================================
   8. Meters, gauges, stats, progress
   ============================================================================================ */

.st-meter {
  position: relative;
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: var(--st-radius-pill);
  background: var(--st-surface-3);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.4);
}

.st-meter-fill {
  --fill-rgb: var(--st-accent-rgb);

  display: block;
  width: calc(var(--value) * 1%);
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--st-accent-2), var(--st-accent));
  box-shadow: 0 0 12px rgb(var(--fill-rgb) / 0.55);
  transition: width var(--st-slow) var(--st-ease), --value var(--st-slow) var(--st-ease), background-color var(--st-med) ease;
}

.st-meter-fill.is-success {
  --fill-rgb: var(--st-success-rgb);

  background: linear-gradient(90deg, #1fcf6c, var(--st-success));
}

.st-meter-fill.is-warning {
  --fill-rgb: var(--st-warning-rgb);

  background: linear-gradient(90deg, #f07c12, var(--st-warning));
}

.st-meter-fill.is-danger {
  --fill-rgb: var(--st-danger-rgb);

  background: linear-gradient(90deg, #e11d48, var(--st-danger));
}

.st-meter-lg {
  height: 14px;
}

.st-meter-sm {
  height: 6px;
}

.st-gauge {
  --gauge-rgb: var(--st-accent-rgb);
  --gauge-size: 148px;
  --gauge-thickness: 12px;

  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--gauge-size);
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  text-align: center;
  transition: --value 0.6s var(--st-ease);
}

.st-gauge::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(
    from 225deg,
    rgb(var(--gauge-rgb)) 0,
    rgb(var(--gauge-rgb)) calc(var(--value) * 0.75%),
    var(--st-surface-3) calc(var(--value) * 0.75%),
    var(--st-surface-3) 75%,
    transparent 75%
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--gauge-thickness) - 1px),
    #000 calc(100% - var(--gauge-thickness))
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--gauge-thickness) - 1px),
    #000 calc(100% - var(--gauge-thickness))
  );
  filter: drop-shadow(0 0 6px rgb(var(--gauge-rgb) / 0.45));
}

.st-gauge.is-success {
  --gauge-rgb: var(--st-success-rgb);
}

.st-gauge.is-info {
  --gauge-rgb: var(--st-accent-2-rgb);
}

.st-gauge.is-warning {
  --gauge-rgb: var(--st-warning-rgb);
}

.st-gauge.is-danger {
  --gauge-rgb: var(--st-danger-rgb);
}

.st-gauge-sm {
  --gauge-size: 104px;
  --gauge-thickness: 9px;
}

.st-gauge-lg {
  --gauge-size: 188px;
  --gauge-thickness: 14px;
}

.st-gauge-value {
  color: var(--st-text-strong);
  font-size: calc(var(--gauge-size) * 0.18);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.st-gauge-label {
  margin-top: 0.15rem;
  color: var(--st-muted);
  font-size: var(--st-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.st-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.st-stat-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--st-muted);
  font-size: var(--st-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.st-stat-label .st-icon {
  width: 15px;
  height: 15px;
  color: var(--st-accent-2);
}

.st-stat-value {
  overflow: hidden;
  color: var(--st-text-strong);
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-stat-value small {
  color: var(--st-muted);
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0;
}

.st-stat-sub {
  color: var(--st-muted);
  font-size: var(--st-text-sm);
}

.st-stat.is-success .st-stat-value {
  color: var(--st-success);
}

.st-stat.is-warning .st-stat-value {
  color: var(--st-warning);
}

.st-stat.is-danger .st-stat-value {
  color: var(--st-danger);
}

.st-progress {
  position: relative;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: var(--st-radius-pill);
  background: var(--st-surface-3);
}

.st-progress-bar {
  display: block;
  width: calc(var(--value) * 1%);
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--st-accent-2), var(--st-accent));
  box-shadow: 0 0 10px rgb(var(--st-accent-rgb) / 0.45);
  transition: width var(--st-med) linear;
}

.st-progress-bar.is-success {
  background: var(--st-success);
}

.st-progress-bar.is-warning {
  background: var(--st-warning);
  box-shadow: 0 0 10px rgb(var(--st-warning-rgb) / 0.45);
}

.st-progress-bar.is-danger {
  background: var(--st-danger);
  box-shadow: 0 0 10px rgb(var(--st-danger-rgb) / 0.45);
}

.st-progress.is-indeterminate .st-progress-bar {
  width: 40%;
  animation: st-indeterminate 1.3s ease-in-out infinite;
}

/* ============================================================================================
   9. Tables
   ============================================================================================ */

.st-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-sm);
  -webkit-overflow-scrolling: touch;
}

.st-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.st-table caption {
  padding: 0.75rem 1rem;
  color: var(--st-muted);
  font-size: var(--st-text-sm);
  text-align: left;
}

.st-table th {
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--st-border);
  background: var(--st-surface-2);
  color: var(--st-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.st-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.st-table td {
  padding: 0.75rem 0.95rem;
  border-bottom: 1px solid var(--st-border);
  vertical-align: middle;
}

.st-table tbody tr:last-child td {
  border-bottom: 0;
}

.st-table tbody tr {
  transition: background-color var(--st-fast) ease;
}

.st-table tbody tr:hover {
  background: rgb(255 255 255 / 0.025);
}

.st-table tbody tr.is-selected,
.st-table tbody tr[aria-selected='true'] {
  background: rgb(var(--st-accent-2-rgb) / 0.08);
}

.st-table tbody tr.is-muted td {
  color: var(--st-muted);
}

.st-table th.st-text-right,
.st-table td.st-text-right {
  text-align: right;
}

.st-table .st-cell-actions {
  white-space: nowrap;
  text-align: right;
}

.st-table-compact th,
.st-table-compact td {
  padding: 0.45rem 0.75rem;
}

/* ============================================================================================
   10. Forms
   ============================================================================================ */

.st-form {
  display: grid;
  gap: 1.1rem;
  min-width: 0;
}

.st-form-group {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.st-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1.1rem;
}

.st-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.st-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--st-text);
  font-size: 0.875rem;
  font-weight: 650;
}

.st-label .st-optional {
  color: var(--st-muted);
  font-weight: 500;
}

.st-input,
.st-select,
.st-textarea {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--st-input-border);
  border-radius: var(--st-radius-sm);
  background-color: var(--st-surface-2);
  color: var(--st-text);
  font: inherit;
  font-size: var(--st-text-md);
  line-height: 1.4;
  transition: border-color var(--st-fast) ease, box-shadow var(--st-med) ease, background-color var(--st-fast) ease;
}

.st-input::placeholder,
.st-textarea::placeholder {
  color: var(--st-muted);
  opacity: 0.85;
}

.st-input:hover:not(:disabled, [readonly]),
.st-select:hover:not(:disabled),
.st-textarea:hover:not(:disabled, [readonly]) {
  border-color: var(--st-input-border-hover);
}

.st-input:focus,
.st-select:focus,
.st-textarea:focus {
  border-color: var(--st-accent-2);
  box-shadow: var(--st-ring);
  outline: none;
}

.st-input:focus-visible,
.st-select:focus-visible,
.st-textarea:focus-visible {
  outline: none;
}

.st-input[aria-invalid='true'],
.st-select[aria-invalid='true'],
.st-textarea[aria-invalid='true'],
.st-input.is-invalid,
.st-select.is-invalid,
.st-textarea.is-invalid {
  border-color: var(--st-danger);
}

.st-input[aria-invalid='true']:focus,
.st-select[aria-invalid='true']:focus,
.st-textarea[aria-invalid='true']:focus,
.st-input.is-invalid:focus,
.st-textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px rgb(var(--st-danger-rgb) / 0.25);
}

.st-input:disabled,
.st-select:disabled,
.st-textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.st-input[readonly],
.st-textarea[readonly] {
  border-style: dashed;
  background-color: var(--st-surface);
}

.st-input.st-mono,
.st-textarea.st-mono {
  font-family: var(--st-mono);
  font-size: 0.875rem;
}

.st-input[type='number'] {
  font-variant-numeric: tabular-nums;
}

.st-input[type='search']::-webkit-search-cancel-button {
  filter: invert(0.7);
}

.st-select {
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa8c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.st-select option {
  background: var(--st-surface-2);
  color: var(--st-text);
}

.st-textarea {
  min-height: 120px;
  resize: vertical;
}

.st-help {
  margin: 0;
  color: var(--st-muted);
  font-size: var(--st-text-sm);
  line-height: 1.45;
}

.st-field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0;
  color: var(--st-danger);
  font-size: var(--st-text-sm);
  font-weight: 600;
  line-height: 1.4;
}

.st-field-error .st-icon {
  width: 15px;
  height: 15px;
  margin-top: 0.1rem;
}

.st-input-group {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.st-input-group > .st-input {
  flex: 1 1 auto;
  min-width: 0;
}

.st-input-group > :not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.st-input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.st-input-group > .st-btn {
  min-height: 42px;
  border-color: var(--st-input-border);
}

.st-input-group > .st-btn + .st-btn,
.st-input-group > .st-input + .st-btn {
  margin-left: -1px;
}

.st-input-group > .st-input:focus {
  position: relative;
  z-index: 1;
}

.st-input-group > .st-btn:focus-visible {
  z-index: 2;
}

.st-input-addon {
  display: inline-flex;
  align-items: center;
  max-width: 55%;
  padding: 0 0.75rem;
  overflow: hidden;
  border: 1px solid var(--st-input-border);
  border-right: 0;
  border-radius: var(--st-radius-sm) 0 0 var(--st-radius-sm);
  background: var(--st-surface);
  color: var(--st-muted);
  font-family: var(--st-mono);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Password field with a show/hide button inside the input */
.st-password {
  position: relative;
}

.st-password > .st-input {
  padding-right: 3rem;
}

.st-password > .st-btn {
  position: absolute;
  top: 50%;
  right: 4px;
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  transform: translateY(-50%);
}

.st-password > .st-btn:active:not(:disabled) {
  transform: translateY(-50%) scale(0.96);
}

/* Toggle switch: <label class="st-switch"><input type="checkbox" role="switch"> Text</label>
   or a bare <input type="checkbox" class="st-switch" role="switch">. */
.st-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 28px;
  color: var(--st-text);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.st-switch input[type='checkbox'],
input[type='checkbox'].st-switch {
  flex: none;
  width: 46px;
  height: 26px;
  margin: 0;
  border: 1px solid var(--st-input-border);
  border-radius: var(--st-radius-pill);
  background-color: var(--st-surface-3);
  background-image: radial-gradient(circle closest-side, #cfd8ec 0 calc(100% - 3px), transparent calc(100% - 2px));
  background-position: 1px center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  cursor: pointer;
  transition: background-color var(--st-med) ease, background-position var(--st-med) var(--st-ease),
    border-color var(--st-med) ease, box-shadow var(--st-med) ease;
  -webkit-appearance: none;
  appearance: none;
}

.st-switch input[type='checkbox']:hover:not(:disabled),
input[type='checkbox'].st-switch:hover:not(:disabled) {
  border-color: var(--st-input-border-hover);
}

.st-switch input[type='checkbox']:checked,
input[type='checkbox'].st-switch:checked {
  border-color: var(--st-accent);
  background-color: var(--st-accent);
  background-image: radial-gradient(
    circle closest-side,
    var(--st-accent-ink) 0 calc(100% - 3px),
    transparent calc(100% - 2px)
  );
  background-position: calc(100% - 1px) center;
  box-shadow: 0 0 16px -3px rgb(var(--st-accent-rgb) / 0.65);
}

.st-switch input[type='checkbox']:focus-visible,
input[type='checkbox'].st-switch:focus-visible {
  outline: 2px solid var(--st-focus);
  outline-offset: 2px;
}

.st-switch input[type='checkbox']:active:not(:disabled),
input[type='checkbox'].st-switch:active:not(:disabled) {
  filter: brightness(0.92);
}

.st-switch input[type='checkbox']:disabled,
input[type='checkbox'].st-switch:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.st-switch:has(input:disabled) {
  color: var(--st-muted);
  cursor: not-allowed;
}

/* Checkbox option with title + description (permission pickers) */
.st-check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-sm);
  background: rgb(255 255 255 / 0.015);
  cursor: pointer;
  transition: border-color var(--st-fast) ease, background-color var(--st-fast) ease, box-shadow var(--st-med) ease;
}

.st-check:hover {
  border-color: var(--st-border-strong);
  background: rgb(255 255 255 / 0.035);
}

.st-check:has(input:checked) {
  border-color: rgb(var(--st-accent-rgb) / 0.45);
  background: rgb(var(--st-accent-rgb) / 0.06);
}

.st-check:has(input:focus-visible) {
  box-shadow: 0 0 0 2px var(--st-focus);
}

.st-check:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

.st-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0.15rem 0 0;
  cursor: inherit;
}

.st-check input:focus-visible {
  outline: none;
}

.st-check-text {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.st-check-title {
  color: var(--st-text);
  font-weight: 650;
  line-height: 1.3;
}

.st-check-desc {
  color: var(--st-muted);
  font-size: var(--st-text-sm);
  line-height: 1.4;
}

/* Setting row: text on the left, control on the right */
.st-setting {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--st-border);
}

.st-setting:first-child {
  padding-top: 0;
}

.st-setting:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.st-setting-text {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.st-setting-title {
  margin: 0;
  color: var(--st-text-strong);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

.st-setting-desc {
  margin: 0;
  color: var(--st-muted);
  font-size: var(--st-text-sm);
  line-height: 1.5;
}

.st-setting-control {
  flex: none;
  padding-top: 0.1rem;
}

/* ============================================================================================
   11. Tabs, toolbar, breadcrumbs
   ============================================================================================ */

.st-tabs {
  display: flex;
  gap: 0.25rem;
  min-width: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--st-border);
  scrollbar-width: none;
}

.st-tabs::-webkit-scrollbar {
  display: none;
}

.st-tab {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  margin-bottom: -1px;
  padding: 0.6rem 1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--st-muted);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--st-fast) ease, border-color var(--st-fast) ease, background-color var(--st-fast) ease;
}

.st-tab .st-icon {
  width: 17px;
  height: 17px;
}

.st-tab:hover:not(:disabled) {
  background: rgb(255 255 255 / 0.035);
  color: var(--st-text);
  text-decoration: none;
}

.st-tab:active:not(:disabled) {
  background: rgb(255 255 255 / 0.06);
}

.st-tab:focus-visible {
  outline-offset: -2px;
}

.st-tab.is-active,
.st-tab[aria-selected='true'] {
  border-bottom-color: var(--st-accent);
  color: var(--st-text-strong);
  text-shadow: 0 0 18px rgb(var(--st-accent-rgb) / 0.45);
}

.st-tab.is-active .st-icon,
.st-tab[aria-selected='true'] .st-icon {
  color: var(--st-accent);
}

.st-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.st-tab .st-badge {
  margin-left: 0.15rem;
}

.st-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.st-toolbar > .st-input,
.st-toolbar > .st-select {
  width: auto;
  flex: 1 1 200px;
  min-width: 0;
}

.st-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.st-toolbar-spacer {
  flex: 1 1 auto;
}

.st-breadcrumbs {
  min-width: 0;
  color: var(--st-muted);
  font-size: 0.875rem;
}

.st-breadcrumbs ol,
.st-breadcrumbs ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.st-breadcrumbs li + li::before {
  content: '/';
  margin: 0 0.35rem;
  color: var(--st-faint);
}

.st-breadcrumbs a,
.st-breadcrumbs button {
  max-width: 24ch;
  overflow: hidden;
  padding: 0.2rem 0.4rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--st-accent-2);
  font: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.st-breadcrumbs a:hover,
.st-breadcrumbs button:hover {
  background: rgb(var(--st-accent-2-rgb) / 0.1);
  color: var(--st-focus);
  text-decoration: none;
}

.st-breadcrumbs [aria-current] {
  padding: 0.2rem 0.4rem;
  color: var(--st-text-strong);
  font-weight: 650;
}

.st-breadcrumb-sep {
  color: var(--st-faint);
}

/* ============================================================================================
   12. Feedback: empty, spinner, alert
   ============================================================================================ */

.st-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2.5rem 1.25rem;
  border: 1px dashed var(--st-border-strong);
  border-radius: var(--st-radius);
  background: rgb(var(--st-surface-2-rgb) / 0.35);
  color: var(--st-muted);
  text-align: center;
}

.st-empty > .st-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 0.25rem;
  color: var(--st-faint);
}

.st-empty-title {
  margin: 0;
  color: var(--st-text-strong);
  font-size: 1rem;
  font-weight: 700;
}

.st-empty p {
  max-width: 46ch;
  margin: 0;
}

.st-spinner {
  --spinner-size: 20px;

  display: inline-block;
  flex: none;
  width: var(--spinner-size);
  height: var(--spinner-size);
  border: 2px solid rgb(var(--st-accent-rgb) / 0.2);
  border-top-color: var(--st-accent);
  border-radius: 50%;
  vertical-align: middle;
  animation: st-spin 0.75s linear infinite;
}

.st-spinner-sm {
  --spinner-size: 14px;
}

.st-spinner-lg {
  --spinner-size: 38px;

  border-width: 3px;
}

.st-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem 1rem;
  color: var(--st-muted);
}

.st-alert {
  --alert-rgb: var(--st-info-rgb);

  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.85rem 1rem;
  border: 1px solid rgb(var(--alert-rgb) / 0.35);
  border-left: 3px solid rgb(var(--alert-rgb));
  border-radius: var(--st-radius-sm);
  background: rgb(var(--alert-rgb) / 0.08);
  color: var(--st-text);
  font-size: 0.9rem;
  line-height: 1.5;
}

.st-alert > .st-icon {
  width: 20px;
  height: 20px;
  margin-top: 0.05rem;
  color: rgb(var(--alert-rgb));
}

.st-alert-body {
  display: grid;
  flex: 1 1 auto;
  gap: 0.25rem;
  min-width: 0;
}

.st-alert-title {
  margin: 0;
  color: var(--st-text-strong);
  font-weight: 700;
}

.st-alert p {
  margin: 0;
}

.st-alert a {
  font-weight: 600;
}

.st-alert-info {
  --alert-rgb: var(--st-info-rgb);
}

.st-alert-success {
  --alert-rgb: var(--st-success-rgb);
}

.st-alert-warning {
  --alert-rgb: var(--st-warning-rgb);
}

.st-alert-danger {
  --alert-rgb: var(--st-danger-rgb);
}

/* ============================================================================================
   13. Dropzone, terminal, editor
   ============================================================================================ */

.st-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 140px;
  padding: 1.75rem 1.25rem;
  border: 2px dashed var(--st-border-strong);
  border-radius: var(--st-radius);
  background: rgb(var(--st-surface-2-rgb) / 0.35);
  color: var(--st-muted);
  text-align: center;
  transition: border-color var(--st-med) ease, background-color var(--st-med) ease, box-shadow var(--st-med) ease,
    color var(--st-med) ease;
}

.st-dropzone > .st-icon {
  width: 36px;
  height: 36px;
  color: var(--st-accent-2);
}

.st-dropzone:hover {
  border-color: rgb(var(--st-accent-2-rgb) / 0.6);
  color: var(--st-text);
}

.st-dropzone:focus-visible,
.st-dropzone:focus-within {
  border-color: var(--st-accent-2);
  outline: none;
  box-shadow: var(--st-ring);
}

.st-dropzone.is-dragover {
  border-color: var(--st-accent);
  border-style: solid;
  background: rgb(var(--st-accent-rgb) / 0.08);
  color: var(--st-text-strong);
  box-shadow: inset 0 0 0 1px rgb(var(--st-accent-rgb) / 0.35), 0 0 32px -10px rgb(var(--st-accent-rgb) / 0.7);
}

.st-dropzone.is-dragover > .st-icon {
  color: var(--st-accent);
  transform: translateY(-3px);
}

.st-dropzone.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.st-terminal {
  position: relative;
  height: clamp(320px, 62vh, 780px);
  min-height: 260px;
  padding: 0.75rem 0.5rem 0.75rem 0.85rem;
  overflow: hidden;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  background: radial-gradient(800px 300px at 0% 0%, rgb(var(--st-accent-rgb) / 0.03), transparent 60%),
    var(--st-term-bg);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03), var(--st-shadow);
  color: #d7e0ec;
  font-family: var(--st-mono);
  font-size: 13px;
}

.st-terminal:focus-within {
  border-color: rgb(var(--st-accent-2-rgb) / 0.55);
}

.st-terminal .xterm {
  height: 100%;
}

.st-terminal .xterm-viewport {
  scrollbar-color: var(--st-border-strong) transparent;
  scrollbar-width: thin;
}

.st-terminal .xterm .xterm-viewport::-webkit-scrollbar {
  width: 8px;
}

.st-editor {
  position: relative;
  height: clamp(320px, 66vh, 840px);
  min-height: 260px;
  overflow: hidden;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  background: var(--st-term-bg);
}

.st-editor:focus-within {
  border-color: rgb(var(--st-accent-2-rgb) / 0.55);
  box-shadow: var(--st-ring);
}

.st-editor .CodeMirror {
  height: 100%;
  font-family: var(--st-mono);
  font-size: 13px;
  line-height: 1.55;
}

/* CodeMirror 5 theme matching the panel: new CodeMirror(host, { theme: 'secrettheme' }) */
.cm-s-secrettheme.CodeMirror {
  background: var(--st-term-bg);
  color: #d7e0ec;
}

.cm-s-secrettheme .CodeMirror-gutters {
  border-right: 1px solid var(--st-border);
  background: var(--st-bg-2);
}

.cm-s-secrettheme .CodeMirror-linenumber {
  color: var(--st-faint);
}

.cm-s-secrettheme .CodeMirror-cursor {
  border-left: 2px solid var(--st-accent);
}

.cm-s-secrettheme div.CodeMirror-selected,
.cm-s-secrettheme.CodeMirror-focused div.CodeMirror-selected {
  background: rgb(var(--st-accent-2-rgb) / 0.2);
}

.cm-s-secrettheme .CodeMirror-line::selection,
.cm-s-secrettheme .CodeMirror-line > span::selection,
.cm-s-secrettheme .CodeMirror-line > span > span::selection {
  background: rgb(var(--st-accent-2-rgb) / 0.25);
}

.cm-s-secrettheme .CodeMirror-activeline-background {
  background: rgb(255 255 255 / 0.035);
}

.cm-s-secrettheme .CodeMirror-matchingbracket {
  outline: 1px solid rgb(var(--st-accent-rgb) / 0.6);
  color: var(--st-accent) !important;
}

.cm-s-secrettheme .cm-comment {
  color: #6f819c;
  font-style: italic;
}

.cm-s-secrettheme .cm-keyword,
.cm-s-secrettheme .cm-atom {
  color: #c792ea;
}

.cm-s-secrettheme .cm-string,
.cm-s-secrettheme .cm-string-2 {
  color: #a5e844;
}

.cm-s-secrettheme .cm-number {
  color: #f78c6c;
}

.cm-s-secrettheme .cm-def,
.cm-s-secrettheme .cm-property {
  color: #7fdbff;
}

.cm-s-secrettheme .cm-variable,
.cm-s-secrettheme .cm-variable-2 {
  color: #e6edf7;
}

.cm-s-secrettheme .cm-variable-3,
.cm-s-secrettheme .cm-type,
.cm-s-secrettheme .cm-builtin {
  color: #ffcb6b;
}

.cm-s-secrettheme .cm-operator,
.cm-s-secrettheme .cm-meta {
  color: #89ddff;
}

.cm-s-secrettheme .cm-tag {
  color: #ff7a93;
}

.cm-s-secrettheme .cm-attribute,
.cm-s-secrettheme .cm-qualifier {
  color: #ffcb6b;
}

.cm-s-secrettheme .cm-header {
  color: var(--st-accent);
  font-weight: 700;
}

.cm-s-secrettheme .cm-error {
  color: #ffffff;
  background: rgb(225 29 72 / 0.55);
}

/* ============================================================================================
   14. Avatar, key/value, list
   ============================================================================================ */

.st-avatar {
  --avatar-size: 34px;

  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  overflow: hidden;
  border: 1px solid var(--st-border-strong);
  border-radius: 9px;
  background: linear-gradient(135deg, rgb(var(--st-accent-rgb) / 0.3), rgb(var(--st-royal-rgb) / 0.35)),
    var(--st-surface-2);
  color: var(--st-text-strong);
  font-size: calc(var(--avatar-size) * 0.4);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

.st-avatar img,
img.st-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

img.st-avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
}

.st-avatar-sm {
  --avatar-size: 24px;

  border-radius: 6px;
}

.st-avatar-lg {
  --avatar-size: 52px;

  border-radius: 12px;
}

.st-kv {
  display: grid;
  grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
  gap: 0.55rem 1.25rem;
  margin: 0;
}

.st-kv dt {
  color: var(--st-muted);
  font-size: 0.875rem;
}

.st-kv dd {
  min-width: 0;
  margin: 0;
  color: var(--st-text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.st-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-list > li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--st-border);
}

.st-list > li:first-child {
  padding-top: 0;
}

.st-list > li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.st-list.is-interactive > li {
  margin-inline: -0.6rem;
  padding-inline: 0.6rem;
  border-radius: 8px;
  transition: background-color var(--st-fast) ease;
}

.st-list.is-interactive > li:hover {
  background: rgb(255 255 255 / 0.03);
}

/* Chips (permission lists, player names) */
.st-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 28px;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--st-border-strong);
  border-radius: var(--st-radius-pill);
  background: var(--st-surface-2);
  color: var(--st-text);
  font-size: var(--st-text-sm);
  font-weight: 600;
}

.st-chip .st-icon {
  width: 15px;
  height: 15px;
}

.st-chip.is-on {
  border-color: rgb(var(--st-success-rgb) / 0.45);
  background: rgb(var(--st-success-rgb) / 0.1);
}

.st-chip.is-on .st-icon {
  color: var(--st-success);
}

.st-chip.is-off {
  color: var(--st-muted);
}

.st-chip.is-off .st-icon {
  color: var(--st-faint);
}

/* ============================================================================================
   15. Modals & toasts
   ============================================================================================ */

.st-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--st-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  background: rgb(3 5 12 / 0.76);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: st-fade-in var(--st-med) ease-out;
}

.st-modal-backdrop.is-leaving {
  animation: st-fade-out 140ms ease-in forwards;
}

.st-modal {
  display: flex;
  flex-direction: column;
  width: min(520px, 100%);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  border: 1px solid var(--st-border-strong);
  border-radius: var(--st-radius-lg);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.03), transparent 140px), var(--st-surface);
  box-shadow: var(--st-shadow-lg), 0 0 60px -30px rgb(var(--st-accent-rgb) / 0.45);
  animation: st-modal-in 220ms var(--st-ease);
}

.st-modal:focus {
  outline: none;
}

.st-modal-backdrop.is-leaving .st-modal {
  animation: st-modal-out 140ms ease-in forwards;
}

.st-modal-sm {
  width: min(400px, 100%);
}

.st-modal-lg {
  width: min(760px, 100%);
}

.st-modal-xl {
  width: min(1100px, 100%);
}

.st-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem 1rem 1.35rem;
  border-bottom: 1px solid var(--st-border);
}

.st-modal-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 750;
}

.st-modal-title .st-icon {
  color: var(--st-accent-2);
}

.st-modal.is-danger .st-modal-title .st-icon {
  color: var(--st-danger);
}

.st-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.25rem 1.35rem;
  overflow-y: auto;
  color: var(--st-text);
}

.st-modal-body > p {
  color: var(--st-text);
  white-space: pre-line;
}

.st-modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.9rem 1.35rem;
  border-top: 1px solid var(--st-border);
  border-radius: 0 0 calc(var(--st-radius-lg) - 1px) calc(var(--st-radius-lg) - 1px);
  background: rgb(0 0 0 / 0.16);
}

.st-toasts {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: var(--st-z-toast);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(400px, calc(100vw - 2.5rem));
  pointer-events: none;
}

.st-toast {
  --toast-rgb: var(--st-info-rgb);

  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem 0.6rem 0.8rem 0.95rem;
  border: 1px solid var(--st-border-strong);
  border-left: 3px solid rgb(var(--toast-rgb));
  border-radius: var(--st-radius-sm);
  background: linear-gradient(90deg, rgb(var(--toast-rgb) / 0.1), transparent 55%), var(--st-elevated);
  box-shadow: var(--st-shadow-lg);
  color: var(--st-text);
  pointer-events: auto;
  animation: st-toast-in 260ms var(--st-ease);
}

.st-toast.is-leaving {
  animation: st-toast-out 180ms ease-in forwards;
}

.st-toast > .st-icon {
  width: 20px;
  height: 20px;
  margin-top: 0.05rem;
  color: rgb(var(--toast-rgb));
}

.st-toast-message {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0.05rem;
  font-size: 0.9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.st-toast-close {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -0.2rem 0 -0.2rem 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--st-muted);
  transition: background-color var(--st-fast) ease, color var(--st-fast) ease;
}

.st-toast-close .st-icon {
  width: 16px;
  height: 16px;
}

.st-toast-close:hover {
  background: rgb(255 255 255 / 0.08);
  color: var(--st-text-strong);
}

.st-toast-close:focus-visible {
  outline-offset: 0;
}

.st-toast-info {
  --toast-rgb: var(--st-info-rgb);
}

.st-toast-success {
  --toast-rgb: var(--st-success-rgb);
}

.st-toast-warning {
  --toast-rgb: var(--st-warning-rgb);
}

.st-toast-error,
.st-toast-danger {
  --toast-rgb: var(--st-danger-rgb);
}

/* ============================================================================================
   16. Page components: settings & users
   ============================================================================================ */

.st-account-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  margin-bottom: 1.25rem;
}

.st-account-name {
  margin: 0;
  overflow: hidden;
  color: var(--st-text-strong);
  font-size: 1.125rem;
  font-weight: 800;
  text-overflow: ellipsis;
}

.st-account-email {
  margin: 0;
  overflow: hidden;
  color: var(--st-muted);
  font-size: var(--st-text-sm);
  text-overflow: ellipsis;
}

.st-subtitle {
  margin: 1.25rem 0 0.65rem;
  color: var(--st-muted);
  font-size: var(--st-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.st-url-preview {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgb(var(--st-accent-rgb) / 0.3);
  border-radius: var(--st-radius-sm);
  background: rgb(var(--st-accent-rgb) / 0.05);
  color: var(--st-text-strong);
  font-family: var(--st-mono);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.st-url-preview .st-icon {
  color: var(--st-accent);
}

.st-save-bar {
  position: sticky;
  bottom: 1rem;
  z-index: var(--st-z-savebar);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.75rem 0.75rem 0.75rem 1.1rem;
  border: 1px solid rgb(var(--st-warning-rgb) / 0.45);
  border-radius: var(--st-radius);
  background: rgb(18 26 45 / 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--st-shadow-lg), 0 0 30px -12px rgb(var(--st-warning-rgb) / 0.45);
  animation: st-slide-up 240ms var(--st-ease);
}

.st-save-bar-text {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-weight: 650;
}

.st-save-bar-text .st-icon {
  color: var(--st-warning);
}

.st-audit-action {
  font-family: var(--st-mono);
  font-size: 0.75rem;
}

.st-audit-details {
  max-width: 52ch;
  color: var(--st-muted);
  font-family: var(--st-mono);
  font-size: 0.75rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.st-pending-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: var(--st-gap);
}

.st-pending-card {
  background: linear-gradient(180deg, rgb(var(--st-warning-rgb) / 0.05), transparent 120px), var(--st-surface);
  border-color: rgb(var(--st-warning-rgb) / 0.28);
}

.st-perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 0.5rem;
}

.st-perm-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: 440px;
}

.st-chip-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 30px;
  padding: 0.2rem 0.6rem 0.2rem 0.45rem;
  border: 1px solid var(--st-border-strong);
  border-radius: var(--st-radius-pill);
  background: var(--st-surface-2);
  color: var(--st-muted);
  font-size: var(--st-text-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--st-fast) ease, background-color var(--st-fast) ease, color var(--st-fast) ease;
}

.st-chip-check input {
  width: 15px;
  height: 15px;
  margin: 0;
  cursor: inherit;
}

.st-chip-check input:focus-visible {
  outline: none;
}

.st-chip-check:hover {
  border-color: var(--st-input-border);
  color: var(--st-text);
}

.st-chip-check:has(input:checked) {
  border-color: rgb(var(--st-accent-rgb) / 0.5);
  background: rgb(var(--st-accent-rgb) / 0.09);
  color: var(--st-text-strong);
}

.st-chip-check:has(input:focus-visible) {
  box-shadow: 0 0 0 2px var(--st-focus);
}

.st-chip-check:has(input:disabled) {
  opacity: 0.6;
  cursor: not-allowed;
}

.st-user-cell {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.st-user-cell-text {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.st-user-cell-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow: hidden;
  color: var(--st-text-strong);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-user-cell-sub {
  overflow: hidden;
  color: var(--st-muted);
  font-size: var(--st-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.st-row-highlight {
  animation: st-row-flash 1.6s ease-out;
}

/* Sections without a card (e.g. the pending queue on the Users page) */
.st-section {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.st-section-head {
  display: grid;
  gap: 0.2rem;
}

.st-section-heading {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-size: 1.125rem;
}

.st-section-heading .st-icon {
  color: var(--st-accent);
}

.st-section-sub {
  margin: 0;
  font-size: var(--st-text-sm);
}

/* A <form> that wraps a card body + footer */
.st-card-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.st-owner-settings,
.st-settings-form {
  display: grid;
  gap: var(--st-gap);
  min-width: 0;
}

.st-copy-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  min-width: 0;
}

.st-copy-row > .st-url-preview {
  margin: 0;
}

.st-copy-row > .st-btn {
  flex: none;
  min-height: auto;
}

.st-users-toolbar {
  flex: 1 1 420px;
  justify-content: flex-end;
}

.st-users-toolbar > .st-input {
  flex: 1 1 200px;
  max-width: 320px;
}

.st-users-toolbar > .st-select {
  width: auto;
  flex: 0 1 180px;
}

.st-pending-card .st-user-cell-name {
  margin: 0;
  font-size: 1rem;
}

.st-perm-legend {
  width: 100%;
  margin-bottom: 0.65rem;
}

.st-perm-legend .st-subtitle {
  margin: 0;
}

.st-perm-editor {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.st-perm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.st-perm-actions:not(:has(.st-btn:not([hidden]))) {
  display: none;
}

/* ============================================================================================
   17. Auth pages (login, register, pending, 404)
   ============================================================================================ */

.st-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.st-backdrop-orb {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  will-change: transform;
}

.st-backdrop-orb.is-a {
  top: -38vmax;
  left: -24vmax;
  background: radial-gradient(circle closest-side, rgb(var(--st-accent-rgb) / 0.14), transparent);
  animation: st-drift-a 28s ease-in-out infinite alternate;
}

.st-backdrop-orb.is-b {
  top: -24vmax;
  right: -34vmax;
  background: radial-gradient(circle closest-side, rgb(var(--st-royal-rgb) / 0.32), transparent);
  animation: st-drift-b 34s ease-in-out infinite alternate;
}

.st-backdrop-orb.is-c {
  bottom: -46vmax;
  left: 12vmax;
  background: radial-gradient(circle closest-side, rgb(var(--st-violet-rgb) / 0.14), transparent);
  animation: st-drift-c 40s ease-in-out infinite alternate;
}

.st-backdrop-grid {
  position: absolute;
  inset: -48px 0 0;
  background-image: linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
  animation: st-grid-pan 14s linear infinite;
}

.st-auth {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  overflow-x: hidden;
}

.st-auth-main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
}

.st-auth-card {
  padding: 2rem;
  border-color: var(--st-border-strong);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.035), transparent 160px), rgb(var(--st-surface-rgb) / 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--st-shadow-lg), 0 0 80px -40px rgb(var(--st-accent-rgb) / 0.55);
}

.st-auth-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  color: var(--st-text-strong);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.st-auth-brand img {
  display: block;
  width: auto;
  height: 56px;
  filter: drop-shadow(0 4px 16px rgb(var(--st-accent-rgb) / 0.35));
}

.st-auth-brand small {
  display: block;
  color: var(--st-muted);
  font-size: var(--st-text-xs);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.st-auth-title {
  margin: 0 0 0.35rem;
  font-size: 1.625rem;
}

.st-auth-sub {
  margin: 0 0 1.5rem;
  color: var(--st-muted);
}

.st-auth-card .st-alert {
  margin-bottom: 1.1rem;
}

.st-auth-card .st-form {
  gap: 1rem;
}

.st-auth-card .st-btn-block {
  margin-top: 0.35rem;
}

.st-auth-alt {
  margin: 1.4rem 0 0;
  color: var(--st-muted);
  text-align: center;
}

.st-auth-alt a {
  font-weight: 650;
}

.st-auth-footer {
  position: relative;
  z-index: 1;
  margin: 1.5rem 0 0;
  color: var(--st-muted);
  font-size: var(--st-text-xs);
  text-align: center;
}

.st-auth-success {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  text-align: center;
}

.st-auth-success > .st-icon,
.st-auth-hero-icon {
  width: 56px;
  height: 56px;
  padding: 12px;
  border-radius: 50%;
  background: rgb(var(--st-accent-rgb) / 0.1);
  box-shadow: 0 0 0 1px rgb(var(--st-accent-rgb) / 0.3), 0 0 30px -6px rgb(var(--st-accent-rgb) / 0.6);
  color: var(--st-accent);
}

.st-auth-hero-icon.is-warning {
  background: rgb(var(--st-warning-rgb) / 0.1);
  box-shadow: 0 0 0 1px rgb(var(--st-warning-rgb) / 0.3), 0 0 30px -6px rgb(var(--st-warning-rgb) / 0.55);
  color: var(--st-warning);
}

.st-auth-center {
  text-align: center;
}

.st-auth-center .st-auth-brand {
  justify-content: center;
}

.st-auth-center .st-auth-hero-icon {
  display: block;
  margin: 0 auto 1rem;
}

.st-auth-actions {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.st-pending-meta {
  margin: 1rem 0 0;
  color: var(--st-muted);
  font-size: var(--st-text-sm);
}

.st-password-meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 0.15rem;
}

.st-password-meter span {
  height: 4px;
  border-radius: 4px;
  background: var(--st-surface-3);
  transition: background-color var(--st-med) ease;
}

.st-password-meter[data-score='1'] span:nth-child(-n + 1) {
  background: var(--st-danger);
}

.st-password-meter[data-score='2'] span:nth-child(-n + 2) {
  background: var(--st-warning);
}

.st-password-meter[data-score='3'] span:nth-child(-n + 3) {
  background: var(--st-accent-2);
}

.st-password-meter[data-score='4'] span {
  background: var(--st-accent);
}

.st-notfound-code {
  margin: 0 0 0.25rem;
  background: linear-gradient(135deg, var(--st-accent) 0%, var(--st-accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(4.5rem, 18vw, 7rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  text-shadow: 0 0 60px rgb(var(--st-accent-rgb) / 0.25);
}

.st-auth-brand span {
  display: grid;
  line-height: 1.2;
}

.st-auth-center .st-auth-brand img {
  height: 64px;
}

/* ============================================================================================
   18. Landing page (scoped)
   ============================================================================================ */

.st-landing {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.st-landing .st-landing-header,
.st-landing .st-landing-main,
.st-landing .st-landing-footer {
  position: relative;
  z-index: 1;
}

/* Animated starfield + logo-coloured glows behind the landing page */
.st-landing .st-starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(ellipse 130% 85% at 50% -10%, #0f1838 0%, #0a0f24 38%, var(--st-bg) 72%);
  pointer-events: none;
}

.st-landing .st-stars {
  position: absolute;
  top: -480px;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: repeat;
  will-change: transform;
}

.st-landing .st-stars.is-far {
  background-image: radial-gradient(1px 1px at 24px 36px, #ffffff 50%, transparent 52%),
    radial-gradient(1px 1px at 138px 92px, #cfd8ff 50%, transparent 52%),
    radial-gradient(1px 1px at 72px 170px, #ffffff 50%, transparent 52%),
    radial-gradient(1px 1px at 196px 140px, #ffe7a8 50%, transparent 52%),
    radial-gradient(1px 1px at 168px 18px, #ffffff 50%, transparent 52%),
    radial-gradient(1px 1px at 8px 120px, #b9c8ff 50%, transparent 52%);
  background-size: 240px 240px;
  opacity: 0.55;
  animation: st-stars-far 120s linear infinite;
}

.st-landing .st-stars.is-mid {
  background-image: radial-gradient(1.5px 1.5px at 60px 40px, #ffffff 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 250px 190px, #9fb4ff 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 150px 290px, #ffffff 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 310px 70px, #ffd77a 50%, transparent 55%);
  background-size: 360px 360px;
  opacity: 0.6;
  animation: st-stars-mid 80s linear infinite;
}

.st-landing .st-stars.is-near {
  background-image: radial-gradient(2px 2px at 110px 90px, #ffffff 45%, transparent 60%),
    radial-gradient(2px 2px at 380px 300px, #ffe08f 45%, transparent 60%),
    radial-gradient(2px 2px at 260px 430px, #c3d0ff 45%, transparent 60%);
  background-size: 480px 480px;
  animation: st-stars-near 56s linear infinite, st-twinkle 4.5s ease-in-out infinite alternate;
}

.st-landing .st-glow {
  position: absolute;
  width: 72vmax;
  height: 72vmax;
  border-radius: 50%;
  will-change: transform, opacity;
}

.st-landing .st-glow.is-gold {
  top: -44vmax;
  left: 50%;
  margin-left: -36vmax;
  background: radial-gradient(circle closest-side, rgb(var(--st-accent-rgb) / 0.2), transparent);
  animation: st-glow-pulse 9s ease-in-out infinite alternate;
}

.st-landing .st-glow.is-royal {
  bottom: -40vmax;
  left: -26vmax;
  background: radial-gradient(circle closest-side, rgb(var(--st-royal-rgb) / 0.38), transparent);
  animation: st-glow-pulse 12s ease-in-out -4s infinite alternate;
}

.st-landing .st-landing-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 1rem;
}

.st-landing .st-landing-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 32px;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  color: var(--st-text-soft);
  font-size: var(--st-text-sm);
  font-weight: 650;
}

.st-landing .st-landing-link:hover {
  color: var(--st-text-strong);
  background: rgb(255 255 255 / 0.06);
  text-decoration: none;
}

.st-landing .st-hero-logo {
  display: block;
  width: min(384px, 82vw);
  height: auto;
  margin: 0 auto 1.25rem;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 30px rgb(var(--st-accent-rgb) / 0.28)) drop-shadow(0 0 42px rgb(var(--st-royal-rgb) / 0.35));
  animation: st-float 7s ease-in-out infinite;
}

.st-landing .st-copy-fallback {
  display: grid;
  gap: 0.4rem;
  width: min(100%, 460px);
  margin-top: 1rem;
  text-align: left;
}

.st-landing .st-mc-preview {
  min-width: 0;
  margin: 0;
}

.st-landing .st-mc-text {
  min-width: 0;
}

.st-landing .st-landing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
}

.st-landing .st-landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  color: var(--st-text-strong);
  font-size: 1.0625rem;
  font-weight: 800;
}

.st-landing .st-landing-brand:hover {
  text-decoration: none;
}

.st-landing .st-landing-brand img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 12px rgb(var(--st-accent-rgb) / 0.35));
}

.st-landing .st-landing-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-landing .st-landing-main {
  flex: 1 0 auto;
  width: 100%;
  outline: none;
}

.st-landing .st-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(2.5rem, 8vh, 6rem) 1.5rem clamp(2.5rem, 7vh, 4.5rem);
  text-align: center;
}

.st-landing .st-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.5rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--st-border-strong);
  border-radius: var(--st-radius-pill);
  background: rgb(var(--st-surface-rgb) / 0.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--st-text);
  font-size: 0.875rem;
  font-weight: 700;
}

.st-landing .st-hero-chip[data-state='online'] {
  border-color: rgb(var(--st-success-rgb) / 0.5);
  box-shadow: 0 0 26px -8px rgb(var(--st-success-rgb) / 0.65);
}

.st-landing .st-hero-chip[data-state='busy'] {
  border-color: rgb(var(--st-warning-rgb) / 0.5);
}

.st-landing .st-hero-chip[data-state='offline'] {
  border-color: rgb(var(--st-danger-rgb) / 0.45);
}

.st-landing .st-hero-title {
  max-width: 100%;
  margin: 0 0 1rem;
  background: linear-gradient(120deg, #fff6dc 0%, var(--st-accent-strong) 35%, var(--st-accent) 65%, #e39a12 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(2rem, 6vw, 3.25rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  filter: drop-shadow(0 6px 28px rgb(var(--st-accent-rgb) / 0.22));
}

.st-landing .st-hero-title .st-skeleton {
  width: min(520px, 80vw);
  height: 0.9em;
}

.st-landing .st-hero-tagline {
  max-width: 62ch;
  margin: 0 0 2.25rem;
  color: var(--st-text-soft);
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  line-height: 1.6;
}

.st-landing .st-hero-tagline .st-skeleton {
  width: min(460px, 70vw);
}

.st-landing .st-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.85rem;
  width: 100%;
}

.st-landing .st-ip-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  width: min(100%, 540px);
  min-height: 68px;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  border: 1px solid rgb(var(--st-accent-rgb) / 0.55);
  border-radius: 16px;
  background: linear-gradient(135deg, rgb(var(--st-accent-rgb) / 0.14), rgb(var(--st-accent-2-rgb) / 0.08)),
    rgb(var(--st-surface-rgb) / 0.85);
  box-shadow: 0 0 0 1px rgb(var(--st-accent-rgb) / 0.12), 0 14px 40px -14px rgb(var(--st-accent-rgb) / 0.65);
  color: var(--st-text-strong);
  text-align: left;
  cursor: pointer;
  transition: transform var(--st-med) var(--st-ease), box-shadow var(--st-med) ease, border-color var(--st-med) ease;
}

.st-landing .st-ip-btn:hover:not(:disabled) {
  border-color: var(--st-accent);
  box-shadow: 0 0 0 1px rgb(var(--st-accent-rgb) / 0.4), 0 18px 48px -14px rgb(var(--st-accent-rgb) / 0.85);
  transform: translateY(-2px);
}

.st-landing .st-ip-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.99);
}

.st-landing .st-ip-btn:focus-visible {
  outline: 2px solid var(--st-focus);
  outline-offset: 3px;
}

.st-landing .st-ip-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* "Hide server address" setting: blurred placeholder, nothing to copy. */
.st-landing .st-ip-btn.is-address-hidden {
  opacity: 1;
  cursor: not-allowed;
}

.st-landing .st-ip-btn.is-address-hidden .st-ip-value {
  filter: blur(6px);
  user-select: none;
}

.st-landing .st-ip-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgb(var(--st-accent-rgb) / 0.14);
  color: var(--st-accent);
}

.st-landing .st-ip-icon .st-icon {
  width: 22px;
  height: 22px;
}

.st-landing .st-ip-text {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

.st-landing .st-ip-label {
  color: var(--st-muted);
  font-size: var(--st-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.st-landing .st-ip-value {
  overflow: hidden;
  font-family: var(--st-mono);
  font-size: clamp(0.95rem, 3.6vw, 1.15rem);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-landing .st-ip-action {
  flex: none;
  padding: 0.55rem 0.95rem;
  border-radius: 10px;
  background: var(--st-accent);
  color: var(--st-accent-ink);
  font-size: 0.875rem;
  font-weight: 800;
  box-shadow: 0 0 18px -4px rgb(var(--st-accent-rgb) / 0.8);
}

.st-landing .st-ip-btn.is-copied {
  border-color: var(--st-accent);
}

.st-landing .st-ip-btn.is-copied .st-ip-icon {
  animation: st-pop 360ms var(--st-ease);
}

.st-landing .st-btn-discord {
  --btn-bg: #5865f2;
  --btn-bg-hover: #4752c4;
  --btn-fg: #ffffff;
  --btn-fg-hover: #ffffff;
  --btn-border: transparent;
  --btn-border-hover: transparent;
  --btn-shadow: 0 12px 34px -14px rgb(88 101 242 / 0.85);
  --btn-shadow-hover: 0 0 0 1px rgb(88 101 242 / 0.6), 0 16px 40px -12px rgb(88 101 242 / 0.95);

  min-height: 68px;
  border-radius: 16px;
}

.st-landing .st-hero-dashboard {
  margin-top: 1.25rem;
}

.st-landing .st-landing-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 3.5rem;
}

.st-landing .st-section-title {
  margin: 0 0 1.1rem;
  color: var(--st-text-strong);
  font-size: 1.25rem;
}

.st-landing .st-landing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1rem;
}

.st-landing .st-landing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  padding: 1.15rem 1.2rem 1.25rem;
  overflow: hidden;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.035), transparent 70%), rgb(var(--st-surface-rgb) / 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--st-shadow);
  transition: border-color var(--st-med) ease, transform var(--st-med) var(--st-ease);
}

.st-landing .st-landing-card:hover {
  border-color: var(--st-border-strong);
  transform: translateY(-2px);
}

.st-landing .st-landing-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgb(var(--card-rgb, var(--st-accent-2-rgb)) / 0.7), transparent);
  opacity: 0.8;
}

.st-landing .st-landing-card[data-tone='success'] {
  --card-rgb: var(--st-success-rgb);
}

.st-landing .st-landing-card[data-tone='warning'] {
  --card-rgb: var(--st-warning-rgb);
}

.st-landing .st-landing-card[data-tone='danger'] {
  --card-rgb: var(--st-danger-rgb);
}

.st-landing .st-landing-card-label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--st-muted);
  font-size: var(--st-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.st-landing .st-landing-card-label .st-icon {
  width: 18px;
  height: 18px;
  color: rgb(var(--card-rgb, var(--st-accent-2-rgb)));
}

.st-landing .st-landing-card-value {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  color: var(--st-text-strong);
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.st-landing .st-landing-card-value small {
  color: var(--st-muted);
  font-size: 0.55em;
  font-weight: 650;
  letter-spacing: 0;
}

.st-landing .st-landing-card-sub {
  margin: 0;
  color: var(--st-muted);
  font-size: var(--st-text-sm);
}

.st-landing .st-landing-card .st-meter {
  margin-top: 0.4rem;
}

.st-landing .st-players {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.st-landing .st-player-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 34px;
  padding: 0.2rem 0.75rem 0.2rem 0.25rem;
  border: 1px solid var(--st-border-strong);
  border-radius: var(--st-radius-pill);
  background: rgb(var(--st-surface-rgb) / 0.85);
  font-size: 0.875rem;
  font-weight: 650;
}

.st-landing .st-player-chip .st-avatar {
  border-radius: 50%;
}

.st-landing .st-landing-updated {
  margin: 1rem 0 0;
  color: var(--st-muted);
  font-size: var(--st-text-sm);
  text-align: right;
}

.st-landing .st-join {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: start;
  gap: 1.5rem;
}

.st-landing .st-join-steps {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: st-step;
}

.st-landing .st-join-step {
  position: relative;
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.1rem 1rem 3.75rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  background: rgb(var(--st-surface-rgb) / 0.8);
  counter-increment: st-step;
}

.st-landing .st-join-step::before {
  content: counter(st-step);
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--st-accent), var(--st-accent-2));
  color: var(--st-accent-ink);
  font-weight: 900;
  box-shadow: 0 0 18px -4px rgb(var(--st-accent-rgb) / 0.7);
}

.st-landing .st-join-step strong {
  color: var(--st-text-strong);
}

.st-landing .st-join-step > span {
  color: var(--st-muted);
  font-size: 0.9rem;
}

/* Minecraft multiplayer-list style preview */
.st-landing .st-mc-entry {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 0.85rem;
  padding: 0.85rem;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  background: linear-gradient(rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.55)),
    repeating-linear-gradient(45deg, #3b2f25 0 6px, #34291f 6px 12px);
  box-shadow: var(--st-shadow);
  font-family: var(--st-mono);
  text-shadow: 2px 2px 0 rgb(0 0 0 / 0.55);
}

.st-landing .st-mc-entry img {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
}

.st-landing .st-mc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.st-landing .st-mc-name {
  overflow: hidden;
  color: #ffffff;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-landing .st-mc-count {
  flex: none;
  color: #aaaaaa;
  font-size: 0.8125rem;
}

.st-landing .st-mc-motd {
  margin: 0.25rem 0 0;
  color: #aaaaaa;
  font-size: 0.8125rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.st-landing .st-mc-caption {
  margin: 0.6rem 0 0;
  color: var(--st-muted);
  font-size: var(--st-text-sm);
}

.st-landing .st-landing-footer {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
  border-top: 1px solid var(--st-border);
  color: var(--st-muted);
  font-size: var(--st-text-sm);
  text-align: center;
}

/* Perspective floor grid under the hero */
.st-landing .st-hero-floor {
  position: absolute;
  right: -30%;
  bottom: -14%;
  left: -30%;
  z-index: -1;
  height: 55%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%);
  mask-image: linear-gradient(to top, #000 10%, transparent 90%);
  pointer-events: none;
  perspective: 420px;
}

.st-landing .st-hero-floor::before {
  content: '';
  position: absolute;
  inset: -100% 0 0;
  background-image: linear-gradient(rgb(var(--st-accent-2-rgb) / 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--st-accent-2-rgb) / 0.16) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: rotateX(62deg);
  transform-origin: 50% 100%;
  animation: st-floor-scroll 6s linear infinite;
}

/* ============================================================================================
   19. Animations
   ============================================================================================ */

@keyframes st-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes st-ping {
  0% {
    opacity: 0.65;
    transform: scale(1);
  }

  80%,
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}

@keyframes st-blink {
  50% {
    opacity: 0.35;
  }
}

@keyframes st-shimmer {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -100% 0;
  }
}

@keyframes st-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes st-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes st-modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}

@keyframes st-modal-out {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

@keyframes st-toast-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}

@keyframes st-toast-out {
  to {
    opacity: 0;
    transform: translateX(24px);
  }
}

@keyframes st-pop-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}

@keyframes st-slide-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes st-indeterminate {
  0% {
    transform: translateX(-110%);
  }

  100% {
    transform: translateX(260%);
  }
}

@keyframes st-pop {
  40% {
    transform: scale(1.18);
  }
}

@keyframes st-row-flash {
  from {
    background-color: rgb(var(--st-accent-rgb) / 0.16);
  }
}

@keyframes st-drift-a {
  to {
    transform: translate3d(10vmax, 8vmax, 0) scale(1.08);
  }
}

@keyframes st-drift-b {
  to {
    transform: translate3d(-12vmax, 10vmax, 0) scale(1.12);
  }
}

@keyframes st-drift-c {
  to {
    transform: translate3d(8vmax, -10vmax, 0) scale(0.92);
  }
}

@keyframes st-grid-pan {
  to {
    transform: translate3d(0, 48px, 0);
  }
}

@keyframes st-floor-scroll {
  to {
    transform: rotateX(62deg) translate3d(0, 56px, 0);
  }
}

@keyframes st-stars-far {
  to {
    transform: translate3d(0, 240px, 0);
  }
}

@keyframes st-stars-mid {
  to {
    transform: translate3d(0, 360px, 0);
  }
}

@keyframes st-stars-near {
  to {
    transform: translate3d(0, 480px, 0);
  }
}

@keyframes st-twinkle {
  from {
    opacity: 0.55;
  }

  to {
    opacity: 1;
  }
}

@keyframes st-glow-pulse {
  from {
    opacity: 0.65;
    transform: scale(0.94);
  }

  to {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes st-float {
  50% {
    transform: translateY(-8px);
  }
}

/* ============================================================================================
   20. Responsive
   ============================================================================================ */

@media (max-width: 1200px) {
  .st-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .st-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Sidebar becomes a top bar with a menu toggle */
@media (max-width: 900px) {
  :root {
    --st-gutter: 16px;
    --st-gap: 16px;
  }

  .st-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .st-sidebar {
    position: sticky;
    top: 0;
    height: auto;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--st-border);
    background: rgb(9 13 27 / 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .st-sidebar-head {
    min-height: 60px;
    padding: 0.5rem 0.75rem 0.5rem var(--st-gutter);
    border-bottom: 0;
  }

  .st-brand-logo {
    width: 32px;
    height: 32px;
  }

  .st-sidebar-toggle {
    display: inline-flex;
  }

  .st-sidebar-panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-bottom: 1px solid var(--st-border-strong);
    background: var(--st-sidebar-bg);
    box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.85);
  }

  .st-sidebar.is-open .st-sidebar-panel {
    display: flex;
    animation: st-pop-in var(--st-med) var(--st-ease);
  }

  .st-nav {
    padding: 0.75rem var(--st-gutter);
  }

  .st-nav-link.is-active::before,
  .st-nav-link[aria-current='page']::before {
    left: -0.6rem;
  }

  .st-sidebar-footer {
    padding: 0.75rem var(--st-gutter) 1rem;
  }

  .st-user-panel {
    position: static;
    margin-top: 0.5rem;
    box-shadow: none;
  }

  .st-topbar {
    position: static;
    min-height: 0;
    padding: 1rem var(--st-gutter) 0.85rem;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .st-page-title {
    font-size: 1.25rem;
  }

  .st-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .st-landing .st-join {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .st-grid-2,
  .st-grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-span-2 {
    grid-column: auto;
  }

  .st-card-header {
    padding: 0.8rem 1rem;
  }

  .st-card-body {
    padding: 1rem;
  }

  .st-card-footer {
    padding: 0.75rem 1rem;
  }

  .st-page-sub {
    display: none;
  }

  .st-setting {
    flex-direction: column;
    gap: 0.6rem;
  }

  .st-stat-value {
    font-size: 1.5rem;
  }

  /* Stacked tables: <table class="st-table st-table-stack"> with data-label on every <td> */
  .st-table-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .st-table-stack,
  .st-table-stack tbody,
  .st-table-stack tr,
  .st-table-stack td {
    display: block;
    width: 100%;
  }

  .st-table-stack tbody tr {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--st-border);
  }

  .st-table-stack tbody tr:last-child {
    border-bottom: 0;
  }

  .st-table-stack td {
    display: grid;
    grid-template-columns: minmax(84px, 30%) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.9rem;
    border-bottom: 0;
    text-align: left !important;
  }

  .st-table-stack td::before {
    content: attr(data-label);
    color: var(--st-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .st-table-stack td:not([data-label]),
  .st-table-stack td[data-label=''] {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-table-stack td:not([data-label])::before,
  .st-table-stack td[data-label='']::before {
    display: none;
  }

  .st-table-stack .st-row-actions,
  .st-table-stack .st-cell-actions {
    justify-content: flex-start;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .st-grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-btn-group > .st-btn {
    flex: 1 1 auto;
  }

  .st-power-btn {
    min-width: 0;
    min-height: 80px;
  }

  .st-status-pill-extra {
    display: none;
  }

  .st-kv {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }

  .st-kv dd {
    margin-bottom: 0.55rem;
  }

  .st-modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .st-modal,
  .st-modal-sm,
  .st-modal-lg,
  .st-modal-xl {
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 18px 18px 0 0;
    animation-name: st-sheet-in;
  }

  .st-modal-footer {
    border-radius: 0;
  }

  .st-modal-footer > .st-btn {
    flex: 1 1 0;
  }

  .st-toasts {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    width: auto;
  }

  .st-save-bar {
    bottom: 0.75rem;
  }

  .st-save-bar .st-btn-group {
    width: 100%;
  }

  .st-auth {
    justify-content: flex-start;
    padding: 1.25rem 1rem;
  }

  .st-auth-card {
    padding: 1.5rem 1.25rem;
  }

  .st-input-addon {
    display: none;
  }

  .st-input-addon + .st-input {
    border-top-left-radius: var(--st-radius-sm);
    border-bottom-left-radius: var(--st-radius-sm);
  }

  .st-landing .st-landing-header {
    padding: 1rem;
  }

  .st-landing .st-hero {
    padding-inline: 1rem;
  }

  .st-landing .st-landing-section {
    padding: 0 1rem 2.5rem;
  }

  .st-landing .st-ip-btn {
    gap: 0.75rem;
    padding: 0.65rem;
  }

  .st-landing .st-ip-icon {
    width: 40px;
    height: 40px;
  }

  .st-landing .st-btn-discord {
    width: min(100%, 460px);
  }

  .st-landing .st-landing-updated {
    text-align: left;
  }
}

@keyframes st-sheet-in {
  from {
    opacity: 0.6;
    transform: translateY(40px);
  }
}

@media (max-width: 560px) {
  .st-hide-sm {
    display: none;
  }

  .st-copy-row {
    flex-wrap: wrap;
  }

  .st-copy-row > .st-btn {
    flex: 1 1 auto;
  }

  .st-users-toolbar > .st-input,
  .st-users-toolbar > .st-select {
    max-width: none;
    flex: 1 1 100%;
  }

  .st-landing .st-landing-header {
    flex-wrap: wrap;
  }
}

@media (max-width: 380px) {
  .st-landing .st-ip-action {
    display: none;
  }

  .st-brand-sub {
    display: none;
  }
}

/* ============================================================================================
   21. Accessibility preferences
   ============================================================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Spinners stay (they convey activity) but turn slowly. */
  .st-spinner,
  .st-btn.is-loading::after,
  .st-power-btn.is-loading::after {
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }

  .st-progress.is-indeterminate .st-progress-bar {
    animation-duration: 2.6s !important;
    animation-iteration-count: infinite !important;
  }

  .st-landing .st-hero-floor::before,
  .st-landing .st-stars,
  .st-landing .st-glow,
  .st-landing .st-hero-logo,
  .st-backdrop-orb,
  .st-backdrop-grid {
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .st-btn,
  .st-power-btn,
  .st-input,
  .st-select,
  .st-textarea,
  .st-card,
  .st-modal,
  .st-toast,
  .st-status-pill,
  .st-badge,
  .st-alert {
    border: 1px solid CanvasText;
  }

  .st-status-dot,
  .st-meter-fill,
  .st-progress-bar,
  .st-gauge::before {
    forced-color-adjust: none;
  }

  .st-switch input[type='checkbox'],
  input[type='checkbox'].st-switch {
    width: auto;
    height: auto;
    border: 0;
    background: none;
    -webkit-appearance: auto;
    appearance: auto;
  }

  .st-landing .st-hero-title,
  .st-notfound-code {
    background: none;
    color: CanvasText;
  }

  :focus-visible {
    outline: 2px solid Highlight;
  }
}

@media print {
  .st-sidebar,
  .st-topbar,
  .st-toasts,
  .st-backdrop,
  .st-save-bar {
    display: none !important;
  }

  .st-layout {
    display: block;
  }

  body {
    background: #ffffff;
    color: #000000;
  }
}

/* Server switcher (sidebar): Main (Paper) / Proxy (Velocity). */
.st-server-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  margin: 0.25rem 0.5rem 0.75rem;
  padding: 0.25rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  background: var(--st-surface-2);
}

.st-server-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  border: 0;
  border-radius: calc(var(--st-radius) - 4px);
  background: transparent;
  color: var(--st-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.st-server-tab:hover {
  color: var(--st-text);
}

.st-server-tab:focus-visible {
  outline: 2px solid var(--st-accent);
  outline-offset: 1px;
}

.st-server-tab.is-active {
  background: var(--st-accent);
  color: var(--st-accent-contrast, #0a0e1a);
}

.st-server-tab-label {
  font-weight: 800;
  font-size: 0.875rem;
}

.st-server-tab-sub {
  font-size: 0.6875rem;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Quick upload card (Main / Proxy dashboards) */
.qu-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.qu-row .st-input, .qu-row .st-select { width: auto; flex: 1 1 180px; }
.qu-drop { display: grid; place-items: center; text-align: center; padding: 1.5rem 1rem; margin-top: 1rem; cursor: pointer; }
.qu-uploads { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.qu-upload { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; align-items: center; }
.qu-upload .st-progress { grid-column: 1 / -1; }