/* ==========================================================================
   zenvr.cloud — design system
   Light, airy, card-based. White surfaces on a soft grey canvas, generous
   radii, hairline borders, near-black primary actions, green toggles.
   ========================================================================== */

:root {
  color-scheme: light;
  --bg: #f0f1f2;
  --bg-raise: #ffffff;
  --surface: #fbfcfd;
  --surface-2: #f4f5f7;
  --surface-3: #eaebef;
  --border: #e9ebee;
  --border-soft: #eef0f1;
  --border-strong: #dce0e3;
  --text: #202329;
  --text-2: #4e545a;
  --muted: #899097;
  --faint: #b7bcc2;
  --accent: #7158e6;
  --accent-soft: rgba(108, 94, 230, 0.07);
  --accent-strong: #5e4ad3;
  --green: #309d62;
  --green-soft: rgba(47, 154, 96, 0.08);
  --red: #cf4750;
  --red-soft: rgba(208, 70, 78, 0.08);
  --amber: #b57a12;
  --amber-soft: rgba(181, 122, 18, 0.08);
  --blue: #4082c8;
  --blue-soft: rgba(64, 130, 200, 0.08);
  --radius: 14px;
  --radius-sm: 8px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
  --sidebar-w: 224px;
  --topbar-h: 40px;
  --icon-stroke: 1.8;
  --shadow-pop: 0 2px 8px rgba(23, 28, 38, 0.04), 0 1px 1px rgba(23, 28, 38, 0.015);
  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.24, 0.64, 1);
  --dur-fast: 0.14s;
  --dur: 0.2s;
  /* terminal / console — follows the theme, so light mode gets a light console */
  --term-bg: #ffffff;
  --term-bar: #f7f8f9;
  --term-border: #e5e8ea;
  --term-text: #24272c;
  --term-muted: #6b7280;
  --term-dim: #9aa1ab;
  --term-track: #e5e8ea;
  --term-prompt: #6b7280;
  --term-green: #15803d;
  --term-red: #b4232c;
  --term-yellow: #8a6109;
  --term-neutral: #5b6470;
  --term-soft: #7c848e;
  --term-bright: #14171c;
  --term-sel: rgba(180, 35, 44, 0.12);
  /* charts (neutral by design) */
  --chart-1: #6b7280;
  --chart-2: #9ca3af;
  --chart-grid: rgba(23, 28, 38, 0.08);
  /* accent-derived surfaces (neutralised in dark) */
  --ring: rgba(109, 92, 231, 0.14);
  --ring-soft: rgba(109, 92, 231, 0.12);
  --accent-line: rgba(109, 92, 231, 0.25);
  --accent-line-strong: rgba(109, 92, 231, 0.4);
  --accent-wash: rgba(109, 92, 231, 0.05);
  --accent-wash-soft: rgba(109, 92, 231, 0.03);
}

/* dark theme — applied via html[data-theme="dark"] */
/* Plain dark: strictly neutral greys — no purple or blue tint anywhere. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101011;
  --bg-raise: #1a1a1c;
  --surface: #161618;
  --surface-2: #1e1e20;
  --surface-3: #272729;
  --border: #2a2a2d;
  --border-soft: #212123;
  --border-strong: #37373a;
  --text: #ededef;
  --text-2: #a8a8ac;
  --muted: #75757a;
  --faint: #4d4d52;
  /* accent is neutral in dark mode: the brand purple is light-theme only */
  --accent: #d2d2d7;
  --accent-soft: rgba(255, 255, 255, 0.06);
  --accent-strong: #f2f2f4;
  --green: #46b980;
  --green-soft: rgba(70, 185, 128, 0.14);
  --red: #e2606a;
  --red-soft: rgba(226, 96, 106, 0.14);
  --amber: #d3a13a;
  --amber-soft: rgba(211, 161, 58, 0.14);
  --blue: #b9b9be;
  --blue-soft: rgba(255, 255, 255, 0.06);
  --shadow-pop: 0 6px 22px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35);
  --term-bg: #0e0e0f;
  --term-bar: #161617;
  --term-border: #2a2a2d;
  --term-text: #ededef;
  --term-muted: #9a9a9e;
  --term-dim: #5f5f64;
  --term-track: #2b2b2e;
  --term-prompt: #8a8a8f;
  --term-green: #4ade80;
  --term-red: #f87171;
  --term-yellow: #facc15;
  --term-neutral: #9a9a9e;
  --term-soft: #b6b6bb;
  --term-bright: #ededef;
  --term-sel: rgba(248, 113, 113, 0.16);
  --chart-1: #c9c9ce;
  --chart-2: #8a8a8f;
  --chart-grid: rgba(255, 255, 255, 0.07);
  --ring: rgba(255, 255, 255, 0.10);
  --ring-soft: rgba(255, 255, 255, 0.09);
  --accent-line: rgba(255, 255, 255, 0.15);
  --accent-line-strong: rgba(255, 255, 255, 0.28);
  --accent-wash: rgba(255, 255, 255, 0.04);
  --accent-wash-soft: rgba(255, 255, 255, 0.02);
}
html[data-theme="dark"] body { background: var(--bg); }
/* Outlines live in light mode only. The window is a raised surface there, so its
   edge defines the panel; against the near-black canvas that same edge reads as a
   hard rounded outline. Dark mode therefore drops the border, the drop shadow and
   the surface lift, leaving one flat plane. Spacer hairlines (topbar, server
   action row, section rail) are gone in both themes — see the rules below. */
/* The window must stay distinct from the canvas in dark mode. An earlier pass set it
   to var(--bg) — the exact colour of the shell — which made the whole panel invisible;
   it now keeps a raised surface plus a soft edge and shadow for depth. */
html[data-theme="dark"] .window {
  background: var(--bg-raise); border-color: var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 30px rgba(0, 0, 0, 0.45);
}
/* the window's section rail borrows the window surface, so it needs no dark override */
html[data-theme="dark"] .input, html[data-theme="dark"] .select, html[data-theme="dark"] textarea.input { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
/* The light theme gives every button a bright inner top highlight
   (inset 0 1px 0 rgba(255,255,255,0.95)). On dark surfaces that glow reads as a
   rendering bug, so it is replaced with a subtle dark-appropriate inset here. */
html[data-theme="dark"] .btn {
  background: var(--surface-2); border-color: var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .btn:hover {
  background: var(--surface-3); border-color: var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 6px rgba(0, 0, 0, 0.32);
}
html[data-theme="dark"] .btn:active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45); }
html[data-theme="dark"] .btn-danger { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
html[data-theme="dark"] .btn-success { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
html[data-theme="dark"] .btn-primary {
  background: linear-gradient(180deg, #f2f2f4 0%, #d9d9dd 60%); border-color: #cfcfd4; color: #141416;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 3px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .btn-primary:hover {
  background: linear-gradient(180deg, #ffffff 0%, #e6e6ea 60%); border-color: #e6e6ea;
}
html[data-theme="dark"] .btn-primary:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.22); }
html[data-theme="dark"] .btn-ghost { box-shadow: none; }
html[data-theme="dark"] .btn-ghost:hover { background: var(--surface-2); box-shadow: none; }
html[data-theme="dark"] .console-wrap { border-color: var(--border); }
html[data-theme="dark"] .toggle { background: var(--surface-3); border-color: var(--border-strong); }
html[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #333336; border-color: var(--bg); }
html[data-theme="dark"] .rail-link:hover { background: var(--surface-2); box-shadow: none; }
html[data-theme="dark"] .rail-link.active { background: var(--surface-3); color: var(--text); box-shadow: none; }
html[data-theme="dark"] .rail-link.active svg { color: var(--text); }
/* neutral focus ring (the light-theme ring is brand purple) */
html[data-theme="dark"] .input:focus, html[data-theme="dark"] .select:focus, html[data-theme="dark"] textarea.input:focus {
  border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.09);
}
html[data-theme="dark"] .card { background: var(--surface); }
html[data-theme="dark"] .credits-pill { background: var(--surface); border-color: var(--border-strong); }
html[data-theme="dark"] .credits-pill:hover { border-color: var(--faint); }
html[data-theme="dark"] .table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

/* theme toggle button in the rail */
.theme-btn {
  width: 38px; height: 38px; border-radius: 10px; border: none; background: transparent;
  color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 0;
  transition: color 0.15s, background 0.15s;
}
.theme-btn svg { width: 17px; height: 17px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* Rotate only the icon, never the button: its [data-tip] tooltip is a child pseudo-element,
   so rotating the button would tilt the tooltip too. */
.theme-btn:hover { color: var(--text); background: var(--surface-2); }
.theme-btn:hover svg { transform: rotate(35deg); }
html[data-theme="dark"] .theme-btn .icon-sun { display: none; }
html:not([data-theme="dark"]) .theme-btn .icon-moon { display: none; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent-line); }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: #cdd1d6 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #cdd1d6; border-radius: 8px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: #b9bec5; }
*::-webkit-scrollbar-corner { background: transparent; }

a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
code, .mono { font-family: var(--mono); font-size: 0.92em; }

#app { height: 100vh; }

/* ==========================================================================
   Auth
   ========================================================================== */

.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(520px 260px at 18% 0%, var(--accent-wash-soft), transparent 60%),
    radial-gradient(520px 260px at 82% 100%, var(--accent-wash-soft), transparent 60%),
    var(--bg);
}
.auth-card { width: 372px; }
.auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; justify-content: center; }
.auth-logo .brand-mark { width: 30px; height: 30px; }
.auth-logo .brand-name { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.auth-logo  .brand-name em { font-style: normal; color: var(--faint); font-weight: 500; }
.auth-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; box-shadow: 0 1px 1px rgba(23, 28, 38, 0.03);
}
.auth-panel h1 { font-size: 15px; margin-bottom: 4px; }
.auth-panel .auth-sub { color: var(--muted); font-size: 12.5px; margin-bottom: 18px; }
.auth-switch { text-align: center; margin-top: 16px; font-size: 12.5px; color: var(--muted); }
.auth-switch a { cursor: pointer; }
.auth-foot { text-align: center; margin-top: 22px; color: var(--faint); font-size: 11.5px; }
.auth-err {
  background: var(--red-soft); border: 1px solid rgba(216, 67, 79, 0.3); color: var(--red);
  border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12.5px; margin-bottom: 14px;
}
.auth-announce {
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-strong);
  border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12.5px; margin-bottom: 14px;
}

/* ==========================================================================
   Shell
   ========================================================================== */

/* The rail and the sidebar sit on the canvas. Only the section tabs and the page
   content share a window. */
/* The rail occupies the left edge; the window floats on the canvas to its right. */
.shell { display: flex; height: 100vh; padding: 0 4px 4px 0; box-sizing: border-box; background: var(--bg); }
.window {
  flex: 1; min-height: 0; display: flex; overflow: hidden;
  background: var(--bg-raise); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 2px 12px rgba(23, 28, 38, 0.05);
}
/* Left column of the window, populated only by pages that have sections.
   It shares the window's own surface — no fill and no divider — so the column is
   defined by its labelled buttons rather than by a colour step or a hairline. */
.content-rail {
  flex: 0 0 176px; width: 176px;
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  padding: 8px; background: transparent; border-right: none;
  overflow-y: auto; scrollbar-width: none;
}
.content-rail::-webkit-scrollbar { display: none; }
.content-rail:empty { display: none; padding: 0; }

/* icon rail — narrow, label-free navigation on the canvas */
.rail {
  width: 60px; flex: 0 0 60px; display: flex; flex-direction: column; align-items: center;
  padding: 28px 0 12px; gap: 6px; background: transparent; min-height: 0;
}
.rail-foot { flex: 0 0 auto; padding-top: 6px; }
.rail-brand { display: grid; place-items: center; margin-bottom: 4px; }
.brand-mark { width: 22px; height: 22px; flex: 0 0 auto; }
.rail-nav { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; overflow-y: auto; scrollbar-width: none; }
.rail-brand .brand-mark { width: 20px; height: 20px; }
.rail-nav::-webkit-scrollbar { display: none; }
.rail-link {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; gap: 0;
  border-radius: 10px; color: var(--muted); border: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.rail-link svg { width: 18px; height: 18px; opacity: 0.88; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.rail-link:hover svg { opacity: 1; }
.rail-link.active svg { opacity: 1; }
.rail-link:hover { color: var(--text); background: var(--surface); text-decoration: none;
  box-shadow: 0 1px 2px rgba(23, 28, 38, 0.05); }
.rail-link.active { background: var(--text); color: var(--bg-raise); box-shadow: 0 1px 2px rgba(23, 28, 38, 0.12); }
.rail-link.active svg { color: var(--bg-raise); opacity: 1; }
.rail-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* hover tooltips for the icon rail */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: #1f2228; color: #fff; font-size: 11.5px; font-weight: 500; white-space: nowrap;
  padding: 5px 9px; border-radius: 7px; z-index: 400; pointer-events: none;
  box-shadow: 0 2px 8px rgba(23, 28, 38, 0.18);
  animation: tipin 0.12s ease-out 0.25s backwards;
}
[data-tip]:hover::before {
  content: ''; position: absolute; left: calc(100% + 4px); top: 50%; transform: translateY(-50%);
  border: 5px solid transparent; border-right-color: #1f2228; z-index: 400; pointer-events: none;
  animation: tipin 0.12s ease-out 0.25s backwards;
}
@keyframes tipin { from { opacity: 0; transform: translateY(-50%) translateX(-3px); } }
.rail-foot { margin-top: auto; display: grid; place-items: center; }
.rail-user { display: block; border-radius: 50%; line-height: 0; }

/* ==========================================================================
   Main sidebar — sits between the icon rail and the content panel.
   Hierarchy comes from indentation and spacing, not borders or big pills.
   ========================================================================== */
/* The rail sits on the canvas next to the window; it carries no divider of its
   own (the old hairline was for separating it from the removed sidebar). */
.side {
  flex: 0 0 252px; width: 252px; min-width: 0;
  display: flex; flex-direction: column;
  padding: 10px 10px 0 10px;
}
.side-head { display: flex; align-items: center; gap: 8px; padding: 2px 6px 10px; }
.side-head .brand-name { font-size: 14.5px; font-weight: 700; letter-spacing: -0.02em; }
.side-head .spacer { flex: 1; }
.side-icon-btn {
  width: 26px; height: 26px; border-radius: 7px; border: none; background: transparent;
  color: var(--muted); cursor: pointer; display: grid; place-items: center; position: relative;
}
.side-icon-btn:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.side-icon-btn svg { width: 15px; height: 15px; }

.side-nav { display: flex; flex-direction: column; gap: 1px; }
.side-item {
  display: flex; align-items: center; gap: 9px;
  height: 29px; padding: 0 8px; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--text-2);
  text-decoration: none; white-space: nowrap; overflow: hidden;
}
.side-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.side-item.active { background: var(--surface-3); color: var(--text); font-weight: 600; }
.side-item svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: 0.9; }
.side-item .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* projects / servers occupy the remaining height and scroll on their own */
.side-scroll { flex: 1; min-height: 0; overflow-y: auto; margin-top: 4px; padding-bottom: 8px; }
.side-sec-title {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); padding: 12px 8px 5px;
}
.side-empty { padding: 4px 8px; font-size: 12px; color: var(--faint); }
.side-folder { display: flex; flex-direction: column; }
.side-folder-head {
  display: flex; align-items: center; gap: 7px; width: 100%;
  height: 28px; padding: 0 8px; border: none; background: transparent; border-radius: 8px;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text-2);
  cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden;
}
.side-folder-head:hover { background: var(--surface-2); color: var(--text); }
.side-folder-head .chev { color: var(--faint); display: grid; place-items: center; flex: 0 0 auto;
  transition: transform var(--dur) var(--ease); }
.side-folder.open .side-folder-head .chev { transform: rotate(90deg); }
.side-folder-head svg { width: 14px; height: 14px; flex: 0 0 auto; }
.side-folder-head .chev svg { width: 11px; height: 11px; }
.side-folder-head .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* nested chats are indented one level under their project */
.side-children { display: none; flex-direction: column; gap: 1px; padding-left: 18px; }
.side-folder.open .side-children { display: flex; }
.side-chat {
  display: flex; align-items: center; gap: 7px;
  height: 26px; padding: 0 8px; border-radius: 7px;
  font-size: 12px; color: var(--muted); text-decoration: none;
  white-space: nowrap; overflow: hidden;
}
.side-chat:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.side-chat.active { background: var(--surface-3); color: var(--text); font-weight: 500; }
.side-chat svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: 0.8; }
.side-chat .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* footer stays pinned while the project list above it scrolls */
.side-foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  padding: 9px 8px; border-top: 1px solid var(--border-soft);
  font-size: 12px; color: var(--text-2);
}
.side-foot b { color: var(--text); font-weight: 600; }
.side-foot svg { width: 13px; height: 13px; color: var(--amber); }
.side-foot .spacer { flex: 1; }
.side-foot-note { color: var(--muted); font-size: 11.5px; }

@media (max-width: 1000px) { .side { display: none; } }

.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent-strong); display: grid; place-items: center;
  font-size: 12px; font-weight: 700; flex: 0 0 auto; border: 1px solid var(--accent-line);
  cursor: pointer;
}

/* main window — a rounded panel floating on top of the canvas */
.main {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  background: transparent; overflow: hidden; padding-top: 6px;
}

/* No spacer line under the topbar either: the window's own edge defines the panel. */
.topbar {
  height: var(--topbar-h); flex: 0 0 var(--topbar-h);
  background: transparent;
  display: flex; align-items: center; gap: 12px; padding: 0 18px;
}
.topbar .tb-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
/* brand lockup: logo icon in the corner + zenvr.cloud wordmark */
.tb-brand { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; }
.tb-brand:hover { text-decoration: none; }
.tb-brand .brand-mark { width: 24px; height: 24px; }
.tb-brand .brand-name { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1; }
.tb-brand .brand-name em { font-style: normal; color: var(--muted); font-weight: 500; }
.topbar .tb-crumbs { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; min-width: 0; }
.tb-crumbs a { color: var(--muted); }
.tb-crumbs a:hover { color: var(--text); }
.tb-crumbs .sep { color: var(--faint); }
.tb-crumbs .here { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .spacer { flex: 1; }

.credits-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer;
  box-shadow: 0 1px 1px rgba(23, 28, 38, 0.03);
}
.credits-pill svg { width: 13px; height: 13px; color: var(--amber); }
.credits-pill:hover { border-color: var(--border-strong); text-decoration: none; }

.content { flex: 1; overflow-y: auto; padding: 16px 18px; scroll-behavior: smooth; }
.page { max-width: 1180px; margin: 0 auto; }
.page-wide { max-width: 1380px; }

/* ==========================================================================
   Primitives
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 13px; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
  border: 1px solid var(--border-strong); color: var(--text);
  background: linear-gradient(180deg, #ffffff 0%, #f4f5f7 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 1px rgba(23, 28, 38, 0.02);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.12s, box-shadow 0.12s;
}  .btn svg { width: 14px; height: 14px; }
.btn:hover { background: linear-gradient(180deg, #ffffff 0%, #eef0f3 100%); border-color: #c3c8ce; text-decoration: none; }
.btn:active { transform: translateY(0.5px); box-shadow: inset 0 1px 1px rgba(23, 28, 38, 0.06); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(180deg, #343a42 0%, #1b1f24 55%, #161a1f 100%);
  border-color: var(--text); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 1px rgba(23, 28, 38, 0.05);
}
.btn-primary:hover { background: linear-gradient(180deg, #2c3139 0%, #000 60%); border-color: #000; }
.btn-primary:active { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); }
.btn-danger {
  background: linear-gradient(180deg, rgba(216, 67, 79, 0.07), rgba(216, 67, 79, 0.02));
  border-color: rgba(216, 67, 79, 0.45); color: var(--red);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.btn-danger:hover { background: var(--red-soft); border-color: var(--red); }
.btn-ghost { background: none; border-color: transparent; color: var(--text-2); box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-success {
  background: linear-gradient(180deg, rgba(47, 158, 99, 0.16), rgba(47, 158, 99, 0.06));
  border-color: rgba(47, 158, 99, 0.4); color: var(--green);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.btn-success:hover { background: rgba(47, 158, 99, 0.18); border-color: var(--green); }
.btn-sm { height: 26px; padding: 0 9px; font-size: 12px; }
.btn-sm svg { width: 13px; height: 13px; }
.btn-lg { height: 34px; padding: 0 16px; font-size: 13px; }
.btn-icon { width: 30px; padding: 0; }
.btn-icon.btn-sm { width: 26px; }

.input, .select, textarea.input {
  width: 100%; height: 30px; padding: 0 10px;
  background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text); font-family: inherit; font-size: 12.5px; outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
textarea.input { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.55; }
.input::placeholder { color: var(--faint); }
.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring);
}
.input:disabled { opacity: 0.5; }
.select { appearance: none; padding-right: 28px; cursor: pointer; }

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field > label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.hint { font-size: 11.5px; color: var(--muted); }
.field .hint { font-size: 11.5px; color: var(--muted); }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.card-pad { padding: 14px 16px; }
.card-head {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px 2px;
  border-bottom: none;
}
.card-head h3 { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.card-head .sub { font-size: 11.5px; color: var(--muted); }
.card-head .spacer, .spacer { flex: 1; }
.card-body { padding: 6px 16px 14px; }

.grid { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr; } }

/* tables */
.table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.table th {
  text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); padding: 8px 14px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table td { padding: 9px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: rgba(23, 28, 38, 0.02); }
.table .num { font-family: var(--mono); font-size: 11.5px; }

/* badges & dots */
.badge {
  display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 8px;
  border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid transparent; white-space: nowrap;
}  .badge svg { width: 11px; height: 11px; }
.badge.green { color: var(--green); background: var(--green-soft); border-color: rgba(62, 207, 142, 0.25); }
.badge.red { color: var(--red); background: var(--red-soft); border-color: rgba(239, 97, 109, 0.25); }
.badge.amber { color: var(--amber); background: var(--amber-soft); border-color: rgba(226, 179, 76, 0.25); }
.badge.blue { color: var(--blue); background: var(--blue-soft); border-color: var(--accent-line); }
.badge.grey { color: var(--text-2); background: var(--surface-2); border-color: var(--border); }
.badge.accent { color: var(--accent-strong); background: var(--accent-soft); border-color: var(--accent-line); }

.dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }  .dot.green { background: var(--green); }
  .dot.green.pulse { animation: pulse 1.8s ease-in-out infinite; }
.dot.red { background: var(--red); }
.dot.amber { background: var(--amber);  box-shadow: 0 0 0 0 transparent; }  .dot.grey { background: var(--faint); }
.dot.pulse { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }

/* page headers */
.page-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.page-head h1 { font-size: 17px; }
.page-head .sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 14px 0 8px; }

/* stat cards */
.stat { padding: 10px 13px; display: flex; flex-direction: column; gap: 2px; }
.stat .k { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.stat .k svg { width: 13px; height: 13px; }
.stat .v { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat .d { font-size: 11.5px; color: var(--muted); }

/* empty & loading states */
.empty { padding: 30px 16px; text-align: center; color: var(--muted); font-size: 12.5px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty svg { width: 26px; height: 26px; color: var(--faint); }
.empty .btn { margin-top: 4px; }
.spin { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent); animation: rot 0.7s linear infinite; margin: 40px auto; }
@keyframes rot { to { transform: rotate(360deg); } }
.page-load { display: grid; place-items: center; min-height: 200px; }

/* toasts */
.toasts { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 300; }
.toast {
  display: flex; align-items: center; gap: 9px; min-width: 240px; max-width: 380px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px; font-size: 12.5px; box-shadow: var(--shadow-pop);
  animation: slideup 0.18s ease-out;
}
.toast svg { width: 15px; height: 15px; flex: 0 0 auto; }
.toast.ok svg { color: var(--green); }
.toast.err { border-color: rgba(216, 67, 79, 0.4); }
.toast.err svg { color: var(--red); }
@keyframes slideup { from { opacity: 0; transform: translateY(6px); } }

/* modal */
.modal-veil {
  position: fixed; inset: 0;    background: rgba(18, 22, 30, 0.32); backdrop-filter: blur(2px);
  display: grid; place-items: center; z-index: 200; padding: 20px;
  animation: fadein 0.14s ease-out;
}
@keyframes fadein { from { opacity: 0; } }
.modal {
  width: 460px; max-width: 100%; max-height: 86vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); animation: slideup 0.16s ease-out;
}
.modal.wide { width: 640px; }
.modal-head { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); }
.modal-head h3 { font-size: 13.5px; flex: 1; }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 18px; border-top: 1px solid var(--border-soft); }
.modal .x { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 4px; display: grid; place-items: center; }
.modal .x:hover { color: var(--text); background: var(--surface-2); }
.modal .x svg { width: 15px; height: 15px; }

/* dropdown menu */
.menu {
  position: absolute; min-width: 180px;  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 5px; z-index: 150;
  animation: slideup 0.12s ease-out;
}
.menu-item {
  display: flex; align-items: center; gap: 9px;  padding: 6px 9px; border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--text-2); cursor: pointer;
}  .menu-item svg { width: 14px; height: 14px; opacity: 0.85; }
.menu-item:hover { background: var(--surface-2); color: var(--text); }
.menu-item.danger { color: var(--red); }
.menu-item.danger:hover { background: var(--red-soft); }
.menu-sep { height: 1px;  background: var(--border); margin: 2px 6px; }

/* ==========================================================================
   Dashboard
   ========================================================================== */

.dash-hero {
  display: flex; align-items: center; gap: 14px;  padding: 12px 16px; margin-bottom: 12px;
  background: linear-gradient(180deg, var(--accent-wash), var(--accent-wash)), var(--surface);
}
.dash-hero h1 { font-size: 16px; }
.dash-hero p { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

.announce {
  display: flex; align-items: center; gap: 9px; padding: 9px 14px; margin-bottom: 12px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius);
  color: var(--accent-strong); font-size: 12.5px;
}
.announce svg { width: 14px; height: 14px; flex: 0 0 auto; }

.feed { display: flex; flex-direction: column; }
.feed-item { display: flex; align-items: center; gap: 10px;  padding: 7px 16px; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; }
.feed-item:last-child { border-bottom: none; }
.feed-item .fi-icon {
  width: 24px; height: 24px; border-radius: var(--radius-sm); display: grid; place-items: center; flex: 0 0 auto;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
}
.feed-item .fi-icon svg { width: 12px; height: 12px; }
.feed-item .fi-icon.billing { color: var(--amber);  background: var(--amber-soft); border-color: rgba(226, 179, 76, 0.16); }
.feed-item .msg { color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-item time { margin-left: auto; color: var(--faint); font-size: 11px; flex: 0 0 auto; }

/* ==========================================================================
   Server cards (My Servers + dashboard)
   ========================================================================== */

.srv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }

.srv-card { padding: 13px 15px; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.12s; cursor: pointer; }
.srv-card:hover { border-color: var(--border-strong); }
.srv-top { display: flex; align-items: flex-start; gap: 10px; }
.srv-game-ico {
  width: 30px; height: 30px; border-radius: var(--radius-sm); flex: 0 0 auto;
  display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2);
}
.srv-game-ico svg { width: 15px; height: 15px; }
.srv-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-meta { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.srv-top .badge { margin-left: auto; }

.srv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.srv-stat { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 6px 8px; min-width: 0; }
.srv-stat .l { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); }
.srv-stat .n { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-stat .bar { height: 3px; border-radius: 2px; background: var(--surface-3); margin-top: 5px; overflow: hidden; }
.srv-stat .bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width 0.6s ease; }
.srv-stat .bar i.hot { background: var(--amber); }
.srv-stat .bar i.max { background: var(--red); }

.srv-actions { display: flex; gap: 6px; align-items: center; }
.srv-actions .spacer { flex: 1; }
.srv-addr { font-family: var(--mono); font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; min-width: 0; }
.srv-addr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Create server / plans
   ========================================================================== */

.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.plan {
  padding: 15px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; position: relative;
  transition: border-color 0.12s;
}
.plan:hover { border-color: var(--border-strong); }
.plan.sel {  border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring-soft); }
.plan .p-name { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.plan .p-desc { font-size: 11.5px; color: var(--muted); min-height: 32px; }
.plan .p-specs { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--text-2); }
.plan  .p-specs span { display: flex; align-items: center; gap: 6px; }  .plan .p-specs svg { width: 12px; height: 12px; color: var(--muted); }
.plan .p-price { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-soft); display: flex; align-items: baseline; gap: 5px; }
.plan .p-price b { font-size: 16px; font-weight: 700; }
.plan .p-price span { font-size: 11px; color: var(--muted); }
.plan .p-check { position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border-strong); display: grid; place-items: center; color: transparent; }
.plan.sel .p-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.plan.sel .p-check svg { width: 10px; height: 10px; }
.plan.featured::before {
  content: 'Popular'; position: absolute; top: -8px; left: 12px; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-strong);
  background: var(--surface); border: 1px solid var(--accent-line-strong); border-radius: 999px; padding: 1px 8px;
}

.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.game-opt {
  padding: 11px 13px; cursor: pointer; display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; transition: border-color 0.12s;
}
.game-opt:hover { border-color: var(--border-strong); }
.game-opt.sel {  border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring-soft); }  .game-opt svg { width: 16px; height: 16px; color: var(--text-2); }

/* ==========================================================================
   Server page
   ========================================================================== */

.srv-head { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; flex-wrap: wrap; }
.srv-head .srv-game-ico { width: 36px; height: 36px; }
.srv-head .srv-game-ico svg { width: 18px; height: 18px; }
.srv-head h1 { font-size: 16px; display: flex; align-items: center; gap: 9px; }
.srv-head .addr { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 2px; display: flex; gap: 6px; align-items: center; }
.srv-head .addr button { background: none; border: none; color: var(--faint); cursor: pointer; padding: 0; display: grid; place-items: center; }
.srv-head .addr button:hover { color: var(--text); }
.srv-head .addr svg { width: 12px; height: 12px; }
.srv-head .power { margin-left: auto; display: flex; gap: 7px; }

/* Server section buttons live in the window's .content-rail column: icon + label,
   left aligned, on the window surface. */
.srv-rail-btn {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  width: 100%; height: 32px; padding: 0 10px;
  border: none; border-radius: 8px; background: transparent; text-align: left;
  font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--muted);
  cursor: pointer; white-space: nowrap;
}
.srv-rail-btn svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: 0.85; }
.srv-rail-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.srv-rail-btn:hover { color: var(--text); background: var(--surface-2); }
.srv-rail-btn.active { background: var(--text); color: var(--bg-raise); font-weight: 600; }
.srv-rail-btn.active svg { opacity: 1; }
html[data-theme="dark"] .srv-rail-btn:hover { background: var(--surface-3); }
html[data-theme="dark"] .srv-rail-btn.active { background: var(--surface-3); color: var(--text); }
/* No divider under the action row: the panel below carries its own edge, and a
   full-width hairline stacked on top of it just reads as a double spacer line. */
.srv-actions {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px 12px; flex-wrap: wrap;
}
.srv-actions .srv-actions-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.srv-actions .power { margin-left: auto; display: flex; gap: 7px; }
.srv-body { min-width: 0; }
@media (max-width: 720px) {
  /* too narrow for a labelled column: fall back to a horizontal icon strip */
  .content-rail {
    flex: 0 0 auto; width: auto; flex-direction: row; align-items: center; gap: 2px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    border-right: none; border-bottom: none;
    padding: 6px; align-self: stretch;
  }
  .content-rail::-webkit-scrollbar { display: none; }
  .srv-rail-btn { width: 34px; height: 34px; padding: 0; justify-content: center; }
  .srv-rail-label { display: none; }
  .window { flex-direction: column; }
}

.tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 14px;
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 7px 11px; font-size: 12.5px; font-weight: 500; color: var(--muted); cursor: pointer;
  border: none; background: none; font-family: inherit; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px;
}
.tab svg { width: 14px; height: 14px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--text); font-weight: 600; }

/* console — stays dark even in the light theme: it's a terminal */
.console-wrap { display: flex; flex-direction: column; border: 1px solid var(--term-border); border-radius: var(--radius); overflow: hidden;  background: var(--term-bg); }
.console-stats {
  display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--term-border);
  background: var(--term-bar); padding: 0 8px; flex-wrap: wrap;
}
.cstat { display: flex; align-items: center; gap: 7px; padding: 8px 12px; font-size: 11.5px;  color: var(--term-muted); }
.cstat + .cstat { border-left: 1px solid var(--term-border); }
.cstat b { color: var(--term-text); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12px; }
.cstat .bar { width: 52px; height: 3px; background: var(--term-track); border-radius: 2px; overflow: hidden; }
.cstat .bar i { display: block; height: 100%; background: var(--accent); }
.cstat .bar i.hot { background: var(--amber); }
.cstat .bar i.max { background: var(--red); }

.console {
  height: 420px; overflow-y: auto;  padding: 10px 14px;
  font-family: var(--mono); font-size: 12px; line-height: 1.62; color: var(--term-text);
  white-space: pre-wrap; word-break: break-word; cursor: text;
}
.console .line { min-height: 1.62em; }
/* game-server output keeps semantic red/green/yellow; blue, cyan and magenta
   are neutralised so the console never looks purple or blue. */
.console .c-green { color: var(--term-green); } .console .c-red { color: var(--term-red); }
.console .c-yellow { color: var(--term-yellow); } .console .c-cyan { color: var(--term-neutral); }
.console .c-blue { color: var(--term-neutral); } .console .c-magenta { color: var(--term-soft); }
.console .c-dim {  color: var(--term-dim); } .console .c-white { color: var(--term-bright); }
.console .c-bold { font-weight: 700; }
.console .c-bg-red { background: var(--term-sel); }

.console-input {
  display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--term-border);
  background: var(--term-bar); padding: 0 14px; height: 40px;
}
.console-input .prompt { font-family: var(--mono);  color: var(--term-prompt); font-size: 12.5px; user-select: none; }
.console-input input {
  flex: 1; background: none; border: none; outline: none; color: var(--term-text);
  font-family: var(--mono); font-size: 12.5px; height: 100%;
}
.console-input input::placeholder { color: var(--term-dim); }

.graphs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 12px; }
@media (max-width: 1000px) { .graphs { grid-template-columns: 1fr; } }
.graph { padding: 11px 13px 8px; }
.graph .g-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.graph .g-head .l { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.graph .g-head .v { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.graph canvas { width: 100%; height: 54px; display: block; }

/* files */
.files-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.crumb { display: flex; align-items: center; gap: 4px; font-size: 12.5px; min-width: 0; }
.crumb button { background: none; border: none; color: var(--muted); font-family: inherit; font-size: 12.5px; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.crumb button:hover { color: var(--text); background: var(--surface-2); }
.crumb .here { color: var(--text); font-weight: 600; padding: 2px 4px; }
.crumb svg { width: 11px; height: 11px; color: var(--faint); }
.ficon { width: 15px; height: 15px; color: var(--muted); flex: 0 0 auto; }
.ficon.dir { color: var(--blue); }
tr.filerow { cursor: pointer; }
.fname { display: flex; align-items: center; gap: 9px; font-weight: 500; color: var(--text); min-width: 0; }
.fname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tr.filerow:hover .fname { color: var(--accent-strong); }
.file-editor { display: flex; flex-direction: column; height: 60vh; }
.file-editor textarea { flex: 1; font-family: var(--mono); font-size: 12px; line-height: 1.6; border-radius: 0 0 var(--radius) var(--radius); }
.file-editor-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border-soft); }
.file-editor-head .fn { font-family: var(--mono); font-size: 12px; }
.upload-drop {
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius); padding: 22px; text-align: center;
  color: var(--muted); font-size: 12.5px; cursor: pointer; margin-bottom: 12px;
}
.upload-drop:hover, .upload-drop.over { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }

/* network */
.addr-ip { font-family: var(--mono); font-size: 12px; }
.note-edit { background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px; border-radius: 4px; display: inline-grid; place-items: center; vertical-align: middle; }
.note-edit:hover { color: var(--text); background: var(--surface-2); }
.note-edit svg { width: 12px; height: 12px; }

/* schedules */
.cron-chip { font-family: var(--mono); font-size: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; color: var(--text-2); }
.task-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; }
.task-row:last-child { border-bottom: none; }
.task-seq { width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--muted); flex: 0 0 auto; }
.task-payload { font-family: var(--mono); font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cron-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.toggle { position: relative; width: 34px; height: 19px; border-radius: 999px; background: #dfe2e6; border: 1px solid #cfd4d9; cursor: pointer; transition: background 0.15s; flex: 0 0 auto; padding: 0; }
.toggle::after { content: ''; position: absolute; top: 1px; left: 1px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(23, 28, 38, 0.2); transition: transform 0.15s, background 0.15s; }
.toggle.on { background: #5cc481; border-color: #5cc481; }
.toggle.on::after { transform: translateX(15px); background: #fff; }

/* databases */
.cred-box { font-family: var(--mono); font-size: 11.5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; align-items: center; gap: 8px; }
.cred-box code { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cred-box button { background: none; border: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 2px; }
.cred-box button:hover { color: var(--text); }
.cred-box svg { width: 12px; height: 12px; }

/* users/permissions */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.perm-group { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; }
.perm-group h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 8px; }
.perm-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); padding: 3px 0; cursor: pointer; user-select: none; }
.perm-check input { accent-color: var(--accent); width: 13px; height: 13px; cursor: pointer; }
.perm-check code { font-size: 10.5px; color: var(--muted); }

/* settings */
.set-row { display: flex; align-items: center; gap: 14px;  padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.set-row:first-child { padding-top: 4px; }
.set-row:last-child { border-bottom: none; padding-bottom: 4px; }
.set-row .si { flex: 1; min-width: 0; }
.set-row .si b { font-size: 13px; font-weight: 600; display: block; }
.set-row .si span { font-size: 11.5px; color: var(--muted); display: block; margin-top: 2px; }
.set-row > span {  color: var(--text-2); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.danger-zone { border-color: rgba(216, 67, 79, 0.35); }
.danger-zone .card-head { border-bottom: none; }
.danger-zone h3 { color: var(--red); }

/* billing */
.tx-pos { color: var(--green); } .tx-neg { color: var(--red); }
.bal-hero { display: flex; align-items: center; gap: 18px; padding: 14px 16px; }
.bal-hero .big { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.bal-hero .bl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.earn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .earn-grid { grid-template-columns: 1fr; } }
.ad-timer { font-family: var(--mono); font-size: 22px; font-weight: 600; text-align: center; padding: 8px 0; color: var(--accent-strong); }

/* kv list */
.kv { display: flex; flex-direction: column; }
.kv-row { display: flex; align-items: center; gap: 10px;  padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; }
.kv-row:last-child { border-bottom: none; }
.kv-row .k { color: var(--muted); flex: 1; font-size: 12px; font-weight: 500; }
.kv-row .v { color: var(--text); min-width: 0; display: flex; align-items: center; gap: 7px; margin-left: auto; justify-content: flex-end; text-align: right; }
.kv-row .v code { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }

/* responsive */
@media (max-width: 860px) {
  .srv-stats { grid-template-columns: repeat(2, 1fr); }
  .cron-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .rail { display: none; }
  .shell { padding: 0; }
  .window { border: none; border-radius: 0; box-shadow: none; }
  .content { padding: 14px; }
}
/* ==========================================================================
   Motion — one easing/duration vocabulary so every interaction feels the same.
   ========================================================================== */

.btn {
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn:disabled, .btn:disabled:hover { transform: none; }

.rail-link {
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.rail-link:hover { transform: translateY(-1px); }
.rail-link:active { transform: scale(0.93); }

.credits-pill, .avatar, .badge, .btn-icon, .tab, .game-opt, .plan, .menu-item, .srv-rail-btn,
.input, .select, textarea.input {
  transition:
    background var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.credits-pill:hover, .avatar:hover { transform: translateY(-1px); }
.credits-pill:active, .avatar:active { transform: scale(0.96); }
.game-opt:hover { transform: translateY(-2px); }
.game-opt:active { transform: scale(0.99); }

.theme-btn { transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.theme-btn:active { transform: scale(0.94); }

/* surfaces ease their colour when the theme flips */
.card, .main, .topbar, .rail, .modal, .toast, .menu {
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
body { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }

/* modal + toast + menu entrances settle instead of snapping */
.modal { animation: popin var(--dur) var(--ease) both; }
@keyframes popin { from { opacity: 0; transform: translateY(6px) scale(0.985); } }
.toast { animation: slideup 0.22s var(--ease) both; }
.menu { animation: popin 0.14s var(--ease) both; }

/* page content fades in as it mounts */
.content > .page { animation: pagein 0.22s var(--ease) both; }
@keyframes pagein { from { opacity: 0; transform: translateY(4px); } }

@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;
  }
  .btn:hover, .rail-link:hover, .credits-pill:hover, .avatar:hover, .game-opt:hover { transform: none; }
}

/* ==========================================================================
   Assistant — the chat page behind #/ai
   The transcript is not boxed: it sits directly on the window, and only the
   user's own turns get a bubble. The composer is the single raised surface.
   ========================================================================== */
.ai-page {
  max-width: 820px; height: calc(100vh - 96px); min-height: 420px;
  display: flex; flex-direction: column;
}

.ai-log {
  flex: 1; min-height: 0; overflow-y: auto; padding: 2px 2px 12px;
  display: flex; flex-direction: column; gap: 20px;
  scrollbar-width: none;
}
.ai-log::-webkit-scrollbar { display: none; }

.ai-msg { display: flex; gap: 11px; align-items: flex-start; }
.ai-msg.me { flex-direction: row-reverse; }
.ai-av {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto; margin-top: 1px;
  display: grid; place-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
}
.ai-av.bot { background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent-line); }
.ai-av.me { background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); }

.ai-bubble { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.68; color: var(--text); }
/* the assistant speaks straight onto the surface — no enclosing box */
.ai-msg.assistant .ai-bubble { padding-top: 2px; }
/* only the user's own turns are bubbles */
.ai-msg.me .ai-bubble {
  flex: 0 1 auto; max-width: 78%; padding: 8px 13px;
  background: var(--text); color: var(--bg-raise); border-radius: 14px 14px 4px 14px;
}
.ai-bubble.error { color: var(--red); }
.ai-text code {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--surface-3); border-radius: 5px; padding: 1px 5px;
}
.ai-msg.me .ai-bubble code { background: rgba(255, 255, 255, 0.16); color: inherit; }
.ai-line { display: flex; gap: 7px; }
.ai-line.bullet .ai-bul { flex: 0 0 auto; color: var(--muted); }
.ai-gap { height: 9px; }

.ai-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.ai-actions .btn { height: 27px; padding: 0 10px; font-size: 11.5px; font-weight: 500; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ai-chip {
  font-family: inherit; font-size: 11.5px; font-weight: 500; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 11px; cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ai-chip:hover { color: var(--text); border-color: var(--border-strong); background: var(--bg-raise); }

.ai-bubble.typing { padding-top: 9px; }
.ai-dots { display: inline-flex; gap: 4px; }
.ai-dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: aidot 1.1s var(--ease) infinite; }
.ai-dots i:nth-child(2) { animation-delay: 0.15s; }
.ai-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes aidot { 0%, 60%, 100% { opacity: 0.28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

/* composer — one raised pill holding the field and the send button */
.ai-composer { flex: 0 0 auto; padding: 6px 0 2px; }
.ai-composer-bar {
  display: flex; align-items: flex-end; gap: 6px; padding: 5px 5px 5px 8px;
  background: var(--bg-raise); border: 1px solid var(--border-strong); border-radius: 16px;
  box-shadow: var(--shadow-pop);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ai-composer-bar:focus-within { border-color: var(--accent-line-strong); box-shadow: 0 0 0 3px var(--ring-soft), var(--shadow-pop); }
.ai-input {
  flex: 1; min-width: 0; height: 34px; max-height: 148px; resize: none; overflow-y: auto;
  padding: 7px 2px; font-family: inherit; font-size: 13px; line-height: 1.5; color: var(--text);
  background: transparent; border: none; outline: none;
}
.ai-input::placeholder { color: var(--muted); }
.ai-send { width: 34px; height: 34px; padding: 0; flex: 0 0 auto; border-radius: 12px; }
.ai-composer-note { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0 4px; font-size: 11px; color: var(--muted); }
.ai-composer-note svg { width: 11px; height: 11px; }
.ai-note-right { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--faint); }

/* model picker — replaces the old static "built-in engine" note */
.ai-model {
  font-family: inherit; font-size: 11px; font-weight: 500; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
  padding: 2px 6px; max-width: 190px; cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ai-model:hover { color: var(--text); border-color: var(--border-strong); }
.ai-model:disabled { opacity: 0.65; cursor: default; }
.ai-auto.on { color: var(--amber); border-color: var(--amber); background: var(--amber-soft); }

/* The agent's work: an open, live list while it runs, folding down to a single
   "Finished Working" line once the turn is over. */
.ai-steps { margin-bottom: 10px; }
.ai-steps-head {
  display: inline-flex; align-items: center; gap: 7px; padding: 2px 0;
  font-family: inherit; font-size: 11.5px; font-weight: 500; color: var(--muted);
  background: none; border: none; cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.ai-steps-head:hover { color: var(--text); }
.ai-steps-head.running { color: var(--text-2); }
.ai-steps-head svg { width: 12px; height: 12px; flex: 0 0 auto; }
.ai-steps-head > svg:last-child { transition: transform var(--dur) var(--ease); }
.ai-steps-head[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.ai-spin {
  width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid var(--border-strong); border-top-color: var(--text-2);
  animation: aispin 0.75s linear infinite;
}
@keyframes aispin { to { transform: rotate(360deg); } }
.ai-steps-body {
  display: flex; flex-direction: column; gap: 4px;
  margin: 7px 0 0 5px; padding-left: 10px; border-left: 1px solid var(--border);
}
.ai-tool { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); }
.ai-tool svg { width: 11px; height: 11px; opacity: 0.9; flex: 0 0 auto; }
.ai-tool.ok { color: var(--text-2); }
.ai-tool.error { color: var(--red); }
.ai-tool.thinking span:last-child { font-style: italic; }
.ai-tool-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: 0 0 auto;
  animation: aidot 1.1s var(--ease) infinite;
}

/* an edit the agent proposed, waiting for Apply */
.ai-extras { display: flex; flex-direction: column; gap: 8px; margin-top: 11px; }
.ai-proposal {
  padding: 10px 12px; font-size: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.ai-proposal.pending { background: var(--accent-wash); border-color: var(--accent-line); }
.ai-proposal.applied { border-color: var(--border-strong); }
.ai-proposal-head { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text); }
.ai-proposal-head svg { width: 12px; height: 12px; color: var(--muted); flex: 0 0 auto; }
.ai-proposal-meta { margin-top: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.ai-proposal-list { margin: 7px 0 0; padding-left: 18px; font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.ai-proposal-foot { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
.ai-preview {
  margin: 8px 0 0; max-height: 190px; overflow: auto; white-space: pre-wrap;
  padding: 9px 10px; background: var(--term-bg); color: var(--term-text);
  border: 1px solid var(--term-border); border-radius: 8px;
  font-family: var(--mono); font-size: 11px; line-height: 1.55;
}

/* attached images */
.ai-attach-strip { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 4px 8px; }
.ai-thumb { position: relative; display: block; }
.ai-thumb img { display: block; width: 54px; height: 54px; object-fit: cover; border-radius: 9px; border: 1px solid var(--border); }
.ai-thumb .x {
  position: absolute; top: -5px; right: -5px; width: 17px; height: 17px; padding: 0;
  display: grid; place-items: center; border: none; border-radius: 50%; cursor: pointer;
  background: var(--text); color: var(--bg-raise);
}
.ai-thumb .x svg { width: 9px; height: 9px; }
.ai-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ai-thumbs img { display: block; max-width: 200px; max-height: 160px; border-radius: 10px; }
.ai-plain { margin: 0; white-space: pre-wrap; }
.ai-composer-bar .btn-icon { width: 30px; height: 30px; }

html[data-theme="dark"] .ai-msg.me .ai-bubble { background: var(--surface-3); color: var(--text); }
html[data-theme="dark"] .ai-composer-bar { background: var(--surface-2); border-color: var(--border); box-shadow: none; }
html[data-theme="dark"] .ai-proposal { background: var(--surface-2); }
html[data-theme="dark"] .ai-model { background: var(--surface-2); }

@media (max-width: 720px) {
  .ai-page { height: calc(100vh - 84px); }
  .ai-msg.me .ai-bubble { max-width: 88%; }
  .ai-composer-note { font-size: 10.5px; }
}

/* ------------------------------------------------ create wizard */
.wiz-steps { display: flex; gap: 6px; margin: 4px 0 24px; flex-wrap: wrap; }
.wiz-step {
  display: flex; align-items: center; gap: 9px; padding: 7px 14px 7px 10px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  cursor: pointer; color: var(--muted); font-size: 12.5px; font-weight: 600; transition: border-color .12s, background .12s, color .12s;
}
.wiz-step:hover { border-color: var(--border-strong); }
.wiz-step .wiz-n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface-3); color: var(--text-2); font-size: 11px; font-weight: 700; flex: none; }
.wiz-step.active { color: var(--text); border-color: var(--accent-line-strong); background: var(--accent-soft); }
.wiz-step.active .wiz-n { background: var(--text); color: var(--bg-raise); }
.wiz-step.done { color: var(--text-2); }
.wiz-step.done .wiz-n { background: var(--green-soft); color: var(--green); }

.wiz-body { min-height: 220px; }
.wiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border-soft); }

.wiz-fields { max-width: 560px; }
.wiz-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.wiz-field:last-child { margin-bottom: 0; }
.wiz-field > label { display: flex; gap: 3px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.wiz-req { color: var(--red); }
.wiz-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; margin-bottom: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); font-size: 12.5px; }
.wiz-note.warn { background: var(--red-soft); border-color: rgba(208, 70, 78, 0.3); color: var(--red); }
.wiz-empty { display: flex; align-items: center; gap: 12px; max-width: 560px; }
.wiz-empty > div:first-child { display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 50%; background: var(--green-soft); color: var(--green); }
.wiz-summary { display: flex; flex-direction: column; gap: 8px; margin-top: 4px;
  padding-top: 12px; border-top: 1px solid var(--border-soft); }
.wiz-row { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; }
.wiz-row .k { color: var(--muted); }
.wiz-row .v { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px;
  color: var(--text); font-weight: 500; text-align: right; word-break: break-word; }
.n-flag.sm { display: inline-flex; width: auto; height: auto; background: none; border-radius: 0; }
.n-flag.sm img { width: 18px; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px var(--border); }
.wiz-row.strong .v { font-weight: 700; }

@media (max-width: 720px) {
  .wiz-step .wiz-lbl { display: none; }
  .wiz-step.active .wiz-lbl { display: inline; }
}

/* create wizard — location step */
.node-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.node-opt { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; cursor: pointer; transition: border-color .12s; }
.node-opt:hover { border-color: var(--border-strong); }
.node-opt.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring-soft); }
.node-opt.disabled { opacity: .55; cursor: not-allowed; }
.node-opt .n-top { display: flex; align-items: center; gap: 12px; }
.node-opt .n-flag { display: grid; place-items: center; flex: none; width: 38px; height: 38px;
  border-radius: 10px; background: var(--surface-2); font-size: 22px; line-height: 1; }
.node-opt .n-flag svg { width: 20px; height: 20px; color: var(--muted); }
.node-opt .n-flag img { display: block; width: 24px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px var(--border); }
.node-opt .n-name { font-size: 14px; font-weight: 700; }
.node-opt .n-region { margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.node-opt .n-specs { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--text-2); }
.node-opt .n-specs span { display: flex; align-items: center; gap: 7px; }
.node-opt .n-specs svg { width: 13px; height: 13px; color: var(--muted); }

/* create wizard — richer game cards (overrides the one-line default) */
.game-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.game-opt { flex-direction: column; align-items: stretch; gap: 7px; padding: 14px 15px; }
.game-opt .g-head { display: flex; align-items: center; gap: 9px; }
.game-opt .g-head svg { width: 17px; height: 17px; color: var(--text-2); }
.game-opt .g-name { font-size: 13.5px; font-weight: 700; }
.game-opt .g-desc { min-height: 30px; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.game-opt .g-min { display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border-soft);
  font-size: 11px; font-weight: 500; color: var(--text-2); }
.game-opt .g-min svg { width: 12px; height: 12px; color: var(--muted); }

/* plan cards that fall below the chosen game's minimum */
.plan.disabled { opacity: .5; cursor: not-allowed; }
.plan.disabled:hover { border-color: var(--border); }
.plan .p-blocked { font-size: 10.5px; font-weight: 600; color: var(--red); }

/* ------------------------------------------------ create wizard motion */
/* Each step is re-mounted, so the entrance animation replays on every move. */
.wiz-body { animation: wizIn .32s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes wizIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Choice cards fade and lift in with a slight stagger across the grid. */
.node-grid > *, .game-grid > *, .plan-grid > * { animation: cardIn .34s cubic-bezier(.22, .61, .36, 1) both; }
.node-grid > *:nth-child(2), .game-grid > *:nth-child(2), .plan-grid > *:nth-child(2) { animation-delay: .035s; }
.node-grid > *:nth-child(3), .game-grid > *:nth-child(3), .plan-grid > *:nth-child(3) { animation-delay: .07s; }
.node-grid > *:nth-child(4), .game-grid > *:nth-child(4), .plan-grid > *:nth-child(4) { animation-delay: .105s; }
.node-grid > *:nth-child(5), .game-grid > *:nth-child(5), .plan-grid > *:nth-child(5) { animation-delay: .14s; }
.node-grid > *:nth-child(6), .game-grid > *:nth-child(6), .plan-grid > *:nth-child(6) { animation-delay: .175s; }
.node-grid > *:nth-child(7), .game-grid > *:nth-child(7), .plan-grid > *:nth-child(7) { animation-delay: .21s; }
.node-grid > *:nth-child(8), .game-grid > *:nth-child(8), .plan-grid > *:nth-child(8) { animation-delay: .245s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

/* Selecting something should feel immediate but never jumpy. */
.node-opt, .game-opt, .plan { transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, opacity .16s ease; }
.node-opt:hover:not(.disabled), .plan:hover:not(.disabled) { transform: translateY(-2px); }
.node-opt:active:not(.disabled), .game-opt:active, .plan:active:not(.disabled) { transform: scale(.99); }
.wiz-step { transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease; }
.wiz-step:active { transform: scale(.97); }

/* ------------------------------------------------ shell layout tweaks */
/* Nav icons sit in the vertical middle of the icon rail; the avatar stays at its foot. */
.rail-nav { justify-content: center; }

/* The lockup stays dead-centre while the credits pill and theme toggle sit
   together at the right edge — absolute centring keeps the lockup centred no
   matter how wide the right-hand controls get. */
.topbar { position: relative; }
.topbar .tb-brand { position: absolute; left: 50%; transform: translateX(-50%); }

@media (prefers-reduced-motion: reduce) {
  .wiz-body, .node-grid > *, .game-grid > *, .plan-grid > * { animation: none; }
  .node-opt, .game-opt, .plan, .wiz-step { transition: none; }
}

/* ------------------------------------------------ billing: Rampex top-up */
.topup-amounts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.topup-amt {
  min-width: 62px; height: 38px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s, transform .15s;
}
.topup-amt:hover { border-color: var(--border-strong); color: var(--text); }
.topup-amt.sel { background: var(--text); border-color: var(--text); color: var(--bg-raise); }
.topup-amt:active { transform: scale(.97); }
.topup-custom { width: 148px; height: 38px; }
.topup-methods { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.topup-chip {
  font-size: 11px; font-weight: 600; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 9px;
}
.topup-note { margin-top: 12px; font-size: 12.5px; color: var(--text-2); }
.topup-note.warn { color: var(--red); }

/* ------------------------------------------------ file editor (Monaco) */
.editor-host { flex: 1; min-height: 0; position: relative; }
.editor-host .monaco-editor { position: absolute; inset: 0; }
.editor-fallback { width: 100%; height: 100%; border: none; box-shadow: none; resize: none; padding: 10px 12px; }

/* ------------------------------------------------ activity feed */
.act-list { display: flex; flex-direction: column; }
.act-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--border-soft); }
.act-row:last-child { border-bottom: none; }
.act-ico { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--surface-2); color: var(--muted); }
.act-ico.server { color: var(--accent-strong); background: var(--accent-soft); }
.act-ico.billing { color: var(--green); background: var(--green-soft); }
.act-body { flex: 1; min-width: 0; }
.act-msg { font-size: 13px; color: var(--text); }
.act-meta { display: flex; gap: 10px; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.act-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--border-strong); }

/* ------------------------------------------------ sponsored ads */
/* The watch-ad iframe carries the sponsored in-stream video (ad_embed_html);
   size the stage so the 16:9 player fits instead of the iframe's 300x150
   default. The billing modal sets its own fixed iframe height — keep it in
   the same ratio there. */
.ad-stage { width: 100%; height: 300px; }
.ad-stage iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; border-radius: 8px; }