:root,
:root[data-theme="oled"] {
  --bg: #000000;
  --surface-1: #070707;
  --surface-2: #0c0d10;
  --surface-3: #151515;
  --input: #0c0c0c;
  --hover: #151515;
  --selected: #1b1b1d;
  --border: #202020;
  --border-strong: #303034;
  --muted: #a0a0a7;
  --muted-2: #77777e;
  --foreground: #f5f5f7;
  --inverse: #000000;
  --primary: #ffffff;
  --primary-border: #ffffff;
  --primary-hover: #e5e7eb;
  --primary-pressed: #d4d4d4;
  --overlay: rgba(0, 0, 0, .64);
  --topbar: rgba(0, 0, 0, .82);
  --scroll-thumb: #2a2a2d;
  --switch-on: #5865f2;
  --switch-hover: #4752c4;
  --switch-knob: #ffffff;
  --brand: 99 120 255;
  --brand-light: 130 148 255;
  --green: #34d399;
  --red: #f87171;
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: none;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, "Cascadia Mono", "Cascadia Code", Consolas, "DejaVu Sans Mono", "Liberation Mono", "Noto Sans Mono", monospace;
}

:root[data-theme="dark"] {
  --bg: #1a1a1e;
  --surface-1: #121214;
  --surface-2: #232428;
  --surface-3: #2d2f34;
  --input: #121214;
  --hover: #232428;
  --selected: #2d2f34;
  --border: #303136;
  --border-strong: #41434a;
  --muted: #b5bac1;
  --muted-2: #949ba4;
  --foreground: #f2f3f5;
  --inverse: #121214;
  --primary: #f2f3f5;
  --primary-border: #f2f3f5;
  --primary-hover: #ffffff;
  --primary-pressed: #e4e7eb;
  --overlay: rgba(0, 0, 0, .58);
  --topbar: rgba(18, 18, 20, .88);
  --scroll-thumb: #41434a;
  --switch-on: #5865f2;
  --switch-hover: #4752c4;
  --shadow: none;
}

:root[data-theme="light"] {
  --bg: #f4f5f7;
  --surface-1: #ffffff;
  --surface-2: #eef0f3;
  --surface-3: #e3e6ea;
  --input: #ffffff;
  --hover: #eef0f3;
  --selected: #e3e6ea;
  --border: #d6d9de;
  --border-strong: #b9bec6;
  --muted: #626771;
  --muted-2: #858b95;
  --foreground: #202226;
  --inverse: #202226;
  --primary: #ffffff;
  --primary-border: #c5c9d0;
  --primary-hover: #f5f6f8;
  --primary-pressed: #e8eaee;
  --overlay: rgba(23, 24, 27, .32);
  --topbar: rgba(255, 255, 255, .88);
  --scroll-thumb: #bfc1c7;
  --switch-on: #5865f2;
  --switch-hover: #4752c4;
  --brand: 64 84 204;
  --brand-light: 64 84 204;
  --shadow: none;
}

* { 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; }
/* SVGs are inline elements by default, which leaves a text baseline beneath
   them and makes icon-only controls look shifted. Buttons own icon alignment. */
button > svg { display: block; flex: 0 0 auto; pointer-events: none; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
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: var(--topbar);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
}
.logo { width: 177px; height: 21px; display: block; cursor: pointer; object-fit: contain; object-position: left center; }
.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 */
/* The desktop header's Assistant button, matched hex for hex: #121212 on the
   strong hairline, 34 tall, radius 9, a 16px glyph and a 12.5 semibold label
   both at #F5F5F5, hovering to #1B1B1B with a #5F5F5F edge. The tokens it used
   before resolved close but not equal, and close is what makes two headers look
   like two products. */
.hdr-ai {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 8px;
  color: var(--foreground); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.hdr-ai:hover { background: var(--hover); border-color: var(--border-strong); }
.hdr-ai svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.hdr-ai span { color: inherit; }
/* "Upgrade to PRO" nudge - dark glass pill + white PRO badge + shine sweep,
   mirrors the desktop header. */
/* The desktop header's pill, matched hex for hex: #14FBBF24 glass on a
   #59FBBF24 hairline, amber text and glyph, fully round, and a white sweep on
   the same 3.2s cycle. The old dark-glass version is gone rather than kept as
   an alternative - two looks for one control is how they drift. */
.hdr-upgrade {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px;
  background: #fbbf24; border: 0; border-radius: 8px; cursor: pointer;
  position: relative; overflow: hidden; color: #3b2705; transition: background .15s ease;
}
.hdr-upgrade:hover { background: #f0b01a; }
:root[data-theme="light"] .hdr-upgrade { background: #e9a317; color: #2e1d02; }
:root[data-theme="light"] .hdr-upgrade:hover { background: #d8940d; }
.hdr-upgrade svg { width: 15px; height: 15px; flex: none; fill: currentColor; stroke: none; }
.hdr-upgrade .up-label { color: inherit; font-size: 12.5px; font-weight: 700; }
.hdr-upgrade::after {
  content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 18px; 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;
}
/* The sweep reads as light catching a dark surface. The Light header has no
   dark surface for it to catch, so over solid amber it is just a smear. */
:root[data-theme="light"] .hdr-upgrade::after { display: none; }
@media (prefers-reduced-motion: reduce) { .hdr-upgrade::after { animation: none; opacity: 0; } }
@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; }
}
/* The old dark-glass hover and its glow pulse are gone with the rest of that
   look: the desktop pill just deepens its amber, and this now does the same. */
/* 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: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; cursor: pointer;
  position: relative; overflow: hidden; padding: 2px;
  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: 15px; height: 15px; }
.hdr-avatar.has-ring { padding: 4px; border-width: 0; }
.hdr-avatar.has-ring:hover { border-color: transparent; }
.hdr-avatar img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
.hdr-avatar.has-ring img { box-shadow: 0 0 0 2px var(--surface-1); }
.hdr-avatar.is-initial { background: #4B5563; color: #fff; }
.hdr-avatar.is-initial.is-pro-initial { background: #3C4ECC; }
.avatar-initial { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 4px; background: #4B5563; color: #fff; font-size: 15px; font-weight: 600; line-height: 1; }
.hdr-avatar.is-pro-initial .avatar-initial { background: #3C4ECC; }
.hdr-avatar.has-ring .avatar-initial { box-shadow: 0 0 0 2px var(--surface-1); }
.avatar-ring-layer { position: absolute; inset: 0; background: var(--avatar-ring); }
.hdr-avatar.ring-animated .avatar-ring-layer {
  inset: -35%;
  animation: avatarRingSpin 8s linear infinite;
}
@keyframes avatarRingSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .hdr-avatar.ring-animated .avatar-ring-layer { animation: none; }
}
/* 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: 30px; height: 30px; border-radius: 8px;
  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(--hover); border-color: var(--border-strong); }
.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; }
.theme-menu { padding: 8px 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.theme-menu-label { display: block; margin: 0 2px 7px; color: var(--muted-2); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.theme-segment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 5px; }
.hdr-menu .theme-choice { justify-content: center; padding: 6px 7px; border: 1px solid transparent; border-radius: 3px; color: var(--muted); font-size: 11px; font-weight: 650; }
.hdr-menu .theme-choice:hover { background: var(--hover); color: var(--foreground); }
.hdr-menu .theme-choice[aria-pressed="true"] { background: var(--selected); border-color: var(--border-strong); color: var(--foreground); }
/* 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);
  appearance: none; -webkit-appearance: none; background-image: none; box-shadow: none;
  cursor: pointer; transition: background .15s, border-color .15s, opacity .15s, transform .04s; white-space: nowrap;
}
.btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
.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: var(--primary); border-color: var(--primary-border); color: var(--inverse); font-weight: 700; }
.btn.brand:hover { background: var(--primary-hover); border-color: var(--primary-border); color: var(--inverse); }
.btn.brand:active { background: var(--primary-pressed); border-color: var(--primary-border); color: var(--inverse); }
.btn.brand:disabled { background: var(--primary); border-color: var(--primary-border); color: var(--inverse); }
.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(--input); 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: inherit;
}
.input:focus { border-color: var(--foreground); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foreground) 9%, transparent); }
.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; }
}
/* Phone: the brand panel is decoration, and on a 360px screen it pushes the
   only thing that matters — the form — below the fold. The card stops being a
   card and becomes the screen, which is what every native sign-in does. */
@media (max-width: 460px) {
  .login-wrap { padding: 0; place-items: stretch; }
  .login-split { max-width: none; border: none; border-radius: 0; box-shadow: none;
    min-height: 100vh; justify-content: center; }
  .login-aside { display: none; }
  .login-form { padding: 24px 22px 28px; }
}

/* ── 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: 22px; font-weight: 600; letter-spacing: -0.015em; 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) 104px 116px;
  align-items: center; gap: 14px; padding: 0 18px; }
/* Owner: the path and the actions column join in. Both are owner only, so one
   variant covers them. */
.sv-grid.has-path .sv-head, .sv-grid.has-path .sv-row {
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 2.6fr) 104px 116px 44px; }

/* Name over its details, the way the desktop row reads. */
.sv-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sv-sub { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-c-actions { display: flex; justify-content: flex-end; }
.sv-kebab { border: 0; background: transparent; cursor: pointer; font-family: inherit; color: var(--muted-2); font-size: 17px; line-height: 1; padding: 0 4px; border-radius: 6px; }
.sv-row:focus-visible, .sv-kebab:focus-visible, .sv-menu .srv-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sv-kebab:hover { color: var(--foreground); background: var(--selected); }
.sv-menu.srv-menu { position: fixed; z-index: 120; left: auto; right: auto; top: auto;
  width: 232px; min-width: 0; }
.sv-menu .srv-row { gap: 9px; color: var(--foreground); }
.sv-menu .srv-row .nm { color: inherit; }
.sv-menu .srv-row.danger .nm { color: var(--red); }
.sv-menu .srv-row svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
.sv-menu .srv-row.danger svg { color: var(--red); }
.sv-menu .srv-row.danger:hover { background:rgb(248 113 113 / .12); color:var(--red); }
.sv-menu .srv-row.danger:hover .nm,
.sv-menu .srv-row.danger:hover svg { color:var(--red); }
/* When the server was registered. The same column the desktop list has carried
   all along; the panel was the one missing it. */
.sv-c-created { font-size: 12px; color: var(--muted-2); white-space: nowrap; }
.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-summary { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 9px;
  color: var(--muted-2); font-size: 10.5px; line-height: 1; }
.sv-summary .sep { color: var(--border-strong); }
.sv-summary .metric { display: inline-flex; align-items: center; gap: 5px; }
.sv-summary .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.sv-summary .dot.remote { background: #a78bfa; }
.sv-c { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-c-name { display: flex; align-items: center; gap: 12px; }
/* No tile around the logo. The card was a box drawn around a mark that
   already has its own silhouette, and on OLED black it reads as a seam rather
   than as a container. Bigger to make up for losing the frame. */
.sv-c-name .gico { width: 26px; height: 26px; border-radius: 0; background: transparent; border: none; }
.sv-c-name .gico svg { width: 20px; height: 20px; }
.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; }
/* Game, loader and version folded into one line. Only used on narrow screens,
   where there is no room for three columns. */
.sv-c-sub { display: none; }
.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; }

/* Status with no capsule around it. A bordered pill holding two words is
   chrome, and on an OLED list it is one more edge competing with the row
   separators; the dot and the word carry the state on their own. Offline is
   red rather than grey, because grey reads as "nothing to report" and a
   stopped server is the thing somebody is scanning this list for. */
.sv-state { display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-size: 11.5px; font-weight: 700; background: transparent; }
.sv-state .led { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.sv-state.on { color: var(--green); }
.sv-state.on .led { background: var(--green); box-shadow: 0 0 7px rgba(52,211,153,.7); animation: ledPulse 1.5s ease-in-out infinite; }
.sv-state.off { color: var(--red); }
.sv-state.off .led { background: var(--red); }

/* Registered to a different machine: its folder is here, so the pill is an
   action (claim it) rather than a status. */
.sv-pill.other { color: #c4b5fd; background: rgb(167 139 250 / .12); border-color: rgb(167 139 250 / .35);
  cursor: pointer; transition: background .14s, border-color .14s; }
.sv-pill.other:hover { background: rgb(167 139 250 / .22); border-color: rgb(167 139 250 / .55); }
@media (max-width: 720px) {
  .sv-head { display: none; }

  /* Two columns, two rows: identity over its details on the left, state on the
     right. align-items:center is what was missing - the default stretch made
     every cell as tall as the tallest, which left the logo pinned to the top of
     a two-line block instead of sitting beside the name. */
  .sv-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-auto-rows: auto; height: auto; gap: 3px 10px; padding: 13px 16px;
    align-items: center;
  }
  .sv-c-name { grid-row: 1; grid-column: 1; align-items: center; }
  .sv-c-actions { grid-row: 1 / span 2; grid-column: 3; align-self: center; }

  /* Spans both rows and centres against the pair, instead of sitting on the
     first one and floating above the details line. */
  .sv-c-status { grid-row: 1 / span 2; grid-column: 2; align-self: center; justify-content: flex-end; }

  /* The three desktop columns give way to one folded line. Hiding two of them
     and keeping the third is what lost the loader and the version on a phone. */
  .sv-c-game, .sv-c-ver, .sv-c-path, .sv-c-created { display: none; }
  .sv-c-sub {
    display: block; grid-row: 2; grid-column: 1; padding-left: 42px;
    font-size: 12px; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sv-grid.has-path .sv-head, .sv-grid.has-path .sv-row { grid-template-columns: minmax(0, 1fr) auto auto; }

  /* The bar has no room for the full phrase beside a logo and an avatar. */
  .hdr-upgrade .up-label { font-size: 0; }
  .hdr-upgrade .up-label::after { content: "Upgrade"; font-size: 12px; }
}

/* 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); }

/* ─── Sidebar band (mirrors the desktop hero) ────────────────────────────────
   135 tall, running from the top of the sidebar down to the power button. The
   facts sit ON the art rather than under it, which is what the height buys, and
   the veil closes at fully opaque black so the band does not end so much as
   stop being a band. */
.srv-switch.sh {
  position: relative; display: block; width: 100%; height: 135px; padding: 0;
  border: 0; border-radius: 12px 12px 0 0; overflow: hidden; background: #000;
  text-align: left; cursor: pointer; margin-bottom: -1px;
  isolation: isolate; contain: paint; clip-path: inset(0 round 8px);
}
.srv-switch.sh:hover { border: 0; }
.sh-art { position: absolute; inset: 0; display: block; overflow: hidden;
  contain: paint; clip-path: inset(0 round 8px); }
.sh-grad { position: absolute; inset: 0; display: block; }
.sh-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.sh-img.on { display: block; }

/* The same picture again, blurred, and masked so it only exists towards the
   bottom. Blurring the one image would soften the top too, which is the part
   meant to be looked at. */
.sh-blur {
  filter: blur(15px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.75) 58%, #000 78%);
          mask-image: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.75) 58%, #000 78%);
}
.sh-veil {
  position: absolute; inset: 0; display: block;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.30) 30%, rgba(0,0,0,.60) 52%, rgba(0,0,0,.87) 80%, #000 100%);
}
.sh-facts {
  position: absolute; left: 12px; right: 12px; bottom: 11px;
  display: flex; flex-direction: column; gap: 7px;
}
.srv-switch.sh .nm {
  font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sh-state { display: flex; align-items: center; gap: 8px; }
.sh-state-text { font-size: 11.5px; font-weight: 600; color: #D1D5DB; }
.srv-switch.sh .srv-badge { display: inline-flex !important; position: static; }
.srv-switch.sh .sub {
  font-size: 11.5px; color: #D1D5DB; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.srv-switch.sh .srv-up { font-size: 11px; color: #B8BBC2; font-family: Consolas, Menlo, monospace; }
.sh-players { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #D1D5DB; }
.sh-players svg { width: 13px; height: 13px; flex: none; }
.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; }
.gico:has(.bot-avatar), .sv-c-name .gico:has(.bot-avatar) { border-radius: 50%; }
.gico .gico-img.bot-avatar { object-fit: cover; }
/* 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: 600; 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: none; 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 { position: relative; z-index: 2; isolation: isolate; display: flex; gap: 8px; margin-top: 12px; }
.side-power .btn { flex: 1; min-height: 30px; border-radius: 4px; }
.side-power #btn-stop { color: #dc3645; border-color: #c94b55; background: transparent; }
.side-power #btn-stop:hover { background: rgba(220,54,69,.094); border-color: #dc3645; }
.side-power #btn-restart { color: var(--foreground); background: var(--surface-1); border-color: var(--border-strong); }
.side-power #btn-restart:hover { background: var(--surface-2); border-color: var(--border-strong); }
/* Loading Start remains fully opaque, and later compatibility rules cannot
   accidentally turn it into an empty-looking dark button. */
.side-power #btn-start { background: var(--primary); border-color: var(--primary-border); color: var(--inverse);
  appearance: none; -webkit-appearance: none; background-image: none; box-shadow: none !important; filter: none; }
.side-power #btn-start:hover { background: var(--primary-hover); border-color: var(--primary-border); color: var(--inverse); }
.side-power #btn-start:active { background: var(--primary-pressed); border-color: var(--primary-border); color: var(--inverse); }
.side-power #btn-start:disabled { background: var(--primary); border-color: var(--primary-border); color: var(--inverse); opacity: 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. Its own plm- prefix: the pl- one belongs to the Plugins page,
   which redefines .pl-name and .pl-meta further down this file. */
.plm-pill { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border-strong);
  font-size: 11.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plm-modal { max-width: 560px; }
.plm-search { margin-bottom: 10px; }
.plm-search[hidden] { display: none; }
.plm-search .input { width: 100%; }
.plm-row { display: flex; align-items: center; gap: 11px; padding: 9px 4px; border-bottom: 1px solid var(--border); }
.plm-row:last-child { border-bottom: none; }
.plm-av { width: 34px; height: 34px; border-radius: 7px; flex: none; background: var(--surface-3); object-fit: cover; }
.plm-sid { display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.plm-who { flex: 1; min-width: 0; }
.plm-nm { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plm-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 3px; font-size: 10.5px; color: var(--muted); }
.plm-ping { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.plm-bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 11px; }
.plm-bar { width: 2px; border-radius: 1px; background: var(--surface-3); }
.plm-ping.good { color: var(--green); } .plm-ping.good .plm-bar.on { background: var(--green); }
.plm-ping.fair { color: #f6b73c; } .plm-ping.fair .plm-bar.on { background: #f6b73c; }
.plm-ping.poor { color: var(--red); } .plm-ping.poor .plm-bar.on { background: var(--red); }
.plm-chip { border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--muted); border-radius: 4px;
  padding: 1px 6px; font-family: inherit; font-size: 10px; font-weight: 600; line-height: 1.6; cursor: pointer; }
.plm-chip:hover { color: var(--foreground); border-color: rgb(var(--brand-light)); }
.plm-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.plm-op { border: 1px solid var(--border-strong); background: transparent; color: var(--muted); border-radius: 4px;
  padding: 4px 10px; font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.4; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s; }
.plm-op:hover { color: var(--foreground); }
.plm-op.on { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.4); color: var(--green); }
.plm-more { width: 28px; height: 28px; flex: none; }
.pl-empty { text-align: center; color: var(--muted); padding: 26px 0; font-size: 13px; }
/* Phone: the actions drop under the name instead of squeezing it to nothing. */
@media (max-width: 640px) {
  .plm-row { flex-wrap: wrap; row-gap: 8px; }
  .plm-who { flex-basis: calc(100% - 45px); }
  .plm-acts { width: 100%; justify-content: flex-end; }
}
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 9px 12px; border-radius: 4px;
  color: var(--muted); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .12s, color .12s;
}
.nav a:hover { color: var(--foreground); background: var(--hover); }
.nav a.active { color: var(--foreground); background: var(--selected); }
.nav a.active svg { color: var(--foreground); }
.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 { min-height: 34px !important; padding: 7px 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: 4px; }
.side-back:hover { color: var(--foreground); background: var(--hover); }
.scrim { display: none; }

.content { flex: 1; min-width: 0; padding: 28px 34px; display: flex; flex-direction: column; height: calc(100dvh - 58px); overflow: hidden; }
.content.page-centered > * { width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; }
.content.page-scroll { overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; }
.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: var(--font-mono);
  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 .console-command-mark { display: inline-flex; width: 18px; margin: 0 4px 0 8px;
  align-items: center; justify-content: center; color: rgb(var(--brand-light)); vertical-align: -2px; }
.console .console-command-mark svg { width: 13px; height: 13px; }
.console .sc-prefix { color: #0858F5; font-weight: 700; }
.console .pw-prefix { color: #F35F2E; font-weight: 700; }
.console .line.pw-waiting { color: #F0B35A; font-weight: 650; }
/* Severity bands (mirrors the desktop classifier). Negative margins eat the
   console's own 18px side padding so the band runs the full width; the text
   colour is only the line's default, so a line's own ANSI colour, which lives
   on inner spans, still wins. */
/* sev-tint carries the colour the server itself printed the line in; its
   background and stripe are set inline per line, so all it needs here is the
   negative margin that pulls the band out to the console's full width. */
.console .line.sev-err, .console .line.sev-warn, .console .line.sev-tint { margin: 0 -18px; padding: 0 18px; }
.console .line.sev-err { color: #F87171; background: rgba(248, 113, 113, .06); box-shadow: inset 2px 0 0 #F87171; }
.console .line.sev-warn { color: #F6B73C; background: rgba(246, 183, 60, .055); box-shadow: inset 2px 0 0 #F6B73C; }
/* Said once when a burst outran what the console keeps: it is the app talking,
   not the server, so it reads as a note rather than another line of output. */
.console .line.con-cut { color: var(--muted-2); font-style: italic; padding: 4px 0; }
.console .console-link { color: rgb(var(--brand-light)); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* Hover LIGHTENS the link on a dark console and DARKENS it on a light one.
   A flat #fff did the first and turned the link invisible for the second. */
.console .console-link:hover { color: #fff; }
:root[data-theme="light"] .console .console-link:hover { color: #1b2a8f; }
/* 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-ai svg { width: 13px; height: 13px; }
.ci-empty { padding: 24px; text-align: center; color: var(--muted); }
:root[data-theme="light"] .ci-text.warn { color: #7A4700; }
:root[data-theme="light"] .ci-text.err { color: #B42318; }
:root[data-theme="light"] .ci-row { border-bottom-color: var(--border-strong); }
:root[data-theme="light"] .cbadge.warn { background: #FFF5D6; border-color: #D69B24; color: #7A4700; }
:root[data-theme="light"] .cbadge.warn:hover { background: #FFE9A8; }
:root[data-theme="light"] .cbadge.err { background: #FFF0F0; border-color: #E6A0A0; color: #B42318; }
:root[data-theme="light"] .cbadge.err:hover { background: #FFE1E1; }
/* ── 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: flex-end; }
/* Version and loader build side by side; the card is full width now that the
   Danger Zone moved below it instead of sharing a 2-column row. */
.ss-version-wrap { flex: 1; min-width: 0; display: flex; gap: 8px; }
.ss-version-wrap select { flex: 1; min-width: 0; }
.ss-update-row .btn { flex: none; }
.ss-installed { font-size: 11.5px; color: #6b6b6b; margin: 0 0 10px;
  font-family: "JetBrains Mono", Consolas, monospace; }
@media (max-width: 720px) { .ss-version-wrap { flex-direction: column; } }

/* Discord webhook editor: form on the left, live embed preview on the right. */
.wh-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,360px); gap: 16px; }
@media (max-width: 860px) { .wh-split { grid-template-columns: 1fr; } }
.wh-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wh-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wh-side-cap { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: #6b6b6b; }
.wh-side .dc-preview { background: #313338; border-radius: 10px; padding: 14px; min-height: 150px; }
.wh-ph-card { padding: 11px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px; }
.wh-ph-card > b { font-size: 11px; letter-spacing: .04em; color: var(--muted-2); }
.wh-ph { display: flex; gap: 9px; align-items: baseline; font-size: 11.5px; }
.wh-ph code { color: #8294ff; font-family: "JetBrains Mono", Consolas, monospace; font-size: 11px; }
.wh-ph span { color: var(--muted); }
.wh-events { display: flex; flex-direction: column; gap: 10px; }
.wh-ev { padding: 11px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border);
  transition: border-color .14s; }
.wh-ev.active { border-color: rgb(130 148 255 / .5); }
.wh-ev-head { display: flex; align-items: center; gap: 10px; }
.wh-ev-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wh-ev-meta b { font-size: 12.5px; }
.wh-ev-meta span { font-size: 11px; color: var(--muted); }
.wh-ev-fields { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.wh-colors { display: flex; flex-wrap: wrap; gap: 7px; }
.wh-sw { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; padding: 0;
  cursor: pointer; transition: transform .12s, border-color .12s; }
.wh-sw:hover { transform: scale(1.12); }
.wh-sw.on { border-color: #fff; }
/* Vanilla only: the call to action that turns it into a plugin/mod server. */
.ss-upgrade { display: flex; align-items: center; gap: 12px; margin-top: 12px;
  padding: 12px 14px; border-radius: 10px;
  background: rgb(130 148 255 / .07); border: 1px solid rgb(130 148 255 / .25); }
.ss-upgrade-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ss-upgrade-txt b { font-size: 13px; display: flex; align-items: center; gap: 8px; }
.ss-upgrade-txt span { font-size: 11.5px; color: var(--muted); }
.ss-upgrade .btn { flex: none; }
/* Danger Zone: one card, one row per irreversible action. */
.ss-danger-zone .ss-danger-row { display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-top: 10px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.ss-danger-zone .ss-danger-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ss-danger-zone .ss-danger-row b { font-size: 13px; color: var(--foreground); }
.ss-danger-zone .ss-danger-row span { font-size: 11.5px; color: var(--muted); }
.ss-danger-zone .ss-danger-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); }
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;
  opacity: 1; transition: height .24s ease, opacity .16s ease; }
.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: block; width: 100%; height: 0; margin-top: 0; overflow: visible;
  opacity: 0; transform: translateY(-6px); transform-origin: top;
  transition: height .3s cubic-bezier(.22,.8,.25,1), margin-top .3s cubic-bezier(.22,.8,.25,1),
              opacity .18s ease, transform .3s cubic-bezier(.22,.8,.25,1); }
/* .peek is the hover state: same view as .expanded, but transient and never
   persisted. Only a click writes the preference. */
.metrics.expanded .metric-track,
.metrics.peek .metric-track { height: 0; opacity: 0; }
.metrics.expanded .metric-spark,
.metrics.peek .metric-spark { height: 90px; margin-top: 7px; opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .metric-track, .metric-spark { transition: none; }
}
.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; }

/* The field owns the autocomplete. Anchoring it to the whole form also included
   the send button and made the popup wider than the input. */
.cmdbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 8px; flex: none; }
.cmd-field { min-width: 0; position: relative; }
.cmd-field > .input { width: 100%; box-sizing: border-box; padding: 9px 11px; font-family: var(--font-mono); background: var(--input); }
.console-cmd-field > .input { padding-left: 31px; }
.cmd-prompt { position: absolute; z-index: 2; left: 11px; top: 50%; transform: translateY(calc(-50% - 1px));
  width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center;
  color: rgb(var(--brand-light)); pointer-events: none; }
.cmd-prompt svg { display: block; width: 15px; height: 15px; }
.cmdbar .input:disabled { opacity: .5; }

/* ── Command autocomplete ──
   Match Avalonia's compact popup instead of stretching a short suggestion over
   the entire console. On narrow fields (mobile and the schedule modal), 100%
   remains the natural ceiling. */
.cmd-ac { position: absolute; bottom: calc(100% + 4px); left: 0; right: auto;
  width: min(320px, 100%); max-width: 100%; box-sizing: border-box; z-index: 30;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 6px;
  overflow: hidden; padding: 3px; }
/* Capped and scrollable so it fits over the console at 360px wide. */
.cmd-ac-list { width: 100%; max-height: 250px; overflow-y: auto; }
.cmd-ac-hd { width: 100%; box-sizing: border-box; padding: 6px 9px; color: var(--muted-2); background: var(--selected);
  border: 1px solid var(--border-strong); border-radius: 4px; box-shadow: inset 2px 0 0 var(--border-strong); }
.cmd-ac-hd-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 5px; min-width: 0; overflow: visible; white-space: normal;
  font-family: var(--font-mono); font-size: 12.5px; }
.cmd-ac-hd-name { color: var(--foreground); font-weight: 700; }
.cmd-ac-hd-desc { display: block; margin-top: 1px; color: var(--muted); font-size: 11.5px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-ac-arg { color: var(--muted-2); }
.cmd-ac-arg.cur { color: rgb(var(--brand-light)); font-weight: 600; }
.cmd-ac-row { display: block; width: 100%; min-width: 0; box-sizing: border-box; padding: 6px 9px; margin: 0;
  border: 1px solid transparent; border-radius: 4px; cursor: pointer; box-shadow: inset 2px 0 0 transparent; }
.cmd-ac-row:hover { background: var(--hover); }
.cmd-ac-row.sel { background: var(--selected); border-color: var(--border-strong); box-shadow: inset 2px 0 0 var(--border-strong); }
.cmd-ac-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 1px 8px; min-width: 0; }
.cmd-ac-name { flex: none; color: var(--foreground); font-weight: 650; font-family: var(--font-mono); font-size: 12.5px; }
.cmd-ac-sig { min-width: 0; display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 5px; color: var(--muted-2); font-family: var(--font-mono); font-size: 12px; overflow: visible; white-space: normal; }
.cmd-ac-danger { margin-left: auto; align-self: center; flex: none; display: inline-flex; color: var(--red); }
.cmd-ac-danger svg { width: 14px; height: 14px; }
.cmd-ac-desc { display: block; min-width: 0; color: var(--muted); font-size: 11.5px; line-height: 1.3; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-ac-val { color: var(--foreground); font-family: var(--font-mono); font-size: 12.5px; }
.cmd-ac-sub { color: var(--muted-2); font-size: 12px; }
.cmd-ac-item-row { display: flex; align-items: center; gap: 9px; min-height: 40px; padding-top: 5px; padding-bottom: 5px; }
.cmd-ac-item-icon { width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  position: relative; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.cmd-ac-item-fallback { color: var(--muted); font: 700 10px/1 var(--font-mono); }
.cmd-ac-item-icon img { position: absolute; inset: 1px; width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
.cmd-ac-item-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.cmd-ac-item-name { color: var(--foreground); font-size: 12.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-ac-item-id { color: var(--muted-2); font: 10.75px/1.2 var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme="light"] .cmd-ac-arg.cur { color: #4054cc; }
/* 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; }
.fm-crumb-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none; }
.fm-crumb-row .crumbs { margin-bottom: 13px; }
.fm-selection { display: flex; min-height: 54px; align-items: center; gap: 14px; padding: 8px 9px 8px 15px;
  border: 1px solid rgb(var(--brand) / .34); border-radius: var(--radius) var(--radius) 0 0;
  background: color-mix(in srgb, rgb(var(--brand)) 11%, var(--surface-1)); box-shadow: 0 7px 20px rgba(0,0,0,.25); }
.fm-selection:not(.hidden) + .filelist { border-radius: 0 0 var(--radius) var(--radius); }
.fm-selection-copy { display: flex; min-width: 92px; flex-direction: column; }
.fm-selection-copy strong { color: var(--foreground); font-size: 13px; }
.fm-selection-copy span { color: rgb(var(--brand-light)); font-family: var(--font-mono); font-size: 10.5px; }
.fm-batch-actions { display: flex; min-width: 0; flex: 1; align-items: center; gap: 3px; }
.fm-batch-actions button, .fm-selection-clear { display: inline-flex; min-height: 32px; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 9px; border: 0; border-radius: 4px; background: transparent; color: var(--foreground); cursor: pointer; font-size: 12px; font-weight: 600; }
.fm-batch-actions button:hover, .fm-selection-clear:hover { background: rgb(255 255 255 / .08); }
.fm-batch-actions button.danger { margin-left: auto; color: var(--red); }
.fm-batch-actions button.danger:hover { background: rgb(248 113 113 / .15); }
.fm-batch-actions button:disabled { display: none; }
.fm-batch-actions svg, .fm-selection-clear svg { width: 15px; height: 15px; }
.fm-selection-clear { width: 32px; flex: none; padding: 0; color: var(--muted); }
.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.selected { background: color-mix(in srgb, rgb(var(--brand)) 17%, var(--surface-1)); box-shadow: inset 2px 0 0 rgb(var(--brand)); }
.frow.selected:hover { background: color-mix(in srgb, rgb(var(--brand)) 21%, var(--surface-1)); }
.frow.generated { scroll-margin-block: 72px; animation: fm-generated-file 3s ease-out both; }
@keyframes fm-generated-file {
  0%, 34%, 68% { background: color-mix(in srgb, rgb(var(--brand)) 29%, var(--surface-1)); box-shadow: inset 3px 0 0 rgb(var(--brand)), 0 0 18px rgb(var(--brand) / .18); }
  17%, 51%, 85% { background: color-mix(in srgb, rgb(var(--brand)) 12%, var(--surface-1)); box-shadow: inset 2px 0 0 rgb(var(--brand) / .55); }
  100% { background: transparent; box-shadow: none; }
}
.fcheck, .fcheck-spacer { width: 18px; height: 18px; display: grid; place-items: center; flex: none; }
.filelist:not(.selection-mode) .frow:not(.fhead) > .fcheck,
.filelist:not(.selection-mode) .frow:not(.fhead) > .fcheck-spacer { display: none; }
.fcheck { position: relative; cursor: pointer; }
.fcheck input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fcheck > span { position: relative; display: grid; width: 17px; height: 17px; place-items: center; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--input); transition: border-color .1s, background .1s; }
.fcheck:hover > span { border-color: var(--muted); }
.fcheck svg { width: 12px; height: 12px; color: #fff; opacity: 0; stroke-width: 2.5; }
.fcheck input:checked + span, .fcheck input:indeterminate + span { border-color: rgb(var(--brand)); background: rgb(var(--brand)); }
.fcheck input:checked + span svg { opacity: 1; }
.fcheck input:indeterminate + span::after { position: absolute; left: 50%; top: 50%; width: 8px; height: 2px; border-radius: 2px; background: #fff; content: ""; transform: translate(-50%, -50%); }
.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 .ftype { color: var(--muted-2); font-size: 12px; width: 180px; text-align: center; flex: none; }
.frow .fsize { color: var(--muted); font-size: 12px; width: 110px; text-align: center; flex: none; }
.iconbtn {
  padding: 6px; border-radius: 8px; border: none; background: transparent;
  color: var(--muted); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; line-height: 0; vertical-align: middle;
}

/* Port Forward — compact enterprise row. The public address is an action, not a second card. */
.pw-enterprise-card { padding: 0; overflow: hidden; }
.pw-enterprise-head { margin: 0; padding: 13px 14px; align-items: center; border-bottom: 1px solid var(--border); }
.pw-server-row { display: flex; align-items: center; gap: 11px; min-height: 58px; padding: 11px 14px; }
.pw-service-icon { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pw-service-icon svg { width: 16px; height: 16px; }
.pw-service-title { color: var(--foreground); font-size: 14px; font-weight: 650; white-space: nowrap; }
.pw-address-chip { min-width: 0; max-width: 340px; height: 32px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--input); color: var(--foreground); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background .14s ease, border-color .14s ease; }
.pw-address-chip:hover { background: var(--hover); border-color: var(--primary); }
.pw-address-chip code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-size: 12.5px; font-weight: 600; }
.pw-address-chip svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--muted); }
.pw-address-chip:hover svg { color: var(--foreground); }
@media (max-width: 700px) {
  .pw-server-row { flex-wrap: wrap; }
  .pw-server-row .spacer { display: none; }
  .pw-address-chip { order: 3; width: calc(100% - 42px); max-width: none; margin-left: 41px; }
}
.iconbtn > svg { margin: auto; }
.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: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-2); 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); border-color: rgba(99,120,255,.22); 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 .ftype { color: var(--muted-2); }
.frow.fhead .fsize { color: var(--muted-2); }
.frow.fhead > div:last-child { width: 30px; flex: none; }
.fm-delete-list { max-height: 160px; overflow: auto; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--muted); font-family: var(--font-mono); font-size: 11.5px; line-height: 1.75; }

/* ── Modal overlay ── */
.modal-scrim { position: fixed; inset: 0; z-index: 200; background: var(--overlay); backdrop-filter: blur(8px) saturate(115%);
  display: grid; place-items: center; padding: 20px; animation: ctx-in .12s ease; }
.modal { width: 100%; max-width: 440px; background: var(--surface-1); color: var(--foreground);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.modal.wide { max-width: 620px; }
.modal-head { display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; flex: 1; }
.modal-title-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: rgb(var(--brand) / .11); color: rgb(var(--brand-light)); }
.modal-title-icon svg { width: 19px; height: 19px; }
.modal-title-icon.pro { background: rgb(255 196 64 / .14); color: #d89500; }
.modal-title-icon.warning { background: rgb(246 183 60 / .13); color: #c88900; }
.modal-title-icon.danger { background: rgb(248 113 113 / .12); color: var(--red); }
.modal-close { width: 30px; height: 30px; flex: none; }
.modal-close svg { width: 14px; height: 14px; }
.modal-body { padding: 18px; max-height: 60vh; overflow-y: auto; color: var(--foreground); }
.modal-copy { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); }
.modal-foot .btn { min-height: 36px; padding: 8px 14px; border-radius: 9px; }

/* PRO gates: outcome-led copy with a short, honest value summary. The helper
   supplies contextual benefits, so every gate keeps the same hierarchy. */
.modal.pro-upsell { border-color: var(--border-strong); }
.pro-upsell-copy { display: flex; flex-direction: column; gap: 15px; }
.pro-upsell-benefits { display: grid; gap: 9px; list-style: none; margin: 0; padding: 0; }
.pro-upsell-benefits li { display: flex; align-items: center; gap: 8px; color: var(--foreground); font-size: 13px; }
.pro-upsell-benefits li > span { width: 16px; height: 16px; flex: none; display: grid; place-items: center;
  border-radius: 50%; color: #d89500; background: rgb(255 196 64 / .12); }
.pro-upsell-benefits svg { width: 10px; height: 10px; stroke-width: 2.5; }
.pro-upsell-price { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2);
  color: var(--muted); font-size: 12.5px; }
.pro-upsell-price strong { color: var(--foreground); font-weight: 650; }
.pro-upsell-price span { color: var(--muted-2); margin: 0 2px; }

@media (max-width: 380px) {
  .modal.pro-upsell .modal-foot { align-items: stretch; flex-direction: column-reverse; }
  .modal.pro-upsell .modal-foot .btn { width: 100%; }
}

/* Edit Server: bounded banner editor + theme-aware RAM range. Explicitly
   positioning the band fixes the generic absolute .sh-img rule escaping the
   modal and covering the viewport. */
.modal.se-edit { max-width: 560px; }
.se-banner-card { margin-top: 4px; padding: 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.se-banner-copy { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.se-banner-copy b { font-size: 14px; color: var(--foreground); }
.se-banner-copy span { font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.cov-prev { width: min(320px, 100%); margin: 0 auto; }
.cov-band { position: relative; width: 100%; height: 170px; overflow: hidden; border-radius: 10px; background: #000; isolation: isolate; }
.cov-band .sh-grad, .cov-band .sh-veil { position: absolute; inset: 0; display: block; }
.cov-band .sh-veil { background: linear-gradient(180deg, transparent 8%, rgba(0,0,0,.35) 46%, #000 100%); }
.cov-facts { position: absolute; z-index: 3; left: 13px; right: 13px; bottom: 12px; display: flex; flex-direction: column; gap: 4px; color: #fff; }
.cov-nm { font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cov-sub { color: #a0a0a7; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cov-actions { position: absolute; z-index: 4; top: 10px; right: 10px; display: flex; gap: 7px; }
.cov-action { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border-radius: 9px; cursor: pointer; color: #fff; background: rgba(17,19,23,.8); border: 1px solid rgba(255,255,255,.32); backdrop-filter: blur(8px); }
.cov-action:hover { background: rgba(32,35,41,.94); border-color: rgba(255,255,255,.58); }
.cov-action.danger { color: #ff7777; background: rgba(54,17,24,.86); border-color: rgba(248,113,113,.6); }
.cov-action.danger:hover { background: rgba(76,24,32,.94); border-color: rgba(248,113,113,.8); }
.cov-action svg { width: 16px; height: 16px; }
.cov-btn { height: 40px; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--primary-border); border-radius: 7px; background: var(--primary); color: var(--inverse); font-size: 13px; font-weight: 700; }
.cov-btn svg { width: 14px; height: 14px; }
.se-banner-hint { min-height: 16px; margin: 8px 0 -4px; font-size: 11px; text-align: center; }
.se-range { --ram-progress: 0%; width: 100%; height: 22px; margin: 4px 0 0; padding: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.se-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, rgb(var(--brand)) 0 var(--ram-progress), var(--border-strong) var(--ram-progress) 100%); }
.se-range::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; appearance: none; -webkit-appearance: none; background: rgb(var(--brand)); border: 3px solid var(--surface-1); box-shadow: 0 0 0 1px var(--border-strong); }
.se-range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--border-strong); }
.se-range::-moz-range-progress { height: 6px; border-radius: 999px; background: rgb(var(--brand)); }
.se-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: rgb(var(--brand)); border: 3px solid var(--surface-1); box-shadow: 0 0 0 1px var(--border-strong); }
.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; }
.perm-card { margin-top: 12px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.perm-card .perm-row { padding: 10px 14px; }
.perm-intro { display: grid; gap: 3px; margin-top: 14px; }
.perm-intro b { font-size: 13px; }
.perm-intro span { color: var(--muted); font-size: 11.5px; }
.switch { position: relative; display: inline-block; width: 48px; height: 24px; 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: 1px solid var(--border-strong); border-radius: 999px; transition: background .15s, border-color .15s; cursor: pointer; }
.switch .track::before { content: ""; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; background: var(--foreground); border-radius: 50%; transition: transform .15s, background .15s; }
.switch input:checked + .track { background: var(--switch-on); border-color: var(--switch-on); }
.switch input:checked + .track::before { transform: translateX(24px); background: var(--switch-knob); }

/* ── Context menu (OLED) ── */
.ctxmenu {
  position: fixed; z-index: 300; min-width: 174px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 7px; padding: 4px; 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: 8px; width: 100%; min-height: 30px; padding: 5px 8px;
  border: none; background: transparent; color: var(--foreground); font-size: 13px;
  border-radius: 4px; cursor: pointer; text-align: left;
}
.ctxmenu button:hover, .ctxmenu button:focus-visible { background: var(--hover); outline: none; }
.ctxmenu button.danger { color: var(--red); }
.ctxmenu button.danger:hover { background: rgba(248,113,113,.12); }
.ctxmenu button svg { width: 15px; height: 15px; color: currentColor; }
.ctxmenu button.danger svg { color: var(--red); }
.ctxmenu .sep { height: 1px; background: var(--border); margin: 4px 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 ── */
/* This is a native database <select> utility, not a generic selected-state
   class. Scoping it prevents autocomplete rows and media cards that also use
   `.sel` from inheriting the 220px cap, dropdown arrow and select padding. */
select.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: var(--foreground); border-radius: 999px; transition: width .3s; }
.bk-bar-fill.full { background: var(--red); }
.bk-bar-fill.indet { width: 35% !important; background: var(--foreground); 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-no-match { max-width: 960px; margin: 0 auto; }
.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; }
/* Two per row, centred, like the desktop page. auto-fill spread them to five
   across on a wide window, which put the label and its control at opposite ends
   of a card nobody was reading that way. The max-width caps the pair and the
   auto margins hold it in the middle; below 720 it drops to one column rather
   than squeezing two. */
.cfg-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 10px; max-width: 960px; margin: 0 auto; }
@media (max-width: 720px) { .cfg-cards { grid-template-columns: minmax(0, 1fr); } }
.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) */
/* Capped and centred on the same 960 the cards use, so the heading, the
   search box and the rule under them line up with the column instead of running
   the width of the page while the cards sit in the middle of it. Same column the
   desktop page puts all three in. */
.cfg-head { gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border);
  margin: 0 auto 18px; max-width: 960px; width: 100%; }
.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.55; color: var(--muted); white-space: normal; word-break: break-word; }
.pl-info-desc p { margin: 0 0 10px; }
.pl-info-desc p:last-child { margin-bottom: 0; }
.pl-info-desc ul, .pl-info-desc ol { margin: 4px 0 10px; padding-left: 22px; }
.pl-info-desc li + li { margin-top: 3px; }
.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 img.emoji { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -.18em; margin: 0 .08em; border-radius: 0; }
.pl-info-desc a { color: rgb(var(--brand-light)); text-decoration: underline; text-underline-offset: 2px; }
.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; }

.pl-sort-picker { position: relative; width: 116px; }
.pl-sort-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 32px;
  padding: 0 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--input); color: var(--foreground);
  font: inherit; font-size: 12px; cursor: pointer; }
.pl-sort-current, .pl-sort-menu button { display: flex; align-items: center; gap: 7px; }
.pl-sort-btn svg, .pl-sort-menu svg { width: 13px; height: 13px; flex: none; }
.pl-sort-btn > svg { width: 12px; color: var(--muted); }
.pl-sort-menu { position: absolute; z-index: 80; top: calc(100% + 5px); right: 0; min-width: 132px; padding: 4px;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-1); box-shadow: var(--shadow); }
.pl-sort-menu button { width: 100%; min-height: 30px; padding: 5px 8px; border: 0; border-radius: 5px;
  background: transparent; color: var(--foreground); font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.pl-sort-menu button:hover, .pl-sort-menu button.selected { background: var(--surface-3); }

/* ── 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-grid .sc-span { grid-column: 1 / -1; }
.sc-policy-note { display: block; margin-top: 7px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.sc-policy-tag { display: inline-flex; align-items: center; margin-top: 5px; padding: 3px 7px; border-radius: 999px; border: 1px solid rgb(var(--brand) / .28); background: rgb(var(--brand) / .08); color: rgb(var(--brand-light)); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.sc-table-wrap { overflow-x: auto; }
.sc-table { min-width: 850px; }
.sc-table td:last-child { min-width: 170px; }
.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; }
tr.sc-off td:last-child { opacity: 1; }

/* ── 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: var(--bg); border-left: 1px solid var(--border-strong);
  display: flex; flex-direction: column; padding: 14px 14px 12px;
  box-shadow: none; 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: 24px; height: 24px; padding: 0; color: var(--foreground); }
.ai-head .iconbtn svg { width: 12px; height: 12px; }
.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 p:first-child { margin-top: 0; } .ai-msg p:last-child { margin-bottom: 0; }
.ai-msg code { background: var(--surface-3); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.ai-msg pre { background: var(--surface-3); padding: 10px; border-radius: 8px; overflow-x: auto; }
.ai-msg pre code { background: transparent; padding: 0; white-space: pre; }
.ai-msg ul, .ai-msg ol { margin: 6px 0; padding-left: 20px; }
.ai-msg.ai-bot li + li { margin-top: 4px; }
.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-image-preview { position:relative; width:46px; height:46px; flex:0 0 46px; }
.ai-image-preview img { width:100%; height:100%; object-fit:cover; border-radius:7px; border:1px solid var(--border); }
.ai-image-preview button { position:absolute; right:-5px; top:-7px; border:0; border-radius:50%; width:18px; height:18px; background:var(--red); color:white; cursor:pointer; }
.metrics { position:relative; }
.metric-menu { position:fixed; z-index:120; min-width:176px; padding:5px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface-1); color:var(--foreground); box-shadow:0 12px 28px rgb(0 0 0 / .28); }
.metric-menu label { display:flex; align-items:center; gap:9px; min-height:31px; padding:5px 8px; border-radius:5px; font-size:12.5px; color:var(--foreground); cursor:pointer; }
.metric-menu label:hover { background:var(--surface-3); }
.metric-menu input { accent-color:rgb(var(--brand)); }
#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: 8px; max-height: 50vh; overflow-y: auto; padding: 2px; }
.ai-hist-item { display: grid; grid-template-columns: 34px minmax(0,1fr) 16px; align-items: center; gap: 12px;
  width: 100%; padding: 11px 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer; text-align: left; color: var(--foreground); }
.ai-hist-item:hover { border-color: var(--border-strong); background: var(--surface-3); }
.ai-hist-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px;
  background: var(--surface-3); border: 1px solid var(--border); color: var(--muted); }
.ai-hist-icon svg { width: 15px; height: 15px; }
.ai-hist-copy { min-width: 0; display: grid; gap: 2px; }
.ai-hist-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-hist-date { font-size: 11px; }
.ai-hist-open { color: var(--muted-2); display: grid; place-items: center; }
.ai-hist-open svg { width: 13px; height: 13px; }

/* ── Misc ── */
.empty { color: var(--muted); padding: 44px; text-align: center; }
/* Material-style white spinner */
.loading { display: grid; place-items: center; padding: 50px; }
/* Track and head follow the theme: the old white-on-white was invisible on the
   light theme, where most of these sit on a white card. */
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--border-strong); border-top-color: var(--foreground); 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); }

/* ── File task centre (survives view switches) ── */
.file-task-center {
  position: fixed; right: 16px; bottom: 16px; z-index: 180;
  width: 304px; max-width: calc(100vw - 24px); overflow: hidden;
  background: var(--surface-2); color: var(--foreground);
  border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow);
}
.file-task-center.collapsed { width: auto; border: 0; overflow: visible; background: transparent; box-shadow: none; }
.file-task-head { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; border-bottom: 1px solid var(--border); }
.file-task-title { font-size: 13px; font-weight: 700; line-height: 18px; }
.file-task-count { color: var(--muted); font-size: 11px; line-height: 18px; margin-top: 2px; }
.file-task-headbtn, .file-task-cancel {
  width: 28px; height: 28px; padding: 0; display: grid; place-items: center; flex: none;
  border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer;
}
.file-task-headbtn:hover { color: var(--foreground); background: var(--hover); }
.file-task-headbtn svg, .file-task-cancel svg { width: 14px; height: 14px; }
.file-task-headbtn[data-min] svg { width: 12px; height: 12px; }
.file-task-list { max-height: min(326px, calc(100dvh - 92px)); overflow-y: auto; }
.file-task-item { min-height: 64px; display: flex; align-items: flex-start; gap: 9px; padding: 10px 8px 9px 11px; border-bottom: 1px solid var(--border); }
.file-task-item:last-child { border-bottom: 0; }
.file-task-icon { width: 22px; height: 22px; display: grid; place-items: center; flex: none; margin-top: 1px; color: rgb(var(--brand-light)); }
.file-task-icon svg { width: 15px; height: 15px; }
.file-task-item.running .file-task-icon svg { animation: spin 1.1s linear infinite; }
.file-task-item.done .file-task-icon { color: var(--green); }
.file-task-item.error .file-task-icon { color: var(--red); }
.file-task-item.cancelled .file-task-icon { color: var(--muted); }
.file-task-copy { min-width: 0; flex: 1; }
.file-task-name { overflow: hidden; color: var(--foreground); font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.file-task-detail { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.file-task-progress { position: relative; height: 3px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: var(--surface-1); }
.file-task-progress span { display: block; height: 100%; border-radius: inherit; background: rgb(var(--brand)); transition: width .15s ease; }
.file-task-progress.indeterminate span { animation: file-task-slide 1.1s ease-in-out infinite; }
@keyframes file-task-slide { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
.file-task-cancel:hover { color: var(--red); background: rgba(248,113,113,.12); }
.file-task-pill { min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--foreground); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow); cursor: pointer; font-size: 12px; font-weight: 650; }
.file-task-pill:hover { background: var(--hover); }
.file-task-pill svg { width: 14px; height: 14px; color: rgb(var(--brand-light)); }

/* Legacy upload selectors remain for cached clients; new uploads use File tasks. */
.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; }
  /* The phone viewport belongs to the console. Machine-wide graphs remain a
     desktop/tablet surface and cannot be re-enabled by the JS layout pass. */
  .metrics { display: none !important; }
  /* Wrapped mobile lines need a slightly clearer severity wash. Dominant ANSI
     tint bands receive their matching lift when each line is built in app.js. */
  .console .line.sev-err { background: rgba(248, 113, 113, .09); }
  .console .line.sev-warn { background: rgba(246, 183, 60, .085); }
  /* ...but only where there is a drawer to open. The servers list has no
     sidebar, so on that page the button did nothing at all. */
  body.no-drawer .hamburger { display: none; }
  .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 .ftype, .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-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.page-head .page-title { margin: 0; }

/* Server-list-only acquisition surface. Paid users never receive it. */
.managed-vps-upsell { display: flex; align-items: center; gap: 14px; width: min(760px, 100%); margin: 18px auto 0;
  padding: 13px 15px; color: var(--foreground); text-decoration: none; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 12px; border-left: 3px solid #34d399;
  transition: background .15s ease, border-color .15s ease; }
.managed-vps-upsell:hover { background: var(--surface-3); border-color: var(--border-strong); border-left-color: #34d399; }
.mvp-icon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 10px;
  color: #34d399; background: #162b24; border: 1px solid #305d4d; }
.mvp-icon svg { width: 20px; height: 20px; }
.mvp-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.mvp-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mvp-title-row strong { font-size: 14px; line-height: 1.25; }
.mvp-badge { padding: 3px 6px; border-radius: 5px; color: #34d399; background: #173d30;
  font-size: 8.5px; line-height: 1; font-weight: 800; letter-spacing: .06em; }
.mvp-subtitle { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.mvp-cta { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px;
  color: var(--primary-text); background: var(--primary); border: 1px solid var(--primary-border);
  border-radius: 8px; font-size: 12px; font-weight: 700; }
.mvp-cta svg { width: 13px; height: 13px; }
:root[data-theme="light"] .mvp-icon { background: #e7f8f1; border-color: #b9e5d3; color: #087a56; }
:root[data-theme="light"] .mvp-badge { background: #ddf7ec; color: #087a56; }
@media (max-width: 620px) {
  .managed-vps-upsell { align-items: flex-start; }
  .mvp-cta { padding: 8px; font-size: 0; align-self: center; }
  .mvp-cta svg { width: 15px; height: 15px; }
}
.create-btn { flex: none; padding: 7px 12px; font-size: 13px; border-radius: 8px; }
.create-btn svg { width: 15px; height: 15px; }
.create-btn.hidden { display: none; }

.cs-scrim { padding: 26px 20px; }
.cs-modal { max-width: 720px; display: flex; flex-direction: column; height: calc(100dvh - 52px); max-height: calc(100dvh - 52px);
  background: var(--surface-1);
  border: 1px solid var(--border-strong); border-radius: 16px;
  box-shadow: none; }
.cs-modal.cs-autoheight { height: auto; }
.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: var(--surface-2); 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: var(--surface-2); 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-head, .cs-footer { flex-shrink: 0; }
.cs-body { flex: 1; padding: 20px; overflow-y: auto; min-height: 0; }

/* 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: var(--input); border: 1px solid var(--border); color: var(--foreground);
  font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s; }
.cs-search input:focus { border-color: rgb(var(--brand)); box-shadow: 0 0 0 3px rgb(var(--brand) / .12); }
.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: var(--surface-1); }
.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;
  width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover;
  filter: blur(16px) saturate(1.12); opacity: .62; }
/* The band is a solid dark panel that simply ENDS: same as the desktop dialog,
   which darkens to opaque #0c0c0c at the bottom of the band and starts the form
   below it. It deliberately does not fade into the card - a gradient that has to
   reach the card colour goes grey through the middle on the light theme and
   leaves a visible seam wherever it lands. Same band in every theme. */
.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; color: #fff; 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: var(--input); }

/* 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: var(--input); border: 1px solid var(--border); 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: rgb(var(--brand)); box-shadow: 0 0 0 3px rgb(var(--brand) / .12); }
.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: var(--input); border: 1px solid var(--border); color: var(--foreground); cursor: pointer;
  font-size: 14px; text-align: left; transition: border-color .15s, box-shadow .15s; }
.cs-cbx:hover { border-color: var(--border-strong); }
.cs-cbx[aria-expanded="true"] { border-color: rgb(var(--brand)); box-shadow: 0 0 0 3px rgb(var(--brand) / .12); }
.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-1); 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-bot-id { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border-strong); }
.cs-bot-id img { width: 38px; height: 38px; flex: none; border-radius: 50%; object-fit: cover; background: var(--surface-3); }
.cs-bot-id > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-bot-id b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-bot-id small { color: var(--muted); font-size: 11px; }
.cs-bot-error { margin: 0; color: var(--red); font-size: 11.5px; line-height: 1.4; }
.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; }
:root[data-theme="light"] .cs-modal { background: var(--surface-1); border-color: var(--border-strong); box-shadow: none; }
:root[data-theme="light"] .cs-imm { background: var(--surface-1); }
:root[data-theme="light"] .cs-field input,
:root[data-theme="light"] .cs-field select,
:root[data-theme="light"] .cs-imm .cs-field input,
:root[data-theme="light"] .cs-imm .cs-field select,
:root[data-theme="light"] .cs-cbx { background-color: var(--input); border-color: var(--border-strong); color: var(--foreground); color-scheme: light; }
:root[data-theme="light"] .cs-field input:focus,
:root[data-theme="light"] .cs-field select:focus,
:root[data-theme="light"] .cs-cbx[aria-expanded="true"] { border-color: rgb(var(--brand)); box-shadow: 0 0 0 3px rgb(var(--brand) / .12); }
:root[data-theme="light"] .cs-footer { background: var(--surface-1); }
:root[data-theme="light"] .cs-warnbox { background: #fff8e8; border-color: #d69b24; }
:root[data-theme="light"] .cs-warnbox b,
:root[data-theme="light"] .cs-warnbox p { color: #8a4e00; }
/* 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; }

/* Host folder browser: keep its size stable, including empty directories. */
.cs-modal.cs-picker-mode { max-width: 560px; height: min(520px, calc(100dvh - 52px)); }
.cs-picker-mode .cs-body { display: flex; flex-direction: column; overflow: hidden; padding: 18px 20px; }
.cs-picker-mode .cs-picker { flex: 1; min-height: 0; gap: 14px; }
.cs-folder-path { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 6px;
  flex: none; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.cs-folder-up, .cs-folder-home { display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; flex: none; border: none; border-radius: 5px;
  color: var(--muted); background: transparent; cursor: pointer; }
.cs-folder-up svg, .cs-folder-home svg { width: 14px; height: 14px; }
.cs-folder-up:hover:not(:disabled), .cs-folder-home:hover:not(:disabled) { background: var(--surface-3); color: var(--foreground); }
.cs-folder-up:disabled, .cs-folder-home:disabled { opacity: .35; cursor: default; }
.cs-folder-location { flex: 1; min-width: 0; font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 12px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-picker-mode .cs-dirs { flex: 1; min-height: 0; max-height: none; padding: 4px;
  border-color: var(--border); background: var(--surface-1); }
.cs-picker-mode .cs-dir { flex: none; gap: 10px; min-height: 38px; padding: 8px 10px;
  border: none; border-radius: 6px; margin: 1px 0; }
.cs-picker-mode .cs-dir:hover, .cs-picker-mode .cs-dir:focus-visible { background: var(--surface-3); }
.cs-picker-mode .cs-dir:focus-visible, .cs-folder-up:focus-visible, .cs-folder-home:focus-visible {
  outline: 1px solid var(--muted); outline-offset: -1px; }
.cs-picker-mode .cs-dir svg { color: var(--muted); }
.cs-picker-mode .cs-dir > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-picker-mode .cs-dir svg.cs-dir-chevron { width: 14px; height: 14px; opacity: .7; }
.cs-folder-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 20px; color: var(--muted); font-size: 13px; text-align: center; }
.cs-folder-empty svg { width: 28px; height: 28px; opacity: .5; }
.cs-picker-mode .cs-newfolder, .cs-picker-mode .cs-picked { flex: none; }

/* Installed plugins: notify opt in + per row update chips */
.pl-notify { display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 11px 13px; margin-bottom: 12px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border); }
.pl-notify-ico { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: rgb(130 148 255 / .14); }
.pl-notify-ico svg { width: 16px; height: 16px; color: #8294ff; }
.pl-notify-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pl-notify-txt b { font-size: 13px; }
.pl-notify-txt span { font-size: 11.5px; color: var(--muted); }
.pl-chip { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; vertical-align: middle; }
.pl-chip.up { color: #34d399; background: rgb(52 211 153 / .14); border: 1px solid rgb(52 211 153 / .3); }
.pl-inst-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.pl-inst-bar .input { flex: 1; min-width: 0; }
.pl-inst-bar .btn { flex: none; }
.pl-note { font-size: 11px; color: #6b6b6b; margin-top: 3px; }
.btn.ok { color: #34d399; border-color: rgb(52 211 153 / .35); background: rgb(52 211 153 / .1); }
.btn.ok:hover:not(:disabled) { background: rgb(52 211 153 / .2); border-color: rgb(52 211 153 / .55); }
.pl-chip.dim { color: #8b8b8b; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }

/* Schedule form: backup scope */
.sc-scope { display: flex; gap: 18px; flex-wrap: wrap; }
.sc-scope-opt { display: flex; align-items: center; gap: 9px; font-size: 12.5px; cursor: pointer; }
.sc-scope-hint { margin: 8px 0 0; font-size: 11px; color: var(--muted); line-height: 1.5; }

/* Step 2 - modpack picker. Choosing a pack replaces the loader AND version
   pickers, because the pack's manifest decides both. */
.cs-mp { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 10px;
  background: #141414; border: 1px solid rgba(255,255,255,.13); transition: border-color .14s, background .14s; }
.cs-mp:hover { background: #171717; border-color: rgba(255,255,255,.24); }
/* The unpicked card opens the picker from anywhere on it, so it says so. The
   picked one is a summary with a Remove button and stays an ordinary row. */
.cs-mp:not(.cs-mp-sel) { cursor: pointer; }
.cs-mp-sel { border-color: rgba(var(--brand), .45); background: rgb(var(--brand) / .07); }
.cs-mp-ico { width: 40px; height: 40px; flex: none; border-radius: 9px; overflow: hidden;
  display: grid; place-items: center; background: #0d0d0d; border: 1px solid rgba(255,255,255,.09); }
.cs-mp-ico img { width: 100%; height: 100%; object-fit: cover; }
.cs-mp-ico svg { width: 18px; height: 18px; color: var(--muted); }
.cs-mp-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cs-mp-txt b { font-size: 13px; display: flex; align-items: center; gap: 8px; }
.cs-mp-txt span { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-mp .btn { flex: none; }
.cs-pro-pill { font-size: 9px; font-weight: 800; letter-spacing: .06em; padding: 2px 6px; border-radius: 5px;
  color: #fbbf24; background: rgba(251,191,36,.14); border: 1px solid rgba(251,191,36,.3); }

/* Modpack search modal */
.mp-modal .modal-body { display: flex; flex-direction: column; gap: 12px; }
.mp-list { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.mp-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 10px; background: #121212; border: 1px solid rgba(255,255,255,.09);
  color: inherit; font: inherit; transition: border-color .14s, background .14s; }
.mp-item:hover { background: #171717; border-color: rgba(255,255,255,.26); }
.mp-ico { width: 42px; height: 42px; flex: none; border-radius: 9px; overflow: hidden;
  display: grid; place-items: center; background: #0d0d0d; border: 1px solid rgba(255,255,255,.09); }
.mp-ico img { width: 100%; height: 100%; object-fit: cover; }
.mp-ico svg { width: 18px; height: 18px; color: var(--muted); }
.mp-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mp-meta b { font-size: 13px; }
.mp-meta > span { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-meta i { font-size: 10.5px; color: #5f5f5f; font-style: normal; }

/* Step 3 - install progress. Immersive like step 2: the game's art stays on
   screen, with the phase on the left and the number that matters on the right. */
.cs-imm-install .cs-imm-band { height: 196px; }
.cs-imm-install .cs-imm-in { padding: 22px 20px 16px;
  display: flex; flex-direction: column; }
/* Same solid band as the configure step, in every theme. Both light-mode
   overrides that used to live here fought it: one un-blurred the art, the other
   faded the band into the card, which put the progress text half on the artwork
   and half on the card. */

.cs-ins-hero { display: flex; gap: 16px; align-items: flex-start; }
.cs-ins-cover { position: relative; width: 84px; flex: none; aspect-ratio: 2 / 3; border-radius: 10px;
  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-ins-cover .cs-cover-glyph svg { width: 28px; height: 28px; }
.cs-ins-cover .cs-cover-glyph .gico-img { width: 38px; height: 38px; object-fit: contain; }
.cs-ins-cover.bot { aspect-ratio: 1; border-radius: 50%; }
.cs-ins-cover .cs-bot-avatar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-ins-meta { min-width: 0; padding-top: 4px; }
.cs-ins-meta h3 { margin: 8px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 16px rgba(0,0,0,.9); }
.cs-ins-sub { margin: 7px 0 0; font-size: 12.5px; color: #c7c7cf; max-width: 52ch;
  text-shadow: 0 1px 8px rgba(0,0,0,.8); }

/* "INSTALLING" pill: the pulsing dot is the not-frozen signal. */
.cs-ins-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.cs-ins-pill i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80;
  animation: ledPulse 1.8s ease-in-out infinite; }
.cs-ins-pill b { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: #c7c7cf; }

/* Clears the 196px band (the hero ends ~148) so the phase and the percentage
   sit wholly on the card instead of straddling the band's edge. */
.cs-ins-prog { margin-top: 56px; display: flex; flex-direction: column; gap: 9px; }
.cs-ins-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cs-ins-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 11.5px; color: var(--muted-2); }
.cs-ins-foot span:last-child { font-family: "JetBrains Mono", Consolas, monospace; }

.cs-progress { position: relative; width: 100%; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.cs-progress-bar { height: 100%; width: 0; border-radius: 4px;
  background: rgb(var(--brand)); transition: width .4s ease; }
/* Soft moving sheen so the bar never looks frozen between reports. */
.cs-progress::after { content: ""; position: absolute; inset: 0; border-radius: 4px;
  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; }
@keyframes cs-sheen { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
.cs-pct { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--foreground);
  font-family: "JetBrains Mono", Consolas, monospace; line-height: 1; }
.cs-status { font-size: 13.5px; font-weight: 600; color: var(--foreground); min-height: 19px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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 ═══════════════ */
/* Update action follows the neutral header controls. */
.hdr-update { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--foreground);
  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: var(--hover); border-color: var(--border-strong); }
.hdr-update svg { width: 16px; height: 16px; }
.hdr-update.hidden { 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: var(--surface-1); border: 1px solid var(--border-strong); color: var(--foreground);
  border-radius: 12px; padding: 5px; box-shadow: none; }
.con-selpop .selact { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 0; border-radius: 8px; padding: 6px 11px; color: var(--foreground); font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; font-family: inherit; }
.con-selpop .selact:hover { background: var(--hover); }
.con-selpop .selact:active { background: var(--selected); }
.con-selpop .selact.ai { color: rgb(var(--brand-light)); }
.con-selpop .selact svg { width: 13px; height: 13px; flex: none; stroke: currentColor; }
.con-selpop .selpop-div { width: 1px; height: 16px; background: var(--border); margin: 0 3px; }

/* ── FiveM/RedM cfx.re banner cards (mirrors the desktop plugins tab) ──── */
/* min() on the track floor, so the catalogue reaches one full-width column the
   way .pl-list does. A bare 320px floor is a minimum, not a request: on a phone
   the content area is narrower than that, so the single column was sized past
   the page and the card hung off the right edge instead of filling the line. */
.cfx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 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; }

/* Plugin toolbar controls share one stable height. Native selects otherwise
   inherit the taller general input padding and sit above the Installed button. */
.pl-toolbar-control { height: 32px; min-height: 32px; align-self: center; }
select.pl-toolbar-control { padding-top: 0; padding-bottom: 0; font-size: 12px; }

/* ── 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-composer { position: relative; border: 1px solid #262626; border-radius: 12px; background: #0c0c0c; overflow: visible; }
.dc-composebar { display: flex; align-items: center; gap: 3px; min-height: 40px; padding: 5px 7px; border-bottom: 1px solid #1f1f1f; flex-wrap: wrap; }
.dc-tool, .dc-more summary { min-width: 30px; height: 29px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: 600 12px/29px inherit; cursor: pointer; text-align: center; list-style: none; }
.dc-tool:hover, .dc-more summary:hover, .dc-more[open] summary { background: #1b1b1b; color: var(--foreground); }
.dc-tool.bold { font-weight: 850; }.dc-tool.italic { font-style: italic; }.dc-tool.under { text-decoration: underline; }.dc-tool.strike { text-decoration: line-through; }
.dc-composeinput.input { display: block; min-height: 104px; resize: vertical; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 12px 13px; }
.dc-composeinput.input:focus { border: 0; box-shadow: none; }
.dc-composefoot { display: flex; justify-content: space-between; gap: 12px; padding: 0 12px 9px; color: var(--muted-2); font-size: 10.5px; }
.dc-charcount { font-variant-numeric: tabular-nums; }
.dc-composepop { position: absolute; z-index: 90; top: 43px; left: 8px; width: min(340px, calc(100% - 16px)); max-height: 330px; overflow: auto; display: grid; gap: 8px; padding: 12px; background: #111; border: 1px solid #303030; border-radius: 12px; box-shadow: 0 16px 44px rgba(0,0,0,.62); }
.dc-composepop.hidden { display: none; }
.dc-composepop>b { font-size: 12px; }
.dc-compose-emojis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; max-height: 230px; overflow-y: auto; }
.dc-compose-emojis button { height: 34px; border: 0; border-radius: 7px; background: transparent; color: var(--foreground); font-size: 20px; cursor: pointer; }
.dc-compose-emojis button:hover, .dc-compose-menu button:hover { background: #202020; }
.dc-compose-emojis img { width: 23px; height: 23px; object-fit: contain; }
.dc-compose-menu { display: flex; flex-direction: column; gap: 3px; max-height: 220px; overflow-y: auto; }
.dc-compose-menu button { border: 0; border-radius: 7px; padding: 8px 9px; background: transparent; color: var(--foreground); text-align: left; cursor: pointer; }
.dc-more { position: relative; margin-left: auto; }
.dc-more>div { position: absolute; z-index: 85; right: 0; top: 34px; width: 150px; padding: 6px; border: 1px solid #303030; border-radius: 10px; background: #111; box-shadow: 0 12px 32px rgba(0,0,0,.55); }
.dc-more>div button { display: block; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; }
.dc-more>div button:hover { background: #202020; color: var(--foreground); }
.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; overflow-wrap: anywhere; }
.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-md-emoji { width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: -0.25em; margin: 0 0.08em; }
.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; }
.dc-md-mention { background: rgba(88, 101, 242, 0.3); color: #dee0fc; border-radius: 3px; padding: 0 2px; font-weight: 500; }
.dc-limits { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 10px 12px; border: 1px solid rgba(248, 113, 113, 0.45); background: rgba(248, 113, 113, 0.08); border-radius: 8px; color: #f8a5a5; font-size: 12px; line-height: 1.45; }

/* 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-newslash { display: flex; align-items: center; }.dc-newslash>span { display: grid; place-items: center; width: 40px; height: 40px; background: #151515; border: 1px solid #2a2a2a; border-right: 0; border-radius: 10px 0 0 10px; color: var(--muted); font-weight: 800; }.dc-newslash .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; }
/* Narrow screens: the field row stacks instead of squeezing two inputs, a
   toggle and a delete button into a phone's width. */
@media (max-width: 560px) {
  .dc-fieldrow { flex-wrap: wrap; }
  .dc-fieldrow .input { flex: 1 1 100%; }
}
.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%; }

/* Shared header sizing and integrations spacing. */
.hdr-icon { flex: none; padding: 0; }
.hdr-ai { flex: none; }
#int-body > .card, #int-body > .pwc { margin-bottom: 14px; }
@media (max-width: 720px) {
  .hdr-ai { width: 34px; padding: 0; justify-content: center; gap: 0; border-radius: 50%; }
  .hdr-ai > span { display: none; }
}

/* ─── Settings → Logs (per-server activity) ─────────────────────────────── */
/* No cards. The filters and the feed sit on the panel's own black: a bordered
   box around a search field is chrome, and on OLED it is one more edge
   competing with the hairlines that actually separate the entries. */
.activity-head { align-items: flex-start; }
.activity-head h2 { margin: 0; }
.activity-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.log-wrap { display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.log-tools { display: flex; flex-direction: column; gap: 10px; }
.log-filters { display: flex; align-items: center; gap: 10px; }
.log-search { position: relative; flex: 1 1 auto; min-width: 180px; display: flex; }
.log-search .input { width: 100%; padding-left: 32px; height: 34px; font-size: 12.5px; }
.log-search-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--muted-2); display: flex; pointer-events: none; }
.log-search-ic svg { width: 13px; height: 13px; }
.log-actor { flex: none; width: 190px; height: 34px; font-size: 12.5px; padding: 0 10px; }
.log-refresh { flex: 0 0 34px; width: 34px; height: 34px; padding: 0 !important; display: grid; place-items: center; }
.log-refresh svg { width: 12px; height: 12px; }

.log-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.log-chip { background: transparent; border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 12px; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.log-chip:hover { background: var(--surface-2); color: var(--foreground); }
.log-chip.on { background: rgb(var(--brand) / .12); border-color: rgb(var(--brand) / .24); color: var(--foreground); }

.log-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px;
  align-items: center; padding: 12px 10px; border-bottom: 1px solid var(--border); border-radius: 8px;
  transition: background .14s ease, border-color .14s ease; }
.log-row:hover { background: var(--hover); border-bottom-color: transparent; }
.log-row.last { border-bottom: 0; }
.log-pill { text-align: center; align-self: center; font-size: 9.5px; font-weight: 700; letter-spacing: .4px; border-radius: 5px; padding: 3px 7px; white-space: nowrap; }
.log-summary { font-size: 12.5px; color: var(--foreground); }
.log-meta { font-size: 11px; color: #6b6b6b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-when { text-align: right; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.log-stamp { font-size: 10.5px; color: #4a4a4a; font-family: Consolas, Menlo, monospace; }
.log-empty-motion { display: flex; flex-direction: column; align-items: center; padding: 24px 0 8px; text-align: center; }
.log-empty-title { color: var(--foreground); font-size: 14px; font-weight: 650; }
.log-empty-sub { margin-top: 4px; color: var(--muted); font-size: 11.5px; }
.log-demo-card { width: min(100%, 580px); margin-top: 16px; padding: 8px; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; }
.log-demo-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 7px; color: var(--muted); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.log-demo-head span { display: flex; align-items: center; gap: 7px; }
.log-demo-head small { color: var(--muted-2); font-size: 9.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.log-demo-live { width: 6px; height: 6px; border-radius: 999px; background: #34d399; box-shadow: 0 0 0 0 rgb(52 211 153 / .4); animation: logLivePulse 2s ease-out infinite; }
.log-demo-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px;
  padding: 10px 12px; text-align: left; background: var(--surface-2); border-radius: 7px; opacity: .38;
  animation: logDemoWake 5.4s cubic-bezier(.4,0,.2,1) var(--log-delay) infinite; }
.log-demo-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.log-demo-main b { overflow: hidden; color: var(--foreground); font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.log-demo-main span, .log-demo-row time { color: var(--muted-2); font-size: 10.5px; font-style: normal; white-space: nowrap; }
.log-empty-copy { max-width: 520px; margin-top: 12px; color: var(--muted-2); font-size: 12px; line-height: 1.45; }
.log-no-matches { padding: 54px 12px; color: var(--muted); }
@keyframes logDemoWake {
  0%, 38%, 100% { opacity: .38; transform: translateX(0); }
  7%, 28% { opacity: 1; transform: translateX(4px); }
}
@keyframes logLivePulse { 70%, 100% { box-shadow: 0 0 0 6px rgb(52 211 153 / 0); } }
@media (prefers-reduced-motion: reduce) { .log-demo-row, .log-demo-live { opacity: 1; animation: none; } }
@media (max-width: 520px) {
  .log-demo-row { grid-template-columns: auto minmax(0, 1fr); }
  .log-demo-row time { display: none; }
}


@media (max-width: 620px) {
  .log-row { grid-template-columns: 64px minmax(0, 1fr); }
  .log-when { grid-column: 2; text-align: left; }
  .log-filters { display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; }
  .log-search { min-width: 0; }
  .log-refresh { grid-column: 2; }
  .log-actor { grid-column: 1 / -1; width: min(190px, 100%); }
}

@media (max-width: 420px) {
  .log-wrap { gap: 12px; }
  .activity-head { margin-bottom: 16px; }
  .activity-head p { max-width: 34ch; }
  .log-row { gap: 9px; padding: 11px 8px; }
  .log-pill { font-size: 9px; padding: 3px 6px; }
  .log-summary { font-size: 12px; }
  .log-chips { gap: 6px; }
  .log-chip { padding: 6px 9px; }
}

/* ─── Header: server switcher, centred like the desktop title bar ─────────── */
.hdr-switch-wrap { position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; }
.hdr-switch {
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 9px;
  max-width: 280px; border: 0; border-radius: 8px; background: transparent;
  color: var(--foreground); cursor: pointer; transition: background .15s;
}
.hdr-switch:hover { background: var(--surface-2); }
.hdr-switch .gico { width: 16px; height: 16px; border-radius: 5px; flex: none; }
.hdr-switch .gico svg { width: 11px; height: 11px; }
.hdr-switch .nm {
  font-size: 12px; font-weight: 600; max-width: 180px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Online only. A red dot parked permanently in the chrome would read as an
   error to act on rather than as "not started" - same rule as the app. */
.hdr-switch .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.hdr-switch .chev { width: 13px; height: 13px; color: var(--muted-2); flex: none; transition: transform .18s; }
.hdr-switch[aria-expanded="true"] .chev { transform: rotate(180deg); }
.hdr-switch-wrap .srv-menu { top: 38px; left: 50%; transform: translateX(-50%); right: auto; min-width: 240px; }

/* Below this the bar has no room for a centred control, and the sidebar band
   is still a switcher, so nothing is lost by dropping it. */
@media (max-width: 900px) { .hdr-switch-wrap { display: none; } }

/* Discord sits in the chrome as a mark, not as a button: same colour as the
   app's title bar gives it, and no box around it. */
/* Discord is a peer of the AI button now, not a borderless mark: the whole
   strip settled on one shell (34 square, radius 9, surface-2 on a strong
   hairline) so the only control that breaks it is the amber one, on purpose. */

/* ── Shared palette compatibility layer ───────────────────────────────────
   Older feature-specific views predate the theme tokens. Keep their product
   colours (Discord, status, media artwork and portwarp amber), but route every
   neutral container through the same semantic surfaces used by the shell. */
html { background: var(--bg); color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

.login-split,
.console,
.console-motif,
.metrics,
.cm-s-material-darker.CodeMirror,
.cm-s-material-darker .CodeMirror-gutters,
.modal.oled,
#view-update { background: var(--bg) !important; }
.sv-grid, .sv-head, .sv-row { background: var(--surface-1) !important; }
.sv-row:hover { background: var(--surface-2) !important; }
.sv-row:active { background: var(--surface-3) !important; }

.login-aside { background: linear-gradient(180deg, var(--surface-1), var(--bg)); }
.modal-ov { background: var(--overlay); }

.wh-ph-card,
.wh-ev,
.cs-panel,
.cs-mp,
.mp-item,
.dc-card,
.dc-embedbox,
.dc-reward,
.mu-card,
.mu-cover,
.mu-plcover,
.ph-albcover,
.mu-scover,
.ph-tile,
.mi-rthumb,
.app-card,
.rd-acct,
.qual-box { background: var(--surface-1); border-color: var(--border); }

.cs-mp:hover,
.mp-item:hover,
.mi-result:hover,
.vid-ep:hover { background: var(--hover); border-color: var(--border-strong); }

.cs-control,
.cs-field input,
.cs-field select,
.cs-imm .cs-field input,
.cs-imm .cs-field select,
.cs-mp-ico,
.mp-icon,
.dc-select,
.dc-chip,
.dc-emoji-btn,
.dc-pills,
.dc-colorrow input[type="color"],
.dc-x,
.mu-chip,
.mu-pill,
.vid-seg,
.vid-searchbox,
.app-link,
.app-srvurl,
#ai-input { background-color: var(--input); border-color: var(--border); color: var(--foreground); }

.srv-row:hover { background: var(--hover); }
.srv-row.active { background: var(--selected); }
.srv-row.active .nm,
.srv-row.active .check { color: var(--foreground); }

:root[data-theme="light"] .console .line { color: #34363b; }
:root[data-theme="light"] .console .line.pw-waiting { color: #9A5A00; }
:root[data-theme="light"] .console .line.cmd,
:root[data-theme="light"] .console-link { color: #4054cc; }
/* Restated: the light theme's .line selector above outranks the band rules. */
:root[data-theme="light"] .console .line.sev-err { color: #F87171; }
:root[data-theme="light"] .console .line.sev-warn { color: #F6B73C; }
:root[data-theme="light"] .ftile.file { color: var(--muted); }
:root[data-theme="light"] .modal-ov { backdrop-filter: blur(4px); }
:root[data-theme="light"] .log-chip { border-color: var(--border); }
:root[data-theme="light"] .log-row { border-bottom-color: var(--border); }
:root[data-theme="light"] .log-meta,
:root[data-theme="light"] .log-stamp { color: var(--muted); }

@media (max-width: 680px) {
  .pwc-top { flex-direction: column; }
  .pwc-btn { width: 100%; justify-content: center; }
  .pwc-ft { grid-template-columns: 1fr; }
}
.hdr-icon#hdr-discord svg { width: 17px; height: 17px; }

/* The account circle carries the linked Discord picture when there is one. */


/* Config: the search box on the right of the page heading. */
.cfg-search { position: relative; display: flex; flex: none; width: 230px; margin-left: 12px; }
.cfg-search .input { width: 100%; padding-left: 32px; height: 34px; font-size: 12.5px; }
.cfg-search-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--muted-2); display: flex; pointer-events: none; }
.cfg-search-ic svg { width: 13px; height: 13px; }

/* Cross-client theme parity: these surfaces used to keep their OLED literals
   underneath the semantic palette. */
.srv-switch.sh { border-radius: 8px; box-shadow: none; }
.nav a { border: 0; position: relative; }
.nav a.active { box-shadow: inset 2px 0 0 var(--foreground); }
.nav a.active::before {
  display: none;
}

.metrics { background: var(--bg) !important; border-color: var(--border); }
.metric-top span:first-child { color: var(--muted); }
.metric-val { color: var(--foreground); }
.metric-track { background: var(--surface-3); }
.metric-fill { background: var(--green); }

.ai-drawer { background: var(--bg); border-color: var(--border-strong); box-shadow: none; color: var(--foreground); }
.ai-msg.ai-user { background: var(--primary); color: var(--inverse); border: 1px solid var(--primary-border); }
#ai-input { background: var(--input); border-color: var(--border); color: var(--foreground); }
#ai-input:focus { border-color: var(--border-strong); box-shadow: 0 0 0 2px rgb(var(--brand) / .13); }
.ai-sendbtn { background: var(--primary); color: var(--inverse); border: 1px solid var(--primary-border); }
.ai-sendbtn:hover { background: var(--hover); color: var(--foreground); border-color: var(--border-strong); }
.ai-sendbtn:disabled { background: var(--surface-3); color: var(--muted-2); border-color: var(--border); }
.ai-ring-fill { stroke: var(--foreground); }

.btn.wh-add { min-height: 36px; padding: 9px 14px; gap: 7px; }
.btn.wh-add svg { width: 14px; height: 14px; }

/* File Manager follows the desktop composition: identity at the left, actions
   at the right, then one full-width search field and the breadcrumb trail. */
.fm-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; flex: none; }
.fm-title h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.fm-title p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.fm-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.fm-search { margin-bottom: 12px; flex: none; }
.fm-search .input { width: 100%; }
.fm-actions .btn { min-height: 34px; }
.fm-actions .btn svg { width: 15px; height: 15px; }
.fm-iconbtn { width: 34px; height: 34px; padding: 0 !important; justify-content: center; }

/* Console command send is an icon-only square in all clients. */
.cmd-send { width: 40px; height: 40px; padding: 0 !important; display: inline-grid; place-items: center; flex: none; }
.cmd-send svg { width: 17px; height: 17px; }

/* Same PRO component values as Avalonia's ProBadge. */
:root { --pro-bg: rgba(251,191,36,.12); --pro-border: rgba(251,191,36,.30); --pro-text: #ffd45e; }
:root[data-theme="light"] { --pro-bg: rgba(246,183,60,.20); --pro-border: rgba(181,106,0,.70); --pro-text: #7a4700; }
.hdr-plan.pro {
  background: var(--pro-bg); border-color: var(--pro-border); color: var(--pro-text);
  border-radius: 5px; padding: 1px 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .07em;
}
.cs-pro-pill, .dc-pro {
  background: var(--pro-bg); border-color: var(--pro-border); color: var(--pro-text);
  border-radius: 5px; padding: 1px 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .07em;
  position: relative; overflow: hidden;
}
.cs-pro-pill::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 14px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-18px) skewX(-18deg); animation: navProSweep 3.2s ease-in-out infinite;
}

:root[data-theme="light"] #ai-mode-menu .danger,
:root[data-theme="light"] .ai-approval.danger { color: #c91c1c; font-weight: 600; }

@media (max-width: 720px) {
  .fm-head { align-items: flex-start; flex-direction: column; }
  .fm-actions { width: 100%; justify-content: flex-start; }
  .fm-selection { gap: 7px; padding-left: 11px; }
  .fm-selection-copy { min-width: 78px; }
  .fm-batch-actions { justify-content: flex-end; overflow-x: auto; scrollbar-width: none; }
  .fm-batch-actions::-webkit-scrollbar { display: none; }
  .fm-batch-actions button { width: 32px; flex: none; padding: 0; }
  .fm-batch-actions button span { display: none; }
}


/* ── Vanilla plugins card ──────────────────────────────────────────────
   A Vanilla server cannot run plugins, and this panel used to answer that by
   hiding the Plugins tab: no dead end, but no discovery either. The tab is
   shown now and carries the same upsell shape as Port Forward and MySQL. */
.vp-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  padding: 26px 24px; display: flex; flex-direction: column; align-items: center;
  gap: 14px; text-align: center; }
.vp-card h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.vp-card .vp-sub { margin: 0; font-size: 12px; color: var(--muted); max-width: 42ch; line-height: 1.55; }
.vp-prev { width: 100%; display: flex; flex-direction: column; gap: 10px; margin: 2px 0 4px; }
.vp-swap { display: flex; align-items: center; justify-content: center; gap: 10px; }
.vp-chip { display: inline-flex; align-items: center; gap: 7px; flex: none;
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 11px; background: var(--surface-2); }
.vp-chip .vp-jar { width: 15px; height: 15px; border-radius: 4px; flex: none; background: #6d737b; }
.vp-chip .vp-t { font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--muted-2); }
.vp-chip.to { border-color: rgba(130,148,255,.45); background: rgba(130,148,255,.12); }
.vp-chip.to .vp-t { color: rgb(var(--brand-light)); }
.vp-chip.to .vp-jar { background: #2f6b40; }
.vp-arrow { width: 16px; height: 16px; color: var(--muted-2); flex: none; }
.vp-arrow svg { width: 100%; height: 100%; display: block; animation: vpNudge 4s ease-in-out infinite; }
@keyframes vpNudge { 0%,72%,100% { transform: none } 80% { transform: translateX(3px) } 88% { transform: none } }
/* Loader names stacked in ONE cell, so the chip never resizes mid-cycle and
   nothing below it jumps. */
.vp-slot { display: grid; }
.vp-slot > * { grid-area: 1/1; opacity: 0; animation: vpCycle 16s linear infinite; }
.vp-slot > *:nth-child(2) { animation-delay: 4s }
.vp-slot > *:nth-child(3) { animation-delay: 8s }
.vp-slot > *:nth-child(4) { animation-delay: 12s }
@keyframes vpCycle { 0% { opacity: 0 } 2%,23% { opacity: 1 } 25%,100% { opacity: 0 } }
.vp-shelf { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
  padding: 6px; display: flex; flex-direction: column; gap: 5px; text-align: left; }
.vp-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 7px;
  background: var(--surface-1); border: 1px solid var(--border); }
.vp-row .vp-ico { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.vp-row .vp-meta { min-width: 0; flex: 1; }
.vp-row .vp-nm { font-size: 12.5px; font-weight: 600; color: var(--foreground);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-row .vp-ds { font-size: 11px; color: var(--muted-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pill, ring and tick share one fixed cell: the row keeps its width through
   the whole cycle. */
.vp-act { display: grid; place-items: center; width: 62px; height: 22px; flex: none; }
.vp-act > * { grid-area: 1/1; }
.vp-pill { font-size: 11px; font-weight: 700; color: var(--green); border-radius: 999px; padding: 2px 8px;
  border: 1px solid rgba(52,211,153,.4); background: rgba(52,211,153,.12); }
.vp-ring { width: 18px; height: 18px; opacity: 0 }
.vp-ring circle { fill: none; stroke-width: 2.6 }
.vp-ring .tk { stroke: rgba(52,211,153,.22) }
.vp-ring .fl { stroke: var(--green); stroke-linecap: round; stroke-dasharray: 44; stroke-dashoffset: 44;
  transform: rotate(-90deg); transform-origin: 50% 50% }
.vp-tick { width: 18px; height: 18px; color: var(--green); opacity: 0 }
.vp-tick svg { width: 100%; height: 100%; display: block }
.vp-row.demo .vp-pill { animation: vpPill 8s ease infinite }
.vp-row.demo .vp-ring { animation: vpRing 8s ease infinite }
.vp-row.demo .vp-ring .fl { animation: vpFill 8s ease infinite }
.vp-row.demo .vp-tick { animation: vpTick 8s ease infinite }
@keyframes vpPill { 0%,18% { opacity: 1 } 24%,94% { opacity: 0 } 100% { opacity: 1 } }
@keyframes vpRing { 0%,20% { opacity: 0 } 26%,62% { opacity: 1 } 68%,100% { opacity: 0 } }
@keyframes vpFill { 0%,26% { stroke-dashoffset: 44 } 62%,100% { stroke-dashoffset: 0 } }
@keyframes vpTick { 0%,64% { opacity: 0; transform: scale(.6) } 72%,92% { opacity: 1; transform: none } 100% { opacity: 0; transform: scale(.6) } }
.vp-keep { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted-2) }
.vp-keep svg { width: 12px; height: 12px; color: var(--green); flex: none }
/* Amber, not the app's primary: on a white card in Light the white primary
   button was the faintest thing on it. This is a PRO prompt and ScProSolid is
   already the app-wide colour for one. */
.vp-cta { width: 100%; max-width: 340px; min-height: 40px; border: 0; border-radius: 8px;
  background: #fbbf24; color: #3b2705; font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 12px }
.vp-cta:hover { background: #f0b01a }
:root[data-theme="light"] .vp-cta { background: #e9a317; color: #2e1d02 }
:root[data-theme="light"] .vp-cta:hover { background: #d8940d }
.vp-cta > svg { width: 15px; height: 15px; flex: none }
.vp-cta .vp-label > span { white-space: nowrap }
.vp-cta .vp-div { width: 1px; align-self: stretch; margin: 10px 0; flex: none; background: rgba(59,39,5,.28) }
.vp-cta .vp-price { display: inline-flex; align-items: baseline; gap: 6px; flex: none;
  font-family: "JetBrains Mono", monospace; font-size: 12px; white-space: nowrap }
.vp-cta .vp-was { font-weight: 600; opacity: .55; text-decoration: line-through }
.vp-cta .vp-now { font-weight: 800 }
.vp-alt { font-size: 11.5px; color: var(--muted-2) }
@media (max-width: 560px) {
  .vp-card { padding: 22px 16px; gap: 12px }
  .vp-card h3 { font-size: 17px }
  .vp-row .vp-ds { display: none }
  .vp-cta { max-width: none }
  .vp-cta .vp-was { display: none }
}
@media (prefers-reduced-motion: reduce) {
  .vp-arrow svg, .vp-slot > *, .vp-row.demo .vp-pill, .vp-row.demo .vp-ring,
  .vp-row.demo .vp-ring .fl, .vp-row.demo .vp-tick { animation: none }
  .vp-slot > * { opacity: 0 } .vp-slot > *:first-child { opacity: 1 }
  .vp-row.demo .vp-pill { opacity: 1 }
}

/* Server list retained from the reviewed redesign. */
.sv-grid .sv-head, .sv-grid .sv-row { grid-template-columns:minmax(0,2.2fr) minmax(0,2.6fr) 120px 32px; }
.sv-c-game { display:flex; flex-direction:column; gap:3px; min-width:0; font-size:12px; }
.sv-c-game > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sv-summary { display:none; }

/* October 2026: shared switches and light-theme contrast fixes. */
.switch:hover input:checked:not(:disabled) + .track { background: var(--switch-hover); border-color: var(--switch-hover); }
.switch input:focus-visible + .track { outline: 2px solid rgb(var(--brand-light)); outline-offset: 3px; }
.switch input:disabled + .track { opacity: .48; cursor: not-allowed; }
:root[data-theme="light"] .cs-imm-btn { background: var(--surface-2); border-color: var(--border); color: var(--foreground); }
:root[data-theme="light"] .cs-imm-btn:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--foreground); }
:root[data-theme="light"] .paid-badge { background: #fff; border-color: var(--border); color: #c91c1c; }
.public-port-warning { color: #f6a23c; display: inline-flex; align-items: center; vertical-align: middle; margin-right: 5px; }
.public-port-warning svg { width: 12px; height: 12px; }

:root[data-theme="light"] .bk-bar-fill.full { background: #c91c1c; }

.public-port-warning { background:transparent; border:0; padding:0; margin-right:5px; cursor:pointer; color:var(--warning-text,#f6b73c); display:inline-flex; align-items:center; vertical-align:middle; }
.public-port-warning svg { width:12px; height:12px; }

.cs-opt-description { display: block; font-size: 11px; font-weight: 400; color: var(--muted); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; }

.modal.public-port-dialog { width: 520px; max-width: calc(100vw - 28px); }
.public-port-dialog .pwu-card { border: 0; background: transparent; padding: 6px 0 0; }

/* Saved crash report: shared modal shell/buttons, bounded native text viewport. */
.log-crash-view { cursor: pointer; }
.log-crash-view:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.log-crash-view .log-summary { display: flex; align-items: center; gap: 7px; }
.log-crash-icon { display: inline-flex; flex: 0 0 13px; color: var(--muted); }
.log-crash-icon svg { width: 13px; height: 13px; }
.modal.crash-log-dialog { width: 760px; max-width: calc(100vw - 28px); }
.crash-log-name { margin: 0 0 12px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
pre.crash-log-text { display: block; width: 100%; height: min(420px, 45vh); min-height: 140px; margin: 0; padding: 8px; user-select: text; overflow: auto; white-space: pre; font-family: var(--mono, monospace); font-size: 11.5px; line-height: 1.6; color: var(--foreground); background: var(--surface-2); border-color: var(--border); }

/* General Settings shares the desktop's sections and host preference schema. */
.modal.general-settings-dialog { max-width: 1000px; }
.general-settings-dialog .modal-body { padding: 0; max-height: min(76vh, 740px); }
.gs-shell { display: grid; grid-template-columns: 180px minmax(0,1fr); min-height: 410px; }
.gs-nav { display: flex; flex-direction: column; gap: 3px; padding: 18px 12px; background: var(--bg); border-right: 1px solid var(--border); }
.gs-nav button { text-align: left; padding: 10px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 13px; }
.gs-nav button:hover, .gs-nav button.selected { color: var(--foreground); background: var(--hover); }
.gs-panel { padding: 22px; min-width: 0; }
.gs-panel h2 { margin: 0 0 16px; font-size: 18px; }
.gs-setting { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--border); }
.gs-label { min-width: 0; flex: 1; }
.gs-label strong { font-weight: 600; font-size: 13.5px; }
.gs-label p, .gs-label small { display: block; margin: 5px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.gs-control { max-width: 300px; flex-shrink: 0; }
.gs-control select { font-size: 12px; min-width: 160px; }
.gs-number { width: 100px; }
.gs-expanded { display: block; }
.gs-expanded .gs-control { max-width: none; margin-top: 14px; }
.gs-theme-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.gs-theme, .gs-experience { padding: 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--foreground); background: var(--surface-2); cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.gs-theme.selected, .gs-experience.selected { border-color: #5865f2; box-shadow: 0 0 0 1px #5865f2; }
.gs-theme-preview { display: grid; grid-template-columns: 25% 1fr; gap: 6px; height: 65px; padding: 9px; border-radius: 5px; background: #000; margin-bottom: 9px; }
.gs-theme-preview i { background: #171717; border-radius: 2px; }
.gs-theme-preview i:first-child { grid-row: span 2; }
.gs-theme-preview.dark { background: #1a1a1e; } .gs-theme-preview.dark i { background: #303136; }
.gs-theme-preview.light { background: #f4f5f7; } .gs-theme-preview.light i { background: #dce0e6; }
.gs-experience { min-width: 0; width: 100%; height: 100%; box-sizing: border-box; }
.gs-experience-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.gs-experience strong, .gs-experience small { display: block; margin-top: 6px; }
.gs-experience small { color: var(--muted); line-height: 1.5; font-size: 11px; }
/* Decorative miniatures distinguish a desktop title bar from a browser address bar. */
.gs-experience-preview { display: block; height: 83px; background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; }
.gs-preview-header { display: flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; background: var(--surface-3); }
.gs-preview-dots { display: flex; gap: 3px; margin-inline-end: 7px; }
.gs-preview-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted-2); }
.gs-preview-title { width: 55px; height: 4px; border-radius: 2px; background: var(--surface-1); }
.gs-experience-preview.browser .gs-preview-title { flex: 1; height: 10px; border-radius: 4px; }
.gs-preview-body { display: grid; grid-template-columns: 20px minmax(0,1fr); height: 61px; }
.gs-preview-sidebar { background: var(--surface-3); }
.gs-preview-content { display: flex; flex-direction: column; gap: 5px; padding: 9px; }
.gs-preview-content i { display: block; width: 55px; max-width: 100%; height: 5px; border-radius: 2px; background: var(--muted-2); }
.gs-preview-content i:nth-child(2) { width: 100%; height: 12px; background: var(--surface-2); }
.gs-preview-content i:nth-child(3) { width: 70px; height: 4px; }
.gs-pro { display: inline-block; margin-left: 5px; padding: 2px 5px; border-radius: 4px; background: #f6b73c; color: #151515; font-size: 9px; vertical-align: middle; }
.gs-feedback { min-height: 18px; color: var(--muted); font-size: 12px; margin: 14px 0 0; }
.gs-language-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 16px; margin-bottom: 20px; min-width: 0; background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px; color: var(--foreground); }
.gs-language-row > strong { font-size: 13.5px; font-weight: 600; }
.gs-language-row .gs-control { min-width: 0; flex: 0 1 240px; max-width: 240px; margin-inline-start: auto; }
.gs-language-row > small { color: var(--muted); font-size: 11.5px; }
.gs-language { position: relative; min-width: 0; width: 100%; max-width: 100%; }
.gs-language summary { display: flex; gap: 9px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; background: var(--surface-2); color: var(--foreground); list-style: none; font-size: 12px; }
.gs-language summary svg { width: 14px; height: 14px; margin-left: auto; }
.gs-language summary span { color: var(--foreground); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-language-options { position: absolute; z-index: 5; top: calc(100% + 5px); inset-inline-end: 0; min-width: 100%; max-height: 280px; overflow: auto; padding: 5px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); box-shadow: var(--shadow); }
.gs-language-options button { display: flex; align-items: center; gap: 9px; padding: 9px 10px; width: 100%; border: 0; border-radius: 4px; text-align: left; white-space: nowrap; color: var(--foreground); background: transparent; cursor: pointer; }
.gs-language-options button:hover, .gs-language-options button[aria-selected="true"] { background: var(--hover); }
.gs-language-options svg { width: 14px; height: 14px; margin-left: auto; }
.gs-language img { object-fit: cover; border-radius: 2px; }
@media (max-width: 640px) { .gs-shell { grid-template-columns: 1fr; } .gs-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 10px; } .gs-nav button { white-space: nowrap; } .gs-panel { padding: 16px; } .gs-setting { gap: 12px; } .gs-control { max-width: 54%; } .gs-language { min-width: 0; } }

.gs-group { margin: 18px 0 0; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

/* Compact swatches shared with the native theme picker. */
.gs-theme-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 10px 0 0; }
.gs-theme { position: relative; width: 48px; height: 48px; padding: 3px; border-radius: 8px; border: 1px solid var(--muted-2); }
.gs-theme.light { background: #fff; } .gs-theme.dark { background: #1a1a1e; } .gs-theme.oled { background: #000; }
.gs-theme.selected { border: 3px solid #5865f2; box-shadow: none; }
.gs-theme-check { display: none; position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center; background: #5865f2; color: #fff; }
.gs-theme.selected .gs-theme-check { display: flex; }
.gs-theme-check svg { width: 12px; height: 12px; }
.gs-theme-sync { display: grid; place-items: center; background: var(--surface-2); color: var(--foreground); }
.gs-theme:focus-visible { outline: 2px solid #5865f2; outline-offset: 4px; }

/* First-run setup reuses the Appearance controls and host permissions. */
.setup-dialog .gs-shell { display:block; }
.gs-setup-panel { padding:0; }
.gs-setup-continue { display:block; margin:20px 0 0 auto; }

.gs-setup-step { position:relative; margin-top:14px; padding:16px 16px 16px 45px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }
.gs-step-number { position:absolute; top:18px; inset-inline-start:16px; font-size:11px; color:var(--muted); }
.gs-setup-step .gs-setting, .gs-setup-step .gs-language-row { margin:0; padding:0; border:0; background:transparent; }
.gs-setup-step .gs-expanded { gap:12px; }

/* Play once on interaction; previews stay still when not in use. */
.gs-preview-title { position: relative; overflow: hidden; }
.gs-preview-progress { display: none; position: absolute; inset: auto 0 0; height: 2px; background: var(--switch-on); opacity: 0; transform-origin: left; }
.browser .gs-preview-progress { display: block; }
.gs-experience:is(:hover,:focus-visible) .gs-preview-content i { animation: gs-preview-reveal 650ms cubic-bezier(.215,.61,.355,1) both; }
.gs-experience:is(:hover,:focus-visible) .gs-preview-content i:nth-child(2) { animation-delay: 90ms; }
.gs-experience:is(:hover,:focus-visible) .gs-preview-content i:nth-child(3) { animation-delay: 180ms; }
.gs-experience:is(:hover,:focus-visible) .browser .gs-preview-content i { animation-delay: 180ms; }
.gs-experience:is(:hover,:focus-visible) .browser .gs-preview-content i:nth-child(2) { animation-delay: 270ms; }
.gs-experience:is(:hover,:focus-visible) .browser .gs-preview-content i:nth-child(3) { animation-delay: 360ms; }
.gs-experience:is(:hover,:focus-visible) .gs-preview-progress { animation: gs-preview-load 650ms cubic-bezier(.215,.61,.355,1) both; }
@keyframes gs-preview-reveal { from { opacity: .15; } to { opacity: 1; } }
@keyframes gs-preview-load { 0% { transform: scaleX(0); opacity: 0; } 12% { opacity: 1; } 85% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gs-experience:is(:hover,:focus-visible) .gs-preview-content i, .gs-experience:is(:hover,:focus-visible) .gs-preview-progress { animation: none; } }

/* Setup mirrors the native 560px card, without the Settings navigation shell. */
.modal.general-settings-dialog.setup-dialog { max-width: 560px; border-radius: 12px; }
.setup-dialog .modal-head { padding: 22px 24px 16px; min-height: 0; border: 0; }
.setup-dialog .modal-head h3 { font-size: 20px; font-weight: 600; }
.setup-dialog .modal-title-icon, .setup-dialog > .modal-foot { display: none; }
.setup-dialog .modal-body { max-height: calc(100dvh - 150px); }
.setup-dialog .gs-setup-panel { padding: 0 24px 24px; }
.setup-dialog .modal-copy { font-size: 12px; line-height: 1.4; margin-bottom: 16px; }
.setup-dialog .gs-setup-step { margin-top: 18px; padding: 16px; }
.setup-dialog .gs-setup-heading { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.setup-dialog .gs-step-number { position: static; font-size: 11px; }
.setup-dialog .gs-setup-language { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.setup-dialog .gs-setup-language .gs-control { flex: 0 1 240px; min-width: 0; max-width: 240px; margin-inline-start: auto; }
.setup-dialog .gs-theme-grid { margin-top: 10px; }
.gs-theme.gs-theme-sync { border: 1px solid var(--muted-2); background: var(--surface-2); border-radius: 8px; width: 48px; height: 48px; box-sizing: border-box; flex: none; }
.setup-dialog .gs-feedback:empty { display: none; }
.setup-dialog .gs-setup-footer { border-top: 1px solid var(--border); padding: 16px 24px; display: flex; justify-content: flex-end; }
.setup-dialog .gs-setup-continue { margin: 0; padding: 10px 24px; border-radius: 6px; }
@media (max-width: 420px) { .setup-dialog .gs-setup-language { flex-wrap: wrap; } .setup-dialog .gs-setup-language .gs-control { flex-basis: 240px; } }

.setup-dialog .gs-shell { min-height: 0; }

/* Native General Settings contract: one fixed-size surface with a 220px rail. */
:root[data-theme="dark"] { --topbar: var(--bg); }
.modal.general-settings-dialog:not(.setup-dialog) { position: relative; width: calc(100vw - 96px); max-width: 1400px; height: calc(100dvh - 96px); min-height: 420px; background: var(--bg); border-color: var(--border-strong); border-radius: 16px; }
.general-settings-dialog:not(.setup-dialog) > .modal-head { position: absolute; z-index: 2; top: 18px; right: 18px; padding: 0; min-height: 0; border: 0; background: transparent; }
.general-settings-dialog:not(.setup-dialog) > .modal-head h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.general-settings-dialog:not(.setup-dialog) > .modal-foot { display: none; }
.general-settings-dialog:not(.setup-dialog) > .modal-body { height: 100%; max-height: none; overflow: hidden; }
.general-settings-dialog:not(.setup-dialog) .gs-shell { height: 100%; min-height: 0; grid-template-columns: 220px minmax(0,1fr); }
.general-settings-dialog:not(.setup-dialog) .gs-nav { padding: 24px 18px; background: var(--bg); overflow-y: auto; gap: 3px; }
.general-settings-dialog:not(.setup-dialog) .gs-panel { padding: 28px 36px; overflow-y: auto; background: var(--bg); }
.general-settings-dialog:not(.setup-dialog) .gs-panel h2 { font-size: 20px; font-weight: 600; margin: 0 35px 24px 0; }
.gs-nav button { display: flex; align-items: center; gap: 12px; padding: 9px 12px; font-size: 13.5px; border-radius: 10px; }
.gs-nav button svg { width: 16px; height: 16px; flex: none; }
.gs-nav button span { min-width: 0; }
.gs-account { display: flex; gap: 10px; align-items: center; margin: 0 2px 14px; }
.gs-account-avatar { width: 40px; height: 40px; flex: none; pointer-events: none; }
.gs-account-details { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.gs-account-details strong, .gs-account-details small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.gs-account-details small { font-size: 10px; color: var(--muted); }
.gs-account-details .hdr-plan { padding: 2px 6px; font-size: 9px; }
.gs-card { padding: 0 16px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px; margin-bottom: 20px; }
.gs-card .gs-setting:last-child { border-bottom: 0; }
.gs-card .gs-label strong { font-size: 14px; font-weight: 400; }
.gs-card .gs-label p { font-size: 11.5px; margin-top: 3px; }
.gs-card .gs-label:has(strong:empty) { display: none; }
.gs-group { margin: 20px 2px 10px; font-size: 11px; letter-spacing: .06em; font-weight: 500; }
.gs-device { padding: 16px; }
.gs-device > strong { display: block; margin-bottom: 14px; font-size: 14.5px; }
.gs-device-row { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; font-size: 13px; border-bottom: 1px solid var(--border); color: var(--muted); }
.gs-device-row:last-child { border: 0; padding-bottom: 0; }
.gs-device-value { color: var(--foreground); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-device-copy { background: transparent; border: 0; padding: 0; color: #8294ff; font: inherit; cursor: pointer; }
.gs-about-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.gs-about-links button { background: transparent; border: 0; padding: 8px; color: var(--muted); cursor: pointer; font: inherit; font-size: 11.5px; }
.gs-about-links button:hover { color: var(--foreground); }
:root:not([data-theme]) .general-settings-dialog:not(.setup-dialog), :root[data-theme="oled"] .general-settings-dialog:not(.setup-dialog) { background: #000; }
.gs-feedback:empty { display: none; }
@media (max-width: 720px), (max-height: 516px) { .modal.general-settings-dialog:not(.setup-dialog) { width: calc(100vw - 24px); height: calc(100dvh - 24px); min-height: 0; } }
@media (max-width: 640px) { .general-settings-dialog:not(.setup-dialog) .gs-shell { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); } .general-settings-dialog:not(.setup-dialog) .gs-nav { flex-wrap: wrap; padding: 16px; padding-right: 52px; overflow-y: visible; } .gs-account { flex-basis: 100%; } .general-settings-dialog:not(.setup-dialog) .gs-panel { padding: 20px 16px; } }

.gs-webpanel-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gs-webpanel-controls label { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); }
.gs-webpanel-controls .gs-number { width: 80px; }
.gs-webpanel-controls svg { width: 14px; height: 14px; }
.gs-webpanel-address { font-family: var(--font-mono); color: #8294ff; }
@media (max-width: 760px) { .gs-webpanel-row { flex-wrap: wrap; } }

.gs-card .gs-label:has(strong:empty) + .gs-control { margin-top: 0; }
.general-settings-dialog:not(.setup-dialog) .modal-close { width: 28px; height: 28px; border-radius: 8px; }
.general-settings-dialog:not(.setup-dialog) .modal-close svg { width: 11px; height: 11px; }

.gs-nav-chevron { margin-inline-start: auto; }
.gs-nav-chevron svg { width: 11px; height: 11px; transition: transform .15s; }
.gs-nav-chevron.expanded svg { transform: rotate(180deg); }
.gs-subnav { margin: 4px 0 6px 22px; padding-left: 8px; border-left: 1px solid var(--border); }
.gs-subnav button { width: 100%; font-size: 13px; border-radius: 8px; }

.gs-card-copy { margin: 16px 0 0; color: var(--muted); font-size: 12px; }

/* General Settings integration and privacy twins of the native cards. */
.gs-group-description { margin: -4px 2px 12px; font-size: 11.5px; color: var(--muted); }
.gs-integration-header { padding: 16px 0 0; }
.gs-integration-header strong { font-size: 14px; }
.gs-integration-header p { margin: 3px 0 0; font-size: 11.5px; color: var(--muted); }
.gs-network-card > .gs-setting { border-bottom: 0; }
.gs-portwarp-preview { margin-bottom: 16px; padding: 22px 16px; border: 1px solid var(--border); border-radius: 4px; text-align: center; }
.gs-portwarp-preview > strong { font-size: 19px; font-weight: 650; }
.gs-portwarp-preview > p { margin: 7px 0 16px; color: var(--muted); font-size: 12px; }
.gs-portwarp-address { display: flex; align-items: center; gap: 10px; max-width: 420px; margin: auto; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--surface-2); text-align: left; }
.gs-portwarp-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); animation: gs-public-dot 8s infinite; }
.gs-portwarp-host { display: grid; flex: 1; min-width: 0; }
.gs-portwarp-host code { grid-area: 1/1; font: 650 12.5px/1.3 var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-portwarp-host code:first-child { animation: gs-local-preview 8s infinite; }
.gs-portwarp-host code:last-child { animation: gs-public-preview 8s infinite; }
.gs-portwarp-friends { display: flex; animation: gs-public-preview 8s infinite; }
.gs-portwarp-friends i { font-style: normal; font-size: 9px; color: white; background: #7c5cff; width: 22px; height: 22px; border: 2px solid var(--surface-2); border-radius: 50%; display: grid; place-items: center; margin-left: -6px; }
.gs-portwarp-friends i:nth-child(2) { background: #2db2ff; }
.gs-portwarp-friends i:nth-child(3) { background: #ff6f91; }
.gs-portwarp-address small { display: grid; font-size: 10px; color: var(--muted-2); }
.gs-portwarp-address small span { grid-area: 1/1; white-space: nowrap; }
.gs-portwarp-address small span:first-child { animation: gs-local-preview 8s infinite; }
.gs-portwarp-address small span:last-child { color: #22c55e; animation: gs-public-preview 8s infinite; }
@keyframes gs-local-preview { 0%,30%,90%,100% { opacity: 1; } 40%,80% { opacity: 0; } }
@keyframes gs-public-preview { 0%,30%,90%,100% { opacity: 0; } 40%,80% { opacity: 1; } }
@keyframes gs-public-dot { 0%,30%,90%,100% { background: var(--muted-2); } 40%,80% { background: #22c55e; box-shadow: 0 0 8px #22c55e55; } }
.modal.gs-privacy-dialog { width: calc(100vw - 32px); max-width: 440px; min-width: 0; padding: 28px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 14px; }
.gs-privacy-dialog > .modal-body { padding: 0; max-height: calc(100dvh - 112px); }
.gs-privacy-content > h3 { margin: 0 0 10px; text-align: center; font-size: 17px; font-weight: 600; }
.gs-privacy-shield { display: block; width: 26px; height: 26px; margin: 4px auto 16px; color: #22c55e; }
.gs-privacy-explanation { margin: 0 0 22px; white-space: pre-line; text-align: center; font-size: 12.5px; line-height: 19px; color: var(--muted); }
.gs-privacy-switches { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.gs-privacy-switches .gs-setting { margin: 0; padding: 14px 0; }
.gs-privacy-switches .gs-setting:last-child { border-bottom: 0; }
.gs-privacy-switches .gs-label strong { font-size: 13.5px; font-weight: 400; }
.gs-privacy-switches .gs-label p { font-size: 11px; color: var(--muted-2); margin-top: 3px; }
.gs-privacy-done { display: block; min-width: 120px; margin: 22px auto 0; padding: 10px 16px; border-radius: 10px; background: var(--foreground); color: var(--surface-1); font-weight: 600; border: 0; }
.gs-privacy-done:hover { background: var(--muted); }
@media (max-width: 420px) { .modal.gs-privacy-dialog { padding: 20px; } .gs-portwarp-friends { display: none; } }
@media (prefers-reduced-motion: reduce) { .gs-portwarp-preview * { animation: none !important; } .gs-portwarp-host code:last-child, .gs-portwarp-friends, .gs-portwarp-address small span:last-child { display: none; } }

.gs-portwarp-action { display: inline-flex; gap: 7px; align-items: center; margin-top: 16px; padding: 9px 16px; border: 0; border-radius: 4px; background: #f6b73c; color: #1a1206; font-family: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; }
.gs-portwarp-action:hover:not(:disabled) { background: #ffc655; }
.gs-portwarp-action:disabled { opacity: .55; cursor: not-allowed; }
.gs-portwarp-action svg { width: 13px; height: 13px; }
.gs-integration-reason { display: block; margin-top: 10px; font-size: 11px; color: var(--muted); }

/* Match compact native plugin headings and theme swatch gutters. */
.pl-kind { display: inline-block; vertical-align: middle; margin-inline-start: 6px; padding: 2px 6px; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--muted); font-size: 9px; font-weight: 700; }
.gs-card .gs-theme-grid { padding-top: 0; }

/* Session splash: one transition for initial boot and authenticated entry. */
.panel-splash { position: fixed; inset: 0; z-index: 20000; display: grid; place-items: center; background: #000; color: #fff; opacity: 1; transition: opacity .32s ease; }
.panel-splash-content { display: flex; flex-direction: column; align-items: center; gap: 30px; transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .32s ease; }
.panel-splash-logo { width: min(280px, 70vw); height: auto; }
.panel-splash-spinner { width: 36px; height: 36px; animation: splash-spin 1.5s linear infinite; }
.panel-splash-spinner circle { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 25 113; animation: splash-arc 1.5s ease-in-out infinite; transform-origin: center; }
.panel-splash.leaving { opacity: 0; pointer-events: none; }
.panel-splash.leaving .panel-splash-content { opacity: 0; transform: scale(.97); }
.session-reveal { animation: session-reveal .42s cubic-bezier(.22,1,.36,1) both; }
@keyframes splash-spin { to { transform: rotate(360deg); } }
@keyframes splash-arc { 0%,100% { stroke-dasharray: 12 113; stroke-dashoffset: 0; } 50% { stroke-dasharray: 80 113; stroke-dashoffset: -30; } 100% { stroke-dashoffset: -113; } }
@keyframes session-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .panel-splash, .panel-splash-content { transition: none; } .panel-splash-spinner, .panel-splash-spinner circle, .session-reveal { animation: none; } }

#side-address { padding:0; margin:0; color:var(--green); font-size:11.5px; }
#side-address .side-ip-val { color:inherit; font-size:inherit; }
#side-address:hover { background:transparent; }
#srv-up { display:none; }

#pl-price { width:104px; }

.ss-local-ip { background: transparent; border: 0; padding: 0; cursor: pointer; }
.ss-drow .ss-local-ip { color: #9da9ff; text-decoration: underline; text-underline-offset: 2px; }
:root[data-theme="light"] .ss-drow .ss-local-ip { color: rgb(var(--brand-light)); }
.ss-local-ip:disabled { cursor: default; }

.srv-badge.address-loading .led { visibility: hidden; animation: none; }
.srv-badge.address-loading::after { content: ""; position: absolute; inset: 0; width: 8px; height: 8px; margin: auto;
  box-sizing: border-box; border: 1.5px solid rgba(52,211,153,.25); border-top-color: var(--green); border-radius: 50%; animation: address-spin .8s linear infinite; }
@keyframes address-spin { to { transform: rotate(360deg); } }

.srv-badge.address-loading, .srv-switch.sh .srv-badge.address-loading { position: relative; }

.wh-create-modal, .wh-event-modal { width: min(560px, calc(100vw - 32px)); max-width: 560px; }
.wh-config { flex: none; width: 28px; height: 28px; }
.wh-config svg { width: 15px; height: 15px; }
.wh-form .wh-side-cap { color: var(--muted-2); }
.wh-hex { width: 96px; font-family: var(--font-mono); padding: 6px 8px; }

.int-group { font-size: 10.5px; font-weight: 600; color: var(--muted-2); letter-spacing: 1px; margin: 0 2px 12px; }

.wh-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.wh-tag { font-family: var(--font-mono); font-size: 11px; padding: 3px 7px; border-radius: 4px;
  background: var(--surface-3); border: 1px solid var(--border); color: #9da9ff; }
:root[data-theme="light"] .wh-tag { color: rgb(var(--brand-light)); }

.fm-actions #f-refresh svg, .fm-actions #f-mkdir svg, .fm-actions #f-upload svg { width: 13px; height: 13px; }

/* Account-scoped feedback invitation; keeps settings and modal layers above it. */
.feedback-survey {
  position: fixed; left: 12px; bottom: 12px; z-index: 20;
  width: 320px; max-width: calc(100vw - 24px); box-sizing: border-box;
  padding: 16px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-1); color: var(--foreground);
}
.feedback-survey-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feedback-survey-header strong { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; }
.feedback-survey-close {
  display: grid; place-items: center; width: 24px; height: 24px; margin: -4px;
  padding: 0; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--muted-2); font-size: 18px; line-height: 1;
}
.feedback-survey-close:hover { background: var(--hover); color: var(--foreground); }
.feedback-survey p { margin: 12px 0 14px; color: var(--muted); font-size: 12px; line-height: 18px; }
.feedback-survey-action.btn { min-height: 32px; padding: 8px 12px; gap: 10px; font-size: 12px; font-weight: 600; text-decoration: none; }
.feedback-survey-action svg { width: 8px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.feedback-survey :is(button,a):focus-visible { outline: 2px solid var(--foreground); outline-offset: 3px; }