/* ============================================================
   FLAT DECK · DAWN — shared design system for portal/ + mods/
   One source of truth, served by nginx at /shared/flat-deck.css.
   (tools/ carries a Tailwind port of the same tokens.)
   Peach-dawn wallpaper gradient + frosted-glass surfaces.
   Themes: light (default) / dark / redstone / amethyst.
   ============================================================ */

:root {
  /* Type -- geometric sans mirroring the UI shapes */
  --font: "Outfit", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "Outfit", system-ui, sans-serif;

  /* Canvas */
  --bg-0: #FFFFFF;   /* page canvas - pure white so Safari's (untintable) light
                        browser bars and overscroll match the faded wallpaper
                        edges (see the html::after fade below) */
  --bg-1: #F3F4F6;   /* muted block (gray 100) */
  --bg-2: #E5E7EB;   /* deeper muted block (gray 200) */

  /* Text */
  --text:       #111827;  /* gray 900 */
  --text-dim:   #374151;  /* gray 700 */
  --text-faint: #6B7280;  /* gray 500 */
  --text-ghost: #9CA3AF;  /* gray 400 */

  /* Accent -- primary action blue */
  --acc-1: #3B82F6;
  --acc-2: #2563EB;            /* hover shift (darker, never glow) */
  --acc-grad: #3B82F6;         /* compat alias: gradients are banned -> solid */
  --acc-glow: rgba(0,0,0,0);   /* compat alias: glows are banned -> transparent */
  --acc-soft: #DBEAFE;         /* blue 100 tint block */
  --acc-ink: #FFFFFF;          /* text on top of accent fills */

  /* Surfaces — frosted glass over the dawn wallpaper */
  --glass-bg:        rgba(255,255,255,0.62);  /* card = frosted white */
  --glass-bg-2:      rgba(255,255,255,0.48);
  --glass-bg-strong: rgba(255,255,255,0.90);  /* floating surfaces = near-solid frost */
  --glass-border:    rgba(120,72,45,0.10);
  --glass-hi:        rgba(255,255,255,0.65);  /* frost edge highlight */
  --glass-blur: 18px;
  --glass-sat: 160%;
  --menu-bg: #FFFFFF;

  /* Semantic -- vibrant, confident */
  --good: #10B981;   /* emerald 500 */
  --warn: #F59E0B;   /* amber 500 */
  --bad:  #EF4444;   /* red 500 */
  --info: #3B82F6;   /* blue 500 */
  --violet: #8B5CF6; /* violet 500 */

  /* Semantic tint blocks (bg) + readable ink (text) */
  --good-soft: #D1FAE5;  --good-ink: #065F46;
  --warn-soft: #FEF3C7;  --warn-ink: #92400E;
  --bad-soft:  #FEE2E2;  --bad-ink:  #991B1B;
  --info-soft: #DBEAFE;  --info-ink: #1E40AF;
  --violet-soft: #EDE9FE; --violet-ink: #5B21B6;

  /* Radii -- softer, airier. Never pill (except tags). */
  --r-xl: 16px;
  --r-lg: 12px;
  --r-md: 8px;
  --r-sm: 6px;

  /* Shadows -- soft, warm-tinted, low-contrast */
  --shadow-glass: 0 8px 24px rgba(120,72,45,0.08), 0 2px 6px rgba(120,72,45,0.05);
  --shadow-pop:   0 16px 40px rgba(120,72,45,0.14), 0 4px 10px rgba(120,72,45,0.07);

  /* Theme-switching surfaces */
  --surface-bg:        #FFFFFF;              /* modal sheet, focused inputs */
  --seg-on-bg:         #FFFFFF;              /* active segmented tab */
  --disabled-overlay:  rgba(255,255,255,0.6);/* disabled mod card overlay */
}

* { box-sizing: border-box; }

html {
  background: var(--bg-0);
  scrollbar-gutter: stable; /* reserve scrollbar space always - prevents layout jolt */
  /* Tell the browser which scheme the page is in so Safari/Chrome tint the
     top/bottom bars to match instead of forcing the OS light/dark colour.
     (theme-color meta alone is ignored when this disagrees with the OS.) */
  color-scheme: light;
}
html[data-theme] { color-scheme: dark; }

html, body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}

body {
  background: transparent;
}

/* Display heading utility -- bold, tight, geometric */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

/* ---------- Wallpaper: peach dawn ----------
   Warm pastel wash (peach -> pink -> periwinkle) + two soft
   blurred glows. The one place gradients are welcome. */
.wallpaper {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(640px 500px at 46% 52%, rgba(255,160,200,0.30), transparent 70%),
    radial-gradient(560px 460px at 82% 78%, rgba(255,200,150,0.26), transparent 70%),
    linear-gradient(160deg, #FEF0E2 0%, #FDE8EF 55%, #E9EEFD 100%);
  /* iOS 26 Safari dropped theme-color and instead tints the top/bottom bars from
     the BACKGROUND-COLOR of fixed-position elements. Keep an explicit colour here
     (and in each theme's wallpaper override below).
     https://benfrain.com/ios26-safari-theme-color-tab-tinting-with-fixed-position-elements/
     LIGHT commits to WHITE: Safari clamps every near-white tint (#FEF0E2 etc.)
     to its stock solid-white chrome anyway, so instead of fighting it the light
     wallpaper fades into white at the top/bottom edges (html::after below) and
     the bars blend seamlessly. Dark themes tint fine and keep their colours. */
  background-color: #FFFFFF;
  overflow: hidden;
}
/* peach glow, top-right */
.wallpaper::before {
  content: "";
  position: absolute;
  top: -240px; right: -180px;
  width: 720px; height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,214,170,0.55) 0%, rgba(255,214,170,0) 70%);
  filter: blur(40px);
}
/* periwinkle glow, bottom-left */
.wallpaper::after {
  content: "";
  position: absolute;
  bottom: -260px; left: -200px;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(190,205,255,0.50) 0%, rgba(190,205,255,0) 70%);
  filter: blur(40px);
}

/* LIGHT ONLY: fade the wallpaper into white at the very top and bottom.
   Safari refuses to tint its top/bottom bars with near-white colours (it
   clamps them to stock solid white), so light mode can never get peach bars -
   instead the page meets the bars in white and the seam disappears.
   z-index -1 sits ABOVE the wallpaper and its blurred glow pseudo-layers
   (which reach the viewport edges) but below all content. Dark themes get
   properly tinted bars, so they drop this layer. */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0) 120px),
    linear-gradient(0deg,   #FFFFFF 0%, rgba(255,255,255,0) 120px);
}
html[data-theme]::after { content: none; }

/* ============================================================
   SURFACE PRIMITIVE — frosted glass card
   Translucent white + backdrop blur; the wallpaper glows through.
   ============================================================ */
.glass {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-hi);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));

  isolation: isolate;
  overflow: hidden;
}
/* floating surfaces (dropdowns) -- near-solid frost + pop shadow */
.glass-strong {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-pop);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}
.glass-flat { background: var(--bg-1); }

/* no backdrop-filter support -> solid fallback */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-strong { background: var(--surface-bg); }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family: var(--font);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  border: 0;
  border-radius: var(--r-md);
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  user-select: none;
  text-decoration: none; /* prevents underline on <a> styled as button */
}
.btn:hover:not(:disabled) { transform: scale(1.05); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:active { transform: none; }
.btn:focus-visible { outline: 2px solid var(--acc-1); outline-offset: 2px; }

.btn-primary {
  color: var(--acc-ink);
  background: var(--acc-1);
  font-weight: 700;
}
.btn-primary:hover { background: var(--acc-2); }

/* secondary: solid muted block (class name kept for compatibility) */
.btn-glass {
  color: var(--text);
  background: var(--bg-2);
}
.btn-glass:hover { background: #D1D5DB; }

.btn-ghost { color: var(--text-dim); background: transparent; }
.btn-ghost:hover { color: var(--text); background: var(--bg-2); }

.btn-danger { color: var(--bad-ink); background: var(--bad-soft); font-weight: 700; }
.btn-danger:hover { background: #FECACA; }

.btn-sm { padding: 7px 13px; font-size: 12.5px; }
.btn-lg { padding: 14px 24px; font-size: 14.5px; }
.btn-icon { padding: 9px; border-radius: var(--r-sm); }
.btn-block { width: 100%; }

/* ============================================================
   SEGMENTED / BADGE
   ============================================================ */
.segmented {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border-radius: var(--r-md);
  background: var(--bg-1);
}
.segmented button {
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-family: var(--font);
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 18px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all .2s;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.segmented button:hover { color: var(--text); }
.segmented button:focus-visible { outline: 2px solid var(--acc-1); outline-offset: 2px; }
.segmented button.on {
  color: var(--text);
  background: var(--seg-on-bg);
}
.segmented button.on.accent {
  color: var(--acc-ink);
  background: var(--acc-1);
}

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px; /* tags are the one allowed pill */
  border: 0;
  white-space: nowrap;
}
.badge-slate  { background: var(--bg-1); color: var(--text-dim); }
.badge-green  { background: var(--good-soft); color: var(--good-ink); }
.badge-blue   { background: var(--info-soft); color: var(--info-ink); }
.badge-cyan   { background: #CFFAFE; color: #155E75; }
.badge-purple { background: var(--violet-soft); color: var(--violet-ink); }
.badge-yellow { background: var(--warn-soft); color: var(--warn-ink); }
.badge-red    { background: var(--bad-soft); color: var(--bad-ink); }

/* ============================================================
   INPUTS
   ============================================================ */
/* Flat inputs: muted block, no border. Focus = white + hard 2px primary edge. */
.field {
  width: 100%;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--bg-1);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  padding: 9px 12px;
  transition: border-color .2s, background .2s;
}
.field::placeholder { color: var(--text-ghost); }
.field:focus {
  outline: none;
  border-color: var(--acc-1);
  background: var(--surface-bg);
}
textarea.field { resize: none; line-height: 1.5; }
.field-mono { font-family: var(--mono); letter-spacing: 0.02em; }

.label {
  display: block;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 7px;
}

.select-wrap { position: relative; }
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-1);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  padding: 8px 34px 8px 12px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.select-wrap select:hover { background: var(--bg-2); }
.select-wrap select:focus { outline: none; border-color: var(--acc-1); background: var(--surface-bg); }
.select-wrap .chev { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; font-size: 11px; }
.select-wrap select option { background: var(--surface-bg); color: var(--text); }

/* 1440p scale-up - zoom entire root content ~15% */
@media (min-width: 1380px) {
  #root { zoom: 1.13; }
}

/* ============================================================
   MODALS
   ============================================================ */
.scrim {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(31,24,18,0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: scrimIn .2s ease;
}
.sheet {
  width: 100%;
  background: var(--surface-bg);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  position: relative;
  animation: sheetIn .25s cubic-bezier(.2,.9,.25,1);
}
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(14px) scale(0.975); } to { opacity: 1; transform: none; } }

.icon-x {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-1); border: 0;
  color: var(--text-faint); cursor: pointer; transition: all .2s;
}
.icon-x:hover { color: var(--text); background: var(--bg-2); transform: scale(1.08); }
.icon-x:focus-visible { outline: 2px solid var(--acc-1); outline-offset: 2px; }

/* ============================================================
   TOASTS
   ============================================================ */
.toast-stack {
  position: fixed; bottom: 22px; right: 22px; z-index: 120;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
/* Flat toasts: solid color blocks, white text. Bold and unmissable. */
.toast {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 18px; border-radius: var(--r-md);
  border: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  color: #FFFFFF;
  font-size: 13.5px; font-weight: 600;
  max-width: 360px;
  animation: toastIn .25s cubic-bezier(.2,.9,.25,1);
}
@keyframes toastIn { from { opacity: 0; transform: translateX(20px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes drawerIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.toast .dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; background: rgba(255,255,255,0.9); }
.toast-success { background: var(--good); }
.toast-error   { background: var(--bad); }
.toast-info    { background: #111827; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   UTILITIES / ANIMATIONS
   ============================================================ */
/* .spin must be inline-block with line-height:1 — Font Awesome glyphs sit on the
   text baseline inside a box sized by the *parent's* line-height, so rotating that
   taller box swings the glyph in an orbit instead of spinning it in place. */
.spin {
  animation: spin 1s linear infinite;
  display: inline-block;
  line-height: 1;
  transform-origin: 50% 50%;
}
@keyframes spin { to { transform: rotate(360deg); } }
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* accent text (class name kept for compatibility -- gradients are banned) */
.gradient-text {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--acc-1);
}

.status-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.status-on  { background: var(--good); }
.status-off { background: #9CA3AF; }

.divider { height: 2px; background: var(--bg-2); border: 0; }

.hairline { border-top: 2px solid var(--bg-2); }

/* card hover: flat scale + color intensification, never elevation */
.lift { transition: transform .2s, background .2s; }
.lift:hover {
  transform: scale(1.02);
  background: var(--glass-bg-strong);
}

.fade-in { animation: fadeIn .4s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================================
   THEME OVERRIDES  –  applied via [data-theme="x"] on <html>
   Default (no attribute) = light (inherits :root above)
   ============================================================ */

/* --- DARK / EMERALD ---------------------------------------- */
[data-theme="dark"] {
  --bg-0: #0b0e12;
  --bg-1: #111622;
  --bg-2: #1a2030;
  --text:       #e8edf3;
  --text-dim:   rgba(232,238,242,0.78);
  --text-faint: rgba(214,224,230,0.55);
  --text-ghost: rgba(202,214,222,0.34);
  --acc-1: #4ade80;
  --acc-2: #22c55e;
  --acc-grad: #4ade80;
  --acc-glow: rgba(0,0,0,0);
  --acc-soft: rgba(74,222,128,0.15);
  --acc-ink: #07130b;
  --glass-bg:        rgba(17,22,34,0.58);
  --glass-bg-2:      rgba(26,32,48,0.60);
  --glass-bg-strong: rgba(13,16,25,0.92);
  --glass-border:    rgba(255,255,255,0.09);
  --glass-hi:        rgba(255,255,255,0.07);
  --glass-blur: 14px;
  --shadow-glass: 0 8px 24px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
  --shadow-pop:   0 16px 40px rgba(0,0,0,0.50);
  --menu-bg: #0f1318;
  --good: #4ade80;  --good-soft: rgba(74,222,128,0.14);  --good-ink: #a7f3d0;
  --warn: #fbbf24;  --warn-soft: rgba(251,191,36,0.14);  --warn-ink: #fde68a;
  --bad:  #f87171;  --bad-soft:  rgba(248,113,113,0.14); --bad-ink:  #fecaca;
  --info: #4ade80;  --info-soft: rgba(74,222,128,0.14);  --info-ink: #a7f3d0;
  --violet: #c084fc; --violet-soft: rgba(192,132,252,0.14); --violet-ink: #e9d5ff;
  --surface-bg:       #131a24;
  --seg-on-bg:        #1e2a36;
  --disabled-overlay: rgba(0,0,0,0.45);
}
[data-theme="dark"] html,
[data-theme="dark"] body { background: var(--bg-0); }
[data-theme="dark"] .wallpaper { background: linear-gradient(160deg, #0b0e12 0%, #0d1420 55%, #0c1717 100%); background-color: #0b0e12; }
[data-theme="dark"] .wallpaper::before { background: rgba(74,222,128,0.10); }
[data-theme="dark"] .wallpaper::after  { background: rgba(34,197,94,0.08);  }
[data-theme="dark"] .lift:hover { background: #1e2a36; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a3545; }

/* --- REDSTONE ---------------------------------------------- */
[data-theme="redstone"] {
  --bg-0: #120d0c;
  --bg-1: #17100e;
  --bg-2: #1f1714;
  --text:       #e8edf3;
  --text-dim:   rgba(232,238,242,0.78);
  --text-faint: rgba(214,224,230,0.55);
  --text-ghost: rgba(202,214,222,0.34);
  --acc-1: #fb923c;
  --acc-2: #ef4444;
  --acc-grad: #fb923c;
  --acc-glow: rgba(0,0,0,0);
  --acc-soft: rgba(251,146,60,0.15);
  --acc-ink: #190b05;
  --glass-bg:        rgba(23,16,14,0.58);
  --glass-bg-2:      rgba(31,23,20,0.60);
  --glass-bg-strong: rgba(18,13,11,0.92);
  --glass-border:    rgba(255,235,220,0.09);
  --glass-hi:        rgba(255,235,220,0.07);
  --glass-blur: 14px;
  --shadow-glass: 0 8px 24px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
  --shadow-pop:   0 16px 40px rgba(0,0,0,0.50);
  --menu-bg: #160e0c;
  --good: #4ade80;  --good-soft: rgba(74,222,128,0.14);  --good-ink: #a7f3d0;
  --warn: #fbbf24;  --warn-soft: rgba(251,191,36,0.14);  --warn-ink: #fde68a;
  --bad:  #f87171;  --bad-soft:  rgba(248,113,113,0.14); --bad-ink:  #fecaca;
  --info: #fb923c;  --info-soft: rgba(251,146,60,0.14);  --info-ink: #fed7aa;
  --violet: #c084fc; --violet-soft: rgba(192,132,252,0.14); --violet-ink: #e9d5ff;
  --surface-bg:       #160f0d;
  --seg-on-bg:        #231912;
  --disabled-overlay: rgba(0,0,0,0.45);
}
[data-theme="redstone"] html,
[data-theme="redstone"] body { background: var(--bg-0); }
[data-theme="redstone"] .wallpaper { background: linear-gradient(160deg, #120d0c 0%, #1a110c 55%, #171009 100%); background-color: #120d0c; }
[data-theme="redstone"] .wallpaper::before { background: rgba(251,146,60,0.10); }
[data-theme="redstone"] .wallpaper::after  { background: rgba(239,68,68,0.08);  }
[data-theme="redstone"] .lift:hover { background: #231912; }
[data-theme="redstone"] ::-webkit-scrollbar-thumb { background: #352016; }

/* --- AMETHYST ---------------------------------------------- */
[data-theme="amethyst"] {
  --bg-0: #0e0b16;
  --bg-1: #13101e;
  --bg-2: #1c1830;
  --text:       #e8edf3;
  --text-dim:   rgba(232,238,242,0.78);
  --text-faint: rgba(214,224,230,0.55);
  --text-ghost: rgba(202,214,222,0.34);
  --acc-1: #c084fc;
  --acc-2: #8b5cf6;
  --acc-grad: #c084fc;
  --acc-glow: rgba(0,0,0,0);
  --acc-soft: rgba(192,132,252,0.15);
  --acc-ink: #120822;
  --glass-bg:        rgba(19,16,30,0.58);
  --glass-bg-2:      rgba(28,24,48,0.60);
  --glass-bg-strong: rgba(15,12,26,0.92);
  --glass-border:    rgba(235,225,255,0.09);
  --glass-hi:        rgba(235,225,255,0.07);
  --glass-blur: 14px;
  --shadow-glass: 0 8px 24px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
  --shadow-pop:   0 16px 40px rgba(0,0,0,0.50);
  --menu-bg: #110e1c;
  --good: #4ade80;  --good-soft: rgba(74,222,128,0.14);  --good-ink: #a7f3d0;
  --warn: #fbbf24;  --warn-soft: rgba(251,191,36,0.14);  --warn-ink: #fde68a;
  --bad:  #f87171;  --bad-soft:  rgba(248,113,113,0.14); --bad-ink:  #fecaca;
  --info: #c084fc;  --info-soft: rgba(192,132,252,0.14); --info-ink: #e9d5ff;
  --violet: #c084fc; --violet-soft: rgba(192,132,252,0.14); --violet-ink: #e9d5ff;
  --surface-bg:       #120f1c;
  --seg-on-bg:        #1c1830;
  --disabled-overlay: rgba(0,0,0,0.45);
}
[data-theme="amethyst"] html,
[data-theme="amethyst"] body { background: var(--bg-0); }
[data-theme="amethyst"] .wallpaper { background: linear-gradient(160deg, #0e0b16 0%, #151028 55%, #120e22 100%); background-color: #0e0b16; }
[data-theme="amethyst"] .wallpaper::before { background: rgba(192,132,252,0.10); }
[data-theme="amethyst"] .wallpaper::after  { background: rgba(139,92,246,0.08);  }
[data-theme="amethyst"] .lift:hover { background: #1e1a30; }
[data-theme="amethyst"] ::-webkit-scrollbar-thumb { background: #2a2040; }

/* ============================================================
   CONSOLE LOG TOKENS — the Server Control scrollback is always a
   dark terminal, but its tints are tokens so themes can tune them
   (the command-reply highlight follows each theme's accent).
   ============================================================ */
:root {
  --log-bg-0:   #0c1016;
  --log-bg-1:   #0a0d12;
  --log-border: rgba(148,163,184,0.18);
  --log-text:   #cbd5e1;   /* default line */
  --log-dim:    #64748b;   /* empty-state / muted */
  --log-error:  #fca5a5;
  --log-warn:   #fcd34d;
  --log-join:   #86efac;   /* joined the game */
  --log-leave:  #93c5fd;   /* left the game */
  --log-hl:     rgba(96,165,250,0.30);  /* reply-to-last-command wash */
  --log-hl-bar: #60a5fa;                /* …and its left accent bar */
}
[data-theme="dark"]     { --log-hl: rgba(74,222,128,0.26);  --log-hl-bar: #4ade80; }
[data-theme="redstone"] { --log-hl: rgba(251,146,60,0.30);  --log-hl-bar: #fb923c; }
[data-theme="amethyst"] { --log-hl: rgba(192,132,252,0.30); --log-hl-bar: #c084fc; }

/* Console log lines. The reply-to-last-command highlight snaps on instantly
   (transition: none) and fades back to normal over ~1.5s when it is cleared,
   instead of the old hard drop-off. Full-bleed over the box's 16px padding. */
.log-line {
  margin: 0 -16px;
  padding: 0 16px;
  background-color: transparent;
  box-shadow: inset 3px 0 0 transparent;
  transition: background-color 1.5s ease, box-shadow 1.5s ease;
}
.log-line-hl {
  background-color: var(--log-hl);
  box-shadow: inset 3px 0 0 var(--log-hl-bar);
  transition: none;
}

/* ============================================================
   SMALL CONTROLS + ACCESSIBILITY
   ============================================================ */
/* Compact select (portal user-management rows) */
.select-sm select { padding: 6px 26px 6px 9px; font-size: 12.5px; }
.select-sm .chev  { right: 9px; font-size: 10px; }

/* Focus rings on the remaining interactive primitives (btn/segmented/icon-x
   already have them above). Keyboard-only via :focus-visible. */
.field:focus-visible,
.select-wrap select:focus-visible,
.console-ctl:focus-visible,
.console-filter:focus-visible,
.player-chip:focus-visible,
.addr-chip:focus-visible,
a:focus-visible {
  outline: 2px solid var(--acc-1);
  outline-offset: 2px;
}

/* Respect reduced-motion: kill decorative animation, keep state changes instant */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .lift:hover { transform: none !important; }
}