:root {
  --bg: #000000;
  --surface-1: #0a0a0a;
  --surface-2: #121212;
  --surface-3: #1b1b1b;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.13);
  --muted: #8b8b8b;
  --muted-2: #5f5f5f;
  --foreground: #f5f5f5;
  --brand: 99 120 255;
  --brand-light: 130 148 255;
  --green: #34d399;
  --red: #f87171;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--foreground);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: rgb(var(--brand-light)); text-decoration: none; }
button { font-family: inherit; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #222; border-radius: 8px; border: 3px solid #000; }
::-webkit-scrollbar-thumb:hover { background: #2e2e2e; }
svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.row { display: flex; align-items: center; gap: 10px; }
.spacer { flex: 1; }

/* ── Top bar ── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  height: 58px; padding: 0 18px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
}
.logo { height: 21px; display: block; cursor: pointer; }
.hamburger { display: none; background: none; border: none; color: var(--foreground); padding: 6px; cursor: pointer; border-radius: 8px; }
.hamburger:hover { background: var(--surface-2); }
.tag { font-size: 12px; color: var(--muted); }

/* Header: AI Assistant button + account avatar/menu */
.hdr-ai {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 9px;
  color: var(--foreground); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s;
}
.hdr-ai:hover { background: var(--surface-3); border-color: var(--muted-2); }
.hdr-ai svg { width: 16px; height: 16px; }
/* "Upgrade to PRO" nudge - dark glass pill + white PRO badge + shine sweep,
   mirrors the desktop header. */
.hdr-upgrade {
  display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 15px;
  background: linear-gradient(180deg, #181818, #0d0d0d); border: 1px solid #2e2e2e;
  border-radius: 22px; cursor: pointer; position: relative; overflow: hidden;
  transition: background .15s ease, border-color .15s ease;
}
.hdr-upgrade .up-label { color: #f5f5f5; font-size: 13px; font-weight: 700; }
.hdr-upgrade .up-badge {
  background: #fff; color: #000; border-radius: 6px; padding: 2px 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
}
.hdr-upgrade::after {
  content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 22px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-30px) skewX(-18deg);
  animation: hdrUpgradeSweep 3.2s ease-in-out infinite;
}
@keyframes hdrUpgradeSweep {
  0%   { transform: translateX(-30px) skewX(-18deg); opacity: 0; }
  12%  { opacity: 1; }
  45%  { transform: translateX(190px) skewX(-18deg); opacity: 0; }
  100% { transform: translateX(190px) skewX(-18deg); opacity: 0; }
}
.hdr-upgrade:hover { background: #1e1e1e; border-color: #4a4a4a; animation: hdrUpgradePulse 1.5s ease-in-out infinite; }
@keyframes hdrUpgradePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50%  { box-shadow: 0 0 12px 1px rgba(255,255,255,.25); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
/* Red PRO upgrade card (server Integrations → Port Forward) - mirrors the desktop:
   a soft red info card whose glassy Upgrade button reveals on card hover. */
.red-info { background: rgba(239,68,68,.07); border: 1px solid rgba(239,68,68,.22); border-radius: 10px; padding: 13px; }
.red-info > p { color: #fca5a5; font-size: 12.5px; line-height: 1.55; margin: 0; }
.red-info .pw-reveal {
  max-height: 0; opacity: 0; overflow: hidden; transform: translateY(6px);
  transition: max-height .3s cubic-bezier(.22,1,.36,1), opacity .22s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.ss-card:hover .red-info .pw-reveal { max-height: 64px; opacity: 1; transform: translateY(0); }
.red-upgrade-btn {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; cursor: pointer;
  background: linear-gradient(180deg, rgba(239,68,68,.26), rgba(200,30,30,.22));
  border: 1px solid rgba(185,28,28,.6); color: #fff; font-weight: 700; font-size: 12.5px;
  border-radius: 9px; padding: 8px 13px; transition: border-color .18s ease, background .18s ease;
}
.red-upgrade-btn svg { width: 14px; height: 14px; }
.red-upgrade-btn:hover { border-color: rgba(220,38,38,.9); background: linear-gradient(180deg, rgba(239,68,68,.34), rgba(200,30,30,.3)); }
.hdr-user-wrap { position: relative; }
.hdr-avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--foreground); transition: background .15s, border-color .15s;
}
.hdr-avatar:hover { background: var(--surface-3); border-color: #fff; }
.hdr-avatar svg { width: 18px; height: 18px; }
/* Header icon button (Discord) + vertical separator before the avatar - mirrors
   the desktop app header (Discord | separator | avatar). */
.hdr-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  color: var(--foreground); cursor: pointer; transition: background .15s, border-color .15s;
}
.hdr-icon:hover { background: var(--surface-3); border-color: var(--muted-2); }
.hdr-icon svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.hdr-sep { width: 1px; height: 24px; background: var(--border-strong); flex: none; margin: 0 2px; }
.hdr-menu {
  position: absolute; top: 44px; right: 0; z-index: 60; min-width: 230px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 12px; padding: 6px; box-shadow: var(--shadow);
}
.hdr-menu-id { padding: 10px 11px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.hdr-menu-email { font-size: 13px; font-weight: 600; color: var(--foreground); white-space: nowrap; margin-bottom: 7px; }
.hdr-plan {
  /* FREE: white pill with black text (mirrors the desktop profile menu). */
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 3px 8px; border-radius: 6px;
  background: #fff; color: #000; border: 1px solid #fff;
}
.hdr-plan.pro { background: rgba(255,196,64,.14); color: #ffd45e; border-color: rgba(255,196,64,.35); position: relative; overflow: hidden; }
/* Periodic shine sweep across the PRO chip. */
.hdr-plan.pro::after {
  content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 22px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-28px) skewX(-18deg);
  animation: hdrPlanShine 3.2s ease-in-out infinite;
}
@keyframes hdrPlanShine {
  0%   { transform: translateX(-28px) skewX(-18deg); opacity: 0; }
  10%  { opacity: 1; }
  33%  { transform: translateX(64px) skewX(-18deg); opacity: 0; }
  100% { transform: translateX(64px) skewX(-18deg); opacity: 0; }
}
.hdr-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; font-size: 13px;
  background: transparent; border: 0; color: var(--foreground); border-radius: 8px; cursor: pointer; text-align: left;
}
.hdr-menu button:hover { background: var(--surface-3); }
.hdr-menu button svg { width: 15px; height: 15px; opacity: .85; }
/* Logout: red text + icon (svg inherits currentColor), like the desktop menu. */
#logout-btn { color: #f87171; }
#logout-btn:hover { background: rgba(248,113,113,.08); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--foreground);
  cursor: pointer; transition: background .15s, border-color .15s, opacity .15s, transform .04s; white-space: nowrap;
}
.btn:hover { background: var(--surface-3); border-color: rgba(255,255,255,.2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
/* Primary action = white with black text (matches the desktop app). */
.btn.brand { background: #ffffff; border-color: #ffffff; color: #000000; font-weight: 700; }
.btn.brand:hover { background: #dcdcdc; border-color: #dcdcdc; color: #000000; }
.btn.brand:disabled { background: #ffffff; color: #000000; }
.btn.danger { color: var(--red); border-color: rgba(248,113,113,.28); background: rgba(248,113,113,.06); }
.btn.danger:hover { background: rgba(248,113,113,.14); }
/* Ghost = borderless quiet action (e.g. the create dialog's Cancel). */
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--surface-2); border-color: transparent; color: var(--foreground); }
.btn.sm { padding: 7px 12px; font-size: 12px; }
.btn svg { width: 15px; height: 15px; }

/* ── Inputs ── */
.field { display: block; margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.input {
  width: 100%; padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--surface-1); border: 1px solid var(--border-strong);
  color: var(--foreground); font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s;
  /* Render native pickers (time/date/color) dark so their icons stay visible. */
  color-scheme: dark;
}
.input:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08); }
.input::placeholder { color: var(--muted-2); }

/* ── Login (split / "B") ── */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(900px 500px at 50% -20%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(700px 500px at 50% 120%, rgb(var(--brand) / 0.07), transparent 60%); }
.login-split {
  width: 100%; max-width: 760px; min-height: 560px; display: flex;
  background: #000; border: 1px solid rgba(255,255,255,.09); border-radius: 16px;
  overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

/* Left brand panel */
.login-aside {
  width: 330px; flex: none; padding: 34px 32px; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--surface-1), #000);
  border-right: 1px solid var(--border); position: relative; overflow: hidden;
}
.login-aside::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px 300px at 0% 0%, rgb(var(--brand) / .14), transparent 62%); }
.brand-row { position: relative; display: flex; align-items: center; }
.brand-row .brand-logo { height: 22px; display: block; }
.aside-foot { position: relative; margin-top: auto; }
.aside-foot h2 { margin: 0; font-size: 23px; font-weight: 750; letter-spacing: -.025em;
  line-height: 1.25; color: var(--foreground); }
.aside-foot p { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.console-motif {
  margin-top: 22px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
  background: #000; padding: 11px 12px;
  font-family: "JetBrains Mono", Consolas, monospace; font-size: 11px; line-height: 1.7;
}
.console-motif { min-height: 64px; }
.console-motif .cm-line { white-space: pre-wrap; word-break: break-word; }
.console-motif .sc { color: #0858F5; font-weight: 700; }
.console-motif .dim { color: #cfcfcf; }
.console-motif .pr { color: rgb(var(--brand-light)); }
.console-motif .ok { color: #4ade80; font-weight: 600; }
.console-motif .pw { color: #f5a524; font-weight: 700; }
.console-motif .ip { color: rgb(var(--brand-light)); }
.caret { display: inline-block; width: 7px; height: 13px; background: #cfcfcf;
  vertical-align: -2px; animation: caret 1.1s step-end infinite; }
@keyframes caret { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }

/* Right form column */
.login-form { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 46px; }
.login-form h1 { margin: 0 0 24px; font-size: 21px; font-weight: 750; letter-spacing: -.025em; color: var(--foreground); }
.login-form .field { margin-bottom: 16px; }
.login-form .field:last-of-type { margin-bottom: 22px; }
.login-form .field label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.login-form .input { padding: 12px 14px; border-radius: 10px; }
.login-submit { width: 100%; height: 46px; position: relative; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.login-submit:disabled { opacity: 1; }
.btn-spinner { display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(0,0,0,.22); border-top-color: #000; animation: spin .7s linear infinite; }
.login-submit.loading-btn .btn-label { visibility: hidden; }
.login-submit.loading-btn .btn-spinner { display: block; position: absolute; }
.err { color: var(--red); font-size: 13px; margin: 12px 0 0; min-height: 18px; text-align: center; }

@media (max-width: 640px) {
  .login-split { flex-direction: column; max-width: 420px; min-height: 0; }
  .login-aside { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
  .aside-foot { margin-top: 24px; }
  .console-motif { display: none; }
  .login-form { padding: 28px 28px 32px; }
}

/* ── Cards ── */
.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }

/* ── Server list ── */
.wrap { max-width: 1100px; margin: 0 auto; padding: 30px 22px 70px; }
.page-title { font-size: 24px; font-weight: 750; letter-spacing: -0.03em; margin: 4px 0 22px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.server-card { cursor: pointer; transition: border-color .15s, background .15s, transform .06s; }
.server-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.server-card:active { transform: translateY(1px); }
.server-card h3 { margin: 0 0 5px; font-size: 16.5px; letter-spacing: -.01em; }

/* ── Server listing: OLED datagrid ── */
.sv-grid { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #000; }
.sv-head, .sv-row { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1.3fr) 116px;
  align-items: center; gap: 14px; padding: 0 18px; }
.sv-grid.has-path .sv-head, .sv-grid.has-path .sv-row {
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.9fr) 116px; }
.sv-head { height: 38px; border-bottom: 1px solid var(--border); background: #000;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); }
.sv-row { width: 100%; height: 60px; border: none; border-bottom: 1px solid var(--border); background: #000;
  color: var(--foreground); cursor: pointer; text-align: left; font: inherit; transition: background .12s; }
.sv-row:last-child { border-bottom: none; }
.sv-row:hover { background: var(--surface-1); }
.sv-row:active { background: var(--surface-2); }
.sv-c { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-c-name { display: flex; align-items: center; gap: 12px; }
.sv-c-name .gico { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-1); border-color: var(--border); }
.sv-c-name .gico svg { width: 17px; height: 17px; }
.sv-name { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; }
.sv-c-game { font-size: 13px; color: var(--muted); }
.sv-c-ver { font-size: 12.5px; color: var(--muted); font-family: "JetBrains Mono", Consolas, monospace; }
.sv-c-path { font-size: 12px; color: var(--muted); font-family: "JetBrains Mono", Consolas, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
.sv-dim { color: var(--muted-2); }
.sv-c-status { display: flex; align-items: center; gap: 10px; }
.sv-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 20px; border: 1px solid; }
.sv-pill .led { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.sv-pill.on { color: var(--green); background: rgba(52,211,153,.07); border-color: rgba(52,211,153,.3); }
.sv-pill.on .led { background: var(--green); box-shadow: 0 0 7px rgba(52,211,153,.7); animation: ledPulse 1.5s ease-in-out infinite; }
.sv-pill.off { color: var(--muted); background: var(--surface-1); border-color: var(--border-strong); }
.sv-pill.off .led { background: var(--muted-2); }
@media (max-width: 720px) {
  .sv-head { display: none; }
  .sv-row { grid-template-columns: 1fr auto; grid-auto-rows: auto; height: auto; gap: 4px 12px; padding: 13px 16px; }
  .sv-c-name { grid-row: 1; grid-column: 1; }
  .sv-c-status { grid-row: 1; grid-column: 2; justify-content: flex-end; }
  .sv-c-game { grid-row: 2; grid-column: 1 / -1; padding-left: 44px; }
  .sv-c-ver, .sv-c-path { display: none; }
  .sv-grid.has-path .sv-head, .sv-grid.has-path .sv-row { grid-template-columns: 1fr auto; }
}

/* Status: no pill/card - just a dot + label (matches the desktop app), with a
   pulsing halo on the dot while online. */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; }
.badge .led { width: 7px; height: 7px; border-radius: 50%; }
.badge.on { color: var(--green); }
.badge.on .led { background: var(--green); animation: ledPulse 1.5s ease-in-out infinite; }
.badge.off { color: var(--muted); }
.badge.off .led { background: var(--muted); }
@keyframes ledPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
  50%      { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); }
}

/* ── Server shell (sidebar + content) ── */
.shell { display: flex; min-height: calc(100vh - 58px); }
.sidebar {
  width: 246px; flex: none; display: flex; flex-direction: column; gap: 4px;
  padding: 20px 14px; border-right: 1px solid var(--border); background: var(--bg);
  position: sticky; top: 58px; height: calc(100vh - 58px);
  overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }
.side-server { padding: 4px 8px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.side-head { display: flex; align-items: center; gap: 8px; }
.side-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; word-break: break-word; }

/* ── Sidebar server-switcher (name + chevron → dropdown of active sessions) ── */
.side-switch-wrap { position: relative; }
.srv-switch { width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 11px; background: var(--surface-1);
  border: 1px solid var(--border-strong); cursor: pointer; font-family: inherit;
  transition: border-color .15s, background .15s; }
.srv-switch:hover { border-color: rgba(255,255,255,.22); }
.srv-switch .id { min-width: 0; flex: 1; text-align: left; }

/* Game icon tile (card + dropdown rows) */
.gico { position: relative; overflow: hidden; width: 22px; height: 22px; border-radius: 7px; flex: none;
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: #cfcfcf; }
.gico svg { width: 13px; height: 13px; }
.gico .gico-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* When a real game icon is shown, drop the tile frame + the placeholder glyph
   underneath (it bleeds through transparent PNGs) - show just the icon. */
.gico:has(.gico-img), .cs-game-ico:has(.gico-img), .ss-gico:has(.gico-img) { background: transparent; border: none; }
svg:has(~ .gico-img) { display: none; }
.srv-row .gico { width: 20px; height: 20px; border-radius: 6px; }
.srv-row .gico svg { width: 12px; height: 12px; }
.srv-row.active .gico { border-color: rgba(99,120,255,.45); color: rgb(130,148,255); background: rgba(99,120,255,.10); }
.srv-switch .nm { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; color: var(--foreground);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-switch .sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.srv-switch .chev { width: 15px; height: 15px; color: var(--muted-2); flex: none; transition: transform .18s; }
.srv-switch[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Round status badge (green + pulse online, red offline) - same pulse as the
   server-list badge (ledPulse). */
.srv-badge { flex: none; width: 12px; height: 12px; display: inline-flex; align-items: center; justify-content: center; }
.srv-badge .led { width: 7px; height: 7px; border-radius: 50%; }
.srv-badge.on  .led { background: var(--green, #34d399); animation: ledPulse 1.5s ease-in-out infinite; }
.srv-badge.off .led { background: #f87171; }

/* Switcher: offline shows nothing; on hover the green dot is swapped for the live uptime. */
.srv-switch .srv-badge.off { display: none; }
.srv-up { display: none; flex: none; font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 12px; color: var(--green, #34d399); white-space: nowrap; }
.srv-switch:hover .srv-badge.on { display: none; }
.srv-switch:hover .srv-up.has { display: inline-flex; }

/* Status banner (redesign §10) - green-tinted box when online. */
.srv-status { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 13px; font-weight: 700;
  padding: 11px 13px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface-1); }
.srv-status.on  { color: var(--green, #34d399); background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.2); }
.srv-status.off { color: var(--muted-2); }
.srv-status .led { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.srv-status.on .led { animation: led-pulse 1.6s ease-in-out infinite; }
.srv-status .up { color: var(--muted-2); font-weight: 500; font-family: "JetBrains Mono", Consolas, monospace; font-size: 12px; }
@keyframes led-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(52,211,153,.5); } 50% { box-shadow: 0 0 0 5px rgba(52,211,153,0); } }

.srv-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0,0,0,.6); padding: 6px; }
.srv-menu .mhead { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-2); padding: 8px 10px 6px; }
.srv-row { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: 9px; cursor: pointer; margin-bottom: 4px; }
.srv-row:last-child { margin-bottom: 0; }
.srv-row:hover { background: rgba(255,255,255,.05); }
.srv-row .nm { font-size: 13.5px; font-weight: 600; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-row .meta { font-size: 11px; flex: none; font-family: "JetBrains Mono", monospace; }
.srv-row .meta.on  { color: var(--green, #34d399); }   /* online → uptime, green */
.srv-row .meta.off { color: var(--muted-2); }          /* offline → gray */
.srv-row.active { background: rgba(99,120,255,.13); }
.srv-row.active .nm { color: rgb(130,148,255); }
.srv-row .check { width: 15px; height: 15px; color: rgb(130,148,255); flex: none; }
.srv-menu .msep { height: 1px; background: var(--border); margin: 6px 4px; }
.srv-row.all { color: var(--muted); }
.srv-row.all .gico { background: transparent; border: none; color: var(--muted); }

.side-power { display: flex; gap: 8px; margin-top: 12px; }
.side-power .btn { flex: 1; }
/* Separator between the power controls and the IP rows. */
.side-sep { height: 1px; background: var(--border); margin: 14px 0 12px; }
.side-ip {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 2px; cursor: pointer; border-radius: 6px; transition: background .15s;
}
.side-ip:hover { background: var(--surface-2); }
.side-ip + .side-ip { margin-top: 2px; }
.side-ip-label { flex: none; font-size: 11px; font-weight: 600; color: var(--muted-2); text-transform: uppercase; letter-spacing: .05em; }
.side-ip-val { min-width: 0; font-family: "JetBrains Mono", Consolas, monospace; font-size: 12px; color: rgb(var(--brand-light)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Players row - clearly clickable: blue count + chevron, underline on hover. */
.side-players-right { display: inline-flex; align-items: center; gap: 5px; }
.side-players-chev { width: 13px; height: 13px; color: var(--muted-2); transition: transform .15s, color .15s; }
.side-players:hover .side-players-chev { color: rgb(var(--brand-light)); transform: translateX(2px); }
.side-players:hover .side-ip-val { text-decoration: underline; text-underline-offset: 2px; }
/* Player popup rows */
.pl-row { display: flex; align-items: center; gap: 11px; padding: 9px 4px; border-bottom: 1px solid var(--border); }
.pl-row:last-child { border-bottom: none; }
.pl-head { width: 30px; height: 30px; border-radius: 7px; flex: none; background: var(--surface-3); object-fit: cover; }
.pl-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-name .pl-sub { display: block; font-size: 10.5px; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.pl-acts { display: flex; gap: 6px; flex: none; }
.pl-empty { text-align: center; color: var(--muted); padding: 26px 0; font-size: 13px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--muted); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .12s, color .12s;
}
.nav a:hover { color: var(--foreground); background: var(--surface-2); }
.nav a.active { color: var(--foreground); background: rgb(var(--brand) / 0.12); }
.nav a.active svg { color: rgb(var(--brand-light)); }
.nav a svg { width: 17px; height: 17px; }
/* Expandable group (Settings → Server / Integrations) */
.nav-group .nav-chev { margin-left: auto; width: 15px; height: 15px; opacity: .7; transition: transform .18s; }
.nav-group.expanded .nav-chev { transform: rotate(180deg); }
.nav-sub { display: none; flex-direction: column; gap: 2px; margin: 2px 0 2px 16px;
  padding-left: 12px; border-left: 1px solid var(--border); }
.nav-sub.open { display: flex; }
.nav-subitem { padding: 8px 12px !important; font-size: 13.5px !important; }
.side-back { margin-top: auto; padding: 10px 12px; color: var(--muted); font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 10px; border-radius: var(--radius-sm); }
.side-back:hover { color: var(--foreground); background: var(--surface-2); }
.scrim { display: none; }

.content { flex: 1; min-width: 0; padding: 28px 34px; display: flex; flex-direction: column; height: calc(100dvh - 58px); overflow: hidden; }
.sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex: none; }
.sec-head h2 { font-size: 20px; margin: 0; letter-spacing: -.02em; font-weight: 700; }
.sec-head .spacer { flex: 1; }

/* ── Console layout (console + info card) ── */
.console-layout { flex: 1; min-height: 0; display: flex; gap: 16px; }
.console-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.console-side { width: 260px; flex: none; }
.info-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.info-name { font-size: 16px; font-weight: 700; letter-spacing: -.01em; word-break: break-word; }
.info-row { display: flex; flex-direction: column; gap: 4px; }
.info-k { font-size: 11px; font-weight: 600; color: var(--muted-2); text-transform: uppercase; letter-spacing: .04em; }
.info-ip { font-family: "JetBrains Mono", Consolas, monospace; font-size: 13px; color: rgb(var(--brand-light)); cursor: pointer; word-break: break-all; }
.info-ip:hover { text-decoration: underline; }
.info-actions { display: flex; gap: 8px; margin-top: 4px; }
.info-actions .btn { flex: 1; }

/* ── Console ── */
.console {
  background: #000; border: 1px solid var(--border); border-radius: var(--radius);
  flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px;
  font-family: "JetBrains Mono", "Cascadia Code", Consolas, "SF Mono", monospace;
  font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
.console .line { color: #cfcfcf; }
.console .line.cmd { color: rgb(var(--brand-light)); }
.console .sc-prefix { color: #0858F5; font-weight: 700; }
.console .pw-prefix { color: #F35F2E; font-weight: 700; }
.console .console-link { color: rgb(var(--brand-light)); text-decoration: underline; text-underline-offset: 2px; }
.console .console-link:hover { color: #fff; }
/* Console error / warning chips - float over the console's top-right corner
   (mirrors the desktop app's ConsoleView). The console scrolls to the newest
   line at the bottom, so the covered top-right corner is old/empty space. */
.console-wrap { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.console-badges { position: absolute; top: 10px; right: 16px; z-index: 5; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.cbadge { box-sizing: border-box; margin: 0; height: 26px; display: inline-flex; align-items: center; gap: 6px; border-radius: 20px; padding: 0 11px; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; border: 1px solid; pointer-events: auto; white-space: nowrap; }
.cbadge svg { width: 14px; height: 14px; flex: none; stroke: currentColor; }
.cbadge > * { line-height: 1; }
.cbadge .cb-lbl { line-height: 1; }
.cbadge.err { background: #3F1212; border-color: #7F1D1D; color: #FCA5A5; }
.cbadge.err:hover { background: #511717; }
.cbadge.warn { background: #3A2E0B; border-color: #7C5A0F; color: #FCD34D; }
.cbadge.warn:hover { background: #4A3A10; }
.cbadge.hidden { display: none; }
/* Console issues popup */
.modal-ov { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.ci-modal { max-width: 640px; }
.ci-list { padding: 4px 18px; max-height: 60vh; overflow-y: auto; }
.ci-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.ci-row:last-child { border-bottom: none; }
.ci-text { flex: 1; min-width: 0; font-family: "JetBrains Mono", Consolas, monospace; font-size: 12px;
  line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.ci-text.err { color: #E8B4B4; } .ci-text.warn { color: #E8D2A0; }
.ci-ai { flex: none; }
.ci-empty { padding: 24px; text-align: center; color: var(--muted); }
/* ── Settings (Server / Integrations) ── */
.ss-card { margin-bottom: 16px; }
.ss-card h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
/* Integration card header: title/description left, switch right. */
.int-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.int-head h3 { margin: 0 0 4px; }
.int-head .ss-desc { margin: 0; }
.int-head .switch { margin-top: 3px; flex: none; }
.int-head .btn { flex: none; }
.wh-row { align-items: center; }
.wh-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-sub { font-size: 11px; color: var(--muted); }
.wh-ev { border-top: 1px solid var(--border); padding-top: 6px; margin-top: 6px; }
.wh-ev-fields { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.ss-card .ss-desc { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
.ss-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px; }
.ss-row:first-of-type { border-top: 0; }
.ss-k { color: var(--muted); flex: none; }
.ss-v { color: var(--foreground); min-width: 0; text-align: right; word-break: break-all;
  font-family: "JetBrains Mono", Consolas, monospace; font-size: 12.5px; }
.ss-args { width: 100%; min-height: 90px; resize: vertical; font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 12.5px; line-height: 1.5; }
.ss-vlabel { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .04em; }
/* Server settings redesign (handoff §2) */
.ss-info-head { margin-bottom: 14px; }
.ss-info-head .btn svg { width: 12px; height: 12px; }
.ss-hint { font-size: 11px; color: var(--muted-2); flex: none; white-space: nowrap; }
/* Server-information definition grid (hairlines via 1px gap over a bordered bg). */
.ss-def { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.ss-def-cell { background: var(--bg); padding: 11px 13px; min-width: 0; }
.ss-def-cell.full { grid-column: 1 / -1; }
.ss-def-k { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); }
.ss-def-v { font-size: 13.5px; margin-top: 3px; color: var(--foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-def-v.mono { font-family: "JetBrains Mono", Consolas, monospace; font-size: 13px; }
.ss-def-v.brand { color: rgb(var(--brand-light)); }
.ss-def-v.muted { color: var(--muted); }
/* Update + danger zone, side by side. */
.ss-duo { display: flex; gap: 16px; margin-bottom: 16px; }
.ss-duo .ss-card { flex: 1; min-width: 0; margin-bottom: 0; display: flex; flex-direction: column; }
.ss-grow { flex: 1; }
.ss-update-row { display: flex; gap: 8px; align-items: center; }
.ss-version-wrap { flex: 1; min-width: 0; }
.ss-update-row .btn { flex: none; }
.ss-self-start { align-self: flex-start; }
.ss-card.danger { border-color: rgba(248,113,113,.25); background: rgba(248,113,113,.04); }
.ss-card.danger h3 { color: var(--red); }
@media (max-width: 720px) { .ss-duo { flex-direction: column; } }
.ss-def.cols3 { grid-template-columns: repeat(3, 1fr); }

/* Server information card - matches the desktop app (status badge + single-column
   definition rows + footer with uptime). */
.ss-info-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ss-state { display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 20px; border: 1px solid; }
.ss-state .led { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ss-state.on  { color: var(--green, #34d399); background: rgba(52,211,153,.06); border-color: rgba(52,211,153,.28); }
.ss-state.on .led { background: var(--green, #34d399); animation: ledPulse 1.5s ease-in-out infinite; }
.ss-state.off { color: #f87171; background: rgba(248,113,113,.06); border-color: rgba(248,113,113,.28); }
.ss-state.off .led { background: #f87171; }

.ss-deflist { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.ss-drow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px; border-bottom: 1px solid var(--border); }
.ss-drow:last-child { border-bottom: 0; }
.ss-drow .ss-def-k { margin: 0; flex: none; }
.ss-drow .ss-def-v { margin: 0; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-gameval { display: inline-flex; align-items: center; gap: 8px; }
.ss-gico { position: relative; overflow: hidden; width: 16px; height: 16px; border-radius: 4px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; }
.ss-gico svg { width: 11px; height: 11px; }
.ss-gico .gico-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.ss-info-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.ss-uptime { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.ss-uptime svg { width: 13px; height: 13px; color: var(--muted); }
.ss-uptime .lbl { color: var(--muted); }
.ss-up-val { color: var(--green, #34d399); font-weight: 600; font-family: "JetBrains Mono", Consolas, monospace; }
.ss-uptime.hidden { display: none; }

/* Integrations redesign (§4) */
.pw-addr-box { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px 13px;
  border-radius: 10px; background: var(--bg); border: 1px solid var(--border); }
.pw-addr-k { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); flex: none; }
.pw-addr-v { font-family: "JetBrains Mono", Consolas, monospace; font-size: 13px; color: rgb(var(--brand-light)); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pw-copy { width: 28px; height: 28px; flex: none; }
.wh-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.wh-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border); }
.wh-ico { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
.wh-ico svg { width: 17px; height: 17px; }
.wh-off { font-size: 11px; font-weight: 500; color: var(--muted-2); }
.conn-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px;
  background: rgba(52,211,153,.12); color: var(--green); font-size: 11px; font-weight: 700; }
.conn-badge .led { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
/* Schedule action badges (redesign §7) */
.act-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 7px;
  font-size: 11.5px; font-weight: 700; text-transform: capitalize; }
.act-badge.indigo { background: rgba(99,120,255,.15); color: rgb(var(--brand-light)); }
.act-badge.green  { background: rgba(52,211,153,.14); color: var(--green); }
.act-badge.red    { background: rgba(248,113,113,.14); color: var(--red); }
.act-badge.grey   { background: var(--surface-3); color: var(--muted); }
.act-pro { display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 5px; background: rgba(255,196,64,.12); color: #ffd45e; border: 1px solid rgba(255,196,64,.3); font-size: 9px; font-weight: 800; letter-spacing: .08em; vertical-align: middle; position: relative; overflow: hidden; }
.act-pro::after {
  content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 16px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-20px) skewX(-18deg);
  animation: hdrPlanShine 3.2s ease-in-out infinite;
}
tr.sc-off { opacity: .5; }
select.input { width: 100%; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
select.input option { background: var(--surface-1); color: var(--foreground); }

/* CPU / RAM gauges above the console */
.metrics { display: flex; gap: 28px; flex: none; margin-bottom: 12px; cursor: pointer;
  background: #000; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; }
.metric { flex: 1; min-width: 0; }
.metric-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.metric-top span:first-child { font-size: 11.5px; font-weight: 600; color: #9ca3af; }
.metric-val { font-size: 11.5px; font-weight: 600; color: #e5e7eb;
  font-family: "JetBrains Mono", Consolas, monospace; }
.metric-track { height: 6px; border-radius: 3px; background: #161616; overflow: hidden; }
.metric-fill { height: 100%; width: 0; border-radius: 3px; background: var(--green); transition: width .4s ease; }
/* Clicking the card toggles .expanded. One graph at a time: collapsed shows
   the progress bar, expanded hides it and shows the taller line graph. */
.metric-spark { display: none; width: 100%; height: 90px; margin-top: 7px; overflow: visible; }
.metrics.expanded .metric-track { display: none; }
.metrics.expanded .metric-spark { display: block; }
.spark-line { fill: none; stroke: var(--green); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.spark-area { fill: var(--green); opacity: .12; stroke: none; }

.cmdbar { display: flex; gap: 10px; margin-top: 14px; flex: none; }
.cmdbar .input { font-family: "JetBrains Mono", Consolas, monospace; background: #000; }
.cmdbar .input:disabled { opacity: .5; }
/* Connection status under the command box */
.conn-status { display: flex; align-items: center; gap: 7px; margin-top: 10px; flex: none; }
.conn-status #conn-text { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); flex: none; transition: background .2s; }
.live-dot.ok { background: var(--green); box-shadow: 0 0 8px var(--green); }
.live-dot.bad { background: var(--red); }

/* ── File manager ── */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); margin-bottom: 16px; flex: none; }
.crumbs a { cursor: pointer; color: var(--muted); padding: 2px 4px; border-radius: 6px; }
.crumbs a:hover { color: var(--foreground); background: var(--surface-2); }
.crumbs .sep { opacity: .4; }
.filelist { border: 1px solid var(--border); border-radius: var(--radius); overflow-y: auto; background: var(--surface-1); flex: 1; min-height: 0; transition: border-color .12s, background .12s; }
.filelist.dropping { border-color: rgb(var(--brand) / .7); background: rgb(var(--brand) / .05); box-shadow: inset 0 0 0 1px rgb(var(--brand) / .4); }
.frow { display: flex; align-items: center; gap: 12px; padding: 10px 15px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.frow:last-child { border-bottom: none; }
.frow:hover { background: var(--surface-2); }
.frow .fname { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.frow .fname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow.clickable .fname { cursor: pointer; }
.frow .fname svg { color: var(--muted); }
.frow.dir .fname svg { color: rgb(var(--brand-light)); }
.frow .fsize { color: var(--muted); font-size: 12px; width: 84px; text-align: right; flex: none; }
.iconbtn { padding: 6px; border-radius: 8px; border: none; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; }
.iconbtn:hover { background: var(--surface-3); color: var(--foreground); }
.iconbtn.danger:hover { color: var(--red); }
.frow .dots { flex: none; width: 30px; opacity: 0; transition: opacity .12s; }
.frow:hover .dots { opacity: 1; }
.frow .dots svg circle { fill: currentColor; stroke: none; }
/* File manager redesign (§5): folder/file tiles + column header. */
.ftile { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ftile svg { width: 17px; height: 17px; }
.ftile.dir { background: rgba(99,120,255,.12); color: rgb(var(--brand-light)); }
.ftile.file { background: var(--surface-2); border: 1px solid var(--border); color: #cfcfcf; }
.ftile.file svg { width: 16px; height: 16px; }
.ftile.up { color: var(--muted); }
.frow.fhead { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-2); border-bottom: 1px solid var(--border); cursor: default; }
.frow.fhead:hover { background: transparent; }
.frow.fhead .fsize { color: var(--muted-2); }
.frow.fhead > div:last-child { width: 30px; flex: none; }

/* ── Modal overlay ── */
.modal-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.6); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 20px; animation: ctx-in .12s ease; }
.modal { width: 100%; max-width: 440px; background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.modal.wide { max-width: 620px; }
.modal-head { display: flex; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; flex: 1; }
.modal-body { padding: 18px; max-height: 60vh; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); }
.perm-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.perm-row:last-child { border-bottom: none; }
.perm-row > label:not(.switch) { flex: 1; font-size: 14px; cursor: pointer; }
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .track { position: absolute; inset: 0; background: var(--surface-3); border-radius: 999px; transition: background .15s; cursor: pointer; }
.switch .track::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s, background .15s; }
.switch input:checked + .track { background: #fff; }
.switch input:checked + .track::before { transform: translateX(18px); background: #000; }

/* ── Context menu (OLED) ── */
.ctxmenu {
  position: fixed; z-index: 300; min-width: 176px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 11px; padding: 6px; box-shadow: var(--shadow);
  animation: ctx-in .1s ease;
}
@keyframes ctx-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ctxmenu button {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px;
  border: none; background: transparent; color: var(--foreground); font-size: 13px;
  border-radius: 8px; cursor: pointer; text-align: left;
}
.ctxmenu button:hover { background: var(--surface-3); }
.ctxmenu button.danger { color: var(--red); }
.ctxmenu button.danger:hover { background: rgba(248,113,113,.12); }
.ctxmenu button svg { width: 15px; height: 15px; color: var(--muted); }
.ctxmenu button.danger svg { color: var(--red); }
.ctxmenu .sep { height: 1px; background: var(--border); margin: 5px 6px; }

/* ── Editor (CodeMirror) ── */
.editor-shell { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.CodeMirror { font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace; font-size: 12.7px; line-height: 1.55; }
.editor-shell .CodeMirror { height: 100% !important; flex: 1; min-height: 0; }
.db-sqlpanel .CodeMirror {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 12.5px; padding: 4px 2px;
}
.db-sqlpanel .cm-s-material-darker.CodeMirror,
.db-sqlpanel .cm-s-material-darker .CodeMirror-gutters { background: var(--surface-1) !important; }
.db-sqlpanel .CodeMirror-focused { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08); }

/* SQL autocomplete dropdown (OLED) */
.CodeMirror-hints {
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: var(--shadow); font-family: "JetBrains Mono", Consolas, monospace; font-size: 12.5px;
  padding: 5px; z-index: 400; max-height: 240px;
}
.CodeMirror-hint { color: var(--foreground); padding: 5px 11px; border-radius: 7px; }
li.CodeMirror-hint-active { background: rgb(var(--brand)); color: #fff; }
.cm-s-material-darker.CodeMirror, .cm-s-material-darker .CodeMirror-gutters { background: #000 !important; border: none; }
.cm-s-material-darker .CodeMirror-gutters { border-right: 1px solid var(--border); }
.cm-s-material-darker .CodeMirror-linenumber { color: #3a3a3a; }
.cm-s-material-darker .CodeMirror-cursor { border-left: 1.5px solid rgb(var(--brand-light)); }
.CodeMirror-dialog { background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--foreground); font-family: Inter, sans-serif; }
.CodeMirror-dialog input { background: var(--surface-1); border: 1px solid var(--border-strong); color: var(--foreground); border-radius: 6px; padding: 4px 8px; outline: none; }

/* ── Table (users) ── */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.tbl tr:last-child td { border-bottom: none; }
.chk { display: inline-flex; width: 19px; height: 19px; align-items: center; justify-content: center; border-radius: 6px; background: var(--surface-3); color: var(--muted-2); }
.chk.yes { background: rgb(var(--brand) / .16); color: rgb(var(--brand-light)); }

/* ── Database browser ── */
.sel { width: auto; min-width: 140px; max-width: 220px; padding: 8px 30px 8px 11px; font-size: 13px;
  appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8b8b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; }
.db-sqlpanel { flex: none; margin-bottom: 16px; }
.db-sqlpanel textarea { min-height: 96px; resize: vertical; font-family: "JetBrains Mono", Consolas, monospace; font-size: 12.5px; }
.db-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex: none; }
.db-toolbar .tag { display: inline-flex; align-items: center; gap: 8px; }
.db-search { flex: 1; min-width: 150px; max-width: 340px; }
.db-search .input { padding: 8px 12px; font-size: 13px; }
.db-results { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); }
.db-results table { border-collapse: collapse; width: 100%; }
.db-results th {
  position: sticky; top: 0; z-index: 1; background: var(--surface-2); text-align: left;
  padding: 10px 14px; border-bottom: 1px solid var(--border-strong); white-space: nowrap;
  font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .02em; user-select: none;
}
.db-results th.sortable { cursor: pointer; }
.db-results th.sortable:hover { color: var(--foreground); background: var(--surface-3); }
.db-results th.active { color: rgb(var(--brand-light)); }
.db-results td {
  padding: 8px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;
  max-width: 360px; overflow: hidden; text-overflow: ellipsis;
  font-family: "JetBrains Mono", Consolas, monospace; font-size: 12.3px;
}
.db-results tbody tr:nth-child(even) td { background: rgba(255,255,255,.012); }
.db-results tbody tr:hover td { background: var(--surface-2); }
.db-results td.null { color: var(--muted-2); font-style: italic; }
.db-results td.editable { cursor: text; }
.db-results td.editable:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.db-results input.cell-edit {
  width: 100%; background: #000; border: 1px solid rgb(var(--brand) / .7); color: var(--foreground);
  border-radius: 5px; padding: 4px 7px; font-family: "JetBrains Mono", Consolas, monospace; font-size: 12.3px; outline: none;
}
.db-foot { display: flex; align-items: center; gap: 12px; padding-top: 14px; flex: none; font-size: 13px; color: var(--muted); }
.db-foot .btn svg { width: 14px; height: 14px; }

/* HeidiSQL-style layout, wrapped in ONE card (like the desktop app):
   tree | separator | toolbar + results, all inside the same surface. */
.db-layout {
  flex: 1; min-height: 0; display: flex; gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-1); overflow: hidden;
}
.db-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 12px; }
.db-layout .db-results { border: none; border-radius: 0; background: transparent; }
.db-tree { width: 242px; flex: none; overflow: auto; padding: 8px; border-right: 1px solid var(--border); }
.dbm-statusrow { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dbm-statusrow select { max-width: 220px; margin-left: auto; padding: 8px 12px; font-size: 13px; }
.db-node-head {
  display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 8px;
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--foreground); user-select: none;
}
.db-node-head:hover { background: var(--surface-2); }
.db-node-head svg { width: 14px; height: 14px; color: var(--muted); }
.db-node-head svg:first-child { width: 11px; height: 11px; transform: rotate(-90deg); transition: transform .15s; }
.db-node.open > .db-node-head svg:first-child { transform: rotate(0deg); }
.db-node-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-node-kids { margin: 2px 0 6px 15px; border-left: 1px solid var(--border); padding-left: 6px; display: flex; flex-direction: column; gap: 1px; }
.db-leaf {
  display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; color: var(--muted); font-family: "JetBrains Mono", Consolas, monospace; user-select: none;
}
.db-leaf:hover { background: var(--surface-2); color: var(--foreground); }
.db-leaf.active { background: rgb(var(--brand) / .12); color: #fff; }
.db-leaf.active svg { color: rgb(var(--brand-light)); }
.db-leaf svg { width: 13px; height: 13px; flex: none; }
.db-leaf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-node-loading { font-size: 11.5px; color: var(--muted-2); padding: 6px 9px; }
@media (max-width: 860px) { .db-tree { width: 180px; } }

/* Key glyphs in the results header (yellow = primary key) */
.db-results th .db-key { width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.db-results th .db-key.pk { stroke: #fbbf24; }
.db-results th .db-key.unique { stroke: #c7c7cf; }
.db-results th .db-key.index { stroke: #5f5f5f; }

/* Table designer (HeidiSQL-style column editor) */
.dbd-toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
.dbd-labels, .dbd-row { display: grid; grid-template-columns: 34px 1fr 130px 70px 44px 130px; gap: 8px; align-items: center; }
.dbd-labels { padding: 0 6px 6px; font-size: 11px; font-weight: 700; color: var(--muted); }
.dbd-labels span:first-child, .dbd-labels span:nth-child(5) { text-align: center; }
.dbd-rows { display: flex; flex-direction: column; gap: 4px; max-height: 380px; overflow: auto; }
.dbd-row { padding: 4px 6px; border-radius: 8px; cursor: pointer; }
.dbd-row.on { background: rgb(var(--brand) / .12); }
.dbd-row .input { padding: 7px 10px; font-size: 12.5px; }
.dbd-row .dbd-name, .dbd-row .dbd-def { font-family: "JetBrains Mono", Consolas, monospace; }
.dbd-key { width: 28px; height: 28px; border-radius: 7px; background: transparent; border: none; cursor: pointer; display: grid; place-items: center; }
.dbd-key svg { width: 13px; height: 13px; stroke: #3a3a3a; }
.dbd-key.on svg { stroke: #fbbf24; }
.dbd-key:hover { background: var(--surface-2); }
.dbd-null { accent-color: #6378ff; justify-self: center; width: 15px; height: 15px; margin: 0; }

/* MySQL status chip in the Database sec-head */
.db-status {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.db-status .db-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); flex: none; }
.db-status.on { color: var(--green); border-color: rgba(52, 211, 153, .25); }
.db-status.on .db-status-dot { background: var(--green); }

/* Database "Manage" modal: databases + users side by side, row cards. */
.dbm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .dbm-grid { grid-template-columns: 1fr; } }
.dbm-col h4 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--foreground); }
.dbm-create { display: flex; gap: 8px; margin-bottom: 10px; }
.dbm-create .input { flex: 1; min-width: 0; padding: 8px 12px; font-size: 13px; }
.dbm-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow: auto; }
.dbm-list .empty { padding: 14px 4px; font-size: 12px; color: var(--muted-2); }
.dbm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #101010; border: 1px solid #1f1f1f; border-radius: 10px; padding: 9px 12px;
}
.dbm-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dbm-name {
  font-family: "JetBrains Mono", Consolas, monospace; font-size: 13px; font-weight: 600;
  color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dbm-sub { font-size: 11px; color: var(--muted); }
.dbm-actions { display: flex; gap: 6px; flex: none; }
.dbm-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 12px 0 6px; }
.dbm-privs {
  display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow: auto;
  border: 1px solid var(--border); border-radius: 10px; padding: 6px; background: var(--surface-1);
}
.dbm-priv {
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.dbm-priv:hover { background: var(--surface-2); }
.dbm-priv input { accent-color: #6378ff; }
.dbm-priv-name { color: var(--foreground); font-weight: 500; }
.dbm-priv-desc { color: var(--muted); font-size: 11.5px; text-align: right; }
.dbm-priv input:disabled ~ .dbm-priv-name,
.dbm-priv input:disabled ~ .dbm-priv-desc { opacity: 0.45; }

/* ── Backups quota + progress ── */
.bk-quota-card { padding: 16px 18px; margin-bottom: 16px; }
.bk-quota-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13.5px; }
.bk-bar { height: 8px; flex: none; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.bk-bar-fill { height: 8px; background: #fff; border-radius: 999px; transition: width .3s; }
.bk-bar-fill.full { background: var(--red); }
.bk-bar-fill.indet { width: 35% !important; background: #fff; animation: indet 1.1s ease-in-out infinite; }
@keyframes indet { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.bk-progress { flex: none; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; }

/* ── Config (one card per parameter) ── */
.cfg-source { margin-bottom: 22px; }
.cfg-title { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700;
  color: var(--foreground); font-family: "JetBrains Mono", Consolas, monospace; margin-bottom: 14px; }
.cfg-title svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.cfg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.cfg-card { padding: 16px; }
.cfg-field { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.cfg-field .switch { margin-top: 2px; }
.cfg-label { font-size: 13.5px; font-weight: 600; color: var(--foreground); display: flex; flex-direction: column; gap: 3px; }
.cfg-desc { font-size: 11.5px; font-weight: 400; color: var(--muted); line-height: 1.45; }
.cfg-field .input { padding: 9px 11px; font-size: 13px; margin-top: auto; }
/* Config segmented control (redesign §8: Server | Geyser) */
.cfg-head { gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 9px;
  background: var(--surface-1); border: 1px solid var(--border-strong); }
.seg-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 0; border-radius: 7px; background: transparent; color: var(--muted);
  font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.seg-btn svg { width: 13px; height: 13px; }
.seg-btn:hover { color: var(--foreground); }
.seg-btn.active { background: rgba(99,120,255,.15); color: rgb(var(--brand-light)); }
.cfg-geyser-note { font-size: 11.5px; color: var(--muted); margin: 0 0 16px; line-height: 1.5; }

/* ── Users ── */
.ulist { display: flex; flex-direction: column; gap: 10px; }
.urow { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); }
.urow:hover { border-color: var(--border-strong); }
.uavatar { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--muted); flex: none; }
.uemail { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }

/* ── Plugins ── */
/* Plugins: 2-col install-card grid (redesign §6). */
/* auto-fill so the catalogue reflows 2 -> 1 columns on its own as the window shrinks */
.pl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; align-content: start; }
@media (max-width: 720px) { .pl-list { grid-template-columns: 1fr; } }
.pl-card { display: flex; align-items: center; gap: 13px; padding: 14px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 13px; }
.pl-card:hover { border-color: var(--border-strong); }
.pl-icon { width: 38px; height: 38px; border-radius: 9px; background: var(--surface-3); display: grid; place-items: center; flex: none; overflow: hidden; }
.pl-icon img { width: 100%; height: 100%; object-fit: cover; }
.pl-icon svg { color: var(--muted); }
.pl-meta { flex: 1; min-width: 0; }
.pl-name { font-size: 14.5px; font-weight: 600; }
.pl-card.clickable { cursor: pointer; }
.pl-card.clickable:hover { background: var(--surface-2); }
.pl-info-head { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.pl-icon.lg { width: 60px; height: 60px; border-radius: 12px; }
.pl-info-name { font-size: 17px; font-weight: 700; }
.pl-info-desc { font-size: 13.5px; line-height: 1.6; color: var(--muted); white-space: pre-wrap; word-break: break-word; }
.pl-info-desc h2, .pl-info-desc h3, .pl-info-desc h4 { color: var(--foreground); margin: 14px 0 6px; white-space: normal; }
.pl-info-desc h2 { font-size: 16px; } .pl-info-desc h3 { font-size: 14.5px; } .pl-info-desc h4 { font-size: 13px; }
.pl-info-desc img { max-width: 100%; border-radius: 8px; margin: 6px 0; }
.pl-info-desc a { color: rgb(var(--brand-light)); }
.pl-info-desc code { background: var(--surface-3); padding: 1px 5px; border-radius: 5px; font-size: 12px; }
.pl-info-desc strong { color: var(--foreground); }
.pl-info .tag { display: inline-flex; align-items: center; gap: 5px; }

/* ── Weekday checkboxes (white-checked, black check) ── */
.dow-row { display: flex; flex-wrap: wrap; gap: 8px; }
.dow { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface-1); user-select: none; }
.dow input { position: absolute; top: 0; left: 0; opacity: 0; width: 0; height: 0; margin: 0; }
.dow .cbx { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--muted-2); display: inline-grid; place-items: center; flex: none; box-sizing: border-box; transition: background .12s, border-color .12s; }
.dow input:checked + .cbx { background: #fff; border-color: #fff; }
.dow input:checked + .cbx::after { content: ""; width: 8px; height: 4px; border: 2px solid #000; border-top: 0; border-right: 0; transform: rotate(-45deg) translateY(-1px); }
.dow input:focus-visible + .cbx { outline: 2px solid rgb(var(--brand)); outline-offset: 2px; }
.dow:has(input:checked) { border-color: #fff; background: var(--surface-2); }

/* ── Schedules form ── */
.sc-form { flex: none; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; margin-bottom: 4px; }
.sc-form .field { margin-bottom: 0; }
.sc-form .field span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 9px; }
.sc-form .input { padding: 9px 11px; font-size: 13px; }
tr.sc-off td { opacity: .5; }

/* ── AI Assistant (side drawer) ── */
/* Floating toggle - bottom-right, like a tab pinned to the side. */
.ai-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: #fff; color: #000; display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow); transition: transform .15s, background .15s;
}
.ai-fab:hover { transform: translateY(-2px); }
.ai-fab svg { width: 22px; height: 22px; }

.ai-drawer {
  position: fixed; top: 0; right: 0; height: 100dvh; width: 380px; max-width: 92vw; z-index: 95;
  background: #000; border-left: 1px solid var(--border-strong);
  display: flex; flex-direction: column; padding: 14px 14px 12px;
  box-shadow: -18px 0 50px rgba(0,0,0,.6); animation: ai-slide .22s ease;
}
@keyframes ai-slide { from { transform: translateX(20px); opacity: .4; } to { transform: none; opacity: 1; } }
/* On desktop, shift the section content left while the drawer is open so its
   right-side controls aren't covered. On mobile the drawer is full-screen. */
.content { transition: margin-right .22s ease; }
/* Smooth page/section transitions: fade + slight rise on newly rendered content. */
@keyframes scPageIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
#section-host > *, #view-servers.wrap, #view-server.shell { animation: scPageIn .2s ease-out; }
/* Reusable: re-trigger the same transition on any element shown on demand
   (e.g. switching the Config Server/Geyser tab, or future segmented panes). */
.sc-in { animation: scPageIn .2s ease-out; }
@media (min-width: 821px) {
  body.ai-open .content { margin-right: 392px; }
  /* Dock the drawer BELOW the sticky topbar so the header (AI button, Discord,
     account avatar) stays visible and clickable instead of being covered. */
  .ai-drawer { top: 58px; height: calc(100dvh - 58px); }
}

.ai-head { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.ai-title { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--foreground); }
.ai-title svg { width: 16px; height: 16px; }
/* Drawer-head buttons (more / new chat / close) use the bright foreground colour
   so they're obvious - especially the close (x) on the full-screen mobile drawer. */
.ai-head .iconbtn { width: 30px; height: 30px; color: var(--foreground); }
.ai-head #ai-close:hover { background: var(--surface-3); color: var(--red); }
.ai-menu-wrap { position: relative; }
.ai-menu { position: absolute; top: 34px; right: 0; z-index: 10; min-width: 170px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px; padding: 5px; box-shadow: var(--shadow); }
.ai-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; font-size: 12.5px;
  background: transparent; border: 0; color: var(--foreground); border-radius: 7px; cursor: pointer; text-align: left; }
.ai-menu button:hover { background: var(--surface-3); }
.ai-menu svg { width: 14px; height: 14px; opacity: .85; }

.ai-chat { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 8px; }
.ai-empty { margin: auto; text-align: center; color: var(--muted); display: grid; place-items: center; gap: 8px; max-width: 300px; padding: 30px 0; }
.ai-empty svg { width: 34px; height: 34px; opacity: .4; }
.ai-empty-h { font-size: 14px; font-weight: 600; color: var(--muted-2); }
.ai-empty-s { font-size: 11.5px; color: var(--muted); }
.ai-msg { max-width: 86%; padding: 9px 12px; border-radius: 13px; font-size: 13px; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; }
.ai-msg.ai-user { align-self: flex-end; background: #fff; color: #000; border-bottom-right-radius: 4px; }
.ai-msg.ai-bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.ai-msg.ai-bot p:first-child { margin-top: 0; } .ai-msg.ai-bot p:last-child { margin-bottom: 0; }
.ai-msg.ai-bot code { background: var(--surface-3); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.ai-msg.ai-bot pre { background: var(--surface-3); padding: 10px; border-radius: 8px; overflow-x: auto; }
.ai-msg.ai-bot h3, .ai-msg.ai-bot h4 { margin: 8px 0 4px; font-size: 14px; }
.ai-msg.ai-bot a { color: rgb(var(--brand)); }
/* typing dots */
.ai-msg.typing { display: inline-flex; gap: 4px; align-items: center; }
.ai-msg.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: ai-blink 1.2s infinite both; }
.ai-msg.typing span:nth-child(2) { animation-delay: .2s; } .ai-msg.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes ai-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.ai-msg.ai-tool { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; font-size: 12px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 9px; max-width: 100%; }
.ai-msg.ai-tool svg { width: 15px; height: 15px; flex: none; opacity: .8; }
.ai-msg.ai-tool span { font-weight: 600; }
.ai-msg.ai-tool em { color: var(--muted); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-msg.ai-tool.ok { border-color: rgba(74,222,128,.35); }
.ai-msg.ai-tool.err { border-color: rgba(248,113,113,.45); }
.ai-msg.ai-tool.err em { color: var(--red); }
.ai-msg.ai-tool.warn { border-color: rgba(250,204,21,.4); }

/* input row: textarea + square white send */
.ai-inputrow { display: flex; gap: 8px; align-items: flex-end; padding-top: 8px; }
#ai-input { flex: 1; resize: none; background: #101010; border: 1px solid #1f1f1f; color: var(--foreground);
  font-size: 13px; border-radius: 10px; padding: 11px 12px; font-family: inherit; line-height: 1.4; max-height: 120px; }
#ai-input:focus { outline: none; border-color: #fff; }
.ai-sendbtn { width: 40px; height: 40px; flex: none; border: 0; border-radius: 10px; background: #fff; color: #000;
  display: grid; place-items: center; cursor: pointer; }
.ai-sendbtn:hover { background: #e5e7eb; }
.ai-sendbtn:disabled { background: #1f1f1f; color: var(--muted); cursor: default; }
.ai-sendbtn svg { width: 16px; height: 16px; }

/* footer: approval-mode switch + circular ring (token info on hover) */
.ai-foot { display: flex; align-items: center; gap: 8px; padding-top: 8px; }
.ai-approval { background: transparent; border: 0; color: var(--muted-2); font-size: 11px; cursor: pointer; padding: 3px 4px; border-radius: 5px; }
.ai-approval:hover { background: var(--surface-2); }
.ai-approval .danger, #ai-mode-menu .danger { color: #FCA5A5; }
.ai-menu.up { top: auto; bottom: 30px; }
.ai-ring { position: relative; width: 22px; height: 22px; flex: none; }
.ai-ring svg { width: 22px; height: 22px; }
.ai-ring-track { fill: none; stroke: var(--surface-3); stroke-width: 4; }
.ai-ring-fill { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .4s ease; }
.ai-ring.hot .ai-ring-fill { stroke: var(--red); }
/* token info as a hover tooltip over the ring (like the desktop app) */
.ai-ring-tip {
  position: absolute; bottom: 30px; right: 0; white-space: nowrap;
  background: var(--surface-3); border: 1px solid var(--border-strong); color: var(--foreground);
  font-size: 11px; padding: 5px 9px; border-radius: 7px; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .12s, transform .12s;
}
.ai-ring:hover .ai-ring-tip { opacity: 1; transform: none; }

/* approval card (Ask / Safe modes) */
.ai-msg.ai-approval { align-self: stretch; max-width: 100%; background: var(--surface-1); border: 1px solid rgb(var(--brand) / .45);
  border-radius: 11px; padding: 11px 13px; display: flex; flex-direction: column; gap: 8px; }
.ai-appr-title { font-size: 12.5px; font-weight: 600; }
.ai-appr-prev { margin: 0; background: var(--surface-3); border-radius: 7px; padding: 8px; font-size: 11.5px;
  max-height: 140px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.ai-appr-btns { display: flex; gap: 8px; }
.ai-msg.ai-approval.approved { border-color: rgba(74,222,128,.5); opacity: .8; }
.ai-msg.ai-approval.rejected { border-color: rgba(248,113,113,.5); opacity: .8; }

/* history list */
.ai-hist { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; }
.ai-hist-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 9px; cursor: pointer; text-align: left; color: var(--foreground); }
.ai-hist-item:hover { border-color: var(--border-strong); background: var(--surface-2); }
.ai-hist-title { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-hist-date { font-size: 11px; flex: none; }

/* ── Misc ── */
.empty { color: var(--muted); padding: 44px; text-align: center; }
/* Material-style white spinner */
.loading { display: grid; place-items: center; padding: 50px; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.14); border-top-color: #fff; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* In-button spinner (Start/Stop) - inherits the button's text colour, so it's
   red on the Stop button and black on Start. The button is locked while loading. */
.btn.btn-loading { pointer-events: none; }
.btn-spin { display: inline-block; width: 15px; height: 15px; border-radius: 50%;
  border: 2.5px solid currentColor; border-top-color: transparent; animation: spin .7s linear infinite; }
#u-body, #sc-body, #bk-body { flex: 1; min-height: 0; overflow-y: auto; }
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--surface-3); border: 1px solid var(--border-strong); color: var(--foreground);
  padding: 11px 18px; border-radius: var(--radius-sm); font-size: 13px; z-index: 200; box-shadow: var(--shadow);
}
.toast.err { border-color: rgba(248,113,113,.4); color: var(--red); }

/* ── Floating upload panel (survives view switches) ── */
.uppanel {
  position: fixed; right: 22px; bottom: 22px; z-index: 250; width: 340px; max-width: calc(100vw - 32px);
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.up-head { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-bottom: 1px solid var(--border); }
.up-title { font-size: 13px; font-weight: 600; color: var(--foreground); }
.up-head .iconbtn { width: 26px; height: 26px; }
.up-bar { height: 4px; background: var(--surface-1); }
.up-bar span { display: block; height: 100%; background: rgb(var(--brand)); transition: width .15s ease; }
.up-list { max-height: 240px; overflow-y: auto; padding: 4px 0; }
.up-row { display: flex; align-items: center; gap: 10px; padding: 7px 13px; font-size: 12.5px; }
.up-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.up-row.uploading .up-name, .up-row.done .up-name { color: var(--foreground); }
.up-pct { flex: none; font-family: "JetBrains Mono", Consolas, monospace; font-size: 11.5px; color: rgb(var(--brand-light)); }
.up-ok { flex: none; display: inline-flex; color: var(--green); }
.up-ok svg { width: 15px; height: 15px; }
.up-err { flex: none; font-weight: 700; color: var(--red); width: 15px; text-align: center; }
.placeholder { display: grid; place-items: center; flex: 1; min-height: 0; text-align: center; color: var(--muted); }
.placeholder svg { width: 42px; height: 42px; opacity: .35; margin-bottom: 16px; }

/* ── Mobile ── */
@media (max-width: 820px) {
  .hamburger { display: inline-flex; }
  .shell { display: block; }
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100%; z-index: 90; width: 264px;
    transform: translateX(-100%); transition: transform .22s ease; padding-top: 18px;
    box-shadow: var(--shadow);
  }
  body.drawer-open .sidebar { transform: translateX(0); }
  body.drawer-open .scrim { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.55); }
  .content { padding: 18px 16px; height: calc(100dvh - 58px); }
  .sec-head { flex-wrap: wrap; }
  .wrap { padding: 22px 16px 60px; }
  .grid { grid-template-columns: 1fr; }
  .ai-drawer { width: 100%; max-width: 100%; }
  .ai-fab { right: 16px; bottom: 16px; }
  .frow .fsize { display: none; }
  .frow .dots { opacity: 1; }
  .console-layout { flex-direction: column; }
  .console-side { width: 100%; order: -1; }
  .info-card { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .info-card .info-row { flex: 1; }
}

/* ═══════════════ Create Server (owner-only) ═══════════════ */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 4px 0 22px; }
.page-head .page-title { margin: 0; }
.create-btn { flex: none; }
.create-btn svg { width: 15px; height: 15px; }
.create-btn.hidden { display: none; }

.cs-modal { max-width: 720px; display: flex; flex-direction: column; max-height: 88vh;
  background: linear-gradient(180deg, #121212, #0a0a0a);
  border: 1px solid rgba(255,255,255,.13); border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.cs-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px;
  border-bottom: 1px solid var(--border); }
/* Step 2: round-square back arrow at the far left of the header row. */
.cs-head-back { flex: none; width: 32px; height: 32px; padding: 0; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: 9px; background: #141414; color: var(--muted); }
.cs-head-back:hover { background: var(--surface-3); border-color: rgba(255,255,255,.25); color: var(--foreground); }
.cs-head-back svg { width: 16px; height: 16px; }
.cs-head-ico { position: relative; width: 38px; height: 38px; flex: none; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; color: var(--muted);
  background: #141414; border: 1px solid var(--border); }
.cs-head-ico svg { width: 22px; height: 22px; }
.cs-head-ico .gico-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cs-head-txt { flex: 1; min-width: 0; }
.cs-head h3 { margin: 0; font-size: 19px; font-weight: 750; letter-spacing: -0.02em; }
.cs-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }

.cs-body { padding: 20px; overflow-y: auto; min-height: 240px; }

/* Step 1 - search + game grid */
.cs-search { position: relative; display: flex; align-items: center; margin-bottom: 16px; }
.cs-search svg { position: absolute; left: 13px; width: 16px; height: 16px; color: var(--muted-2);
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.cs-search input { width: 100%; padding: 11px 13px 11px 38px; border-radius: 8px;
  background: #141414; border: 1px solid rgba(255,255,255,.13); color: var(--foreground);
  font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s; }
.cs-search input:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.cs-search input::placeholder { color: var(--muted-2); }
.cs-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 26px 0; }
.cs-empty.hidden { display: none; }
/* Step 1 - portrait "case" grid (game cover art). */
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
.cs-game { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 9px;
  padding: 0; border: 0; background: none; color: var(--foreground); cursor: pointer; }
.cs-game .cs-cover { position: relative; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border); display: grid; place-items: center;
  transition: transform .16s ease, border-color .16s, box-shadow .16s; }
.cs-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-cover-glyph { display: grid; place-items: center; color: rgba(255,255,255,.9); }
.cs-cover-glyph svg { width: 34px; height: 34px; }
.cs-cover-glyph .gico-img { width: 44px; height: 44px; object-fit: contain; }
.cs-game:hover .cs-cover { transform: translateY(-4px); border-color: rgba(255,255,255,.35);
  box-shadow: 0 14px 34px rgba(0,0,0,.6); }
.cs-game:active .cs-cover { transform: translateY(-1px); }
/* Selection ring drawn INSIDE the cover as an overlay: an outer ring gets
   clipped by the scroll area / covered by neighbouring tiles and looked
   broken (an inset box-shadow would hide behind the cover image). */
.cs-game.picked .cs-cover { border-color: #fff; }
.cs-game.picked .cs-cover::after { content: ""; position: absolute; inset: 0;
  border: 2px solid #fff; border-radius: inherit; z-index: 3; pointer-events: none; }
.cs-game.dis { opacity: .35; cursor: not-allowed; }
.cs-game.dis .cs-cover { filter: grayscale(1); }
.cs-game.dis:hover .cs-cover { transform: none; border-color: var(--border); box-shadow: none; }
.cs-game-nm { font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.3; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Install screen still uses the small icon tile. */
.cs-game-ico { position: relative; width: 52px; height: 52px; border-radius: 13px; overflow: hidden;
  display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.cs-game-ico svg { width: 26px; height: 26px; }
.cs-game-ico .gico-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cs-game-ico.big { width: 60px; height: 60px; border-radius: 15px; }
.cs-game-ico.big svg { width: 30px; height: 30px; }
/* Merch pills: top-left of a cover, amber POPULAR + green NEW. */
.cs-game-pills { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; pointer-events: none; z-index: 2; }
/* Solid so they stay legible over cover art / banners. */
.cs-pill { font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .08em; line-height: 1;
  padding: 3px 7px; border-radius: 5px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.cs-pill.hot { background: #f6b73c; color: #1a1206; }
.cs-pill.new { background: #4ade80; color: #052e12; }

/* ── Step 2 - immersive backdrop (banner if present, else cover, always blurred) ──
   The blurred art lives in a fixed-height band that ends a bit below the floating
   cover; the veil fades it into the card colour so the form sits on the plain card. */
.cs-body-flush { padding: 0; }
/* Solid background for the whole step (NOT the modal gradient): the veil fades
   the banner into this exact colour, so the band's end is seamless. */
.cs-imm { position: relative; overflow: hidden; background: #0c0c0c; }
.cs-imm-band { position: absolute; top: 0; left: 0; right: 0; height: 224px; overflow: hidden; }
.cs-imm-bg { position: absolute; inset: -24px; background-size: cover; background-position: center;
  filter: blur(16px) saturate(1.12); opacity: .62; }
.cs-imm-veil { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,12,12,.35) 0%, rgba(12,12,12,.55) 50%, #0c0c0c 100%); }
.cs-imm-in { position: relative; padding: 14px 20px 22px; }
.cs-imm-top { display: flex; align-items: center; margin-bottom: 6px; }
.cs-imm-top .spacer { flex: 1; }
.cs-imm-btn { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 9px; color: #e8e8ea; border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,10,11,.5); backdrop-filter: blur(6px); transition: background .14s, border-color .14s; }
.cs-imm-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.cs-imm-btn svg { width: 16px; height: 16px; }
.cs-imm-hero { display: flex; gap: 16px; align-items: flex-end; margin: 4px 0 4px; }
.cs-imm-cover { position: relative; width: 96px; flex: none; aspect-ratio: 2 / 3; border-radius: 11px;
  overflow: hidden; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.22); box-shadow: 0 16px 40px rgba(0,0,0,.8); }
.cs-imm-cover .cs-cover-glyph svg { width: 30px; height: 30px; }
.cs-imm-cover .cs-cover-glyph .gico-img { width: 40px; height: 40px; object-fit: contain; }
.cs-imm-meta { min-width: 0; padding-bottom: 4px; }
.cs-imm-meta h3 { margin: 0 0 7px; font-size: 23px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; text-shadow: 0 2px 16px rgba(0,0,0,.9); }
.cs-imm-pills { display: inline-flex; gap: 5px; }
.cs-imm-desc { margin: 0; font-size: 12.5px; line-height: 1.55; color: #c7c7cf; max-width: 56ch;
  text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.cs-imm-sub { margin: 0; font-size: 12.5px; color: var(--muted); }
/* Clears the 224px banner band (hero ends ~200px): fields never sit on the art. */
.cs-imm .cs-form { margin-top: 44px; }
.cs-imm .cs-field input, .cs-imm .cs-field select { background: #141414; }

/* Step 2 - form */
.cs-form { display: flex; flex-direction: column; gap: 14px; }
.cs-field { display: flex; flex-direction: column; gap: 6px; }
.cs-field > span { font-size: 12px; font-weight: 600; color: var(--muted); }
.cs-field > span em { font-style: normal; color: var(--muted-2); font-weight: 500; }
.cs-field input, .cs-field select { width: 100%; padding: 11px 13px; border-radius: 8px;
  background: #141414; border: 1px solid rgba(255,255,255,.13); color: var(--foreground);
  font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s; color-scheme: dark; }
.cs-field input:focus, .cs-field select:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.cs-field input[readonly] { color: var(--muted); cursor: default; }
.cs-field select { cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.cs-field select option { background: var(--surface-1); color: var(--foreground); }
.cs-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Prerelease row: panel-standard toggle switch + label text. */
.cs-check { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); cursor: pointer; }

/* Icon-capable dropdown (custom combobox with per-option images) */
.cs-cbx { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 8px;
  background: #141414; border: 1px solid rgba(255,255,255,.13); color: var(--foreground); cursor: pointer;
  font-size: 14px; text-align: left; transition: border-color .15s, box-shadow .15s; }
.cs-cbx:hover { border-color: rgba(255,255,255,.25); }
.cs-cbx[aria-expanded="true"] { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.cs-cbx-cur { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.cs-cbx-cur .cs-opt-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-cbx-chev { width: 15px; height: 15px; flex: none; color: var(--muted); fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.cs-cbx[aria-expanded="true"] .cs-cbx-chev { transform: rotate(180deg); }
.cs-opt-ico { width: 20px; height: 20px; flex: none; border-radius: 5px; object-fit: contain; background: var(--surface-3); }
.cs-opt-ico.ph { background: transparent; }
.cs-cbx-pop { position: fixed; z-index: 320; padding: 6px; border-radius: 11px; max-height: 280px; overflow-y: auto;
  background: var(--surface-2); border: 1px solid var(--border-strong); box-shadow: var(--shadow); animation: ctx-in .1s ease; }
.cs-opt { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 9px; border: none; border-radius: 8px;
  background: transparent; color: var(--foreground); cursor: pointer; font-size: 13.5px; text-align: left; }
.cs-opt:hover { background: var(--surface-3); }
.cs-opt.on { background: var(--surface-3); }
.cs-opt .cs-opt-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-opt-chk { width: 15px; height: 15px; flex: none; color: rgb(var(--brand-light)); fill: none; stroke: currentColor;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cs-path-row { display: flex; gap: 8px; }
.cs-path-row input { flex: 1; min-width: 0; }
.cs-path-row .btn { flex: none; }
.cs-path-row .btn svg { width: 14px; height: 14px; }
.cs-hint { margin: 0; font-size: 11.5px; color: var(--muted-2); }
.cs-err { padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(248,113,113,.1);
  border: 1px solid rgba(248,113,113,.3); color: var(--red); font-size: 12.5px; }
.cs-err.hidden { display: none; }
/* Discord guild picker (Discord Bot server sidebar) */
/* Give the guild switcher breathing room below the server switcher above it. */
#side-guild-wrap { margin-top: 10px; }
#side-guild-wrap .srv-switch { width: 100%; }
#side-guild-wrap .srv-switch .id { min-width: 0; overflow: hidden; }
#side-guild-wrap .srv-switch .nm { font-size: 12.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guild-initial { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-size: 10px; font-weight: 700; color: var(--muted-2, #8B8B8B); background: #1A1A1A; border-radius: 6px; }
.guild-chev { width: 10px; height: 10px; color: #8B8B8B; flex: none; }
.guild-botin { width: 15px; flex: none; display: flex; align-items: center; }
.guild-botin svg { width: 15px; height: 12px; }
.guild-empty { padding: 8px 10px; font-size: 12px; color: var(--muted-2, #8B8B8B); max-width: 220px; }

/* Amber warning (e.g. "Discord account not connected") - same palette as the
   desktop create dialog's warning border. */
.cs-warnbox { padding: 12px 14px; border-radius: var(--radius-sm); background: #1A1208;
  border: 1px solid #92400E; font-size: 12.5px; }
.cs-warnbox b { color: #FBBF24; font-size: 13px; display: block; margin-bottom: 4px; }
.cs-warnbox p { margin: 0; color: #D97706; line-height: 1.45; }
.cs-hint a { color: #8294FF; }
/* Sticky footer under the scroll area (step 2: Cancel + Create server). */
.cs-footer { display: flex; align-items: center; gap: 10px; padding: 14px 20px;
  border-top: 1px solid var(--border); background: rgba(0,0,0,.3); }
.cs-footer .spacer { flex: 1; }
.cs-footer .btn svg { width: 14px; height: 14px; }
/* While the create call runs: the plus icon becomes a small dark spinner. */
#cs-create.loading svg { display: none; }
#cs-create.loading::before { content: ""; width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.25); border-top-color: #000; animation: spin .7s linear infinite; }

/* Path picker */
.cs-picker { display: flex; flex-direction: column; gap: 14px; }
.cs-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12.5px; }
.cs-crumb { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 3px 6px;
  border-radius: 6px; font-size: 12.5px; }
.cs-crumb:hover { background: var(--surface-2); color: var(--foreground); }
.cs-crumb.on { color: var(--foreground); }
.cs-crumb-sep { color: var(--muted-2); opacity: .6; }
.cs-dirs { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto;
  border: 1px solid rgba(255,255,255,.13); border-radius: 8px; background: #141414; }
.cs-dir { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border: none; background: transparent;
  color: var(--foreground); cursor: pointer; font-size: 13.5px; text-align: left; border-bottom: 1px solid var(--border); }
.cs-dir:last-child { border-bottom: none; }
.cs-dir:hover { background: var(--surface-2); }
.cs-dir svg { width: 17px; height: 17px; color: rgb(var(--brand-light)); flex: none; }
.cs-newfolder { margin-top: 2px; }
.cs-picked { font-size: 12.5px; color: var(--muted); }
.cs-picked b { color: rgb(var(--brand-light)); font-family: "JetBrains Mono", Consolas, monospace; font-size: 12px; word-break: break-all; }

/* Step 3 - install progress (no debug console: just an animated bar + label) */
.cs-install { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 26px 0 22px; }
.cs-install .cs-game-ico.big { animation: ledPulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgb(var(--brand) / .35); }
.cs-progress { position: relative; width: 100%; height: 9px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.cs-progress-bar { height: 100%; width: 2%; border-radius: 5px;
  background: linear-gradient(90deg, #cfcfcf, #ffffff); transition: width .4s ease; }
/* Determinate bar still gets a soft moving sheen so it never looks frozen. */
.cs-progress:not(.indet)::after { content: ""; position: absolute; inset: 0; border-radius: 5px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  background-size: 40% 100%; background-repeat: no-repeat; animation: cs-sheen 1.4s ease-in-out infinite; }
/* Steam installs report in big jumps → indeterminate sliding bar. */
.cs-progress.indet .cs-progress-bar { width: 38%; transition: none;
  animation: cs-indet 1.25s ease-in-out infinite; }
@keyframes cs-indet { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } }
@keyframes cs-sheen { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
.cs-pct { font-size: 12px; font-weight: 700; color: var(--muted); font-family: "JetBrains Mono", Consolas, monospace; }
.cs-status { font-size: 14px; font-weight: 600; color: var(--foreground); text-align: center; min-height: 19px; }
.cs-status.ok { color: var(--green); }
.cs-status.bad { color: var(--red); }

@media (max-width: 560px) {
  .cs-row2 { grid-template-columns: 1fr; }
  .cs-grid { grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); }
}

/* ═══════════════ Update checker ═══════════════ */
/* Header "Update" pill - green, same footprint as .hdr-icon */
.hdr-update { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 9px;
  background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.35); color: var(--green);
  font-size: 12.5px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s; }
.hdr-update:hover { background: rgba(52,211,153,.16); border-color: rgba(52,211,153,.55); }
.hdr-update svg { width: 16px; height: 16px; }
.hdr-update.hidden { display: none; }
.hdr-update .hdr-uv { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px;
  background: rgba(52,211,153,.18); color: var(--green);
  font-family: "JetBrains Mono", Consolas, monospace; }
.hdr-update .hdr-uv:empty { display: none; }

/* Full-screen mandatory-update page - open layout on black with a soft glow,
   a big version "old → new" hero, and a white CTA (deliberately unlike portwarp). */
#view-update { position: fixed; inset: 0; z-index: 400; background: #000; display: grid; place-items: center;
  padding: 24px; overflow: hidden; }
#view-update.hidden { display: none; }
.upd-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 680px; height: 480px; pointer-events: none; filter: blur(6px);
  background: radial-gradient(50% 50% at 50% 50%, rgb(var(--brand) / .22), rgb(var(--brand) / 0) 70%); }
.upd-inner { position: relative; width: 100%; max-width: 440px; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 0; animation: ctx-in .18s ease; }
.upd-kicker { font-size: 11px; font-weight: 800; letter-spacing: .22em; color: rgb(var(--brand-light));
  text-transform: uppercase; margin-bottom: 22px; }
.upd-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.upd-hero .upd-old { font-size: 16px; color: var(--muted-2); text-decoration: line-through;
  font-family: "JetBrains Mono", Consolas, monospace; }
.upd-hero .upd-new { font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: #fff;
  font-family: "JetBrains Mono", Consolas, monospace;
  text-shadow: 0 0 28px rgb(var(--brand) / .55); }
.upd-track { position: relative; width: 54px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--border-strong), rgb(var(--brand) / .7)); overflow: visible; }
.upd-track .upd-dot { position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%;
  background: rgb(var(--brand-light)); box-shadow: 0 0 10px rgb(var(--brand)); transform: translateY(-50%);
  animation: upd-slide 1.5s ease-in-out infinite; }
@keyframes upd-slide { 0% { left: 0; opacity: .2; } 50% { opacity: 1; } 100% { left: 100%; opacity: .2; } }
.upd-title { margin: 0 0 10px; font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--foreground); }
.upd-msg { margin: 0 0 28px; font-size: 14px; color: var(--muted); max-width: 360px; line-height: 1.55; }
.upd-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px; background: #fff; color: #000; font-weight: 800; font-size: 13.5px;
  text-decoration: none; cursor: pointer; transition: transform .08s, box-shadow .15s, background .15s;
  box-shadow: 0 8px 30px rgb(var(--brand) / .18); }
.upd-cta, .upd-cta span { color: #000; }
.upd-cta:hover { background: #ededed; box-shadow: 0 10px 36px rgb(var(--brand) / .28); }
.upd-cta:active { transform: translateY(1px); }
.upd-cta svg { width: 16px; height: 16px; stroke: #000; }
.upd-foot { margin-top: 16px; font-size: 11.5px; color: var(--muted-2); }
@media (max-width: 480px) {
  .upd-hero .upd-new { font-size: 26px; }
  .upd-title { font-size: 24px; }
}

/* ── Console selection quick actions (Copy / Ask AI) ─────────────────────
   Floating pill shown at the pointer after selecting console text -
   mirrors the desktop console's popup. */
.con-selpop { position: fixed; z-index: 300; display: flex; align-items: center; gap: 2px; background: #0f0f10; border: 1px solid rgba(255, 255, 255, .15); border-radius: 12px; padding: 5px; box-shadow: 0 10px 28px rgba(0, 0, 0, .7); }
.con-selpop .selact { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 0; border-radius: 8px; padding: 6px 11px; color: #e9e9e9; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; font-family: inherit; }
.con-selpop .selact:hover { background: #1d1d20; }
.con-selpop .selact:active { background: #26262a; }
.con-selpop .selact.ai { color: #a5b4ff; }
.con-selpop .selact svg { width: 13px; height: 13px; flex: none; stroke: currentColor; }
.con-selpop .selpop-div { width: 1px; height: 16px; background: rgba(255, 255, 255, .13); margin: 0 3px; }

/* ── FiveM/RedM cfx.re banner cards (mirrors the desktop plugins tab) ──── */
.cfx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.cfx-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 13px; overflow: hidden; cursor: pointer; transition: border-color .15s, background .15s; }
.cfx-card:hover { background: var(--surface-2); border-color: var(--border-strong); }
.cfx-banner { height: 130px; background: #080808; display: grid; place-items: center; overflow: hidden; }
.cfx-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cfx-banner svg { width: 28px; height: 28px; opacity: .35; }
.cfx-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.cfx-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cfx-name { font-size: 13.5px; font-weight: 600; color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paid-badge { flex: none; background: #2a1215; border: 1px solid #7f1d1d; color: #f87171; font-size: 9px; font-weight: 700; letter-spacing: .4px; padding: 2px 6px; border-radius: 5px; line-height: 1.2; }
.cfx-desc { font-size: 11.5px; color: var(--muted); min-height: 30px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cfx-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.cfx-foot .tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.btn.cfx-view { background: #fff; color: #000; border-color: #fff; }
.btn.cfx-view:hover { background: #e6e6e6; }
.btn.cfx-view svg { stroke: #000; }
.cfx-more { display: flex; justify-content: center; padding: 14px 0 6px; }
.cfx-more .spinner { width: 22px; height: 22px; }

/* ── Installed-plugins modal: OLED-black, vertical list ─────────────────── */
.modal.oled { background: #000; border: 1px solid #1f1f1f; }
.pl-inst-list { display: flex; flex-direction: column; gap: 10px; }
.pl-inst-card { display: flex; align-items: center; gap: 13px; padding: 12px 14px;
  background: #0a0a0a; border: 1px solid #1f1f1f; border-radius: 12px; }
.pl-inst-card:hover { border-color: #2a2a2a; }

/* ═══ Discord bot modules (OLED) ═══════════════════════════════════════ */
.dc-modhead { margin: 2px 2px 18px; }
.dc-modhead h2 { margin: 0 0 5px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.dc-modhead p { margin: 0; font-size: 13px; color: var(--muted); max-width: 640px; }
.dc-card { background: #060606; border: 1px solid #1c1c1c; border-radius: 14px; padding: 18px; margin-bottom: 16px; }
.dc-cardtitle { font-size: 14px; font-weight: 700; }
.dc-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dc-cardhead .input { max-width: 340px; }
.dc-fieldw { margin-bottom: 14px; }
.dc-fieldw:last-child { margin-bottom: 0; }
.dc-fieldlabel { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.dc-label, .dc-fieldlabel + * { }
.dc-hint { font-size: 12px; color: var(--muted-2); margin-top: 6px; line-height: 1.5; }
.dc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .dc-grid2 { grid-template-columns: 1fr; } }
.dc-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }

/* PRO badge (amber, with the periodic shine sweep - same as the header chip) */
.dc-pro { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  color: #ffd45e; background: rgba(255,196,64,.12); border: 1px solid rgba(255,196,64,.3);
  border-radius: 5px; padding: 1px 5px; vertical-align: middle; position: relative; overflow: hidden; }
.dc-pro::after {
  content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 16px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-20px) skewX(-18deg);
  animation: hdrPlanShine 3.2s ease-in-out infinite;
}

/* selects */
.dc-select { width: 100%; height: 40px; padding: 0 12px; background: #0c0c0c;
  border: 1px solid #262626; border-radius: 10px; color: var(--foreground);
  font-family: inherit; font-size: 13px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b8b8b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; padding-right: 34px; }
.dc-select:focus { border-color: #fff; outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.07); }
.dc-select option { background: #0c0c0c; color: var(--foreground); }

/* enable / toggle rows */
.dc-enable { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 4px 0; }
/* The separator + spacing only show when the toggle is on (content lives below). */
.dc-enable.on { padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid #161616; }
.dc-enable span { font-size: 13.5px; font-weight: 600; }
.dc-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: var(--muted); margin-top: 6px; }

/* role chips */
.dc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.dc-chip { padding: 6px 11px; background: #0c0c0c; border: 1px solid #262626; border-radius: 8px;
  color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: .12s; }
.dc-chip:hover { border-color: #3a3a3a; color: var(--foreground); }
.dc-chip.on { background: rgba(var(--brand),.16); border-color: rgba(var(--brand),.55); color: #cdd6ff; }

/* emoji picker */
.dc-emoji { position: relative; }
.dc-emoji-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; min-width: 58px;
  padding: 0 10px; background: #0c0c0c; border: 1px solid #262626; border-radius: 10px; cursor: pointer; }
.dc-emoji-btn:hover { border-color: #3a3a3a; }
.dc-emoji-btn img { width: 22px; height: 22px; }
.dc-emoji-ph { font-size: 18px; opacity: .5; }
.dc-emoji-btn .dc-chev { width: 14px; height: 14px; stroke: var(--muted); }
.dc-emoji-pop { position: absolute; z-index: 60; top: 46px; left: 0; width: 300px; padding: 10px;
  background: #0a0a0a; border: 1px solid #2a2a2a; border-radius: 12px; box-shadow: var(--shadow); }
.dc-emoji-search { margin-bottom: 8px; }
.dc-emoji-body { max-height: 240px; overflow-y: auto; }
.dc-emoji-h { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--muted-2); margin: 8px 2px 6px; }
.dc-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.dc-emoji-grid button { display: flex; align-items: center; justify-content: center; height: 32px;
  background: none; border: none; border-radius: 7px; cursor: pointer; }
.dc-emoji-grid button:hover { background: #1a1a1a; }
.dc-emoji-grid img { width: 22px; height: 22px; }

/* message editor + pills */
.dc-editor { }
.dc-pills { display: inline-flex; gap: 6px; padding: 4px; background: #0c0c0c; border: 1px solid #1f1f1f; border-radius: 10px; margin-bottom: 14px; }
.dc-pill { padding: 7px 13px; background: none; border: none; border-radius: 7px; color: var(--muted);
  font-size: 12.5px; font-weight: 600; cursor: pointer; transition: .12s; }
.dc-pill:hover { color: var(--foreground); }
.dc-pill.on, .dc-pill.on:hover { background: #fff; color: #000; }
.dc-embedbox { padding: 14px; background: #0a0a0a; border: 1px solid #1c1c1c; border-radius: 12px; margin-bottom: 14px; }
.dc-colorrow { display: flex; align-items: center; gap: 10px; }
.dc-colorrow input[type=color] { width: 44px; height: 40px; padding: 3px; background: #0c0c0c; border: 1px solid #262626; border-radius: 10px; cursor: pointer; }
.dc-colorrow input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.dc-colorrow input[type=color]::-webkit-color-swatch { border: none; border-radius: 7px; }
.dc-colorrow input[type=color]::-moz-color-swatch { border: none; border-radius: 7px; }
.dc-colorrow .input { flex: 1; }

/* live preview — Discord-accurate chat surface + embed card */
.dc-preview { padding: 14px 16px; background: #313338; border: 1px solid #232428; border-radius: 10px; font-size: 14px; line-height: 1.5; color: #dbdee1; min-width: 0; overflow: hidden; }
.dc-pv-content { margin-bottom: 8px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.dc-pv-embed { position: relative; border-left: 4px solid #5865F2; background: #2b2d31; border-radius: 6px; padding: 10px 14px; max-width: 440px; overflow-wrap: anywhere; word-break: break-word; }
.dc-pv-thumb { float: right; width: 64px; height: 64px; border-radius: 8px; object-fit: cover; margin: 2px 0 8px 14px; }
.dc-pv-author { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #f2f3f5; margin-bottom: 6px; }
.dc-pv-title { font-weight: 700; margin-bottom: 5px; color: #f2f3f5; overflow-wrap: anywhere; word-break: break-word; }
.dc-pv-desc { color: #dbdee1; line-height: 1.5; overflow-wrap: anywhere; word-break: break-word; }
.dc-pv-footer { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #949ba4; font-weight: 600; margin-top: 8px; }
.dc-pv-fic { width: 18px; height: 18px; border-radius: 50%; }
/* markdown rendered inside the preview */
.dc-preview a { color: #00a8fc; text-decoration: none; }
.dc-preview a:hover { text-decoration: underline; }
.dc-preview code { background: #1e1f22; border-radius: 4px; padding: 1px 4px; font-size: 85%; }
.dc-preview pre { background: #1e1f22; border: 1px solid #232428; border-radius: 6px; padding: 8px 10px; margin: 4px 0; overflow-x: auto; white-space: pre; }
.dc-preview pre code { background: none; padding: 0; }
.dc-preview blockquote { border-left: 3px solid #4e5058; margin: 3px 0; padding-left: 10px; color: #dbdee1; }
.dc-md-sub { color: #949ba4; font-size: 12px; }
.dc-md-spoiler { background: #1e1f22; color: transparent; border-radius: 4px; padding: 0 4px; cursor: pointer; }
.dc-md-spoiler.open { color: inherit; background: #3f4248; }
.dc-md-h1 { font-size: 20px; font-weight: 700; margin: 6px 0; color: #f2f3f5; }
.dc-md-h2 { font-size: 17px; font-weight: 700; margin: 5px 0; color: #f2f3f5; }
.dc-md-h3 { font-size: 15px; font-weight: 700; margin: 4px 0; color: #f2f3f5; }
.dc-md-li { padding-left: 14px; }
.dc-md-add { color: #4ade80; }
.dc-md-del { color: #f87171; }
.dc-md-fix { color: #60a5fa; }
.dc-md-ini { color: #f87171; font-weight: 700; }

/* pairs / options rows */
.dc-pairs, .dc-opts { display: flex; flex-direction: column; gap: 8px; }
.dc-pairrow { display: flex; align-items: center; gap: 8px; }
.dc-pairrow .dc-select, .dc-pairrow .input { flex: 1; }
.dc-x { width: 34px; height: 34px; flex: none; background: #0c0c0c; border: 1px solid #262626;
  border-radius: 9px; color: var(--muted); cursor: pointer; font-size: 13px; }
.dc-x:hover { border-color: var(--red); color: var(--red); }
.dc-trigrow { display: flex; align-items: center; }
.dc-prefix { display: flex; align-items: center; justify-content: center; width: 38px; height: 40px;
  background: #161616; border: 1px solid #262626; border-right: none; border-radius: 10px 0 0 10px; color: var(--muted); font-weight: 700; }
.dc-trigrow .input { border-radius: 0 10px 10px 0; }
.dc-reward { padding: 14px; background: #0a0a0a; border: 1px solid #1c1c1c; border-radius: 12px; margin-top: 10px; }
.dc-del { background: none; border: none; color: var(--red); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 7px; }
.dc-del:hover { background: rgba(248,113,113,.1); }

/* save bar / posted / warn */
.dc-savebar { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.btn.dc-posted { background: var(--green) !important; border-color: var(--green) !important; color: #062a1c !important; }
.dc-warn { padding: 12px 14px; background: rgba(255,196,64,.06); border: 1px solid rgba(255,196,64,.22);
  border-radius: 11px; margin-bottom: 16px; }
.dc-warn b { display: block; font-size: 13px; color: #ffd45e; margin-bottom: 3px; }
.dc-warn p { margin: 0; font-size: 12.5px; color: #d8c9a3; line-height: 1.5; }

/* embed fields editor + giveaway rows + richer preview */
.dc-fieldrow { display: flex; align-items: center; gap: 8px; }
.dc-fieldrow .input { flex: 1; min-width: 0; }
.dc-fieldrow .dc-toggle { flex: none; margin-top: 0; white-space: nowrap; }
.dc-gwrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #161616; }
.dc-gwrow:last-child { border-bottom: none; }
.dc-gwrow .dc-hint { display: block; margin-top: 2px; }
.dc-pv-fields { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.dc-pv-field { min-width: 120px; flex-basis: 100%; }
.dc-pv-field.inline { flex: 1 1 30%; }
.dc-pv-fname { font-weight: 700; font-size: 13px; color: #f2f3f5; margin-bottom: 2px; }
.dc-pv-fval { font-size: 13px; color: #dbdee1; }
.dc-pv-image { display: block; max-width: 100%; border-radius: 8px; margin-top: 8px; clear: both; }
.dc-pv-aic { width: 20px; height: 20px; border-radius: 50%; }