@font-face {
  font-family: Inter;
  src: url("/assets/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root,
:root[data-theme="oled"] {
  --server-sidebar-width: 240px;
  --server-sidebar-compact-width: 264px;
  --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: var(--foreground);
  --switch-hover: #d9d9d9;
  --switch-knob: var(--surface-1);
  --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: #0e0e0e;
  --surface-1: #111111;
  --surface-2: #161616;
  --surface-3: #1c1c1c;
  --input: #111111;
  --hover: #161616;
  --selected: #1c1c1c;
  --border: #262626;
  --border-strong: #383838;
  --muted: #a8a8a8;
  --muted-2: #848484;
  --foreground: #f5f5f5;
  --inverse: #0a0a0a;
  --primary: #fafafa;
  --primary-border: #fafafa;
  --primary-hover: #ffffff;
  --primary-pressed: #e5e5e5;
  --overlay: rgba(0, 0, 0, .58);
  --topbar: rgba(17, 17, 17, .92);
  --scroll-thumb: #383838;
  --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-hover: #38383d;
  --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; }
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece, ::-webkit-scrollbar-corner { background: transparent; border: 0; box-shadow: none; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-thumb:hover { background-color: var(--muted-2); }
svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; 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. */
/* 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: 3px; flex: none;
  background: var(--border-strong); border: 0; color: #fff; transition: background .15s;
}
.hdr-avatar::before { content:""; position:absolute; inset:1.5px; border-radius:7px; background:var(--surface-1); z-index:1; pointer-events:none; }
.hdr-avatar:hover { background: var(--border-strong); }
.hdr-avatar svg { width: 15px; height: 15px; }
.hdr-avatar.has-ring { padding: 3px; border-width: 0; }
.hdr-avatar.has-ring:hover { border-color: transparent; }
.hdr-avatar img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; display: block; }
.hdr-avatar.is-initial, .hdr-avatar.is-initial.is-pro-initial { background: var(--border-strong); color: #fff; }
.avatar-initial { position: relative; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 5px; background: #171717; color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1; }
.hdr-avatar.is-pro-initial .avatar-initial { background: #3C4ECC; }
.avatar-ring-layer { position: absolute; inset: 0; z-index: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;
}
@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: 10px 12px; border-radius: 4px;
  background: var(--input); border: 1px solid var(--border);
  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:hover, .input:focus { border-color: var(--border-strong); box-shadow: none; }
.input:disabled { background: var(--surface-2); color: var(--muted); opacity:.72; border-color:var(--border); }
.input[readonly] { background:var(--surface-2); }
.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: 10px 12px; border-radius: 4px; }
.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 rgb(var(--brand-light)); 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(--muted); }
.sv-state.off .led { background: var(--muted-2); }

/* 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. */
}

/* 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 - var(--workspace-top, 0px)); }
.sidebar {
  width: var(--server-sidebar-width); flex: none; display: flex; flex-direction: column; gap: 4px;
  padding: 20px 14px; border-right: 1px solid var(--border); background: var(--bg);
  position: sticky; top: var(--workspace-top, 0px); height: calc(100vh - var(--workspace-top, 0px));
  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); }

/* Compact server identity shared with the native sidebar. */
.srv-switch.sh {
  display: block; width: 100%; height: auto; padding: 4px 0 0;
  border: 0; border-radius: 8px; background: transparent;
  text-align: left; cursor: pointer;
}
.srv-switch.sh:hover { border: 0; }
.sh-identity { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; }
.sh-title-stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.srv-switch.sh .gico { display: grid; place-items: center; width: 30px; height: 30px; border: 0;
  border-radius: 10px; background: var(--surface-2); flex: none; overflow: hidden; }
.srv-switch.sh .gico :is(svg, .gico-img) { position: static; width: 26px; height: 26px; object-fit: contain; }
.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 { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.srv-switch.sh .nm {
  font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--foreground);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  white-space: normal; overflow: hidden; overflow-wrap: anywhere;
}
.sh-state { display: flex; align-items: center; gap: 6px; min-width: 0; margin-left: 40px; }
.sh-state-text { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.srv-switch.sh .srv-badge { display: inline-flex !important; position: static; flex: none; }
.srv-switch.sh .sub { font-size: 11px; color: var(--muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-switch.sh .srv-up { font-size: 11px; color: var(--muted-2); font-family: var(--font-mono); }
.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: var(--muted-2); }

/* 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-status-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; margin-top: 8px; }
/* Status stays separate from the address and power controls. */
:root { --sidebar-online-surface: #0B1F18; --sidebar-online-text: #34D399; }
:root[data-theme="dark"] { --sidebar-online-surface: #162B24; }
:root[data-theme="light"] { --sidebar-online-surface: #E7F8F1; --sidebar-online-text: #087A56; }
.side-status-controls .sh-state { flex: 0 1 auto; min-width: 0; margin: 0; padding: 3px 6px; border-radius: 99px; background: var(--surface-2); }
.side-status-controls .sh-state.online { background: var(--sidebar-online-surface); }
.side-status-controls .srv-badge.on .led { background: var(--sidebar-online-text); animation: none; }
.side-status-controls .sh-state-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-power { flex: none; display: flex; align-items: center; gap: 6px; margin: 0; }
.side-power .btn { flex: 0 0 32px; width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0;
  border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); color: var(--foreground); }
.side-power .btn svg { width: 18px; height: 18px; stroke-width: 2; }
.side-power .btn:is(:hover,:focus-visible) { background: var(--hover); border-color: var(--border-strong); }
.side-power #btn-stop { color: #dc3645; }
.side-power #btn-stop:is(:hover,:focus-visible) { background: rgba(220,54,69,.094); border-color: #dc3645; }
.side-power .btn-loading:disabled { 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: 36px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid transparent; color: var(--muted); font-size: 13px; 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); border-color: var(--border-strong); font-weight: 600; }
.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: 8px 12px; color: var(--muted); font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 10px; border-radius: 10px; }
.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 - var(--workspace-top, 0px)); 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 6px;
  align-items: center; justify-content: center; color: rgb(var(--brand-light)); vertical-align: -2px; }
.console .console-command-mark svg { display:block; width:16px; height:16px; shape-rendering:geometricPrecision; }
.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 is 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; border-radius: 6px; }
.console .line.sev-err { color: #F87171; background: rgba(248, 113, 113, .06); }
.console .line.sev-warn { color: #F6B73C; background: rgba(246, 183, 60, .055); }
/* 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 { z-index: 300; }
.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%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%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 .3s cubic-bezier(.22,.8,.25,1), 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 { width: 0; margin-right: -12px; opacity: 0; visibility: hidden; pointer-events: 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; border-radius:12px; }
.pw-enterprise-head { margin: 0; padding: 13px 14px; align-items: center; border-bottom: 1px solid var(--border); }
.pw-server-row { display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:8px 12px;min-height:58px;padding:12px 18px; }
.pw-server-row .spacer{display:none;}.pw-server-row :is(#pw-spin,#pw-switch-wrap){grid-column:3;grid-row:1;}
.pw-service-icon { width: 20px; height: 20px; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pw-service-icon svg { width: 18px; height: 18px; }
.pw-service-title { grid-column:2;grid-row:1;color:var(--foreground);font-size:13px;font-weight:600;white-space:normal; }
.pw-address-chip { grid-column:2/4;grid-row:2;justify-self:start;min-width: 0; max-width:100%; min-height:32px; padding:6px 12px; border: 1px solid var(--border-strong); border-radius:99px; 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 { min-width:0;white-space:normal;overflow-wrap:anywhere;color:inherit;font:600 11.5px/1.5 var(--font-mono); }
.pw-address-chip svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--muted); }
.pw-address-chip:hover svg { color: var(--foreground); }
.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, .modal-ov {
  position: fixed; inset: 0; background: rgb(0 0 0 / .58); backdrop-filter: blur(8px);
  display: grid; place-items: center; padding: 20px;
  animation: modal-overlay-in 180ms ease-out both;
}
.modal-scrim { z-index: 200; }
.modal-scrim > .modal, .modal-ov > .modal { animation: modal-card-in 180ms cubic-bezier(.2,.75,.3,1) both; }
.modal-scrim.closing, .modal-ov.closing { animation: modal-overlay-out 150ms ease-in both; }
.modal-scrim.closing > .modal, .modal-ov.closing > .modal {
  pointer-events: none; animation: modal-card-out 150ms ease-in both;
}
@keyframes modal-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-overlay-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes modal-card-in { from { transform: translateY(6px); } to { transform: translateY(0); } }
@keyframes modal-card-out { from { transform: translateY(0); } to { transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .modal-scrim, .modal-ov, .modal-scrim.closing, .modal-ov.closing,
  .modal-scrim > .modal, .modal-ov > .modal,
  .modal-scrim.closing > .modal, .modal-ov.closing > .modal { animation: none; }
}
.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:flex-start; gap:12px; min-height:0; padding:18px 18px 8px; }
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 600; flex: 1; }
.modal-close { width:32px; height:32px; flex:none; margin-block:-6px; align-self:flex-start; }
.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; }
.modal-foot .btn, .cs-footer .btn { min-height: 36px; padding: 8px 14px; border-radius: 999px; }

/* 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:12px; }
.pro-upsell-benefits { display: grid; gap: 7px; 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: var(--muted); background: var(--surface-2); }
.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-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: 32px; height: 18px; flex: none; cursor: pointer; }
.switch::after { content: ""; position: absolute; inset: -5px 0; }
.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-color .16s ease-out, border-color .16s ease-out; cursor: pointer; }
.switch .track::before { content: ""; position: absolute; width: 12px; height: 12px; left: 2px; top: 2px; background: var(--foreground); border-radius: 50%; transition: transform .16s cubic-bezier(.215,.61,.355,1), background-color .16s ease-out; }
.switch input:checked + .track { background: var(--switch-on); border-color: var(--switch-on); }
.switch input:checked + .track::before { transform: translateX(14px); background: var(--switch-knob); }
@media (prefers-reduced-motion: reduce) { .switch .track, .switch .track::before { transition: none; } }

/* ── 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 140ms cubic-bezier(.215,.61,.355,1); transform-origin: top left;
}
@keyframes ctx-in { from { opacity: 0; transform: translateY(4px) scale(.98); } 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) ── */
.file-editor-header { display:flex; align-items:center; gap:12px; min-height:48px; margin-bottom:12px; }
.file-editor-header > .iconbtn { flex:none; width:32px; height:32px; border-radius:99px; }
.file-editor-identity { flex:1; min-width:0; display:grid; gap:3px; }
.file-editor-identity h2 { margin:0; font-size:16px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-editor-identity p { margin:0; color:var(--muted-2); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-editor-header #e-save { display:inline-flex; align-items:center; justify-content:center; line-height:1; flex:none; height:32px; min-height:0; padding:0 14px; border-radius:99px; }
.file-editor-shell .CodeMirror { font-family:'ServerCreator Console',var(--font-mono); font-size:13px; line-height:1.6; color:var(--foreground); }
.file-editor-shell .CodeMirror-lines { padding:12px 0; }
.file-editor-shell .CodeMirror pre.CodeMirror-line, .file-editor-shell .CodeMirror pre.CodeMirror-line-like { padding:0 12px; }
.file-editor-shell .CodeMirror-gutters { border-right:1px solid var(--border); padding-inline:4px; }
.file-editor-shell .cm-s-material-darker .CodeMirror-linenumber { color:var(--muted-2); }
.file-editor-shell .cm-s-material-darker .CodeMirror-cursor { border-left-color:var(--foreground); }
.file-editor-shell .CodeMirror-selected { background:var(--selected) !important; }

.editor-shell { border: 1px solid var(--border); border-radius: 12px; 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: 13px; 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: 13px;
  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%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; }
.db-sqlpanel { flex: none; display: grid; gap: 8px; margin: 0 0 12px; }
.db-sqlpanel textarea { min-height: 96px; max-height: 180px; resize: vertical; font-family: "JetBrains Mono", Consolas, monospace; font-size: 13px; }
.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-workspace { container: db-workspace / inline-size; display: flex; flex: 1; min-height: 0; min-width: 0; }
.db-query-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.db-query-context { font-size: 12px; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-query-hint { font-size: 11px; color: var(--muted-2); }
.db-query-run { flex: none; min-width: 112px; height: 32px; border-radius: 99px; padding: 0 12px; }
.db-action { width: 34px; height: 32px; border: 0; border-radius: 99px; color: var(--muted-2); background: transparent; }
.db-action svg { width: 14px; height: 14px; stroke-width: 1.5; }
.db-action:is(:hover,:focus-visible) { color: var(--foreground); background: var(--hover); }
.db-retry { margin-top: 8px; height: 32px; border-radius: 99px; padding: 0 14px; }
@container db-workspace (max-width: 640px) {
  .db-layout:not(.db-unavailable) { flex-direction: column; }
  .db-layout:not(.db-unavailable) > .db-tree { width: auto; flex: 0 0 130px; max-height: 130px; border-right: 0; border-bottom: 1px solid var(--border); }
  .db-main { min-height: 0; }
}

.db-layout .db-results { border: none; border-radius: 0; background: transparent; }
.db-tree { width: 220px; 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-catalogue-meta { margin-top: 2px; color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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-desc table { width:100%;border-collapse:collapse;margin:10px 0; }
.pl-info-desc th,.pl-info-desc td { padding:7px 9px;border:1px solid var(--border);text-align:start; }
.pl-info-desc pre { max-width:100%;overflow:auto;padding:10px;background:var(--surface-2);border-radius:8px; }
.pl-info-desc pre code { padding:0;background:transparent;white-space:pre; }
.pl-info-desc details { margin:10px 0; }.pl-info-desc summary { cursor:pointer;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-list { display: flex; flex-direction: column; gap: 4px; }
.sc-row { display: grid; grid-template-columns: 28px minmax(0,1fr) auto auto; align-items: center; gap: 12px; min-height: 64px; margin-inline: 4px; padding: 12px; background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 8px; }
.sc-row:hover { background: var(--surface-2); }
.sc-action-icon { width: 28px; height: 28px; display: grid; place-items: center; background: transparent; color: var(--muted); }
.sc-action-icon svg { width: 16px; height: 16px; }
.sc-identity { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-identity strong { color: var(--foreground); font-size: 13px; font-weight: 600; }
.sc-identity > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-summary { font-size: 11px; color: var(--muted); }
.sc-next { width: 160px; display: flex; flex-direction: column; gap: 4px; margin: 0 12px 0 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.sc-next > :first-child { font-size: 10.5px; color: var(--muted-2); }
.sc-next-inline { display: none; font-size: 11px; color: var(--muted-2); }
.sc-actions { display: flex; align-items: center; gap: 6px; }
.cfg-field .switch, .sc-actions .switch { margin: 0; flex: none; }
.sc-actions .installed-action:is(:hover,:focus-visible) { color: var(--foreground); background: var(--selected); }
.sc-empty { display: flex; align-items: center; flex-direction: column; gap: 12px; max-width: 440px; text-align: center; }
#sc-body.schedules-empty { display: grid; place-items: center; padding: 24px; }
.sc-empty-copy { display: grid; gap: 4px; }
.sc-empty-copy strong { font-size: 15px; font-weight: 600; color: var(--foreground); }
.sc-empty-copy p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.sc-empty > .btn, .users-empty-state > .btn { margin-top: 8px; }
#u-add { height: 32px; min-height: 32px; padding: 0 14px; border-radius: 99px; }
.btn.plugin-install { height: 28px; min-height: 28px; min-width: 0; padding: 4px 11px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: 11px; font-weight: 500; gap: 6px; }
.btn.plugin-install svg { width: 11px; height: 11px; stroke-width: 1.6; }
.btn.plugin-install:is(:hover,:focus-visible) { background: var(--hover); color: var(--foreground); border-color: var(--border-strong); }
.sc-empty > svg { width: 32px; height: 32px; color: var(--muted-2); }
#sc-new { height: 32px; min-height: 32px; padding: 0 14px; border-radius: 99px; font-size: 12px; }
#sc-body { container-type: inline-size; }
@container (max-width: 639px) {
  .sc-row { grid-template-columns: 28px minmax(0,1fr) auto; }
  .sc-next { display: none; }
  .sc-next-inline { display: block; }
}
.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 .16s cubic-bezier(.215,.61,.355,1), background-color .16s ease-out;
}
.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; } }
#view-servers.server-workspace, #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 (prefers-reduced-motion: reduce) {
  .sc-in, #view-servers.server-workspace, #view-server.shell { animation: none; }
}
@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: var(--workspace-top, 0px); height: calc(100dvh - var(--workspace-top, 0px)); }
}

.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(8px); pointer-events: none; transition: opacity .12s, transform .12s;
}
.ai-ring:hover .ai-ring-tip { opacity: 1; transform: none; }

/* Approval cards retain exact previews with neutral PortWarp chrome. */
.ai-msg.ai-approval {align-self:stretch;max-width:100%;min-width:0;background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;cursor:default;color:var(--foreground);}
.ai-msg.ai-approval:hover {background:var(--surface-1);}
.ai-appr-head {display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:8px;}
.ai-appr-icon{display:flex;color:var(--muted);}.ai-appr-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.ai-appr-title{font-size:12.5px;font-weight:600;min-width:0;overflow-wrap:anywhere;line-height:18px;}
.ai-appr-status{display:flex;align-items:center;gap:5px;max-width:106px;font-size:10.5px;font-weight:400;line-height:15px;color:#d59528;}.ai-appr-status::before{content:"";height:5px;width:5px;flex:none;border-radius:99px;background:currentColor;}
.ai-appr-description{margin:0!important;font-size:13px;font-weight:500;line-height:19px;}
.ai-appr-prev{margin:0;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:10px;font:11.5px/16px var(--font-mono);max-height:160px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted);}
.ai-appr-btns{display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--border);padding-top:10px;margin-top:2px;flex-wrap:wrap;}
.ai-appr-btns>.btn{height:32px;min-height:32px;min-width:0;padding:0 14px;border-radius:99px;font:600 12px/16px Inter,system-ui,sans-serif;display:inline-flex;align-items:center;justify-content:center;}
.ai-appr-btns>.brand,.ai-appr-btns>.brand:is(:hover,:focus-visible,:active){color:var(--inverse);background:var(--primary);border-color:var(--primary-border);}.ai-appr-btns>.brand:hover{background:var(--primary-hover);}
.ai-msg.ai-approval.approved,.ai-msg.ai-approval.rejected{border-color:var(--border);opacity:1;}.ai-msg.ai-approval.approved .ai-appr-status,.ai-msg.ai-approval.rejected .ai-appr-status{color:var(--muted);}
:root[data-theme="light"] .ai-appr-status{color:#956108;}

/* 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; }
/* Reveal page actions and content only after the first read resolves. */
.page-loading { flex: 1; min-height: 160px; display: grid; place-items: center; }
.page-loading > .loading { padding: 24px; }
.page-loading .spinner { width: 28px; height: 28px; border: 2.4px solid transparent;
  border-top-color: var(--muted); border-right-color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .page-loading .spinner { animation: none; } }

/* 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(--bg); color: var(--foreground);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: none;
}
.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: 60px; 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: var(--muted); }
.file-task-icon svg { width: 15px; height: 15px; }
.file-task-icon .spinner { width: 14px; height: 14px; border-width: 1.5px; }
.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: 600; 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: var(--foreground); 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(--bg); border: 1px solid var(--border); border-radius: 14px; box-shadow: none; cursor: pointer; font-size: 12px; font-weight: 600; }
.file-task-pill:hover { background: var(--hover); }
.file-task-pill svg { width: 14px; height: 14px; color: var(--muted); }

/* 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: var(--server-sidebar-compact-width);
    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 - var(--workspace-top, 0px)); }
  .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; }

/* PortWarp FREE notice: quiet red outline, above the server search. */
.free-plan-notice { --upsell-text:#d7654c; --upsell-line:#48231a; --upsell-hover:#181311; --upsell-hover-line:#613429; display:grid; grid-template-columns:16px minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; min-height:38px; margin:0 0 18px; padding:9px 12px; border:1px solid var(--upsell-line); border-radius:9px; background:var(--bg); color:var(--upsell-text); text-align:left; cursor:pointer; transition:background 180ms ease,border-color 180ms ease; }
:root[data-theme="light"] .free-plan-notice { --upsell-text:#ad4b31; --upsell-line:#e5c6ba; --upsell-hover:#fff5f0; --upsell-hover-line:#cda28f; }
.free-plan-notice:hover,.free-plan-notice:focus-visible { background:var(--upsell-hover); border-color:var(--upsell-hover-line); }
.free-plan-notice > svg { width:13px; height:13px; justify-self:center; }
.free-plan-notice-copy { font-size:11.5px; line-height:16px; overflow-wrap:anywhere; }
.free-plan-notice-copy strong { font-weight:600; }
.free-plan-notice-action { font-size:12px; font-weight:600; }
@media(prefers-reduced-motion:reduce) { .free-plan-notice { transition:none; } }

.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; }
/* 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%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%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 140ms cubic-bezier(.215,.61,.355,1); transform-origin: top left; }
.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; }
.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-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; }

/* Modpack search: the same quiet, compact list used by the native chooser. */
.mp-scrim { padding:16px; }
.modal.mp-modal { width:min(640px,calc(100vw - 32px)); max-width:none; height:min(560px,calc(100dvh - 32px)); max-height:calc(100dvh - 32px); border-radius:12px; display:flex; flex-direction:column; background:var(--surface-1); }
.mp-modal .modal-head { flex:none; display:flex; align-items:flex-start; gap:8px; padding:18px 18px 12px; border:0; }
.mp-modal .modal-head h3 { min-width:0; margin:0; font-size:16px; line-height:20px; font-weight:600; }
.mp-modal .modal-close { flex:none; width:32px; height:32px; min-height:32px; margin-block:-6px; padding:8px; border-radius:99px; border:0; background:transparent; color:var(--muted); }
.mp-modal .modal-close svg { display:block; width:14px; height:14px; }
.mp-modal .modal-close:is(:hover,:focus-visible) { background:var(--hover); color:var(--foreground); }
.mp-modal .modal-body { flex:1; min-height:0; display:flex; flex-direction:column; gap:12px; padding:0 18px; overflow:hidden; }
.mp-search { position:relative; flex:none; }
.mp-search>svg { position:absolute; pointer-events:none; left:12px; top:11px; width:14px; height:14px; color:var(--muted-2); }
.mp-search-status.spinner { display:none; position:absolute; right:12px; top:9px; width:18px; height:18px; pointer-events:none; }.mp-search:has(+.mp-list[aria-busy="true"]) .mp-search-status { display:block; }
.mp-search .input { height:36px; min-height:36px; width:100%; padding:0 36px; border-radius:99px; border:1px solid var(--border); background:var(--input); color:var(--foreground); font-size:12px; }
.mp-search .input:is(:hover,:focus) { border-color:var(--border-strong); box-shadow:none; outline:none; }
.mp-list { flex:1; min-height:0; max-height:none; overflow-y:auto; display:flex; flex-direction:column; gap:0; overscroll-behavior:contain; scrollbar-gutter:stable; }
.mp-item { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:12px; flex:none; width:100%; height:64px; min-height:64px; text-align:left; cursor:pointer; padding:11px 10px; border-radius:0; background:transparent; border:0; border-bottom:1px solid var(--border); color:var(--foreground); font:inherit; transition:background .16s,color .16s; }
.mp-item:is(:hover,:focus-visible) { background:var(--hover); }
.mp-item:focus-visible { outline:1px solid var(--border-strong); outline-offset:-1px; }
.mp-ico { width:32px; height:32px; flex:none; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:transparent; border:0; }
.mp-ico img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.mp-ico svg { width:20px; height:20px; color:var(--muted); }
.mp-meta { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.mp-meta b { font-size:13px; line-height:18px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mp-meta i { display:flex; align-items:center; gap:5px; min-width:0; font-size:11px; line-height:16px; color:var(--muted); font-style:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.mp-meta i svg { flex:none; width:12px; height:12px; }.mp-meta i>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.mp-source { justify-self:end; max-width:80px; color:var(--muted); font-size:10.5px; line-height:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mp-modal .modal-foot { flex:none; display:flex; justify-content:center; padding:12px 18px 18px; border:0; }
.mp-modal .modal-foot .btn { display:inline-flex; align-items:center; justify-content:center; height:32px; min-height:32px; padding:0 14px; border:0; border-radius:99px; background:transparent; color:var(--foreground); font-size:12px; line-height:16px; }
.mp-modal .modal-foot .btn:is(:hover,:focus-visible) { background:var(--hover); color:var(--foreground); }

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

/* 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='m19.5 8.25-7.5 7.5-7.5-7.5'/%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; }
}

/* Per-server activity */
.activity-head { min-height: 30px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.activity-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.log-wrap { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.log-actions { display: flex; gap: 4px; }
.log-actions .iconbtn { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.log-actions .iconbtn:hover, .log-actions [aria-expanded="true"] { background: var(--hover); color: var(--foreground); }
.log-actions svg { width: 14px; height: 14px; }
.log-count { font-size: 11px; color: var(--muted-2); }
.log-tools { display: flex; flex-direction: column; gap: 8px; }
.log-search { position: relative; min-width: 0; display: flex; }
.log-search .input { width: 100%; padding-left: 32px; height: 34px; border-radius: 99px; 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-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.log-chips select.input { width: auto; max-width: min(190px, 100%); height: 34px; font-size: 12px; padding: 0 28px 0 10px; }
.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(--hover); color: var(--foreground); }
.log-chip.on { background: var(--selected); border-color: var(--border-strong); color: var(--foreground); }
#log-list { container-type: inline-size; }
.log-row {
  display: grid; grid-template-columns: 65px 91px minmax(0, 1fr); column-gap: 12px; align-items: start;
  padding: 11px 12px; margin-bottom: 2px; border-radius: 8px; transition: background .14s ease;
}
.log-row:hover, .log-row:focus-visible { background: var(--hover); }
.log-source { display: flex; align-items: center; gap: 7px; min-width: 0; margin-top: 2px; color: var(--muted); font-size: 11px; }
.log-source svg { flex: none; width: 13px; height: 13px; color: var(--muted-2); }
.log-source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-summary { color: var(--foreground); font-weight: 500; font-size: 12px; overflow-wrap: anywhere; }
.log-warning .log-source svg, .log-warning .log-summary { color: #fca5a5; }
:root[data-theme="light"] .log-warning :is(.log-source svg, .log-summary) { color: #c91c1c; }
.log-meta { margin-top: 4px; font-size: 11px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-when { min-width: 0; padding-top: 3px; }
.log-stamp { font: 10px var(--font-mono); color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-empty { display: grid; justify-items: center; gap: 8px; padding: 34px 12px; color: var(--muted-2); font-size: 12.5px; text-align: center; }
.log-empty svg { width: 20px; height: 22px; }
.log-no-matches { padding: 34px 12px; color: var(--muted); }
@container (max-width: 419px) {
  .log-row { grid-template-columns: 58px minmax(0, 1fr); gap: 8px; padding-inline: 8px; }
  .log-source { 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(--bg); }
.sv-row:hover { background: var(--hover); }
.sv-row:active { background: var(--surface-3) !important; }

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

.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"] .log-chip { border-color: var(--border); }

@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; }

.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; }

/* White PRO badges share the native control's compact type and quiet sheen. */
:root { --pro-bg: #fff; --pro-border: #fff; --pro-text: #000; }
:is(.hdr-plan.pro,.cs-pro-pill,.sc-pro-pill,.dc-pro,.gs-pro) {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  position: relative; overflow: hidden; white-space: nowrap;
  background: var(--pro-bg); border: 1px solid var(--pro-border); color: var(--pro-text);
  border-radius: 5px; padding: 1px 5px; font: 700 9.5px/14px Inter,system-ui,sans-serif; letter-spacing: .07em;
}
:is(.hdr-plan.pro,.cs-pro-pill,.sc-pro-pill,.dc-pro,.gs-pro)::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 14px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(0 0 0 / .063), transparent);
  transform: translateX(-28px) skewX(-18deg); animation: hdrPlanShine 3.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  :is(.hdr-plan.pro,.cs-pro-pill,.sc-pro-pill,.dc-pro,.gs-pro)::after { animation: none; opacity: 0; }
}

: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-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 }
}
@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; }

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

.public-port-warning { display:inline-flex; align-items:center; justify-content:center; flex:none; width:24px; height:24px; padding:6px; margin:0; border:0; background:transparent; color:var(--warning-text,#f6b73c); cursor:pointer; 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 rgb(var(--brand-light)); 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. */
.general-settings-dialog .modal-body { padding: 0; max-height: min(76vh, 740px); }
.gs-shell { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.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 { margin-inline-start: 5px; }
.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-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: rgb(var(--brand-light)); 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-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; }

/* General Settings uses the same full-height sheet as server details. */
:root[data-theme="dark"] { --topbar: var(--bg); }
.modal-scrim:has(> .general-settings-dialog:not(.setup-dialog)) { place-items: stretch end; padding: 0; }
.modal.general-settings-dialog:not(.setup-dialog) {
  width: min(560px,100vw); max-width: none; height: 100%; min-height: 0;
  display: flex; flex-direction: column; background: var(--bg);
  border: 0; border-inline-start: 1px solid var(--border); border-radius: 0; box-shadow: none;
}
.general-settings-dialog:not(.setup-dialog) > .modal-foot { display: none; }
.general-settings-dialog:not(.setup-dialog) > .modal-body {
  display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; max-height: none; overflow: hidden;
}
.general-settings-dialog:not(.setup-dialog) .gs-shell { flex: 1; height: 100%; min-height: 0; overflow: hidden; }
.gs-sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; padding: 18px 20px 12px; }
.gs-sheet-header :is(h2,h3) { margin: 0; font-size: 16px; font-weight: 600; }
.gs-sheet-header :is(.close,.modal-close) {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; min-height: 0; padding: 0; border: 0; border-radius: 99px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.gs-sheet-header :is(.close,.modal-close):is(:hover,:focus-visible) { background: var(--hover); color: var(--foreground); }
.gs-sheet-header :is(.close,.modal-close) svg { width: 14px; height: 14px; }
.gs-tabs { display: flex; align-items: stretch; gap: 20px; flex: none; margin: 0; padding: 0 20px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: thin; }
.gs-tabs [data-section] {
  display: inline-flex; align-items: flex-end; justify-content: center; gap: 7px; flex: none;
  height: 34px; min-height: 0; margin: 0; padding: 0 0 6px; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; background: transparent; color: var(--muted); font: 500 12px/16px Inter,system-ui,sans-serif; white-space: nowrap; cursor: pointer;
}
.gs-tabs [data-section] svg { width: 14px; height: 14px; flex: none; }
.gs-tabs [data-section]:is(:hover,:focus-visible) { background: transparent; color: var(--foreground); }
.gs-tabs [data-section]:is(.selected,[aria-current="page"],[aria-selected="true"]) { border-bottom-color: var(--foreground); color: var(--foreground); }
.gs-tabs [data-section]:focus-visible { outline: 1px solid var(--border-strong); outline-offset: -2px; }
.general-settings-dialog:not(.setup-dialog) .gs-panel { flex: 1; min-height: 0; padding: 20px; overflow-y: auto; background: var(--bg); }
.general-settings-dialog:not(.setup-dialog) .gs-panel > h2 { margin: 0 0 20px; font-size: 16px; font-weight: 600; }
.gs-profile-identity { display: flex; align-items: center; gap: 12px; min-width: 0; margin-bottom: 20px; }
.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: 13px; }
.gs-account-details small { font-size: 11px; color: var(--muted); }
.gs-account-details .hdr-plan { padding: 1px 5px; font-size: 9.5px; }
.gs-card { padding: 0 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 20px; }
.gs-card .gs-setting:last-child { border-bottom: 0; }
.gs-card .gs-label strong { font-size: 13px; font-weight: 500; }
.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); }
.gs-feedback:empty { display: none; }
@media (max-width: 640px) {
  .modal.general-settings-dialog:not(.setup-dialog) { width: 100vw; border-inline-start: 0; }
  .general-settings-dialog:not(.setup-dialog) .gs-panel { padding: 20px 16px; }
  .gs-sheet-header { padding-inline: 16px; }
  .gs-tabs { padding-inline: 16px; gap: 18px; }
}

.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; }
.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: 20px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; }
.gs-privacy-dialog > .modal-body { padding: 0; max-height: calc(100dvh - 112px); }
.gs-privacy-content > h3 { margin: 0; text-align: start; font-size: 16px; font-weight: 600; }
.gs-privacy-explanation { margin: 0; white-space: pre-line; text-align: start; font-size: 13px; 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: 0; min-height: 32px; height: 32px; margin: 0 0 0 auto; padding: 0 14px; border-radius: 99px; 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: 16px; 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: 24px; height: 24px; animation: splash-spin 1.5s linear infinite; }
.panel-splash-spinner circle { fill: none; stroke: var(--muted); stroke-width: 4; 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; } }

/* Public stays in the sidebar; Local expands upward as the navigation moves down. */
.side-addresses { display: flex; flex-direction: column; margin: 9px 0 0; padding: 0; }
.side-local-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms cubic-bezier(.215,.61,.355,1); }
.side-local-content { min-height: 0; overflow: hidden; opacity: 0; transform: translateY(8px); visibility: hidden;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.215,.61,.355,1), visibility 0s linear 220ms; }
.side-server.address-expanded .side-local-reveal { grid-template-rows: 1fr; }
.side-server.address-expanded .side-local-content { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.side-address-row { display: flex; align-items: center; min-width: 0; width:100%; }
#side-public-row .side-ip { flex:1 1 0; width:100%; }
.side-addresses .side-ip { flex: 1; font-weight: 400; width: 100%; min-width: 0; min-height: 30px; padding: 4px 4px 4px 8px; margin: 0;
  display: grid; grid-template-columns: 14px auto minmax(0,1fr); align-items: center; column-gap: 4px;
  border: 0; border-radius: 8px; background: transparent; text-align: left; }
.side-addresses .side-local-content > .side-ip { margin-top: 4px; }
.side-addresses .side-ip:is(:hover,:focus-visible) { background: var(--hover); }
.side-address-icon { width: 14px; height: 14px; color: var(--muted); stroke-width: 1.6; }
.side-addresses .side-ip-label { min-width: 0; max-width: 0; overflow: hidden; opacity: 0; transition: max-width 160ms ease, opacity 160ms ease; white-space: nowrap; font: 400 9px/12px Inter,system-ui,sans-serif; color: var(--muted); text-transform: none; letter-spacing: 0; }
.side-server:hover .side-ip-label, .side-ip:focus-visible .side-ip-label { max-width: 96px; opacity: 1; }
.side-addresses .side-ip-val { color: var(--foreground); font: 400 11px/16px Inter,system-ui,sans-serif; font-variant-numeric: tabular-nums; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.side-addresses .public-port-warning { flex: 0 0 24px; width: 24px; height: 24px; padding: 6px; margin: 0; border: 0; border-radius: 8px; background: transparent; }
.side-addresses .public-port-warning:is(:hover,:focus-visible) { background: var(--hover); }
.side-addresses .public-port-warning svg { width: 12px; height: 12px; }
.side-identity-controls:focus-visible { outline: 1px solid var(--border-strong); outline-offset: 4px; border-radius: 8px; }
.side-address-toggle { display: none; min-height: 28px; padding: 4px 8px; margin-top: 4px; border: 0; border-radius: 8px;
  color: var(--muted); background: transparent; cursor: pointer; font: 400 9px Inter,system-ui,sans-serif; }
.side-address-toggle:is(:hover,:focus-visible) { color: var(--foreground); background: var(--hover); }
@media (hover: none) { .side-address-toggle:not(.hidden) { display: inline-flex; align-items: center; } }
@media (prefers-reduced-motion: reduce) { .side-local-reveal, .side-local-content, .side-addresses .side-ip-label { transition: none; transform: none; } }
#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: 14px; height: 14px; }

/* 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; }
/* Signed-in server workspace */
#view-app { --rail-width: 64px; }
.server-workspace { min-height: calc(100dvh - var(--workspace-top, 0px)); }
.server-rail {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--rail-width);
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0; background: var(--surface-1); border-inline-end: 1px solid var(--border);
}
.server-rail-tile {
  position: relative; width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  padding: 0; color: var(--foreground); background: transparent; border: 0;
  border-radius: 10px; cursor: pointer;
}
.server-rail-item {
  width: 52px; display: grid; justify-items: center; gap: 3px; flex: none;
  border-radius: 10px; color: var(--muted); text-decoration: none;
}
.rail-caption {
  max-width: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: center; font-size: 10px; line-height: 12px;
}
.server-rail-tile:hover, .server-rail-item:hover .server-rail-tile {
  background: transparent; border-color: var(--border-strong);
}
.rail-home[aria-current="page"], .server-rail-item[aria-current="page"] .server-rail-tile {
  background: transparent;
}
.server-rail-item[aria-current="page"] { color: var(--foreground); }
.session-preview {
  position: fixed; z-index: 70; display: flex; align-items: flex-start; gap: 10px;
  min-width: 190px; max-width: min(320px, calc(100vw - 84px)); padding: 10px 12px;
  background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 10px;
  pointer-events: none;
}
.session-preview-text { display: grid; gap: 3px; min-width: 0; }
.session-preview-text strong { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.session-preview-text span { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; }
.session-preview-art.gico { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; overflow: hidden; background: transparent; }
.session-preview-art.gico :is(svg,.gico-img) { width: 32px; height: 32px; object-fit: contain; border-radius: 50%; }
.session-preview-status { display: flex; align-items: center; gap: 5px; }
.session-preview-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }
.session-preview-status.online i { background: var(--green); }
.session-preview-text .session-preview-uptime { margin-inline-start: 3px; font-variant-numeric: tabular-nums; }
.session-preview-path { margin-top: 2px; }
.server-rail-item[aria-current="page"]::before {
  content: ""; position: absolute; inset: 10px auto 10px -5px; width: 2px;
  border-radius: 0 2px 2px 0; background: var(--muted);
}
.server-rail-item:focus-visible, .rail-home:focus-visible, .server-rail-utility:focus-visible {
  outline: 2px solid rgb(var(--brand-light)); outline-offset: 2px;
}
.server-rail-tile .gico {
  width: 24px; height: 24px; background: transparent; border: 0; border-radius: 5px;
  color: var(--muted); overflow: hidden;
}
.server-rail-tile .gico svg, .rail-home svg { width: 17px; height: 17px; }
.rail-rule { flex: none; width: 34px; height: 1px; margin: 10px auto; background: var(--border); }
.server-rail-list {
  width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  overflow-y: auto; scrollbar-width: none; padding: 3px 0;
}
.rail-status {
  position: absolute; inset: auto 2px 2px auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted-2); border: 2px solid var(--surface-1);
}
.server-rail-item.online .rail-status { background: #087a56; }
:root:not([data-theme="light"]) .server-rail-item.online .rail-status { background: var(--green); }
.server-rail-footer { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.server-rail-footer .rail-rule { margin: 4px auto 0; }
.server-rail-utility {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: transparent; border: 0; border-radius: 10px; color: var(--muted);
}
.server-rail-utility:hover { background: var(--hover); color: var(--foreground); }
.server-rail-utility svg { width: 22px; height: 22px; }
#workspace-account .hdr-avatar { width: 34px; height: 34px; border-radius: 9px; }
#workspace-account .hdr-avatar svg { width: 18px; height: 18px; }
#workspace-account .hdr-menu { top: auto; bottom: 0; left: calc(100% + 8px); right: auto; z-index: 60; }
#view-servers, #view-server, #view-app > .topbar { margin-inline-start: var(--rail-width); }
#view-app > .topbar { display: none; border: 0; background: var(--bg); backdrop-filter: none; }
.workspace-server-context { display: none; }
#view-app:has(> #view-server:not(.hidden)) { --workspace-top: 50px; }
#view-app:has(> #view-server:not(.hidden)) > .topbar { display: flex; height: 50px; padding-inline: 22px; }
#view-app:has(> #view-server:not(.hidden)) .workspace-server-context {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 10px;
  min-width: 0; margin-inline-end: auto;
}
.workspace-server-context .gico { width: 26px; height: 26px; background: transparent; border: 0; flex: none; }
.workspace-server-context .gico :is(svg, .gico-img) { width: 26px; height: 26px; object-fit: contain; }
.workspace-server-labels { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.workspace-server-labels :is(strong, small) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workspace-server-labels strong { font-size: 13px; font-weight: 600; color: var(--foreground); }
.workspace-server-labels small { font-size: 10.5px; color: var(--muted); }
#view-app:has(> #view-server:not(.hidden)) .sh-identity { display: none; }
#view-app:has(> #view-server:not(.hidden)) .side-server { padding-top: 0; }
.rail-actions { display: flex; flex-direction: column; gap: 4px; }
.rail-actions :is(.hdr-ai,.hdr-update,.hdr-icon) {
  width: 32px; min-width: 32px; height: 32px; padding: 0; justify-content: center;
}
.rail-actions :is(.hdr-ai,.hdr-update) span { display: none; }
#back-btn.side-back { display: none; }
@media (max-width: 600px) {
  #view-app { --rail-width: 56px; }
}
@media (max-width: 720px) {
  body:not(.no-drawer) { --workspace-top: 48px; }
  body:not(.no-drawer) #view-app > .topbar { display: flex; height: var(--workspace-top); justify-content: flex-end; }
  #view-server .sidebar { left: var(--rail-width); }
}
.workspace-content { width: 100%; min-width: 0; padding: 0 28px 28px; }
.workspace-content .page-head { margin: 0; padding: 14px 0 8px; min-height: 56px; box-sizing: border-box; }
.workspace-identity { display: flex; align-items: center; gap: 10px; }
.workspace-count, .sv-protocol { padding: 1px 6px; border: 1px solid var(--border); border-radius: 99px; color: var(--muted); font-size: 10px; }
.workspace-count { font-size: 12px; font-weight: 600; }
.workspace-content .page-title { font-size: 16px; font-weight: 600; }
.workspace-content .create-btn { min-height: 32px; height: 32px; padding: 0 12px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.workspace-tools { display: flex; align-items: center; gap: 8px; margin: 20px 0 12px; }
.workspace-tools .iconbtn { width: 32px; height: 32px; flex: none; border-radius: 99px; background: transparent; }
.workspace-tools .iconbtn:hover { background: var(--hover); }
.workspace-search { position: relative; flex: 1; min-width: 0; }
.workspace-search .input { width: 100%; height: 34px; border-radius: 99px; padding: 0 12px 0 34px; font-size: 12px; }
.workspace-search svg { width: 15px; height: 15px; position: absolute; inset: 10px auto auto 11px; color: var(--muted); pointer-events: none; }
#servers-refresh { color: #737373; }
:root[data-theme="light"] #servers-refresh { color: #71717a; }
#servers-refresh svg { width: 14px; height: 14px; }
#rail-search { color: var(--muted); }
#rail-search svg { width: 17px; height: 17px; }
.modal.workspace-search-dialog { width: min(560px, calc(100vw - 28px)); max-width: calc(100vw - 28px); border-radius: 16px; }
.workspace-search-dialog .modal-head { padding: 12px; min-height: auto; gap: 8px; border-bottom: 1px solid var(--border); }
.workspace-search-dialog .modal-head .input { flex: 1; min-width: 0; height: 36px; }
.workspace-search-dialog .modal-body { padding: 4px 12px 12px; max-height: min(436px, 60vh); }
.workspace-search-dialog .modal-foot { display: none; }
.workspace-search-results { display: grid; gap: 2px; }
.workspace-search-results p { margin: 16px 10px; }
.workspace-search-group + .workspace-search-group { margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--border); }
.workspace-search-group header { padding: 8px 10px 6px; }
.workspace-search-group h4 { margin: 0; font-size: 11px; font-weight: 500; color: var(--muted); }
.workspace-search-group header strong { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--foreground); overflow-wrap: anywhere; }
.workspace-search-entry { width: 100%; display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 10px;
  padding: 8px 10px; min-height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--foreground);
  text-align: start; font: inherit; font-size: 13px; cursor: pointer; }
.workspace-search-entry:is(:hover, :focus-visible) { background: var(--hover); }
.workspace-search-entry svg { width: 16px; height: 16px; color: var(--muted); }
.workspace-search-label { display: grid; gap: 3px; min-width: 0; }
.workspace-search-label :is(span, small) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.workspace-search-label small { font-size: 11px; color: var(--muted); }
#server-search-empty { text-align: center; margin: 24px 0; }
.workspace-content .sv-grid { border: 0; border-radius: 0; overflow: visible; }
.workspace-content .sv-grid .sv-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; align-items: center;
  height: 60px; padding: 0 12px; gap: 10px; border: 0; border-radius: 8px; background: transparent;
}
.workspace-content .sv-row:is(:hover, :focus-visible) { background: var(--hover); }
.workspace-content .sv-c-name { display: flex; align-items: center; gap: 10px; }
.workspace-content .sv-c-name .gico { flex: 0 0 28px; width: 28px; }
.workspace-content .sv-id { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.workspace-content .sv-name { font-size: 13px; font-weight: 600; }
.workspace-content .sv-c-game { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.workspace-content .sv-state { font-size: 12px; font-weight: 400; }
.workspace-content .sv-state .led { width: 6px; height: 6px; box-shadow: none; animation: none; }
.workspace-content .sv-state.other { color: var(--muted); }
.workspace-content .sv-state.other .led { background: #a78bfa; }
.workspace-content .sv-kebab { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; }
.workspace-content .sv-kebab svg { width: 17px; height: 17px; }
#workspace-settings-compact { display: none; }
@media (width < 760px) {
  .workspace-content { padding: 0 16px 24px; }
  .workspace-content .page-head { gap: 8px; }
  .workspace-content .page-head-actions { gap: 8px; }
  .workspace-content .sv-grid .sv-row { padding: 0 4px; gap: 6px; }
  .workspace-content .sv-state { font-size: 11px; gap: 5px; }
  .workspace-content .sv-protocol { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #view-servers.server-workspace { animation: none; }
  .workspace-content .sv-row { transition: none; }
  .workspace-content .sv-state.on .led { animation: none; }
}
:root[data-theme="light"] .workspace-content .sv-state.on { color: #087a56; }
:root[data-theme="light"] .workspace-content .sv-pill.other { color: rgb(var(--brand-light)); }

/* Server details sheet. The header and actions stay visible while the facts scroll. */
.modal-scrim:has(> :is(.server-details-dialog,.server-settings-dialog,.general-settings-dialog:not(.setup-dialog))) { place-items: stretch end; padding: 0; }
.modal.server-details-dialog { background: var(--bg); width: min(420px, 100vw); max-width: none; height: 100%; min-height: 0; display: flex; flex-direction: column; border: 0; border-inline-start: 1px solid var(--border-strong); border-radius: 0; }
.server-details-dialog .modal-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; align-items: start; border: 0; padding: 18px 16px 14px 20px; }
.server-details-dialog .modal-head h3 { grid-column: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-details-dialog .modal-close { grid-area: 1 / 2 / 4; }
.server-details-dialog .modal-close { justify-self: end; }
.sv-menu.srv-menu { max-width: calc(100vw - 16px); }
.modal-scrim > .sv-menu.srv-menu { min-width: 172px; }
.server-details-subtitle { grid-column: 1; margin: 0; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-details-state { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 4px 8px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 600; }
.server-details-state .led { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.server-details-state.on { color: var(--green); }
.server-details-state.off { color: var(--muted); }
.server-details-state.other { color: rgb(var(--brand-light)); }
:root[data-theme="light"] .server-details-state.on { color: #087a56; }
.server-details-dialog .modal-body { flex: 1; display: flex; flex-direction: column; min-height: 0; max-height: none; padding: 0; overflow: hidden; }
.server-details-content [data-connection-result] { margin: 0 0 10px; font-size: 12px; }
.server-details-content [data-connection-endpoint] { display: block; margin: 0 0 10px; overflow-wrap: anywhere; }
.server-details-content { overflow-y: auto; padding: 18px 20px 20px; }
.server-details-content h4 { margin: 0 0 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.server-details-content dl { margin: 0; }
.server-details-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 8px 0; font-size: 12px; }
.server-details-row + .server-details-row { border-top: 1px solid var(--border); }
.server-details-row dt { color: var(--muted); }
.server-details-row dd { margin: 0; text-align: end; overflow-wrap: anywhere; }
.server-details-copy { max-width: 100%; padding: 2px 6px; border: 0; border-radius: 4px; background: transparent; color: var(--foreground); font: 11px var(--font-mono); overflow-wrap: anywhere; cursor: pointer; }
.server-details-copy:hover { background: var(--hover); }
.server-details-dialog .modal-foot { justify-content: space-between; padding: 14px 20px; }
.server-details-dialog .modal-foot .btn { border-radius: 99px; }
.server-details-dialog .modal-foot [data-details-delete] { margin-inline-start: auto; }
@media (width < 640px) {
  .modal.server-details-dialog { width: 100%; border-inline-start: 0; }
}

/* Keep the activity actions within reach while the event list scrolls. */
.log-wrap { flex: 1; min-height: 0; }
.log-tools { flex: none; }
.log-wrap #log-list { flex: 1; min-height: 0; overflow-y: auto; }
.log-footer { flex: none; display: flex; justify-content: flex-end; gap: 8px; }
@media (max-height: 500px) {
  .log-wrap { min-height: 280px; }
}

/* File list uses the same quiet hierarchy as the activity feed. */
.fm-title h2 { font-size: 16px; font-weight: 600; }
.fm-search { position: relative; }
.fm-search .input { height: 34px; padding: 0 12px 0 32px; border-radius: 99px; font-size: 12.5px; }
.fm-search > svg { display: block; width: 13px; height: 13px; position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 11px; color: var(--muted-2); pointer-events: none; }
#f-list.filelist { border:0; border-radius:0; background:transparent; display:flex; flex-direction:column; container-type:inline-size; container-name:file-list; }
#f-list.filelist.dropping { background: rgb(var(--brand) / .05); }
#f-list .frow { flex:none; min-height:46px; margin:1px 4px; padding:10px 16px; border:0; border-radius:8px; gap:0; }
#f-list .frow:hover { background:var(--hover); }
#f-list .frow.fhead { min-height:22px; margin:8px 16px 4px; padding:0; background:transparent; font-weight:600; letter-spacing:normal; }
#f-list .frow > :is(.fcheck,.fcheck-spacer) { width:22px; height:22px; margin-right:12px; }
#f-list:not(.selection-mode) .frow:not(.fhead) > :is(.fcheck,.fcheck-spacer) { width:0; margin-right:0; }
#f-list .frow .fname { gap:12px; }
#f-list .ftile { width:28px; height:28px; background:transparent; border:0; }
#f-list .ftile svg { width:16px; height:16px; }
#f-list .file-identity { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#f-list .fnm { font-size:13px; font-weight:600; line-height:16px; }
#f-list .file-type { color:var(--muted-2); font-size:11px; line-height:14px; }
#f-list .fsize { display:block; width:86px; text-align:center; }
#f-list .frow:not(.fhead) .fsize { font: 11px var(--font-mono); }
#f-list .dots { width:32px; height:32px; min-height:0; padding:0; opacity:1; color:var(--muted); }
#f-list .dots svg { width:14px; height:14px; }
#f-list .frow.fhead > div:last-child, #f-list .up-row > div:last-child { width:32px; flex:none; }
@container file-list (max-width:719.98px) {
  #f-list .frow { padding:7px 8px; }
  #f-list .frow.fhead { margin:10px 10px 8px; padding:0; }
  #f-list .frow > :is(.fcheck,.fcheck-spacer) { margin-right:8px; }
  #f-list .frow .fname { gap:8px; }
  #f-list .ftile { width:24px; height:24px; }
  #f-list .fsize { display:none; }
  #f-list .dots { margin-inline:-2px; }
  #f-list .frow.fhead > div:last-child, #f-list .up-row > div:last-child { width:28px; }
}

/* Console presentation and the retained Portwarp workspace hierarchy. */
#view-app:has(> #view-server:not(.hidden)) { --workspace-top: 56px; }
#view-app:has(> #view-server:not(.hidden)) > .topbar { height: 56px; }
.side-server { margin-top: 6px; padding: 10px !important; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); }
.server-context-label { margin: 0 0 10px; color: var(--muted-2); font-size: 10.5px; }
.server-rail-utility { width: 38px; height: 38px; }
.server-rail-utility svg { width: 17px; height: 17px; }
#workspace-account .hdr-avatar { width: 30px; height: 30px; border-radius: 8px; }
.workspace-content .create-btn { font: 600 12px Inter, sans-serif; height: 32px; padding: 0 12px; gap: 6px; }
.workspace-content .create-btn svg { width: 12px; height: 12px; }
.workspace-content .create-btn:is(:hover, :active) { background: var(--primary); opacity: .88; }
.console-heading { display: flex; justify-content: space-between; align-items: center; min-height: 34px; margin: 0 2px 16px; flex: none; }
.console-heading h2 { margin: 0; font-size: 16px; font-weight: 600; }
.console-modes { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface-1); }
.console-modes button { display: grid; place-items: center; width: 34px; height: 28px; padding: 0; border: 0; border-radius: 99px;
  background: transparent; color: var(--muted); cursor: pointer; }
.console-modes button[aria-pressed="true"] { background: var(--selected); color: var(--foreground); }
.console-modes svg { width: 16px; height: 16px; }
.console.classic { font-family: "Cascadia Code", "SFMono-Regular", "JetBrains Mono", Consolas, monospace; font-size: 12.5px; line-height: 22px; }
.console.modern { padding: 6px 2px; white-space: normal; font-family: Inter, sans-serif; }
.console.modern .console-entry { display: grid; grid-template-columns: 64px 8px minmax(0, 1fr); gap: 12px;
  margin: 0; padding: 8px 12px; background: transparent !important; box-shadow: none !important; color: var(--foreground); }
.console-entry-time { font: 10.5px/20px "Cascadia Code", Consolas, monospace; color: var(--muted-2); }
.console-entry-dot { width: 5px; height: 5px; margin-top: 8px; border-radius: 50%; background: var(--muted-2); }
.console-entry-body { min-width: 0; }
.console-entry-source { display: block; color: var(--muted-2); font-size: 10.5px; line-height: 16px; }
.console-entry-message { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 20px; }
.console-entry.sev-warn :is(.console-entry-dot, .console-entry-source) { color: var(--console-warning); }
.console-entry.sev-err .console-entry-source { color: var(--console-error); }
.console-entry.sev-err .console-entry-dot { background: var(--console-error); }
.console-entry.sev-warn .console-entry-dot { background: var(--console-warning); }
.console-entry.arriving { animation: console-entry-in 160ms ease-out both; }
@keyframes console-entry-in { from { opacity: 0; } to { opacity: 1; } }
.log-jump.console-jump { top: auto; bottom: 14px; }
#cmd-form { gap: 8px; margin-top: 10px; padding: 6px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface-1); }
#cmd-form .console-cmd-field > .input { min-height: 38px; padding: 9px 12px; border: 0; background: transparent;
  font-family: "Cascadia Code", Consolas, monospace; font-size: 12.5px; }
#cmd-form:focus-within { border-color: var(--border-strong); }
#cmd-form .cmd-send { width: 38px; height: 38px; padding: 0; border-radius: 99px; }
.metric-fill { transition: width 360ms cubic-bezier(.2,.75,.3,1), background-color 240ms ease; }
.modal-scrim:has(> :is(.server-details-dialog,.server-settings-dialog,.general-settings-dialog:not(.setup-dialog))) { animation: none; background: transparent; backdrop-filter: none; }
.modal-scrim:has(> :is(.server-details-dialog,.server-settings-dialog,.general-settings-dialog:not(.setup-dialog)))::before { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .58);
  backdrop-filter: blur(8px); animation: modal-overlay-in 180ms ease-out both; }
.modal-scrim > :is(.server-details-dialog,.server-settings-dialog,.general-settings-dialog:not(.setup-dialog)) { position: relative; z-index: 1; animation: server-drawer-in 180ms cubic-bezier(.215,.61,.355,1) both; }
.modal-scrim.closing:has(> :is(.server-details-dialog,.server-settings-dialog,.general-settings-dialog:not(.setup-dialog)))::before { animation: modal-overlay-out 180ms ease-in both; }
.modal-scrim.closing > :is(.server-details-dialog,.server-settings-dialog,.general-settings-dialog:not(.setup-dialog)) { animation: server-drawer-out 180ms cubic-bezier(.215,.61,.355,1) both; }
@keyframes server-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes server-drawer-out { from { transform: translateX(0); } to { transform: translateX(100%); } }
@media (max-width: 600px) {
  .console.modern .console-entry { grid-template-columns: 52px 5px minmax(0, 1fr); gap: 8px; padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .console-entry.arriving, .modal-scrim > :is(.server-details-dialog,.server-settings-dialog,.general-settings-dialog:not(.setup-dialog)), .modal-scrim.closing > :is(.server-details-dialog,.server-settings-dialog,.general-settings-dialog:not(.setup-dialog)),
  .modal-scrim:has(> :is(.server-details-dialog,.server-settings-dialog,.general-settings-dialog:not(.setup-dialog)))::before, .modal-scrim.closing:has(> :is(.server-details-dialog,.server-settings-dialog,.general-settings-dialog:not(.setup-dialog)))::before { animation: none; }
  .metric-fill { transition: none; }
}

/* Console severity follows the current theme; issue chips never cover output. */
:root { --console-warning: #f6b73c; --console-error: #f87171; }
:root[data-theme="light"] { --console-warning: #7a4700; --console-error: #b42318; }
.console-badges { position: static; flex: none; justify-content: flex-end; flex-wrap: wrap; }
/* One console issue action shares the header rail with the mode capsule. */
.console-issue-indicator { position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none; width:32px; height:32px; min-width:0; min-height:0; padding:0; border:0; border-radius:99px; color:var(--red); background:transparent; }
.console-issue-indicator:is(:hover,:focus-visible) { background:var(--hover); color:var(--red); }
.console-issue-glyph { position:relative; display:block; width:18px; height:18px; }
.console-issue-glyph svg { display:block; width:18px; height:18px; stroke-width:1.5; }
.console-issue-sheen { position:absolute; inset:0; color:#fee2e2; pointer-events:none; animation:none; }
.console-issue-sheen svg { stroke-dasharray:8 100; }
.console-issue-indicator:not(.hidden) .console-issue-sheen { animation:console-issue-glint 3.2s linear infinite; }
@keyframes console-issue-glint { from { stroke-dashoffset:108; opacity:0; } 12%,65% { opacity:.9; } to { stroke-dashoffset:-100; opacity:0; } }
.modal.ci-modal { display:flex; flex-direction:column; max-height:calc(100dvh - 28px); padding:0; }
.ci-filters { display:inline-flex; align-self:flex-start; gap:3px; margin:0 20px 12px; padding:3px; border:1px solid var(--border); border-radius:99px; background:var(--surface-1); }
.ci-filters button { height:28px; min-height:0; border:0; border-radius:99px; background:transparent; color:var(--muted); padding:0 10px; font-size:12px; cursor:pointer; }
.ci-filters button.active { background:var(--selected); color:var(--foreground); }
.ci-filters button:is(:hover,:focus-visible):not(:disabled) { color:var(--foreground); }
.ci-filters button:disabled { opacity:.4; cursor:default; }
.ci-list { flex:1; min-height:0; padding:0 20px; max-height:min(60vh,440px); overflow-y:auto; }
.ci-row { align-items:flex-start; }
.ci-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:4px; }
.ci-severity { font-size:10.5px; font-weight:500; line-height:1.3; }
.ci-severity.err { color:var(--red); } .ci-severity.warn { color:var(--yellow,#d6a75b); }
.ci-text { color:var(--foreground); font-size:12px; line-height:17px; }
.ci-ai { height:28px; min-height:0; padding:0 8px; border:0; background:transparent; color:var(--muted); }
.ci-ai:is(:hover,:focus-visible) { color:var(--foreground); background:var(--hover); }
@media(max-width:479px) { .ci-row { flex-wrap:wrap; gap:8px; } .ci-copy { flex-basis:100%; } .ci-ai { margin-left:auto; } }
@media(prefers-reduced-motion:reduce) { .console-issue-sheen { display:none; animation:none !important; } }
.rail-actions :is(.hdr-ai,.hdr-update,.hdr-icon) { background: transparent; border-color: transparent; color: var(--muted); }
.rail-actions :is(.hdr-ai,.hdr-update,.hdr-icon) svg { width: 17px; height: 17px; }
.rail-actions :is(.hdr-ai,.hdr-update,.hdr-icon):hover { background: var(--hover); color: var(--foreground); }

/* Quiet live console: the indicator owns severity, the message owns server output. */
.console.modern { border: 0; border-radius: 0; padding: 6px 0; background: transparent; }
.console.modern .console-entry { grid-template-columns: 58px 8px minmax(0, 1fr) auto; gap: 10px; padding: 5px 0; }
.console-entry-message { min-width: 0; }
.console-entry.sev-ready .console-entry-dot { background: var(--green); }
.console.modern :is(.sev-warn,.sev-err) .console-entry-message,
.console.modern :is(.sev-warn,.sev-err) .console-entry-message span { color: var(--foreground) !important; }
.console-entry-actions { display: flex; align-items: flex-start; gap: 2px; opacity: 0; transition: opacity 100ms ease; }
.console-entry:hover .console-entry-actions, .console-entry:has(button:focus-visible) .console-entry-actions { opacity: 1; }
.console-entry-actions button { width: 26px; height: 26px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.console-entry-actions button:hover { background: var(--hover); color: var(--foreground); }
.console-entry-actions svg { width: 14px; height: 14px; }
#cmd-form { border: 0; }
#cmd-form .console-cmd-field > .input:is(:focus,:hover) { outline: none; box-shadow: none; border: 0; }
.cmd-ac { padding: 6px; border-radius: 14px; background: var(--surface-1); border-color: var(--border); bottom: calc(100% + 8px); }
.cmd-ac-row { padding: 9px 11px; border: 0; border-radius: 9px; }
.cmd-ac-row.sel { background: var(--selected); box-shadow: none; border: 0; }
.cmd-ac-top { gap: 8px; }
.cmd-ac-name { font-size: 12.5px; font-weight: 600; }
.cmd-ac-desc { font: 11.5px/18px Inter, sans-serif; color: var(--muted); margin-top: 2px; }
.cmd-ac-hd { border-radius: 9px; border: 0; background: var(--surface-2); padding: 10px 11px; }
.log-jump { position: absolute; top: 14px; bottom: auto; left: 50%; z-index: 6; transform: translate(-50%, -5px);
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-width: 32px; min-height: 32px;
  padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-1);
  color: var(--foreground); font: 500 12px Inter, sans-serif; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity 150ms ease-out, transform 150ms ease-out; }
.log-jump.shown { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.log-jump:hover { background: var(--selected); border-color: var(--border-strong); }
.log-jump svg { width: 16px; height: 16px; color: var(--muted); }
.log-viewport { position: relative; display: flex; flex: 1; min-height: 0; }
.log-viewport #log-list { width: 100%; }
/* Identity belongs to the contextual navigation, rather than floating in the caption. */
#view-app:has(> #view-server:not(.hidden)) .workspace-server-context { display: none; }
#view-app:has(> #view-server:not(.hidden)) .sh-identity { display: flex; }
.side-server { background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  margin-top: 0; padding: 4px 2px 8px !important; }
#view-server .sidebar { padding: 18px 10px; }
#view-server .content { padding-top: 18px; }
@media (min-width: 721px) {
  #view-app:has(> #view-server:not(.hidden)) { --workspace-top: 0px; }
  #view-app:has(> #view-server:not(.hidden)) > .topbar { display: none; }
}
/* Neutral selection, restrained pill actions, and Heroicons menus. */
.fm-selection { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: none; margin-bottom: 10px; padding: 8px 8px 8px 12px; }
.fm-selection-copy span { color: var(--muted); }
.fm-batch-actions button { border-radius: 99px; padding: 6px 10px; font-size: 12px; }
.fm-batch-actions button:hover { background: var(--hover); }
.frow.selected, #f-list .frow.selected { background: var(--surface-2); box-shadow: none; border-radius: 8px; }
.fcheck input { accent-color: var(--foreground); }
#f-list .ftile { color: var(--muted); }
.ctxmenu { min-width: 220px; padding: 6px; border-radius: 12px; background: var(--surface-1); border: 1px solid var(--border); }
.ctxmenu button { min-height: 34px; padding: 7px 9px; border-radius: 8px; gap: 10px; font-size: 12.5px; }
.ctxmenu svg { color: var(--muted); width: 15px; height: 15px; stroke-width: 1.5; }
.ctxmenu button.danger svg { color: var(--red); }
@media (hover: none) and (pointer: coarse) { .console-entry-actions { opacity: 1; } }
@media (max-width: 600px) { .console.modern .console-entry { grid-template-columns: 48px 5px minmax(0,1fr) auto; gap: 7px; } }
@media (prefers-reduced-motion: reduce) { .log-jump, .console-entry-actions { transition: none; } }

.fm-batch-actions button { background: var(--surface-2); border: 1px solid var(--border); }

.sh-identity .gico { width: 30px; height: 30px; background: transparent; border: 0; }
.sh-identity .gico :is(svg,.gico-img) { width: 26px; height: 26px; object-fit: contain; }

.fcheck input:checked + span, .fcheck input:indeterminate + span { background: var(--foreground); border-color: var(--foreground); }
.fcheck svg { color: var(--bg); stroke-width: 1.7; }
.fcheck input:indeterminate + span::after { background: var(--bg); }

.sh-title-stack .sub { white-space: normal; line-height: 15px; }

#f-list .ftile.dir svg { color: var(--muted); }

#f-refresh, #f-mkdir, #f-upload { height: 34px; border-radius: 99px; padding-inline: 13px; }

/* One segmented track with a sliding selection, rather than two outlined buttons. */
.console-modes { position: relative; display: grid; grid-template-columns: 33px 33px; width: 74px; height: 32px; gap: 0; padding: 3px; }
.console-modes::before { content: ""; position: absolute; top: 3px; left: 3px; width: 33px; height: 24px;
  background: var(--selected); border-radius: 99px; transition: transform 180ms cubic-bezier(.215,.61,.355,1); pointer-events: none; }
.console-modes[data-mode="classic"]::before { transform: translateX(100%); }
.console-modes button, .console-modes button[aria-pressed="true"] { position: relative; width: 33px; height: 24px; background: transparent; border: 0; box-shadow: none; }
.console-modes button:focus-visible { outline: 1px solid var(--muted); outline-offset: -1px; }
.console.classic { border: 0; border-radius: 0; background: transparent; }
.console-entry-actions { margin-inline-end: 10px; }
.console-entry-actions button { color: var(--muted-2); }
/* Portwarp notification cards: a neutral shell, a small status badge and dismiss. */
#toast-stack { position: fixed; z-index: 1000; right: 20px; bottom: 20px; width: 340px; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
#toast-stack .toast { position: static; transform: none; display: grid; grid-template-columns: 24px minmax(0,1fr) 24px;
  align-items: start; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-1); color: var(--foreground); box-shadow: 0 6px 24px #0003; margin: 0;
  font: 400 12px/18px Inter, sans-serif; pointer-events: auto; animation: toast-card-in 200ms ease-out both; }
.toast-badge { display: grid; place-items: center; width: 24px; height: 24px; align-self: start; border-radius: 50%; background: var(--selected); color: var(--muted); }
.toast-badge svg { width: 16px; height: 16px; }
.toast.success .toast-badge { color: #34d399; background: #162b24; }
.toast.err .toast-badge { color: var(--console-error); background: #2e1719; }
.toast-message { overflow-wrap: anywhere; text-align: start; padding-block: 3px; }
.toast-close { width: 24px; height: 24px; align-self: start; display: grid; place-items: center; border: 0; border-radius: 5px; padding: 0;
  background: transparent; color: var(--muted); cursor: pointer; }
.toast-close:hover { background: var(--hover); }
.toast-close svg { width: 10px; height: 10px; }
#toast-stack .toast.closing { animation: toast-card-out 200ms ease-in both; }
@keyframes toast-card-in { from {opacity:0; transform:translateY(5px)} to {opacity:1; transform:translateY(0)} }
@keyframes toast-card-out { to {opacity:0; transform:translateY(5px)} }
:root[data-theme="light"] .toast.success .toast-badge { color: #087a56; background: #e7f8f1; }
:root[data-theme="light"] .toast.err .toast-badge { background: #fdecec; }
@media (max-width: 600px) { #toast-stack { right: 12px; bottom: 12px; left: 12px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .console-modes::before { transition: none; } #toast-stack .toast { animation: none; } }

#toast-stack { width: max-content; max-width: min(340px, calc(100vw - 24px)); }
:root[data-theme="oled"] .toast.success .toast-badge { background: #0b1f18; }
:root[data-theme="oled"] .toast.err .toast-badge { background: #1a0d0e; }
@media (max-width: 600px) { #toast-stack { left: 50%; right: auto; transform: translateX(-50%); width: max-content; } }

.console-entry-actions button:hover { color: var(--muted-2); }

/* Caption-aligned console controls and a flat telemetry strip. */
:root { --link-text: #93b4ff; }
:root[data-theme="light"] { --link-text: #3867c6; }
.console .console-link, .console .console-link:hover, .cfg-desc a { color: var(--link-text); }
.metrics { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; padding: 8px 4px 12px; }
.workspace-page-title { display: none; }
.workspace-console-modes { display: none; margin-inline-start: auto; }
#view-app.workspace-caption:has(> #view-server:not(.hidden)) { --workspace-top: 44px; }
#view-app.workspace-caption:has(> #view-server:not(.hidden)) > .topbar { display: flex; height: 44px; }
#view-app.workspace-caption:has(> #view-server:not(.hidden)) .workspace-page-title { display: block; margin-inline-start: 228px; font-size: 16px; font-weight: 600; }
#view-app.workspace-caption:has(> #view-server:not(.hidden)) .workspace-console-modes { display: block; }
.workspace-caption[data-section="console"] .console-heading { display: none; }
.workspace-caption[data-section="config"] .cfg-head > h2, .workspace-caption[data-section="files"] .fm-title { display: none; }
.workspace-caption #view-server .content { padding-top: 24px; }
@media (min-width: 821px) {
  #view-app.workspace-caption:has(> #view-server:not(.hidden)) { --workspace-top: 0px; }
  #view-app.workspace-caption:has(> #view-server:not(.hidden)) > .topbar { position: fixed; top: 0; left: calc(var(--rail-width) + var(--server-sidebar-width)); right: 0; margin-inline-start: 0; padding-inline: 34px; }
  #view-app.workspace-caption:has(> #view-server:not(.hidden)) .workspace-page-title { margin-inline-start: 0; }
  .workspace-caption #view-server .content { padding-top: 68px; }
  .workspace-caption #view-server .sidebar { top: 0; height: 100dvh; }
}
@media (max-width: 820px) {
  #view-app.workspace-caption:has(> #view-server:not(.hidden)) .workspace-page-title { margin-inline-start: 0; }
  .workspace-caption #view-server .sidebar { transform: translateX(calc(-100% - var(--rail-width))); }
  body.drawer-open .workspace-caption #view-server .sidebar { transform: translateX(0); }
}
@media (max-width: 720px) { #view-app.workspace-caption:has(> #view-server:not(.hidden)) .workspace-page-title { margin-inline-start: 0; } }
/* Preserve the familiar configuration card grid with Portwarp surfaces. */
#cfg-body { container-type: inline-size; }
.cfg-head { border: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 18px; }
.workspace-caption .cfg-head .spacer { display: none; }
.workspace-caption .cfg-head .cfg-search { flex: 1; width: auto; }
.cfg-search .input { border-radius: 99px; }
.cfg-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; max-width: 960px; }
.cfg-card { padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); }
.cfg-field { display: flex; flex-direction: column; align-items: stretch; gap: 10px; height: 100%; }
.cfg-field .input { width: 100%; min-width: 0; border-radius: 4px; margin-top: auto; }
.cfg-field .switch { margin: 0; align-self: flex-start; }
.cfg-label { font-size: 13px; gap: 5px; }
.cfg-desc { font-size: 11.5px; }
@container (max-width: 620px) { .cfg-cards { grid-template-columns: minmax(0,1fr); } }

/* Keep the folder filter and actions directly below the shared caption. */
.workspace-caption .fm-head { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.workspace-caption .fm-head .fm-search { flex: 1; min-width: 160px; margin: 0; }
.workspace-caption .fm-head .fm-actions { flex-shrink: 0; }
[data-theme="light"] .console-link, [data-theme="light"] .console-link:hover, [data-theme="light"] .cfg-desc a { color: var(--link-text); }

/* A compact floating selection dock; the list keeps its original top alignment. */
.content.file-manager { position: relative; container-type: inline-size; }
.fm-selection { position: absolute; z-index: 12; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 24px); min-height: 46px; margin: 0; padding: 6px;
  gap: 6px; border-radius: 99px; }
.fm-batch-actions { flex: 1; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.fm-batch-actions button { flex: none; }
.fm-batch-actions button.danger { margin-left: 3px; }
.fm-selection:not(.hidden) + .filelist { border-radius: 0; }
.filelist.selection-mode { padding-bottom: 80px; scroll-padding-bottom: 80px; }
@container (max-width: 620px) {
  .fm-batch-actions button span { display: none; }
  .fm-batch-actions button { width: 32px; height: 32px; padding: 0; }
}

/* Consistent hierarchy, quiet mixed checks and a gently rising action dock. */
#view-app.workspace-caption:has(> #view-server:not(.hidden)) .workspace-page-title { font-size: 20px; font-weight: 700; transform: translateY(8px); }
.fcheck input:indeterminate + span { background: var(--input); border-color: var(--border-strong); }
.fcheck input:indeterminate + span::after { background: var(--muted); }
.fm-selection { gap: 8px; }
.fm-batch-actions { gap: 6px; }
.fm-batch-actions button { height: 32px; padding: 0 11px; gap: 6px; line-height: 1; align-items: center; justify-content: center; }
.fm-batch-actions svg { width: 12px; height: 12px; stroke-width: 1.5; flex: none; }
#section-host > .fm-selection:not(.hidden) { animation: selection-dock-in .3s cubic-bezier(.22,1.35,.36,1) both; }
#section-host > .fm-selection.dock-closing { animation: selection-dock-out .16s ease-in both; pointer-events: none; }
@keyframes selection-dock-in { from { opacity: 0; transform: translate(-50%,18px); } to { opacity: 1; transform: translate(-50%,0); } }
@keyframes selection-dock-out { from { opacity: 1; transform: translate(-50%,0); } to { opacity: 0; transform: translate(-50%,10px); } }
@container (max-width: 620px) { .fm-batch-actions button { padding: 0; } }
#f-list .dots:hover, #f-list .dots:focus-visible { color: var(--link-text); background: var(--hover); }
#view-app:has(> #view-server:not(.hidden)) .side-server { border-bottom: 0; padding: 4px 2px 8px; margin-bottom: 0; }
#view-server .side-server:has(.side-addresses:not(.hidden)) { padding-bottom: 4px !important; }
.sh-facts { gap: 8px; }
.modal.prompt-dialog { width: min(420px,calc(100vw - 32px)); border-radius: 16px; }
.prompt-dialog .modal-head { padding: 22px 22px 6px; border: 0; }
.prompt-dialog .modal-body { padding: 12px 22px; }
.prompt-dialog .modal-foot { padding: 10px 22px 22px; border: 0; gap: 10px; }
.prompt-dialog .modal-foot .btn { border-radius: 99px; min-width: 90px; height: 34px; justify-content: center; }
.prompt-dialog .input { border-radius: 4px; }
.workspace-search-dialog .modal-head .input { border-radius: 99px; padding-inline: 12px; height: 36px; }
@media (prefers-reduced-motion: reduce) { #section-host > .fm-selection:not(.hidden), #section-host > .fm-selection.dock-closing { animation: none; } }

.workspace-caption #section-host > .sec-head > h2,
.workspace-caption #section-host > .sec-head > div > h2 { display: none; }

.prompt-dialog .field > span { font-size: 12px; font-weight: 400; color: var(--muted); }

/* Smoothly reserve the selection slot without jumping the filename. */
.frow:not(.fhead) > :is(.fcheck, .fcheck-spacer) { overflow: hidden; transition: width 260ms cubic-bezier(.22,1,.36,1), margin-right 260ms cubic-bezier(.22,1,.36,1), opacity 180ms, visibility 260ms; }
@media (prefers-reduced-motion: reduce) { .frow:not(.fhead) > :is(.fcheck, .fcheck-spacer) { transition: none; } }

/* Quiet separators between file entries, matching the tunnel list hierarchy. */
#f-list .frow:not(.fhead) { border-bottom: 1px solid var(--border); }

/* Centre action glyphs and labels on a consistent line box. */
.fm-batch-actions button span { display: block; line-height: 14px; }
.fm-batch-actions svg, .fm-selection-clear svg { display: block; align-self: center; }
@container (max-width: 620px) { .fm-batch-actions button span { display: none; } }

/* Activity: quiet event separators and a compact rounded toolbar. */
.log-row { padding: 14px 12px; border-bottom: 1px solid var(--border); }
.log-tools { gap: 10px; }
.log-footer { justify-content: center; }
.log-tools .range-chip { border-radius: 99px; }

/* Activity keeps search visible while the filter action toggles the range chips. */
.activity-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.activity-toolbar .log-search { flex: 1; }
.activity-toolbar .log-actions { flex: none; }
.fm-actions #f-refresh, .fm-actions #f-mkdir, .fm-actions #f-upload { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; min-height: 34px; padding: 0; border: 0; background: transparent; color: #737373; }
:root[data-theme="light"] .fm-actions #f-refresh, :root[data-theme="light"] .fm-actions #f-mkdir, :root[data-theme="light"] .fm-actions #f-upload { color: #71717a; }
.fm-actions #f-refresh:hover, .fm-actions #f-mkdir:hover, .fm-actions #f-upload:hover { background: var(--hover); color: var(--foreground); }

/* Plugins shares the full-width search and quiet icon action toolbar. */
.plugins-toolbar { gap: 8px; flex-wrap: wrap; }
.plugins-toolbar .pl-search { position: relative; flex: 1; min-width: 120px; max-width: none; margin: 0; }
.pl-search .input { width: 100%; height: 34px; padding: 0 12px 0 32px; border-radius: 99px; font-size: 12.5px; }
.pl-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted-2); }
.pl-search-icon svg { display: block; width: 13px; height: 13px; }
#pl-installed { flex: none; width: auto; height: 32px; min-height: 32px; padding: 0 10px; background: transparent; border: 1px solid var(--border); color: var(--foreground); }
:root[data-theme="light"] #pl-installed { color: #71717a; }
#pl-installed:hover { background: var(--hover); color: var(--foreground); }
#pl-installed svg { width: 14px; height: 14px; stroke-width: 1.5; }

/* Align section search fields with the File Manager toolbar origin. */
.workspace-caption .cfg-head .cfg-search { margin-left: 0; }
.workspace-caption .cfg-head { flex-wrap: wrap; }
.workspace-caption .cfg-head .cfg-search { order: -1; flex-basis: 100%; }

/* The scrolling viewport reaches the workspace edge; its content keeps a gutter. */
#view-server .content { --scroll-edge-gutter: 34px; --scroll-bottom-gutter: 28px; }
#view-server .content > :is(#cfg-body, #pl-body, #sc-body, #bk-body, #ss-body, #int-body, #u-body, #dc-body, #f-list),
#view-server .content .log-viewport {
    width: calc(100% + var(--scroll-edge-gutter) - 2px); max-width: none;
    margin-inline-end: calc(2px - var(--scroll-edge-gutter));
}
#view-server .content > :is(#cfg-body, #pl-body, #sc-body, #bk-body, #ss-body, #int-body, #u-body, #dc-body, #f-list),
#view-server .content .log-viewport #log-list { padding-inline-end: calc(var(--scroll-edge-gutter) - 10px); padding-bottom: 14px; scrollbar-gutter: stable; }
#view-server .content .log-wrap { max-width: none; }
#view-server .content > :is(#cfg-body, #pl-body, #sc-body, #bk-body, #ss-body, #int-body, #u-body, #dc-body, #f-list),
#view-server .content .log-wrap:has(> .log-footer.hidden) .log-viewport {
    margin-bottom: calc(2px - var(--scroll-bottom-gutter));
}
@media (max-width: 820px) {
    #view-server .content { --scroll-edge-gutter: 16px; --scroll-bottom-gutter: 18px; }
}

/* Chromium uses the rounded custom thumb; Firefox keeps its thin transparent track. */
@supports selector(::-webkit-scrollbar) {
    * { scrollbar-width: auto; scrollbar-color: auto; }
    .sidebar, .fm-batch-actions { scrollbar-width: none; }
}

/* Installed uses a single centred glyph in its 34px hit target. */
#pl-installed { display: inline-flex; align-items: center; justify-content: center; gap: 7px; line-height: 1; white-space: nowrap; }
#pl-installed > svg { display: block; flex: none; margin: 0; }

/* Workspace rail uses one aligned target size and larger, uncropped artwork. */
.server-rail { padding-block: 16px; gap: 8px; }
.server-rail-tile, .server-rail-utility { width: 44px; height: 44px; border-radius: 12px; }
.server-rail-item { position: relative; width: 100%; height: 44px; gap: 0; }
.server-rail-item .server-rail-tile { width: 36px; height: 36px; border: 1px solid transparent; border-radius: 50%; background: transparent; }
.server-rail-item:hover .server-rail-tile { border-color: var(--border-strong); }
.server-rail-item[aria-current="page"] .server-rail-tile { border-color: var(--border-strong); }
.server-rail-item[aria-current="page"]::before { width: 4px; height: 32px; inset: 6px auto auto 0; border-radius: 0 4px 4px 0; background: var(--foreground); pointer-events: none; }
.server-rail-tile .gico { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; }
.server-rail-tile .gico .gico-img { width: 32px; height: 32px; border-radius: 50%; object-fit: contain; image-rendering: auto; }
.server-rail-tile .gico > svg { width: 20px; height: 20px; }
.rail-home > svg { width: 20px; height: 20px; }
.rail-rule { width: 24px; margin: 6px auto; }
.server-rail-list { padding-block: 0; gap: 8px; }
.rail-actions :is(.hdr-ai,.hdr-update,.hdr-icon) { width: 44px; height: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; }
#workspace-account { width: 44px; height: 44px; display: grid; place-items: center; }

/* Flat edit and confirmation dialogs share compact content-driven spacing. */
.modal.se-edit { width: min(520px, calc(100vw - 32px)); }
.modal.se-edit > .modal-body { max-height: calc(100dvh - 180px); }
:is(.confirmation-dialog, .se-edit) .modal-head { padding: 20px 20px 0; min-height: 0; border: 0; background: transparent; }
:is(.confirmation-dialog, .se-edit) .modal-body { padding: 12px 20px 16px; }
:is(.confirmation-dialog, .se-edit) .modal-foot { padding: 0 20px 20px; border: 0; background: transparent; gap: 8px; }
:is(.confirmation-dialog, .se-edit) .modal-foot .btn { height: 34px; min-height: 34px; padding: 0 14px; border-radius: 99px; }
.confirmation-dialog .modal-copy { font-size: 13px; line-height: 20px; }
.db-unavailable { display: flex; border: 0; background: transparent; }
.db-unavailable > .db-tree { display: none; }
.db-unavailable > .db-main { flex: 1; }
.db-unavailable .db-results { display: grid; place-items: center; border: 0; background: transparent; }
.db-missing-state { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 440px; margin: 24px; text-align: center; }
.db-missing-state > svg { width: 32px; height: 32px; color: var(--muted-2); }
.db-missing-state > strong { font-size: 15px; font-weight: 600; }
.db-missing-state > p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Compact plugin filters and a consistent Installed toolbar. */
.plugins-toolbar #pl-filter { width: 104px !important; height: 34px; min-height: 0; text-align: start; padding: 0 10px; }
.modal.installed-dialog { width: min(620px, calc(100vw - 28px)); }
.installed-dialog .modal-head { padding: 18px 20px 10px; gap: 4px; }
.installed-heading { flex: 1; min-width: 0; display: grid; gap: 2px; }
.installed-heading h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.installed-header-actions { display: flex; gap: 4px; align-items: center; }
.installed-action.busy { background: var(--selected); color: var(--foreground); }
.installed-action .spinner, button.installing .spinner { width: 16px; height: 16px; margin: 0; flex: none; border-width: 2px; }
button.installing { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.installed-dialog .modal-body { padding: 6px 20px 16px; }
.installed-dialog .modal-foot { padding: 0 20px 20px; }
.installed-dialog .modal-foot .btn { height: 34px; min-height: 34px; padding: 0 16px; }
.pl-inst-card img { object-fit: contain; image-rendering: auto; }

.installed-dialog #pl-search { border-radius: 99px; }

/* Plugin actions mirror the quiet File Manager refresh treatment. */
.installed-action { width: 28px; height: 28px; min-height: 0; border: 0; border-radius: 99px; padding: 0; color: var(--muted-2); display: inline-flex; align-items: center; justify-content: center; }
.installed-action svg { width: 14px; height: 14px; }
.installed-action[aria-pressed="true"] { background: rgb(var(--brand) / .13); color: rgb(var(--brand-light)); }
.installed-action.danger { background: transparent; border: 0; color: var(--red); }
.installed-action.danger:hover, .installed-action.danger:active { background: color-mix(in srgb, var(--red) 16%, transparent); }
.installed-action.danger:hover svg { stroke-width: 1.9; }
.plugins-toolbar :is(select,.pl-price-trigger) { border-radius: 99px; }
.modal.plugin-info-dialog { width: min(560px, calc(100vw - 32px)); }
.plugin-info-dialog .modal-head { padding: 20px 20px 10px; gap: 4px; }
.plugin-info-dialog .pl-info-head { flex: 1; min-width: 0; gap: 12px; margin: 0 8px 0 0; }
.plugin-info-dialog .pl-info-head .pl-icon { width: 36px; height: 36px; flex: none; }
.plugin-info-dialog .pl-icon img { object-fit: contain; image-rendering: auto; }
.plugin-info-dialog .pl-info-name { font-size: 16px; }
.plugin-info-dialog .modal-body { padding: 6px 20px 16px; }
.plugin-info-dialog .modal-foot { padding: 0 20px 20px; }
.plugin-info-dialog .modal-foot .btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1; height: 34px; min-height: 0; padding: 0 16px; border-radius: 99px; }
.db-missing-copy { display: grid; gap: 4px; }
.db-missing-copy strong { color: var(--foreground); font-size: 15px; font-weight: 600; }
.db-missing-copy p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
@font-face { font-family: 'ServerCreator Console'; src: url('assets/fonts/JetBrainsMono-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
.console:not(.modern), .ci-text { font-family: 'ServerCreator Console', var(--font-mono); font-weight: 400; font-synthesis: none; font-size: 13px; line-height: 23px; letter-spacing: .2px; font-variant-ligatures: none; }
.console .sc-prefix, .console .pw-prefix { font-weight: 400; }
.console-entry-message { font-weight: 400; line-height: 22px; }

.plugin-info-dialog .pl-info-meta { margin-bottom: 12px; }
.plugin-info-dialog .pl-info-meta:empty { display: none; }

.plugin-info-dialog .loading { padding: 20px; min-height: 0; }

/* Live player count belongs beside the console view selector. */
.console-header-actions { display: flex; align-items: center; gap: 8px; }
.console-players { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface-1); color: var(--foreground); font: 500 12px Inter, sans-serif; cursor: pointer; white-space: nowrap; }
.console-players:hover { background: var(--hover); border-color: var(--border-strong); }
.console-players svg { width: 14px; height: 14px; flex: none; color: var(--muted); }

/* Players and moderation sheets follow the compact flat dialog layout. */
.modal.plm-modal { width: min(520px, calc(100vw - 32px)); }
:is(.plm-modal,.player-action-dialog) .modal-head { min-height: 0; padding: 20px 20px 10px; border: 0; }
.plm-modal .modal-head h3 { flex: 0 1 auto; }
.plm-modal .modal-head #m-x { margin-inline-start: auto; }
.plm-modal .plm-pill { padding: 3px 8px; border: 0; background: var(--surface-2); }
:is(.plm-modal,.player-action-dialog) .modal-body { padding: 6px 20px 20px; }
.plm-modal .modal-foot { display: none; }
.plm-search .input { border-radius: 99px; }
.plm-modal #plm-list { display: flex; flex-direction: column; gap: 6px; }
.plm-modal .plm-row { border: 0; border-radius: 10px; padding: 10px 12px; background: var(--surface-2); }
.plm-modal .plm-meta { gap: 8px; font-size: 11px; }
.plm-modal .plm-av { image-rendering: pixelated; }
.plm-modal .plm-acts :is(.btn,.plm-op) { display: inline-flex; align-items: center; justify-content: center; line-height: 1; height: 30px; min-height: 0; padding: 0 11px; border-radius: 99px; }
.plm-modal .plm-more { border-radius: 99px; }
.modal.player-action-dialog { width: min(440px, calc(100vw - 32px)); }
.player-action-dialog .modal-head { padding-bottom: 0; }
.player-action-dialog .modal-body { display: grid; gap: 12px; padding-top: 12px; padding-bottom: 16px; }
.player-action-dialog .player-action-target { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.player-action-dialog .modal-copy { margin: 0; color: var(--muted); font-size: 12px; }
.player-action-dialog #pl-reason { height: 36px; border-radius: 8px; }
.player-action-dialog .modal-foot { padding: 0 20px 20px; border: 0; }
.player-action-dialog .modal-foot .btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1; height: 32px; min-height: 0; padding: 0 14px; border-radius: 99px; }

.plm-avatar { position: relative; display: grid; place-items: center; overflow: hidden; color: var(--muted); font-size: 13px; }
.plm-avatar-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }

/* Users shares the centred, quiet empty-state hierarchy used by missing MySQL. */
#u-body.users-empty { display: grid; place-items: center; padding: 24px; }
.users-empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 440px; text-align: center; }
.users-empty-state > svg { width: 32px; height: 32px; color: var(--muted-2); }
.users-empty-copy { display: grid; gap: 4px; }
.users-empty-copy strong { font-size: 15px; font-weight: 600; color: var(--foreground); }
.users-empty-copy p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Backups: a File Manager toolbar and a compact quota ring. */
.bk-quota-pill { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 99px;
  padding: 5px 10px; min-height: 28px; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.bk-quota-pill > svg { width: 16px; height: 16px; flex: none; fill: none; stroke-width: 2.2; }
.bk-ring-track { stroke: var(--border-strong); }
.bk-ring-value { stroke: currentColor; stroke-linecap: round; }
.bk-quota-pill.warning .bk-ring-value { stroke: var(--console-warn); }
.bk-quota-pill .iconbtn { width: 20px; height: 20px; padding: 2px; color: var(--muted); }
.bk-quota-pill .iconbtn svg { width: 12px; height: 12px; }
#bk-create { width: 34px; height: 32px; margin-left: 8px; }
#bk-create svg { width: 18px; height: 18px; }
#bk-body > .card { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#bk-body .tbl th { color: var(--muted); font-size: 11px; font-weight: 500; }
#bk-body .tbl td { border-color: var(--border); }
#bk-body .tbl tbody tr:hover { background: var(--hover); }
.backup-chooser { display: flex; flex-direction: column; gap: 16px; }
.backup-host-destination { display: flex; align-items: center; align-self: flex-start; gap: 7px; border: 1px solid var(--border);
  border-radius: 99px; padding: 7px 14px; color: var(--foreground); background: var(--selected); font-size: 12px; }
.backup-host-destination svg { width: 16px; height: 16px; }
.backup-included-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.backup-included-row > svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.backup-included-row > svg:last-child { width: 16px; height: 16px; margin-left: auto; }
.backup-included-row > div { display: flex; flex-direction: column; gap: 3px; }
.backup-included-row strong { font-size: 13px; font-weight: 600; }
.backup-included-row span { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { #bk-body th:nth-child(3), #bk-body td:nth-child(3), #bk-body th:nth-child(4), #bk-body td:nth-child(4) { display: none; } }

.plugin-install.installing { cursor: progress; opacity: .75; gap: 6px; }
button.plugin-install.installing .spinner { width: 12px; height: 12px; flex: none; border: 1.5px solid currentColor;
  border-right-color: transparent; box-sizing: border-box; }

#bk-body.backups-empty { display: grid; place-items: center; padding: 24px; }
.bk-empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 440px; text-align: center; }
.bk-empty-state > svg { width: 32px; height: 32px; color: var(--muted-2); }
.bk-empty-state > strong { font-size: 15px; font-weight: 600; color: var(--foreground); }
.bk-empty-state #bk-create { width: auto; height: 32px; margin: 8px 0 0; padding: 0 14px; }
.bk-empty-state #bk-create svg { width: 14px; height: 14px; }

/* Sidebar identity: an inset status dot and a compact power column. */
.side-identity-controls { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 30px; align-items: start; column-gap: 8px; min-height: 36px; }
.side-identity-controls .side-switch-wrap { min-width: 0; }
.sh-artwork { position: relative; display: block; width: 30px; height: 34px; flex: none; }
.sh-artwork #side-status { position: absolute; bottom: 0; right: 0; margin: 0; padding: 2px; width: 12px; height: 12px;
  display: grid; place-items: center; border-radius: 50%; background: var(--bg); }
.sh-artwork #side-status .srv-badge { width: 8px; height: 8px; }
.sh-artwork #side-status .led { width: 6px; height: 6px; background: var(--muted-2); animation: none; box-shadow: none; }
.sh-artwork #side-status.online .led { background: var(--sidebar-online-text); }
#side-status .sh-state-text, #side-status .srv-up { display: none !important; }
.side-identity-controls .side-power { position: absolute; top: calc(50% + 2px); right: 0; width: 30px; transform: translateY(-50%); flex-direction: column; gap: 0; }
.side-identity-controls .side-power .btn { flex: 0 0 30px; width: 30px; height: 30px; min-width: 30px; min-height: 30px;
  border: 0; background: transparent; }
.side-identity-controls .side-power :is(#btn-stop,#btn-restart) { flex-basis: 24px; width: 24px; height: 24px; min-width: 24px; min-height: 24px; }
.side-identity-controls .side-power .btn svg { width: 14px; height: 14px; stroke-width: 1.7; }
.side-identity-controls .side-power .btn:is(:hover,:focus-visible) { background: var(--hover); }
.side-identity-controls .side-power #btn-start { background: var(--primary); color: var(--inverse); }
.side-identity-controls .side-power #btn-start:is(:hover,:focus-visible) { background: var(--primary-hover); }
.side-identity-controls .side-power .btn-spin { width: 12px; height: 12px; }

.side-identity-controls .srv-switch.sh .nm { font-size: 13px; }

/* Servers follows the File Manager's aligned toolbar and separated rows. */
.workspace-content .page-head { padding: 8px 0; min-height: 56px; }
.workspace-content .page-title { font-size: 20px; font-weight: 700; line-height: 1.25; }
.workspace-count { border: 0; padding: 2px 7px; background: var(--surface-2); }
.workspace-tools { margin: 8px 0 14px; }
.workspace-tools .create-btn { flex: none; }
.workspace-tools #servers-refresh { width: 34px; height: 34px; }
.workspace-content .sv-grid .sv-row { height: 64px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--border); border-radius: 8px; }
.workspace-content .sv-name { color: var(--foreground); }
.workspace-content .sv-kebab { border-radius: 99px; color: var(--muted); }
.workspace-content .sv-kebab svg { width: 14px; height: 14px; }
@media (max-width: 640px) { .workspace-content .sv-grid .sv-row { padding-inline: 8px; } }

/* Create server: one neutral workspace from game selection through installation. */
.cs-scrim { padding:16px; }
.cs-modal { width:min(760px,calc(100vw - 32px)); max-width:760px; height:min(640px,calc(100dvh - 32px)); max-height:calc(100dvh - 32px);
  min-height:0; border-radius:12px; background:var(--surface-1); container:cs-dialog / inline-size; }
.cs-modal:focus { outline:none; }
.cs-modal.cs-autoheight { height:auto; }
.cs-head { padding:18px 18px 12px; gap:8px; border:0; background:var(--surface-1); align-items:flex-start; }
.cs-head-txt { min-height:20px; align-self:center; }
.cs-head h3 { font-size:16px; line-height:20px; font-weight:600; letter-spacing:0; color:var(--foreground); }
.cs-sub { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.cs-head .iconbtn { flex:none; width:32px; height:32px; min-height:32px; border-radius:99px; padding:8px; margin-block:-6px; border:0; background:transparent; color:var(--muted); }
.cs-head .iconbtn:hover { background:var(--hover); color:var(--foreground); }
.cs-head .iconbtn svg { width:14px; height:14px; }
.cs-head-busy { flex:none; display:grid; place-items:center; width:32px; height:32px; margin-block:-6px; }
.cs-head-busy .spinner { width:16px; height:16px; border:2.5px solid var(--border); border-top-color:var(--muted); background:transparent; border-radius:50%; animation:spin .8s linear infinite; }
.cs-game-pill { flex:none; display:inline-flex; align-items:center; gap:6px; max-width:110px; height:28px; min-width:0; padding:4px 8px;
  border:1px solid var(--border); border-radius:99px; background:var(--surface-2); color:var(--foreground); }
.cs-head-tools { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex:none; min-width:0; max-width:100%; }
.cs-game-pill-art { position:relative; flex:none; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; overflow:hidden; background:transparent; }
.cs-game-pill-art :is(svg,.gico-img) { position:absolute; inset:0; width:18px; height:18px; object-fit:contain; }
.cs-game-pill-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; font-weight:500; line-height:16px; }
.cs-body { display:flex; flex-direction:column; flex:1 1 auto; padding:0 18px 18px; }
.cs-search { flex:none; position:relative; top:auto; z-index:1; padding:0 0 10px; margin:0; background:var(--surface-1); }
.cs-search svg { left:12px; top:11px; width:14px; height:14px; }
.cs-search input { height:36px; min-height:36px; padding:0 12px 0 34px; border:1px solid var(--border); border-radius:99px; font-size:12px; background:var(--input); color:var(--foreground); }
.cs-search input:is(:hover,:focus) { border-color:var(--border-strong); box-shadow:none; outline:none; }
.cs-game-results { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.cs-body:has(>.cs-search) { overflow:hidden; }
.cs-grid { grid-template-columns:1fr; gap:4px 8px; }
.cs-game { display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; gap:12px; height:64px; min-height:64px; padding:8px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface-2); text-align:start; transition:background-color .16s,color .16s; }
.cs-game:is(:hover,:focus-visible) { background:var(--hover); }
.cs-game:focus-visible, .cs-head .iconbtn:focus-visible { outline:1px solid var(--border-strong); outline-offset:-1px; }
.cs-game-ico { width:32px; height:32px; border-radius:50%; overflow:hidden; border:0; background:transparent; color:var(--muted); }
.cs-game-ico .gico-img { width:100%; height:100%; object-fit:contain; }
.cs-game-ico svg { width:24px; height:24px; }
.cs-game-meta { display:grid; gap:4px; min-width:0; }
.cs-game-nm { font-size:13px; line-height:17px; font-weight:600; text-align:start; color:var(--foreground); }
.cs-game-pills { position:static; display:flex; align-items:center; gap:5px; }
.cs-game-steam { display:inline-flex; color:var(--muted); }
.cs-game-steam svg { display:block; width:12px; height:12px; }
.cs-pill, .cs-pill.new, .cs-pill.hot { background:var(--surface-2); color:var(--muted); font-size:9px; font-weight:500;
  letter-spacing:0; box-shadow:none; border-radius:4px; padding:2px 5px; line-height:1.3; }
.cs-imm { flex:none; background:transparent; overflow:visible; }
.cs-imm-in { position:static; padding:0; }
.cs-imm-hero { display:none; }
.cs-imm-cover { width:32px; height:32px; aspect-ratio:1; flex:none; border:0; border-radius:50%; box-shadow:none; background:transparent; display:grid; place-items:center; overflow:hidden; position:relative; }
.cs-imm-cover .gico-img { position:absolute; width:32px; height:32px; object-fit:contain; }
.cs-imm-cover svg { width:24px; height:24px; color:var(--muted); }
.cs-imm-meta { min-width:0; padding:0; }
.cs-imm-meta h3 { margin:0; font-size:13px; line-height:18px; font-weight:600; color:var(--foreground); letter-spacing:0; }
.cs-imm-meta :is(h3,p), .cs-ins-meta :is(h3,p) { text-shadow:none; }
.cs-imm .cs-form { margin-top:0; gap:12px; }
.cs-field { gap:6px; min-width:0; }
.cs-field>span { color:var(--muted); font-size:12px; line-height:16px; font-weight:400; }
.cs-field input, .cs-field select, .cs-cbx { height:36px; min-height:36px; border-radius:4px; padding:0 12px; font-size:12px; background:var(--input); color:var(--foreground); border-color:var(--border); }
.cs-field select { padding-right:34px; }
.cs-field :is(input,select):is(:hover,:focus), .cs-cbx:is(:hover,:focus-visible,[aria-expanded="true"]),
:root[data-theme="light"] .cs-field :is(input,select):is(:hover,:focus), :root[data-theme="light"] .cs-cbx[aria-expanded="true"] { border-color:var(--border-strong); box-shadow:none; outline:none; }
.cs-cbx-cur { gap:8px; }
.cs-cbx .cs-opt-description { display:none; }
.cs-opt-ico { width:18px; height:18px; border-radius:0; background:transparent; }
.cs-cbx-pop { max-width:calc(100vw - 16px); border-radius:12px; background:var(--surface-1); border-color:var(--border-strong); }
.cs-cbx-pop .cs-opt { min-height:32px; padding:6px 8px; border-radius:6px; }
.cs-opt-chk { color:var(--foreground); }
.cs-imm .cs-row2 { grid-template-columns:1fr; gap:12px; }
.cs-check { min-height:24px; gap:10px; font-size:12px; }
.cs-mp, .cs-mp.cs-mp-sel { min-height:48px; padding:8px 0; gap:10px; border:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); border-radius:0; background:transparent; }
.cs-mp:hover { background:var(--hover); }
.cs-mp-ico { width:24px; height:24px; border:0; border-radius:50%; overflow:hidden; background:transparent; }
.cs-mp-txt b { font-size:12px; font-weight:500; }
.cs-mp-txt span { font-size:11px; }
.cs-hint:empty { display:none; }
.cs-hint { font-size:11px; line-height:16px; overflow-wrap:anywhere; }
.cs-hint a { color:var(--link-text); }
.cs-warnbox { padding:10px 12px; border-radius:8px; font-size:12px; }
.cs-warnbox b { font-size:12px; }
.cs-warnbox.cs-steam-warning { --upsell-text:#d7654c; --upsell-line:#48231a; display:inline-flex; align-items:center; flex:0 1 auto; width:max-content; min-width:0; max-width:100%; min-height:28px; padding:5px 7px;
  border:1px solid var(--upsell-line); border-radius:8px; background:var(--bg); color:var(--upsell-text); font-size:10.5px; line-height:16px; overflow-wrap:anywhere; }
:root[data-theme="light"] .cs-warnbox.cs-steam-warning { --upsell-text:#ad4b31; --upsell-line:#e5c6ba; background:var(--bg); border-color:var(--upsell-line); color:var(--upsell-text); }
@container cs-dialog (max-width:632px) {
  .cs-head:has(.cs-steam-warning:not(.hidden)) { display:grid; grid-template-columns:32px minmax(0,1fr) 32px; gap:12px 8px; }
  .cs-head:has(.cs-steam-warning:not(.hidden)) .cs-head-back { grid-column:1; grid-row:1; }
  .cs-head:has(.cs-steam-warning:not(.hidden)) .cs-head-txt { grid-column:2; grid-row:1; }
  .cs-head:has(.cs-steam-warning:not(.hidden)) #cs-x { grid-column:3; grid-row:1; }
  .cs-head:has(.cs-steam-warning:not(.hidden)) .cs-head-tools { grid-column:1 / -1; grid-row:2; justify-self:end; }
}
.cs-path-row { display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:8px; }
.cs-path-row input { grid-column:1 / -1; width:100%; }
.cs-path-row .btn { justify-self:start; }
.cs-footer { flex:none; padding:12px 18px 18px; gap:8px; background:var(--surface-1); border:0; }
.cs-footer .btn, .cs-path-row .btn, .cs-mp .btn { display:inline-flex; align-items:center; justify-content:center; height:32px; min-height:32px; border-radius:99px; padding:0 14px; font-size:12px; line-height:16px; }
.cs-footer .btn svg { display:block; align-self:center; }
.cs-modal.cs-install-mode { min-height:0; }
.cs-imm-install .cs-imm-in { padding:0; }
.cs-ins-hero { gap:10px; align-items:center; }
.cs-ins-cover, .cs-ins-cover.bot { width:32px; height:32px; aspect-ratio:1; flex:none; border-radius:50%; overflow:hidden; background:transparent; box-shadow:none; border:0; position:relative; display:grid; place-items:center; }
.cs-ins-cover.bot { border-radius:50%; }
.cs-ins-cover .gico-img { position:absolute; width:100%; height:100%; object-fit:contain; }
.cs-ins-cover svg { width:24px; height:24px; color:var(--muted); }
.cs-ins-meta { padding:0; }
.cs-ins-meta h3 { margin:0; color:var(--foreground); font-size:13px; line-height:18px; font-weight:600; letter-spacing:0; }
.cs-ins-sub { display:flex; align-items:center; gap:6px; min-height:15px; margin:2px 0 0; color:var(--muted); font-size:11px; line-height:15px; }
.cs-ins-prog { margin-top:20px; gap:10px; }
.cs-ins-row { align-items:center; gap:12px; }
.cs-ins-phase { display:flex; align-items:center; gap:10px; min-width:0; }
.cs-status { font-size:12px; line-height:18px; font-weight:400; white-space:normal; overflow-wrap:anywhere; }
.cs-pct { flex:none; color:var(--foreground); font-size:12px; font-weight:500; letter-spacing:0; line-height:18px; }
.cs-progress { height:4px; background:var(--surface-3); }
.cs-progress::after { display:none; }
.cs-progress-bar { background:var(--foreground); box-shadow:none; }
.cs-ins-foot { justify-content:flex-end; min-height:16px; color:var(--muted); gap:12px; font-size:11px; line-height:16px; }
@container cs-dialog (min-width:598px) {
  .cs-game-pill { max-width:150px; }
}
/* Native pairs fields at card width636:600 usable pixels after its36px inset. */
@container cs-dialog (min-width:634px) {
  .cs-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cs-imm .cs-row2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cs-path-row { display:flex; }
}
@media(max-width:480px) {
  .cs-ins-foot { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { .cs-head-busy .spinner { animation:none; } .cs-progress-bar { transition:none; } }

/* Players keeps its Config-style filter below the heading, for every list size. */
.plm-search { position:sticky; top:0; z-index:1; padding-bottom:10px; margin-bottom:0; background:var(--surface-1); }
.plm-search > svg { position:absolute; left:11px; top:10px; width:13px; height:13px; color:var(--muted-2); pointer-events:none; }
.plm-search .input { width:100%; height:34px; padding:0 12px 0 32px; border-radius:99px; font-size:12.5px; background:var(--surface-1); }

/* Sharing actions wrap independently from the Users title. */
.users-head { flex-wrap: wrap; }
.users-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
.users-header-actions .users-web-management { height: 32px; padding: 0 10px; gap: 6px; border: 0; border-radius: 99px; background: transparent; color: var(--muted); }
.users-header-actions .users-web-management:is(:hover,:focus-visible) { color: var(--foreground); background: var(--hover); }
.users-web-management svg { width: 14px; height: 14px; stroke-width: 1.6; }

/* Server Settings uses quiet top tabs; service pills remain a separate level. */
.settings-tabs { display: flex; flex: none; gap: 20px; margin: 0 0 18px; border-bottom: 1px solid var(--border); }
.settings-tabs button { display: inline-flex; align-items: flex-end; justify-content: center; height: 34px; min-height: 0; padding: 0 0 6px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); cursor: pointer; font: 500 12px/16px Inter,system-ui,sans-serif; }
.settings-tabs button[aria-selected="true"] { border-bottom-color: var(--foreground); color: var(--foreground); }
.settings-tabs button:is(:hover,:focus-visible) { background: transparent; color: var(--foreground); }
.settings-tabs button:focus-visible { outline: 1px solid var(--border-strong); outline-offset: -2px; }
.settings-section-content { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.settings-section-content > .sec-head { display: none; }

/* Settings retain PortWarp's quiet hierarchy on every host. */
.gs-profile-actions {display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.modal.server-settings-dialog {width:min(520px,100vw);max-width:none;height:100%;min-height:0;display:flex;flex-direction:column;background:var(--bg);border-radius:0;border:0;border-inline-start:1px solid var(--border);box-shadow:none;}
.server-settings-dialog .modal-head {display:grid;grid-template-columns:minmax(0,1fr) auto;padding:18px 16px 14px 20px;border:0;gap:5px;}
.server-settings-dialog .modal-head .modal-close {grid-area:1/2/3;}
.server-settings-dialog .modal-body {padding:0 20px 20px;flex:1;min-height:0;max-height:none;overflow:hidden;display:flex;}
.server-settings-host {display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;}
.server-settings-host .settings-section-content {flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto;}
.server-settings-host .ss-info-card {padding:0;border:0;background:transparent;}
.ss-version-value {display:flex;align-items:center;gap:8px;}
.ss-version-action {width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:99px;color:var(--muted);background:transparent;cursor:pointer;}
.ss-version-action svg {width:14px;height:14px;} .ss-version-action.update-available {color:var(--update-available,#6ee7b7);}
.ss-version-action:hover {background:var(--hover);} .ss-update-tools {padding-top:16px;}
.ss-danger-zone {padding:18px 0 0;border:0;border-top:1px solid var(--border);background:transparent;}
.ss-danger-zone h3 {font-size:13px;font-weight:600;color:var(--red);width:fit-content;background:linear-gradient(110deg,var(--red) 35%,#fff 49%,var(--red) 63%);background-size:300% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:danger-heading-sheen 5s linear infinite;}
.ss-danger-zone .ss-danger-row {padding:12px 0;margin:0;background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;}
.ss-danger-zone .btn, #ss-reinstall, #ss-delete, .btn.details-delete {display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;min-height:32px;padding:0 12px;border:1px solid var(--border);border-radius:99px;background:transparent;color:var(--red);font:500 12px/1 Inter,system-ui,sans-serif;}
.ss-danger-zone .btn:is(:hover,:focus-visible), #ss-reinstall:is(:hover,:focus-visible), #ss-delete:is(:hover,:focus-visible), .btn.details-delete:is(:hover,:focus-visible) {background:var(--hover);border-color:var(--border-strong);color:var(--red);}
.server-details-dialog .modal-foot {justify-content:flex-end;gap:8px;}
.integration-tabs {display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;}
.integration-tabs button {height:30px;border:0;border-radius:99px;padding:0 12px;color:var(--muted);background:transparent;cursor:pointer;font:400 12px Inter,system-ui,sans-serif;}
.integration-tabs button[aria-selected="true"] {background:var(--selected);color:var(--foreground);}
.integration-tabs button:is(:hover,:focus-visible) {background:var(--hover);color:var(--foreground);}
[data-integration-page][hidden] {display:none;}
.server-settings-dialog .pw-server-row {display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:12px;}
.server-settings-dialog .pw-server-row .spacer {display:none;}
.server-settings-dialog .pw-address-chip {grid-column:2/4;grid-row:2;justify-self:start;max-width:100%;}
.server-settings-dialog .pw-address-chip code {white-space:normal;overflow-wrap:anywhere;}
.server-settings-dialog #pw-switch-wrap {grid-column:3;grid-row:1;}
.server-settings-dialog .pw-enterprise-head {flex-wrap:wrap;gap:8px;}
.server-settings-dialog #pw-account-tools {margin-top:18px;}
@media(max-width:640px) {
 .modal.server-settings-dialog {width:100%;border:0;}
}

.modal.support-dialog {width:min(440px,calc(100vw - 32px));height:auto;max-height:calc(100dvh - 32px);min-height:0;display:flex;flex-direction:column;background:var(--surface-1);border-radius:12px;}
.support-dialog .modal-body {display:flex;flex-direction:column;flex:1;min-height:0;max-height:none;overflow:hidden;}
.support-body {display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;overflow:auto;}
.support-body:has(.support-history) {display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;}
.support-body > [data-older] {grid-row:1;justify-self:start;}
.support-body > .support-history {grid-row:2;}
.support-body:has(.support-history) > .support-form {grid-row:3;}
.support-form {display:flex;flex-direction:column;gap:10px;}
.support-form textarea {resize:vertical;min-height:72px;font:inherit;}
.support-actions,.support-files {display:flex;flex-wrap:wrap;gap:8px;}
.support-actions .btn,.support-form>.btn {height:32px;border-radius:99px;}
.support-attach {position:relative;align-self:flex-start;overflow:hidden;cursor:pointer;}
.support-attach input {position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;}
.support-history {min-height:0;max-height:none;overflow:auto;display:flex;flex-direction:column;gap:14px;}
.support-message {padding:10px 0;border-bottom:1px solid var(--border);}
.support-message small {color:var(--muted);font-size:11px;}
.support-message p {white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0;font-size:13px;user-select:text;}
.support-notice {color:var(--muted);font-size:12px;min-height:16px;margin:8px 0 0;}

.gs-discord-profile {display:flex;gap:10px;align-items:center;margin-bottom:12px;} .gs-discord-profile img {border-radius:8px;} .gs-discord-profile>div {display:flex;flex-direction:column;gap:4px;} .gs-discord-profile strong {font-size:13px;} .gs-discord-profile small {font-size:11px;color:var(--muted);}

.server-settings-dialog .pw-address-chip {grid-column:2 / -1;height:auto;min-height:32px;text-align:left;}


/* Compact operational feedback follows the workspace's quiet controls. */
:root { --update-available: #6ee7b7; }
:root[data-theme="light"] { --update-available: #16834b; }
.pl-installed-button { display:inline-flex; align-items:center; gap:7px; flex:none; min-height:32px; border-radius:99px; padding:0 10px; }
.pl-installed-button svg { width:14px; height:14px; color:var(--muted); }
.pl-update-count { display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 4px; border-radius:99px; background:#6ee7b7; color:#063a27; font:700 10px/1 Inter,system-ui,sans-serif; }
.backup-activity { flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid var(--border); border-radius:99px; color:var(--muted); }
.backup-activity .spinner { width:14px; height:14px; border-width:1.5px; }
.backup-row-action { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; min-width:0; padding:0; border:0; background:transparent; color:var(--muted); border-radius:99px; }
.backup-row-action svg { width:13px; height:13px; stroke-width:1.5; }
.backup-row-action:is(:hover,:focus-visible) { color:var(--foreground); background:var(--hover); }
.backup-row-action.backup-row-delete { color:#dc8989; }
:root[data-theme="light"] .backup-row-action.backup-row-delete { color:#b45c5c; }
.backup-dialog .modal-head { gap:10px; }
.backup-dialog .modal-head h3 { flex:1; min-width:0; }
.backup-create-destination { align-self:center; flex:none; font-size:11px; min-height:26px; padding:3px 10px; }
.backup-create-destination svg { width:13px; height:13px; stroke-width:1.5; }
.db-sql-toggle { min-height:32px; height:32px; padding:0 10px; border:0; border-radius:99px; background:transparent; color:var(--muted); }
.db-sql-toggle svg { width:14px; height:14px; }
.db-sql-toggle:is(:hover,:focus-visible,.selected) { color:var(--foreground); background:var(--hover); }
.db-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:160px; height:100%; padding:24px; color:var(--muted); font-size:13px; text-align:center; }
.db-empty-state svg { width:28px; height:28px; stroke-width:1.5; color:var(--muted-2); }
.db-node-head svg,.db-leaf svg { stroke-width:1.5; }
.db-sqlpanel:not(.hidden) { animation:workspace-disclosure-in 140ms ease-out; }
.users-empty-state .users-web-management { align-self:center; margin:0; }
.log-footer { min-height:24px; align-items:center; }
.log-footer .spinner { width:16px; height:16px; border-width:1.5px; }
.file-task-item { animation:workspace-disclosure-in 160ms ease-out; }
@keyframes workspace-disclosure-in { from {opacity:0;} to {opacity:1;} }
@media(max-width:640px) {
 .content:has(.db-workspace) > .sec-head { min-height:36px; margin-bottom:8px; padding-block:2px; }
 .db-toolbar { gap:6px; padding:8px; flex-wrap:wrap; }
 .db-toolbar .db-search { flex:1 1 120px; min-width:0; }
 .db-toolbar .input { max-width:100%; }
 .db-toolbar .spacer { display:none; }
 .support-dialog .modal-body { padding:14px; }
}
@media(prefers-reduced-motion:reduce) { .ctxmenu,.db-sqlpanel,.file-task-item {animation:none !important;} }

/* Activity keeps scoped PortWarp diagnostics beside its search. */
.log-pw-filter { flex:none; width:30px; height:30px; border-radius:8px; color:var(--muted); }
.log-pw-filter[aria-pressed="true"] { color:var(--foreground); background:var(--selected); }
.portwarp-log-symbol { display:block; width:18px; height:18px; background:currentColor; mask:url('/assets/portwarp-symbol.svg') center / contain no-repeat; -webkit-mask:url('/assets/portwarp-symbol.svg') center / contain no-repeat; }
.activity-log-actions { display:flex; flex:none; justify-content:flex-end; flex-wrap:wrap; gap:6px; padding-top:8px; }
.activity-log-actions .btn { min-height:30px; padding:0 10px; border:0; border-radius:99px; background:transparent; color:var(--muted); font-size:12px; }
.activity-log-actions .btn:is(:hover,:focus-visible) { background:var(--hover); color:var(--foreground); }
.activity-log-actions svg { width:14px; height:14px; stroke-width:1.5; }
@media(max-width:640px) { .activity-toolbar {gap:6px;} .activity-toolbar .log-search {flex:1;min-width:0;} .activity-log-actions {justify-content:center;} }

.support-message .btn { max-width:100%; min-width:0; height:auto; white-space:normal; overflow-wrap:anywhere; text-align:start; }
.support-history { min-width:0; }

/* Follow-up parity: native control footprints and PortWarp dialog chrome. */
.fm-selection-clear { width:32px; height:32px; min-height:32px; border:1px solid var(--border); border-radius:99px; background:transparent; color:var(--muted); }
.fm-selection-clear svg { width:12px; height:12px; stroke-width:1.5; }
#bk-create { border-radius:99px; }
.ss-info-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ss-info-edit { width:28px; height:28px; min-height:0; padding:0; border:0; border-radius:99px; color:var(--muted); background:transparent; }
.ss-info-edit svg { width:14px; height:14px; }
.ss-update-tools { margin-top:14px; padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--surface-1); }
.ss-tools-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.ss-tools-heading h3 { margin:0; font-size:14px; }
.ss-tools-heading .iconbtn { width:28px; height:28px; padding:0; border-radius:8px; }
.ss-tools-heading svg { width:12px; height:12px; }
.ss-update-tools .ss-update-row { flex-wrap:wrap; gap:12px; align-items:flex-end; }
.ss-update-tools .ss-version-wrap { flex:1 1 180px; min-width:0; }
.ss-update-tools .ss-version-wrap select { min-width:0; width:100%; }
.gs-privacy-content { display:flex; flex-direction:column; gap:16px; }
.gs-privacy-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gs-privacy-heading h3 { margin:0; font-size:16px; font-weight:600; }
.gs-privacy-heading .iconbtn { width:32px; height:32px; min-height:0; padding:0; border-radius:8px; }
.gs-privacy-heading svg { width:12px; height:12px; }
.gs-profile-group { margin-bottom:20px; }
.gs-profile-group .gs-profile-identity { margin:0; padding:14px 0; }
.gs-profile-group .gs-profile-discord { border-top:1px solid var(--border); }
.gs-profile-group .gs-setting { gap:12px; }
.gs-profile-discord .gs-label { display:grid; gap:5px; }
.gs-profile-discord .gs-label p { margin:0; }
.gs-discord-profile { display:flex; align-items:center; gap:7px; padding:4px 8px; border:1px solid var(--border); border-radius:8px; font-size:12px; min-width:0; }
.gs-discord-profile img { width:24px; height:24px; border-radius:50%; }
.gs-discord-profile strong { overflow:hidden; text-overflow:ellipsis; max-width:130px; }
.gs-profile-actions { justify-content:flex-end; }
.gs-profile-actions .btn { height:32px; border-radius:99px; }
.gs-group { margin-top:20px; margin-bottom:10px; }
.support-dialog .modal-head { padding:20px 20px 0; border:0; }
.support-dialog .modal-head h3 { font-size:16px; }
.support-dialog .modal-close { width:32px; height:32px; border-radius:8px; }
.support-dialog .modal-body { padding:16px 20px 20px; flex:0 1 auto; overflow:auto; }
.support-dialog .support-body { flex:0 1 auto; }
.support-dialog .support-notice:empty { display:none; }
.support-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.support-dialog .btn { font:500 12px/1 Inter,system-ui,sans-serif; min-height:32px; border-radius:99px; }
.modal-scrim:has(> .support-chat) { place-items:stretch end; padding:0; }
.modal.support-dialog.support-chat { width:min(520px,100vw); max-height:none; height:100%; border-radius:0; border:0; border-inline-start:1px solid var(--border); box-shadow:none; }
.support-chat .modal-body { flex:1; overflow:hidden; }
.support-chat .support-body { flex:1; }
.support-chat .support-form { max-height:45dvh; overflow:auto; }
.rail-dragging { opacity:.5; }
.server-rail-item.rail-drop-before { box-shadow:0 -2px 0 var(--foreground); }
.server-rail-item.rail-drop-after { box-shadow:0 2px 0 var(--foreground); }
@keyframes danger-heading-sheen { from { background-position:150% 0; } to { background-position:-150% 0; } }
@media(prefers-reduced-motion:reduce) { .ss-danger-zone h3 {animation:none;background:none;color:var(--red);} }

.support-attachment-picker { display:grid; gap:8px; min-width:0; }
.support-upload-bar { display:flex; align-items:center; gap:8px; }
.support-upload-menu { position:relative; }
.support-upload-menu summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border); padding:0 10px; }
.support-upload-menu summary::-webkit-details-marker { display:none; }
.support-upload-menu svg { width:14px; height:14px; stroke-width:1.5; }
.support-upload-options { position:absolute; z-index:20; inset-inline-start:0; bottom:calc(100% + 6px); display:grid; min-width:184px; padding:4px; background:var(--surface-1); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px #0004; }
.support-upload-options button { display:flex; align-items:center; gap:8px; border:0; background:transparent; color:var(--foreground); padding:9px; border-radius:7px; font:400 12px Inter,system-ui,sans-serif; text-align:start; cursor:pointer; }
.support-upload-options button:hover { background:var(--hover); }
.support-upload-options [hidden] { display:none; }
.support-file-count { font-size:10px; color:var(--muted-2); }
.support-files { display:grid; gap:5px; }
.support-file { display:flex; align-items:center; gap:8px; min-width:0; padding:5px 9px; border:1px solid var(--border); border-radius:7px; }
.support-file-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.support-file small { font-size:10px; color:var(--muted-2); }
.support-file .iconbtn { width:24px; height:24px; padding:0; border-radius:6px; }
.support-file .iconbtn svg { width:10px; height:10px; }
.support-file-preview { border:0; background:transparent; padding:0; width:28px; height:28px; border-radius:4px; overflow:hidden; }
.support-file-preview img { width:100%; height:100%; object-fit:cover; }
.modal.support-image-dialog { width:min(760px,calc(100vw - 32px)); }
.support-image-preview { display:block; max-width:100%; max-height:65dvh; margin:auto; object-fit:contain; border-radius:8px; }

.gs-profile-group :is(button.btn,a.btn) { height:32px; min-height:32px; padding:0 12px; border-radius:99px; font:500 12px/1 Inter,system-ui,sans-serif; }

/* Refined PortWarp geometry: centred labels, compact forms, no reserved empty rows. */
.gs-panel .btn { display:inline-flex; align-items:center; justify-content:center; text-align:center; min-width:0; max-width:100%; white-space:normal; line-height:16px; }
.gs-profile-group :is(button.btn,a.btn) { height:auto; min-height:32px; padding:6px 12px; max-width:190px; }
.gs-profile-discord .gs-label { display:block; }
.support-dialog:not(.support-chat) .modal-head { padding:18px 18px 0; gap:10px; }
.support-dialog:not(.support-chat) .modal-body { padding:10px 18px 18px; overflow:auto; flex:0 1 auto; }
.support-dialog:not(.support-chat) .support-body { flex:none; gap:10px; overflow:visible; }
.support-dialog:not(.support-chat) .support-body > p { margin:0; font-size:13px; line-height:19px; }
.support-dialog .support-notice { margin:0; min-height:0; }
.support-dialog .support-notice:empty,.support-files:empty { display:none; }
.support-dialog .support-actions { margin-top:4px; justify-content:flex-end; }
.support-dialog .btn { display:inline-flex; align-items:center; justify-content:center; min-width:0; max-width:100%; height:auto; min-height:32px; padding:6px 12px; line-height:16px; text-align:center; white-space:normal; }
.support-dialog .support-form > .field { margin:0; gap:6px; }
.support-dialog .support-form textarea[name="description"] { min-height:110px; height:110px; max-height:160px; padding:10px; border-radius:8px; font-size:13px; }
.support-submit { display:flex; justify-content:flex-end; }
.support-upload-bar { flex-wrap:wrap; min-width:0; gap:8px; }
.support-server-picker { display:flex; align-items:center; min-width:0; max-width:200px; flex:0 1 170px; margin-inline-start:auto; }
.support-server-picker select { height:30px; min-height:30px; padding:0 26px 0 10px; font:400 11px Inter,system-ui,sans-serif; border-radius:8px; min-width:0; width:100%; text-overflow:ellipsis; }
.support-server-picker:has([data-clear-server]:not(.hidden)) select { border-start-end-radius:0; border-end-end-radius:0; }
.support-server-picker .iconbtn { flex:none; width:26px; height:30px; padding:0; border:1px solid var(--border); border-inline-start:0; border-radius:0 8px 8px 0; }
.support-server-picker .iconbtn svg { width:10px; height:10px; }
.support-upload-menu summary { font-size:12px; }
.support-file-count { display:none; }
.support-capture-preview .support-image-preview { border:2px solid #315a9f; animation:support-blue-glow 2.6s ease-in-out infinite; }
@keyframes support-blue-glow { 0%,100% { box-shadow:0 0 10px #315a9f33; } 50% { box-shadow:0 0 22px #315a9f88; } }
.ss-update-tools { cursor:default; padding:16px; }
.ss-update-tools h3 { font-size:14px; }
.ss-update-tools :is(p,span,label) { cursor:default; }
.ss-update-tools :is(button,select) { cursor:pointer; }
.ss-update-tools .ss-desc { font-size:12px; line-height:17px; margin:0 0 10px; }
.ss-update-tools .ss-installed { font:11px/16px var(--font-mono); }
.ss-update-tools .ss-update-row { margin:0; gap:8px; flex-wrap:nowrap; }
.ss-update-tools .ss-version-wrap { flex:1; min-width:0; gap:8px; }
.ss-update-tools .ss-version-wrap select { height:32px; min-height:32px; border-radius:8px; padding-block:0; font-size:12px; }
.ss-update-tools .btn { height:32px; min-height:32px; border-radius:99px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; padding:0 14px; }
.ss-update-tools .ss-tools-heading { margin-bottom:10px; }
.ss-update-tools .ss-tools-heading .iconbtn { width:24px; height:24px; min-height:24px; padding:0; }
.modal.se-edit { width:min(480px,calc(100vw - 32px)); }
.se-edit .field { gap:6px; margin-bottom:12px; }
.se-edit .field:last-child { margin-bottom:0; }
.se-edit :is(input,select,textarea) { border-radius:8px; font-size:12px; }
.backup-create-destination { min-height:24px; padding:2px 8px; gap:5px; border-radius:99px; font-size:10.5px; }
.backup-create-destination svg { width:12px; height:12px; color:var(--muted); }
.bk-quota-pill { position:relative; cursor:default; }
.bk-quota-tooltip { position:absolute; z-index:24; inset-inline-end:0; top:calc(100% + 8px); display:none; width:max-content; max-width:min(280px,calc(100vw - 40px)); padding:12px; gap:4px; border:1px solid var(--border); border-radius:8px; background:var(--surface-1); color:var(--foreground); box-shadow:0 8px 24px #0003; font:400 12px/17px Inter,system-ui,sans-serif; white-space:normal; }
.bk-quota-tooltip strong { font-weight:600; }
.bk-quota-tooltip:popover-open { display:grid; animation:workspace-disclosure-in 120ms ease-out; }
.bk-quota-tooltip { position:fixed; inset:auto; margin:0; }
.bk-quota-tooltip:not(:popover-open) { display:none; }
@media(max-width:420px) { .support-server-picker { flex-basis:150px; max-width:160px; } .support-actions { gap:6px; } .ss-version-wrap:has(#ss-build:not(.hidden)) { flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { .support-capture-preview .support-image-preview {animation:none;} }

.ss-version-meta { display:grid; gap:4px; margin-top:12px; padding-top:10px; border-top:1px solid var(--border); }
.ss-version-meta:not(:has(> :not(.hidden))) { display:none; }
.ss-update-tools .ss-version-meta p { margin:0; }

/* Support follows the native PortWarp conversation hierarchy. */
.modal.support-dialog.support-chat { width:460px; max-width:100vw; background:var(--bg); }
.support-chat .modal-head { flex:none; padding:12px 14px 12px 20px; min-height:56px; border-bottom:1px solid var(--border); }
.support-chat .modal-body { padding:0; overflow:hidden; min-height:0; }
.support-chat .support-body { gap:0; min-width:0; grid-template-rows:auto minmax(0,1fr) auto; }
.support-chat .support-body > [data-older] { margin:8px auto; justify-self:center; }
.support-chat .support-history { gap:0; padding:8px 16px 12px; overscroll-behavior:contain; }
.support-chat .support-form { flex:none; overflow:visible; max-height:none; padding:12px 16px 16px; gap:8px; border-top:1px solid var(--border); background:var(--bg); }
.support-chat .support-form textarea { height:68px; min-height:68px; max-height:130px; resize:none; padding:10px; font-size:13px; line-height:18px; border-radius:8px; overflow:auto; }
.support-chat .support-upload-bar { flex-wrap:nowrap; justify-content:space-between; align-items:center; }
.support-chat .support-upload-bar > .support-actions { margin:0; margin-inline-start:auto; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.support-chat [data-close-ticket] { font-size:11px; padding-inline:8px; }
.support-chat .support-files { max-height:112px; overflow:auto; }
.support-chat .support-notice:not(:empty) { padding:8px 16px; flex:none; }
.support-chat .support-message { flex:none; min-width:0; max-width:100%; padding:0; border:0; margin:0; border-radius:10px; }
.support-message-meta { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px; min-width:0; }
.support-message-meta strong { font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.support-message-meta time { flex:none; color:var(--muted-2); font-size:10px; }
.support-message p { margin:0; font-size:13px; line-height:19px; }
.support-message p + .btn,.support-message .btn + .btn { margin-top:6px; }
.support-chat .support-request { padding:14px; margin-bottom:10px; border:1px solid var(--border); background:var(--surface-1); }
.support-request .support-message-meta { margin-bottom:12px; }
.support-request .support-message-meta strong { font-size:13px; }
.support-chat .support-own-message { align-self:flex-end; width:fit-content; max-width:calc(100% - 32px); margin:12px 0 4px 32px; padding:9px 11px; background:var(--selected); }
.support-own-message .support-message-meta strong { color:var(--muted); }
.support-chat .support-team-message { align-self:stretch; margin:14px 16px 0 0; padding:3px 0 7px 12px; border-inline-start:2px solid var(--border); border-radius:0; }
.support-chat .support-grouped { margin-top:0; }
.support-chat .support-team-message.support-grouped { padding-top:0; }
.support-day { display:flex; align-items:center; gap:10px; flex:none; margin:12px 0 10px; color:var(--muted-2); font-size:10px; text-align:center; }
.support-day::before,.support-day::after { content:""; height:1px; flex:1; background:var(--border); }
.support-dialog .support-actions.support-gate-actions { margin-top:24px; }
.support-server-picker { position:relative; display:flex; flex:0 1 200px; height:30px; border:1px solid var(--border); border-radius:99px; background:transparent; }
.support-server-picker .support-native-select { display:none; }
.support-server-trigger { display:flex; align-items:center; gap:6px; flex:1; min-width:0; width:100%; padding:0 9px; border:0; border-radius:99px; background:transparent; color:var(--foreground); font:400 11px Inter,system-ui,sans-serif; cursor:pointer; }
.support-server-trigger > svg { width:11px; height:11px; flex:none; color:var(--muted); }
.support-server-trigger [data-server-label] { display:flex; align-items:center; gap:6px; flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:start; }
.support-server-picker .iconbtn { flex:none; width:24px; height:28px; padding:0; margin-inline-end:3px; border:0; border-radius:99px; background:transparent; }
.support-server-picker:focus-within { border-color:var(--muted); }
.support-server-art { position:relative; display:inline-flex; width:18px; height:18px; flex:none; align-items:center; justify-content:center; }
.support-server-art svg { width:14px; height:14px; color:var(--muted); }
.support-server-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.support-server-options { position:absolute; z-index:25; inset-inline-end:0; top:calc(100% + 6px); display:grid; min-width:220px; max-width:min(320px,calc(100vw - 48px)); max-height:200px; overflow:auto; padding:4px; border:1px solid var(--border); border-radius:10px; background:var(--surface-1); box-shadow:0 8px 24px #0003; }
.support-server-options[hidden] { display:none; }
.support-server-options button { display:flex; align-items:center; gap:8px; min-width:0; border:0; padding:8px; border-radius:7px; background:transparent; color:var(--foreground); cursor:pointer; text-align:start; }
.support-server-options button:is(:hover,:focus-visible,[aria-selected="true"]) { background:var(--hover); }
.support-server-options button > span:not(.support-server-art) { display:grid; gap:3px; min-width:0; }
.support-server-options strong { font-size:12px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.support-server-options small { color:var(--muted); font-size:10px; }
@media(max-width:679px) { .modal.support-dialog.support-chat { width:100vw; } }

.gs-card > .gs-language-row { border:0; border-radius:0; margin:0; padding:14px 0; background:transparent; border-bottom:1px solid var(--border); }

/* FREE previews retain the real workspace geometry and never expose actions. */
.workspace-preview-label { font-size:10px; color:var(--muted-2); font-weight:600; }
.workspace-preview-example { font-size:11px; color:var(--muted-2); margin:8px 0; }
.workspace-preview-footer { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; padding:18px 0 4px; border:0; color:var(--muted); font-size:12px; text-align:center; }
.workspace-preview-footer .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:99px; min-height:34px; padding:0 16px; background:#fff; border:0; color:#000; font-weight:600; text-align:center; }
.workspace-preview-row { opacity:0; transform:translateY(5px); transition:opacity 260ms ease,transform 260ms ease; }
.workspace-preview-row.is-revealed { opacity:1; transform:none; }
.workspace-preview-row button:disabled { cursor:default; }
.pro-upsell-benefits:empty { display:none; }
@media(max-width:820px) {
 .side-addresses { flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 8px; }
 .side-addresses > * { min-width:0; max-width:100%; flex:0 1 auto; }
 .side-addresses .side-ip { flex:0 1 auto; width:fit-content; max-width:100%; }
 #side-public-row { flex:1 0 100%; width:100%; }
 #side-public-row .side-ip { flex:1 1 0; width:100%; }
 .side-local-reveal { display:none; }
 .side-server.address-expanded .side-local-reveal { display:block; }
 .side-addresses .side-local-content > .side-ip { margin-top:0; }
}
@media(prefers-reduced-motion:reduce) { .workspace-preview-row { opacity:1; transform:none; transition:none; } }

.db-workspace.workspace-preview { flex-direction:column; }
.pro-upsell-price .gs-pro { color:var(--pro-text); margin-inline-end:auto; }

.pro-upsell .modal-head { align-items:flex-start; padding:20px 20px 0; }
.pro-upsell .modal-body { padding:12px 20px; }
.pro-upsell .modal-close { margin-inline-start:auto; width:32px; height:32px; align-self:flex-start; }
.pro-upsell .modal-foot #m-cancel, .pro-upsell .modal-foot #m-cancel:is(:hover,:focus-visible,:active) { background:transparent; border:0; box-shadow:none; }

.ulist { container-type:inline-size; }
@container(max-width:440px) {
 .urow { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:8px 10px; padding:12px; }
 .urow .uavatar { grid-column:1; grid-row:1; }
 .urow .uemail { grid-column:2 / -1; grid-row:1; white-space:normal; overflow-wrap:anywhere; font-size:12px; }
 .urow > .btn { min-width:0; max-width:100%; white-space:normal; line-height:16px; padding:6px 10px; height:auto; min-height:32px; justify-content:center; }
 .urow > .btn:nth-child(3) { grid-column:2; grid-row:2; justify-self:start; }
 .urow > .btn:nth-child(4) { grid-column:3; grid-row:2; }
 .sc-row { grid-template-columns:28px minmax(0,1fr); gap:8px 10px; }
 .sc-row .sc-action-icon { grid-row:1; grid-column:1; }
 .sc-row .sc-identity { grid-row:1; grid-column:2; }
 .sc-row .sc-actions { grid-column:2; grid-row:2; justify-self:start; }
 .sc-row .sc-identity > * { white-space:normal; overflow-wrap:anywhere; }
}

/* Finished one-shot demonstrations have one centered, content-sized offer. */
.workspace-preview-footer > span { max-width:440px; line-height:18px; }
.workspace-preview-footer .btn:is(:hover,:focus-visible) { background:#e8e8eb; color:#000; }
.workspace-preview-footer .btn svg { width:14px; height:14px; stroke:currentColor; }
.workspace-preview-footer.is-revealed { animation:workspace-disclosure-in 180ms ease-out; }
.workspace-preview-example { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
/* The composer sits directly above the same compact quota line as desktop. */
.ai-drawer { padding-bottom:4px; }
.ai-foot { min-height:24px; height:24px; flex:none; padding-top:2px; }
.ai-ring { width:24px; height:24px; display:grid; place-items:center; color:var(--muted); outline-offset:2px; }
.ai-ring > svg { width:16px; height:16px; fill:none; stroke-width:2.2; }
.ai-ring-track { fill:none; stroke:var(--border-strong); stroke-width:2.2; }
.ai-ring-fill { fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; transition:stroke-dasharray 180ms ease; }
.ai-ring.warning .ai-ring-fill,.ai-ring.hot .ai-ring-fill { stroke:var(--console-warn); }
.ai-ring:is(:hover,:focus-visible,:focus-within) .ai-ring-tip { opacity:1; transform:none; }
.ai-ring-tip { max-width:min(280px,calc(100vw - 32px)); white-space:normal; text-align:start; }
:is(.ai-terms-dialog,.ai-history-dialog) { width:min(440px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); border-radius:12px; background:var(--surface-1); }
.ai-history-dialog { width:min(560px,calc(100vw - 28px)); max-width:560px; }
:is(.ai-terms-dialog,.ai-history-dialog) .modal-head h3 { font-size:16px; font-weight:600; }
:is(.ai-terms-dialog,.ai-history-dialog) .modal-close { width:32px; height:32px; border-radius:8px; }
:is(.ai-terms-dialog,.ai-history-dialog) .modal-body { min-height:0; max-height:calc(100dvh - 180px); overflow:auto; }
:is(.ai-terms-dialog,.ai-history-dialog) .modal-foot .btn { height:32px; min-height:32px; display:inline-flex; align-items:center; justify-content:center; text-align:center; }
.ai-terms-copy { white-space:pre-line; }
.ai-terms-link { color:var(--foreground); font:400 12px/18px Inter,system-ui,sans-serif; text-decoration:underline; text-underline-offset:3px; }
.ai-hist { gap:0; max-height:none; padding:0; }
.ai-hist-item { min-height:56px; padding:10px 8px; border:0; border-radius:8px; background:transparent; grid-template-columns:20px minmax(0,1fr) 16px; gap:10px; color:var(--foreground); font-family:inherit; text-align:start; }
.ai-hist-item:hover { background:var(--hover); }
.ai-hist-icon { width:20px; height:20px; border:0; background:transparent; color:var(--muted); }
.ai-hist-icon svg { width:16px; height:16px; }
.ai-hist-title { font-size:13px; font-weight:500; }
.ai-history-empty { padding:20px 0; color:var(--muted); text-align:center; font-size:13px; }
#hdr-ai-btn > svg { filter:drop-shadow(0 0 2px #8fa8ff55); }
@media(prefers-reduced-motion:reduce) { .workspace-preview-footer.is-revealed { animation:none; } .ai-rail-glint { display:none; } .ai-ring-fill { transition:none; } }

.pro-upsell .modal-foot { justify-content:center; }
.pro-upsell .modal-foot #m-ok { background:#fff; color:#000; border:0; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.pro-upsell .modal-foot #m-ok:is(:hover,:focus-visible) { background:#e8e8eb; color:#000; }
.pro-upsell .modal-foot #m-ok svg { width:14px; height:14px; }
.pro-upgrade-shimmer,.workspace-preview-footer [data-preview-upgrade],#side-hosting-offer{position:relative;overflow:hidden;isolation:isolate;}
.pro-upgrade-shimmer::after,.workspace-preview-footer [data-preview-upgrade]::after,#side-hosting-offer::after{content:"";position:absolute;pointer-events:none;top:-30%;left:0;width:55%;height:160%;background:linear-gradient(110deg,transparent 15%,rgb(142 180 255 / .20) 42%,rgb(255 255 255 / .65) 50%,rgb(184 151 255 / .20) 58%,transparent 85%);transform:translateX(-230%) skewX(-15deg);animation:pro-upgrade-sweep 5.2s ease-in-out infinite;}
#side-hosting-offer::after{opacity:.18;animation-duration:6.5s;}
@keyframes pro-upgrade-sweep{0%,55%{transform:translateX(-230%) skewX(-15deg);}90%,100%{transform:translateX(330%) skewX(-15deg);}}
@media(prefers-reduced-motion:reduce){.pro-upgrade-shimmer::after,.workspace-preview-footer [data-preview-upgrade]::after,#side-hosting-offer::after{animation:none;display:none;}}

.workspace-preview-copy { display:grid; gap:8px; max-width:440px; text-align:center; }
.workspace-preview-copy strong { color:var(--foreground); font-size:13px; font-weight:600; }
.workspace-preview-copy span { color:var(--muted); font-size:12px; line-height:18px; }

/* Compact navigation starts the session rail; server identity stays in its drawer. */
#server-rail > #menu-btn { display:none; }
@media(max-width:820px) {
  body:not(.no-drawer) #server-rail > #menu-btn { display:grid; }
  #view-server .sidebar { left:var(--rail-width); width:min(var(--server-sidebar-compact-width),calc(100vw - var(--rail-width))); }
  body.drawer-open .scrim { left:var(--rail-width); }
}

/* FREE database illustration uses the real browser at its natural content height. */
.db-workspace.db-demo { position:relative; flex:0 0 auto; }
.db-demo .db-layout { flex:0 0 auto; min-height:0; }
.db-demo .db-results { flex:0 0 auto; min-height:0; }
.db-demo[data-demo-phase="0"] .db-results table,.db-demo[data-demo-phase="1"] .db-results table { opacity:0; }
.db-demo .db-results table { transition:opacity 260ms ease; }
.db-demo .db-results td.db-demo-editing { box-shadow:inset 0 0 0 1px var(--link-text); background:var(--hover); }
.db-demo-editing::after { content:""; display:inline-block; width:1px; height:14px; margin-left:1px; vertical-align:middle; background:currentColor; }
.db-demo .db-results td.db-demo-saved { box-shadow:inset 0 0 0 1px var(--green); background:var(--hover); }
.db-demo-cursor { position:absolute; top:0; left:0; width:20px; height:24px; z-index:3; pointer-events:none; transition:transform 420ms cubic-bezier(.22,.61,.36,1); }
.db-demo-cursor svg { width:20px; height:24px; fill:var(--foreground); stroke:var(--bg); stroke-width:1.5; }
.db-demo-cursor.is-clicking::after { content:""; position:absolute; top:-12px; left:-12px; width:24px; height:24px; border:1.5px solid var(--link-text); border-radius:50%; animation:db-demo-click 500ms ease-out both; }
@keyframes db-demo-click { from { transform:scale(.65); opacity:.6; } to { transform:scale(1.4); opacity:0; } }
@media(prefers-reduced-motion:reduce) { .db-demo-cursor,.db-demo .db-results table { transition:none; } .db-demo-cursor.is-clicking::after { animation:none; } }

.content:has(> .db-demo) { overflow-x:hidden; overflow-y:auto; }

.db-demo .db-toolbar,.db-demo .db-foot { display:none; }

#menu-btn[aria-expanded="true"] { background:var(--selected); }

/* The FREE database story is a centered illustration, not a full-width workspace. */
.content:has(> .db-demo) > .db-demo { width:min(720px,100%); margin:auto; }

/* Integration pages share one compact segmented selector and General-style groups. */
.integration-tabs { gap:3px; padding:3px; border:1px solid var(--border); border-radius:12px; background:var(--surface-1); flex-wrap:nowrap; }
.integration-tabs button { flex:1 1 0; min-width:0; padding:0 8px; border-radius:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.integration-tabs button[aria-selected="true"]:is(:hover,:focus-visible) { background:var(--selected); }
#tebex-card.tebex-settings-card { padding:0; border-radius:10px; overflow:hidden; }
.tebex-settings-store { display:flex; align-items:center; gap:12px; padding:16px; }
.tebex-settings-store > strong { flex:1; min-width:0; margin:0; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tebex-settings-actions { display:flex; gap:4px; flex:none; }
.tebex-settings-actions .iconbtn { width:28px; height:28px; padding:0; border:0; border-radius:99px; color:var(--muted-2); }
.tebex-settings-actions .iconbtn svg { width:14px; height:14px; }
.tebex-settings-actions .tebex-disconnect { color:var(--red); }
.tebex-settings-actions .tebex-disconnect:is(:hover,:focus-visible) { background:rgb(248 113 113 / .08); }
.tebex-settings-content { padding:16px; display:grid; gap:12px; }
.tebex-settings-content h3 { margin:0; font-size:13px; font-weight:600; }
.tebex-connect-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tebex-connect-actions a { color:var(--foreground); font-size:12px; }

:root[data-theme="light"] .tebex-settings-actions .tebex-disconnect { color:#b45c5c; }

.integration-tabs button { display:flex; align-items:center; justify-content:center; gap:6px; text-align:center; line-height:normal; }
.integration-tabs button > svg { width:14px; height:14px; flex:none; stroke-width:1.5; }
.integration-tabs button > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* One-shot Port Forward story; the fake Connect never performs an action. */
.pwu-card { display:flex; flex-direction:column; align-items:stretch; gap:16px; margin-bottom:16px; }
.pwu-stack { display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.pwu-stack h3 { margin:0; font-size:17px; font-weight:600; color:var(--foreground); }
.pwu-stack > p { margin:-10px 0 0; font-size:12px; color:var(--muted); }
.pwu-scene { position:relative; width:100%; display:grid; grid-template-columns:minmax(0,1fr); gap:10px; padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
.pwu-demo-field { min-width:0; min-height:36px; display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid var(--border-strong); border-radius:8px; background:var(--input); text-align:left; }
.pwu-demo-field.is-focused { border-color:var(--link-text); }
.pwu-demo-address { font:12px var(--font-mono); color:var(--foreground); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pwu-demo-caret { width:1px; height:14px; background:var(--foreground); flex:none; }
.pwu-demo-connect { transition:background-color 300ms ease,border-color 300ms ease,color 300ms ease; display:inline-flex; align-items:center; justify-content:center; justify-self:center; gap:7px; min-height:32px; padding:0 14px; border:1px solid var(--border); border-radius:99px; background:var(--hover); color:var(--foreground); font:500 12px Inter,system-ui,sans-serif; opacity:1; }
.pwu-demo-connect.is-clicking { background:var(--selected); }
.pwu-demo-status { grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:6px; min-height:24px; font-size:12px; color:var(--green); }
.pwu-demo-spinner { width:12px; height:12px; border-width:1.5px; }
.pwu-demo-cursor { position:absolute; top:0; left:0; width:20px; height:24px; pointer-events:none; transition:transform 420ms cubic-bezier(.22,.61,.36,1); }
.pwu-demo-cursor svg { width:20px; height:24px; fill:var(--foreground); stroke:var(--bg); stroke-width:1.5; }
.pwu-demo-cursor.is-clicking::after { content:""; position:absolute; top:-12px; left:-12px; width:24px; height:24px; border:1.5px solid var(--link-text); border-radius:50%; animation:db-demo-click 500ms ease-out both; }
.pwu-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:0 16px; border:0; border-radius:99px; background:#fff; color:#000; font:600 12px Inter,system-ui,sans-serif; cursor:pointer; }
.pwu-btn:is(:hover,:focus-visible) { background:#e8e8eb; color:#000; }
.pwu-btn > svg { width:14px; height:14px; stroke:currentColor; }
@media(max-width:400px) { .pwu-scene { grid-template-columns:minmax(0,1fr); } .pwu-demo-connect { justify-self:center; } }
@media(prefers-reduced-motion:reduce) { .pwu-demo-cursor { transition:none; } .pwu-demo-cursor.is-clicking::after { animation:none; } }

.pwu-demo-field > svg,.pwu-demo-joined-icon svg { width:14px; height:14px; flex:none; }
.pwu-demo-field > svg { color:var(--muted); }
.pwu-demo-connect.is-complete { background:#12805c; border-color:#12805c; color:#fff; opacity:1; }
.pwu-demo-field:not(.is-focused) .pwu-demo-address { color:var(--foreground); }
.pwu-card[data-pwu-phase="0"] .pwu-demo-address,.pwu-card[data-pwu-phase="1"] .pwu-demo-address,.pwu-card[data-pwu-phase="2"] .pwu-demo-address { color:var(--muted-2); }
:root[data-theme="light"] .pwu-demo-status { color:#087a56; }

/* Match the native compact assistant controls and console command capsule. */
.ai-head { gap:4px; }
.ai-title { min-width:0; }
.ai-title > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ai-head .iconbtn { width:28px; height:28px; min-width:28px; padding:6px; border:0; border-radius:50%; background:transparent; color:var(--muted); }
.ai-head .iconbtn:is(:hover,:focus-visible) { background:var(--hover); color:var(--foreground); }
.ai-head .iconbtn > svg { width:14px; height:14px; stroke-width:1.5; }
.ai-inputrow { min-width:0; min-height:46px; gap:6px; padding:6px; align-items:flex-end; border:1px solid var(--border); border-radius:24px; background:var(--surface-1); }
.ai-inputrow:focus-within { border-color:var(--border-strong); }
.ai-inputrow #ai-input { min-width:0; min-height:32px; max-height:128px; margin:0; padding:7px 4px; border:0; border-radius:0; background:transparent; box-shadow:none; font:400 13px/18px Inter,system-ui,sans-serif; }
.ai-inputrow #ai-input:focus { outline:none; border:0; box-shadow:none; }
.ai-attachbtn { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; margin-bottom:2px; padding:6px; border:0; border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; }
.ai-attachbtn:is(:hover,:focus-visible) { color:var(--foreground); background:var(--hover); }
.ai-attachbtn:disabled { opacity:.4; cursor:default; }
.ai-attachbtn > svg { width:16px; height:16px; stroke-width:1.5; }
#ai-send.ai-sendbtn { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; padding:7px; border:1px solid var(--border); border-radius:50%; background:#f5f5f5; color:#101010; }
#ai-send.ai-sendbtn:hover { background:#e7e7e7; color:#101010; }
#ai-send.ai-sendbtn:disabled { opacity:.45; cursor:default; }
#ai-send.ai-sendbtn > svg { width:18px; height:18px; stroke-width:1.5; }
.ai-hist { width:100%; min-width:0; align-items:stretch; }
.ai-hist-item { width:100%; min-width:0; align-self:stretch; }

.ai-patch-preview { display:grid; gap:8px; min-width:0; margin:8px 0; }
.ai-patch-preview > div { min-width:0; }
.ai-patch-preview > div > span { font-size:11px; color:var(--muted); }
.ai-patch-preview .ai-appr-prev { max-height:160px; overflow:auto; margin:4px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.ai-msg.ai-tool > svg { width:14px; height:14px; stroke-width:1.5; color:var(--muted); }

@media (prefers-reduced-motion:reduce) { .ai-drawer { animation:none; } body.ai-open .content { transition:none; } }

/* Quiet actions in file, backup, sharing, schedule and server rows. */
:is(.frow,.urow,.sc-row,.sv-row,.bk-row,.pl-row) .iconbtn svg { width:13px; height:13px; stroke-width:1.5; }
:is(.frow,.urow,.sc-row,.sv-row,.bk-row,.pl-row) .iconbtn:is(:hover,:focus-visible), .backup-row-action:is(:hover,:focus-visible) { background:var(--selected); color:var(--foreground); }
.backup-row-action.backup-row-delete:is(:hover,:focus-visible), :is(.frow,.urow,.sc-row,.sv-row,.bk-row,.pl-row) .iconbtn.danger:is(:hover,:focus-visible) { color:var(--red); }

.pwu-offer-footer { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.pwu-offer-footer h3 { margin:0; font-size:15px; font-weight:600; color:var(--foreground); }
.pwu-offer-footer p { margin:-5px 0 0; font-size:12px; line-height:18px; color:var(--muted); }
.pwu-demo-placeholder { font:12px Inter,system-ui,sans-serif; color:var(--muted-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pwu-demo-joined-icon { display:flex; align-items:center; color:#fff; }
.pwu-demo-joined-icon{width:16px;height:16px;flex:none;}.pwu-demo-joined-icon svg{display:block;width:16px;height:16px;shape-rendering:geometricPrecision;}
.integration-tabs .integration-pro-badge { flex:none; overflow:visible; }
@media(prefers-reduced-motion:reduce) { .pwu-demo-connect { transition:none; } }

/* Keep the AI pane within a 4px right gutter and collapse absent rail utilities. */
.ai-drawer { padding-inline:14px 4px; }
.rail-actions #hdr-ai-btn { order:1; }
.rail-actions .hdr-ai.hidden { display:none !important; }
.rail-ai-slot{display:flex;flex-direction:column;align-items:center;gap:6px;width:44px;height:51px;min-height:0;flex:none;order:1;overflow:hidden;}
.rail-ai-slot:has(>#hdr-ai-btn.hidden){display:none;}
.rail-ai-slot .rail-ai-rule{display:block;flex:none;width:24px;height:1px;margin:0;}
.server-rail-footer>.rail-rule{display:none;}
.server-rail-footer:has(.rail-actions>:not(.hidden):not(.rail-ai-slot))>.rail-rule{display:block;}
.rail-actions:not(:has(button:not(.hidden),a:not(.hidden))){display:none;}
.server-rail-footer > #hdr-discord { flex:none; margin:0; }
.server-rail-footer > #hdr-discord svg { width:17px; height:17px; }
.workspace-search-entry { grid-template-columns:20px minmax(0,1fr); }
.workspace-search-game { width:20px; height:20px; display:grid; place-items:center; background:transparent; border:0; }
.workspace-search-game :is(img,svg) { width:20px; height:20px; object-fit:contain; background:transparent; border:0; border-radius:0; }

.wh-event-open { flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:0; border:0; background:transparent; color:var(--foreground); text-align:start; cursor:pointer; font:inherit; }
.wh-event-icon { display:grid; place-items:center; flex:none; width:28px; height:28px; }
.wh-event-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; shape-rendering:geometricPrecision; }
.wh-event-switch { flex:none; }
.wh-ev:has(.wh-event-open):is(:hover,:focus-within) { background:var(--hover); border-color:var(--border-strong); }
.wh-v2-container .dc-pv-title { font-size:16px; }

.backup-dialog .modal-close { margin-block:0; }
.backup-dialog .modal-head { padding-top:14px; }

#wh-card.webhooks-list-card { padding:0; border:0; background:transparent; }
.wh-list-toolbar { display:flex; justify-content:flex-end; min-height:32px; padding-inline:12px; margin-bottom:4px; }
.wh-list { display:grid; }
.wh-row { display:flex; align-items:center; gap:8px; min-height:46px; padding:8px 12px; border:0; border-bottom:1px solid var(--border); border-radius:8px; background:transparent; }
.wh-row:hover { background:var(--hover); }
.wh-title-action { flex:1; min-width:0; min-height:30px; padding:0; border:0; border-radius:0; background:transparent; color:var(--foreground); font:500 13px Inter,system-ui,sans-serif; text-align:start; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.wh-title-action:is(:hover,:active) { background:transparent; border:0; }
.wh-title-action:focus-visible { outline:1px solid var(--border-strong); outline-offset:2px; }
.wh-row-actions { display:flex; align-items:center; gap:8px; flex:none; }
.wh-row-actions .wh-event-switch { height:28px; }.wh-row-actions .wh-event-switch .track { top:4px; bottom:4px; }
.webhooks-list-card>.ss-desc { margin:0; padding:20px 12px; text-align:center; }
.wh-row-actions .iconbtn { width:30px; height:30px; padding:0; border-radius:8px; }
.wh-row-actions .iconbtn svg { width:14px; height:14px; stroke-width:1.5; }
/* Native Paths stretch their visible bounds; account for the SVG canvas inset. */
.wh-row-actions [data-wh-test] svg { width:24px; height:24px; transform:translateX(-1.5px); }
.wh-row-actions [data-del] svg { width:18px; height:18px; }
.wh-row-actions .iconbtn:is(:hover,:focus-visible) { background:var(--selected); color:var(--foreground); }
.wh-row-actions .iconbtn.danger { color:var(--red); }

.close-session-dialog #m-cancel,.close-session-dialog #m-cancel:hover,.close-session-dialog #m-cancel:active{background:transparent;border-color:transparent;box-shadow:none;}

/* Tebex matches the native console pill and bounded Sales History dialog. */
.tebex-revenue-pill{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:190px;height:32px;flex:none;padding:2px 9px;border:1px solid var(--border);border-radius:99px;background:var(--surface-1);color:var(--foreground);cursor:pointer;}
.tebex-revenue-pill:is(:hover,:focus-visible){background:var(--hover);}
.tebex-revenue-pill:focus-visible{outline:1px solid var(--border-strong);outline-offset:2px;}
.tebex-revenue-amount{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:600;}
.tebex-revenue-pill>span{font-size:10px;color:var(--muted);white-space:nowrap;}
.tebex-revenue-tooltip{position:fixed;z-index:11000;width:250px;max-width:calc(100vw - 16px);padding:12px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface-1);color:var(--foreground);box-shadow:var(--shadow);pointer-events:none;font-size:12px;}
.tebex-tooltip-title{display:block;margin-bottom:7px;font-size:12px;font-weight:600;}
.tebex-tooltip-metrics{display:grid;gap:7px;}
.tebex-tooltip-metrics>div{display:flex;justify-content:space-between;gap:18px;}
.tebex-tooltip-metrics span{color:var(--muted);}.tebex-tooltip-metrics strong{font-size:12px;font-weight:600;}
.modal.tebex-sales-modal{width:640px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 36px);border-radius:12px;padding:20px;gap:12px;}
.tebex-sales-modal .modal-head{min-height:0;padding:0;gap:12px;border:0;}
.tebex-sales-modal .modal-head h3{margin:0;font-size:16px;font-weight:600;}
.tebex-sales-modal .modal-close{flex:none;width:32px;height:32px;background:transparent;color:var(--muted);border:0;border-radius:8px;}
.tebex-sales-modal .modal-close svg{width:14px;height:14px;}
.tebex-sales-modal .modal-body{min-height:0;padding:0;margin-top:12px;display:flex;flex-direction:column;gap:12px;overflow:hidden;}
.tebex-sales-count{flex:none;border-radius:99px;padding:2px 7px;font-size:11px;color:var(--muted);background:var(--hover);}
.tebex-sales-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px;flex:none;}
.tebex-sales-metrics>div{min-width:0;display:grid;gap:3px;}.tebex-sales-metrics span{font-size:11px;color:var(--muted);}.tebex-sales-metrics strong{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tebex-sales-head,.tebex-sales-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,2fr) 100px 90px;gap:4px 12px;align-items:center;}
.tebex-sales-head{padding:4px 10px 0 0;flex:none;color:var(--muted-2);font-size:10px;font-weight:500;}
.tebex-sales-head>:last-child{text-align:right;}.tebex-sales-scroll{min-height:0;max-height:min(360px,calc(100dvh - 214px));overflow:auto;padding-inline-end:10px;}
.tebex-sales-row{padding:12px 0;border-bottom:1px solid var(--border);font-size:12px;}
.tebex-sales-row>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.tebex-sales-row strong{font-size:12px;font-weight:600;}.tebex-sale-package,.tebex-sale-date{color:var(--muted);}.tebex-sale-amount{text-align:right;}
.tebex-sales-empty{margin:20px 0;text-align:center;font-size:13px;color:var(--muted);}
#tebex-card.tebex-settings-card{position:relative;background:var(--bg);}
.tebex-settings-store{padding:12px 16px;}.tebex-settings-store>strong{font-weight:500;}
.tebex-settings-content{padding:12px 16px 16px;gap:10px;}.tebex-settings-content h3{font-weight:500;}
.tebex-settings-content #tebex-secret{height:34px;min-height:0;border-radius:99px;padding:0 12px;font-size:12px;background:var(--input);}
.tebex-settings-preference{display:flex;align-items:center;gap:16px;padding:12px 0;margin:0 16px;border-top:1px solid var(--border);font-size:13px;}
.tebex-settings-preference>span{flex:1;min-width:0;}.tebex-settings-preference .switch{margin:0;}
.tebex-settings-error{margin:0 16px 12px;padding:8px 12px;border:1px solid color-mix(in srgb,var(--red) 30%,transparent);border-radius:8px;background:color-mix(in srgb,var(--red) 8%,var(--surface-1));color:var(--red);font-size:12px;line-height:1.5;overflow-wrap:anywhere;}
.tebex-settings-loading{height:2px;margin:0 16px;background:var(--border);overflow:hidden;}.tebex-settings-loading:before{content:"";display:block;width:35%;height:100%;background:var(--foreground);animation:tebex-loading 1.1s ease-in-out infinite alternate;}@keyframes tebex-loading{to{transform:translateX(180%);}}
@media(max-width:587px){.tebex-sales-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}.tebex-sales-head{display:none;}.tebex-sales-row{grid-template-columns:minmax(0,1fr) auto;}.tebex-sale-customer{grid-column:1;grid-row:1;}.tebex-sale-amount{grid-column:2;grid-row:1;}.tebex-sale-package{grid-column:1;grid-row:2;}.tebex-sale-date{grid-column:2;grid-row:2;text-align:right;}.tebex-sales-scroll{max-height:min(360px,calc(100dvh - 246px));}}
@media(max-width:480px){.workspace-caption:has(.tebex-revenue-pill:not(.hidden)) .workspace-page-title{display:none!important;}.console-header-actions{gap:6px;}.tebex-revenue-pill{max-width:140px;}}
@media(prefers-reduced-motion:reduce){.tebex-settings-loading:before{animation:none;}}

/* Server Settings follows the native 32px section pills and anchored version flyout. */
.server-settings-dialog .settings-tabs{gap:6px;margin-bottom:18px;border:0;}
.server-settings-dialog .settings-tabs button{height:32px;padding:0 14px;align-items:center;border:0;border-radius:99px;background:transparent;color:var(--muted);font-size:12px;font-weight:400;}
.server-settings-dialog .settings-tabs button[aria-selected="true"]{background:var(--selected);color:var(--foreground);}
.server-settings-dialog .settings-tabs button:is(:hover,:focus-visible){background:var(--hover);color:var(--foreground);}
.ss-update-tools{position:fixed;inset:auto;margin:0;z-index:11001;padding:16px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--border-strong);border-radius:12px;background:var(--surface-1);color:var(--foreground);box-shadow:var(--shadow);}
.ss-update-tools::backdrop{background:transparent;}
#pw-account-tools:empty{display:none;}#pw-account-tools:not(:empty){margin-bottom:18px;}

.ci-modal .modal-foot{justify-content:center;}

/* The linked PortWarp account and host service access match the native Settings view. */
.pw-linked-card,.pw-services-card{border:1px solid var(--border);border-radius:12px;background:var(--surface-1);overflow:hidden;}
.pw-linked-card{--pw-success:#34d399;--pw-danger:#fca5a5;--pw-danger-hover:#3d1d20;}:root[data-theme="oled"] .pw-linked-card{--pw-danger-hover:#261213;}:root[data-theme="light"] .pw-linked-card{--pw-success:#087a56;--pw-danger:#c91c1c;--pw-danger-hover:#fadcdc;}
.pw-linked-header{display:flex;align-items:center;gap:12px;padding:12px 18px;}
.pw-linked-identity{flex:1;display:flex;align-items:center;gap:10px;min-width:0;}
.pw-linked-symbol{flex:none;width:18px;height:18px;color:var(--muted);}
.pw-linked-email{display:flex;max-width:100%;min-width:0;padding:0;font-size:13px;font-weight:500;color:var(--foreground);}
.pw-linked-email>span{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pw-linked-actions{display:flex;align-items:center;gap:4px;flex:none;}
.pw-debug-action{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;margin:0;background:transparent;color:var(--muted);border:0;border-radius:99px;padding:0;cursor:pointer;}.pw-debug-action:is(:hover,:focus-visible){background:var(--hover);color:var(--foreground);}.pw-debug-action svg{width:14px;height:14px;}
.pw-linked-actions .pw-account-disconnect{width:28px;height:28px;min-height:28px;padding:0;border:0;border-radius:99px;color:var(--pw-danger);background:transparent;}.pw-account-disconnect svg{width:14px;height:14px;}.pw-linked-actions .pw-account-disconnect:is(:hover,:focus-visible){background:var(--pw-danger-hover);}
.pw-services-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 2px 8px;}
.pw-services-title{margin:0;font-size:10.5px;font-weight:600;letter-spacing:1.1px;color:var(--muted-2);}
.pw-services-heading>span{font-size:11px;color:var(--muted);}
#pw-service-tools:empty{display:none;}
.pw-service-access{display:grid;grid-template-columns:20px minmax(0,1fr) auto 36px;align-items:center;gap:0 10px;padding:12px 14px;}.pw-service-access.has-port-settings{grid-template-columns:20px minmax(0,1fr) auto auto 36px;gap:0 8px;}.pw-service-access+.pw-service-access{border-top:1px solid var(--border);}
.pw-access-icon{width:20px;height:20px;display:grid;place-items:center;color:var(--muted);}.pw-access-icon svg{width:18px;height:18px;}
.pw-access-copy{min-width:0;}.pw-access-title{display:flex;align-items:center;gap:4px;min-height:20px;}.pw-access-title>strong{font-size:13px;font-weight:600;}.pw-access-copy>p{font-size:12px;color:var(--muted);margin:2px 0 0;line-height:1.45;overflow-wrap:anywhere;}
.pw-service-settings.iconbtn{grid-column:3;grid-row:1;justify-self:center;flex:none;width:28px;height:28px;min-height:28px;padding:0;border-radius:99px;}.pw-service-access.has-port-settings .pw-service-copy{grid-column:4;}.pw-service-access.has-port-settings .pw-service-control{grid-column:5;}.pw-service-settings svg{width:14px;height:14px;}
.pw-service-copy{grid-column:3;grid-row:1;justify-self:center;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;min-height:28px;margin:0;border:0;border-radius:99px;background:transparent;color:var(--muted);padding:0;cursor:pointer;}.pw-service-copy svg{width:14px;height:14px;}.pw-service-copy:is(:hover,:focus-visible){background:var(--hover);color:var(--foreground);}
.pw-service-control{grid-column:4;grid-row:1;width:36px;display:flex;justify-content:flex-end;align-items:center;}.pw-service-control .spinner{width:20px;height:20px;}.pw-service-control .switch{margin:0;}
.pw-server-row,.server-settings-dialog .pw-server-row{grid-template-columns:20px minmax(0,1fr) 32px 36px;gap:8px 10px;}
.pw-server-row :is(#pw-spin,#pw-switch-wrap){grid-column:4;grid-row:1;justify-self:end;}
.pw-address-chip,.server-settings-dialog .pw-address-chip{grid-column:3;grid-row:1;justify-self:center;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;min-height:28px;padding:0;border:0;border-radius:99px;background:transparent;color:var(--muted);}
.pw-address-chip svg{width:14px;height:14px;}.pw-address-chip:is(:hover,:focus-visible){background:var(--hover);color:var(--foreground);}
.pw-port-modal .modal-body{display:flex;flex-direction:column;gap:14px;}.pw-port-modal .modal-foot .btn{height:32px;min-height:32px;padding:0 14px;}.pw-port-error:empty{display:none;}.pw-port-error{margin:0;font-size:12px;color:var(--red);}
.pw-port-destination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;font-size:12px;color:var(--muted);}.pw-port-destination strong{font-family:var(--font-mono);font-weight:500;color:var(--foreground);}

.pw-services-locked{padding:12px 14px;margin:0;color:var(--muted);font-size:12px;}.pw-account-error{margin-top:8px;}
.pw-debug-scrim{padding:16px;}.modal.pw-debug-modal{width:min(940px,calc(100vw - 32px));max-width:none;height:min(640px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);border-radius:12px;display:flex;flex-direction:column;}
.pw-debug-modal .modal-head{flex:none;padding:20px 24px 12px;}.pw-debug-modal .modal-head h3{display:flex;align-items:center;gap:10px;}.pw-debug-brand{flex:none;width:18px;height:18px;color:var(--muted);}
.pw-debug-modal .modal-body{display:flex;flex-direction:column;flex:1;min-height:0;max-height:none;padding:0 24px;overflow:hidden;}
.pw-debug-modal .modal-foot{flex:none;gap:8px;padding:12px 24px 18px;}.pw-debug-modal .modal-foot .btn{height:32px;min-height:32px;padding:0 12px;}
.pw-debug-counts{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:var(--muted-2);font-size:11px;line-height:16px;}.pw-debug-counts:has(.pw-debug-count:empty){display:none;}.pw-debug-warnings{color:#d9a441;}
.pw-debug-timeline{flex:1;min-height:0;position:relative;container:pw-debug-list / inline-size;}.pw-debug-events{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;outline:none;}
.pw-debug-event{display:grid;grid-template-columns:65px 91px minmax(0,1fr);column-gap:12px;padding:11px 12px;margin-bottom:2px;border:1px solid transparent;border-radius:8px;}.pw-debug-event:hover{background:var(--hover);border-color:var(--border);}
.pw-debug-event>time{padding-top:3px;font:10px/16px var(--font-mono);color:var(--muted-2);}
.pw-debug-source{display:flex;align-items:flex-start;gap:7px;padding-top:2px;font-size:11px;line-height:16px;color:var(--muted);}.pw-debug-source svg{width:11px;height:11px;flex:none;margin-top:2px;color:var(--muted-2);}
.pw-debug-message{display:flex;flex-direction:column;gap:4px;min-width:0;overflow-wrap:anywhere;}.pw-debug-message strong{font-size:12px;line-height:18px;font-weight:500;color:var(--foreground);white-space:pre-wrap;}.pw-debug-message small{font-size:11px;line-height:16px;color:var(--muted-2);white-space:pre-wrap;}
.pw-debug-event:is(.warning,.endpoint) .pw-debug-source svg,.pw-debug-event.endpoint strong{color:#d9a441;}.pw-debug-event.error :is(strong,.pw-debug-source svg){color:var(--red);}.pw-debug-event.success :is(strong,.pw-debug-source svg){color:var(--green);}
:root[data-theme="light"] :is(.pw-debug-warnings,.pw-debug-event:is(.warning,.endpoint) .pw-debug-source svg,.pw-debug-event.endpoint strong){color:#8c5f13;}
.pw-debug-empty{height:100%;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;color:var(--muted);}.pw-debug-empty>svg{width:22px;height:22px;margin-bottom:4px;color:var(--muted-2);}.pw-debug-empty strong{font-size:13px;font-weight:500;color:var(--foreground);}.pw-debug-empty>span{font-size:12px;}
.pw-debug-jump{position:absolute;top:16px;left:50%;transform:translateX(-50%);height:34px;min-height:34px;padding:0 14px;border-radius:99px;background:var(--surface-1);border-color:var(--border-strong);}.pw-debug-jump svg{width:12px;height:12px;}
.pw-debug-notice{flex:none;font-size:12px;line-height:18px;color:var(--muted);margin:8px 0 0;}.pw-debug-notice:empty{display:none;}
@container pw-debug-list (max-width:419px){.pw-debug-event{grid-template-columns:58px minmax(0,1fr);gap:8px;}.pw-debug-source{display:none;}}
@media(max-width:600px){.pw-debug-modal .modal-head{padding:18px 18px 12px;}.pw-debug-modal .modal-body{padding:0 18px;}.pw-debug-modal .modal-foot{padding:12px 18px 18px;}.pw-linked-header,.pw-server-row{padding-inline:12px;}.pw-server-row,.server-settings-dialog .pw-server-row{gap:8px;}.pw-services-heading{align-items:flex-start;}}

.side-hosting-offer{display:flex;align-items:center;gap:8px;flex:none;width:100%;margin-top:auto;margin-bottom:8px;padding:9px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--foreground);text-align:start;cursor:pointer;}
.side-hosting-offer:is(:hover,:focus-visible){background:var(--hover);border-color:var(--border-strong);}
.side-hosting-offer>span{min-width:0;display:grid;gap:3px;}.side-hosting-offer strong{font-size:11.5px;font-weight:600;line-height:1.45;}.side-hosting-offer small{font-size:11px;line-height:1.4;color:var(--muted);}.side-hosting-offer>svg{width:10px;height:10px;flex:none;margin-inline-start:auto;color:var(--muted);}

.ci-ai{color:var(--foreground);}.ci-ai svg{width:17px;height:17px;filter:drop-shadow(0 0 2px #8fa8ff55);}


/* SVG's 24px canvas includes whitespace; match the native visible close stroke. */
.modal-close{padding:0;}.modal-close svg,.tebex-sales-modal .modal-close svg{width:22px;height:22px;}
.ci-modal .modal-close svg,.server-settings-dialog .modal-close svg,.gs-sheet-header :is(.close,.modal-close) svg{width:28px;height:28px;}

/* FREE previews keep the native top alignment and natural row height. */
.content:has(> .db-demo)>.db-demo{margin:0 auto;}
.log-wrap.workspace-preview,.log-wrap.workspace-preview .log-viewport,.log-wrap.workspace-preview .log-viewport #log-list{flex:0 0 auto;}
.log-wrap.workspace-preview .workspace-preview-footer{padding-top:16px;}
#side-hosting-offer{margin-bottom:0;}

/* Native text-field states, shared by ordinary forms; capsule searches retain their geometry. */
.cs-field input:not([type=checkbox]):not([type=radio]):not([type=color]), .se-edit :is(input:not([type=checkbox]):not([type=radio]),textarea) {border-radius:4px;background:var(--input);border:1px solid var(--border);color:var(--foreground);box-shadow:none;}
.cs-field input:is(:hover,:focus), .se-edit :is(input,textarea):is(:hover,:focus) {border-color:var(--border-strong);outline:none;}
.cs-field input:disabled,.se-edit :is(input,textarea):disabled {background:var(--surface-2);color:var(--muted);opacity:.72;border-color:var(--border);}
.cs-field input[readonly],.se-edit :is(input,textarea)[readonly] {background:var(--surface-2);}
.integration-empty {display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 12px;text-align:center;}
.integration-empty>.btn {height:32px;min-height:32px;border-radius:99px;padding:0 16px;background:#fff;color:#000;border-color:var(--border);}.integration-empty>.btn:is(:hover,:focus-visible){background:#e8e8eb;}
.wh-empty .ss-desc {margin:0;font-size:12px;}.wh-empty-motion {width:152px;height:48px;position:relative;border:1px solid var(--border);border-radius:10px;display:grid;grid-template-columns:24px 1fr;align-content:center;gap:7px 12px;padding:0 14px;text-align:start;animation:integration-demo-in .26s .18s ease-out both;}
.wh-empty-motion>span {grid-row:span 2;align-self:center;color:var(--muted);display:flex;}.wh-empty-motion svg {width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;}
.wh-empty-motion>i {height:3px;width:56px;background:var(--border-strong);border-radius:2px;}.wh-empty-motion>i:last-child {width:40px;background:var(--border);}
.tebex-empty{padding:0 16px 16px;}.tebex-demo {width:100%;text-align:start;border:1px solid var(--border);border-radius:10px;padding:12px 16px;min-height:168px;background:var(--surface-1);display:flex;flex-direction:column;gap:10px;}.tebex-demo-label{display:block;font-size:10px;line-height:12px;color:var(--muted-2);}
.tebex-demo-total {display:grid;font-size:24px;line-height:29px;font-weight:600;font-variant-numeric:tabular-nums;}.tebex-demo-total>span{grid-area:1/1;}.tebex-demo-total>span:first-child{animation:tebex-demo-zero .5s steps(1,end) both;}.tebex-demo-total>span:nth-child(2){animation:tebex-demo-middle 1s steps(1,end) both;}.tebex-demo-total>span:nth-child(3){animation:tebex-demo-third 1.5s steps(1,end) both;}.tebex-demo-total>span:last-child{animation:tebex-demo-final 1.5s steps(1,end) both;}
.tebex-demo-sales{display:grid;gap:4px;}.tebex-demo-sale{height:24px;display:flex;align-items:center;gap:10px;padding:3px 9px;border-radius:6px;background:var(--hover);animation:integration-demo-in .26s .5s ease-out both;font-size:11px;}.tebex-demo-sale:nth-child(2){animation-delay:1s;}.tebex-demo-sale:last-child{animation-delay:1.5s;}.tebex-demo-sale>i{height:3px;width:52px;margin-right:auto;background:var(--border-strong);border-radius:2px;}.tebex-demo-sale:nth-child(2)>i{width:38px;}.tebex-demo-sale:last-child>i{width:45px;}.tebex-demo-sale>strong{font-weight:400;color:#34d399;}:root[data-theme="light"] .tebex-demo-sale>strong{color:#087a56;}
.modal.tebex-key-modal{width:420px;max-width:calc(100vw - 32px);padding:20px;border-radius:16px;gap:0;}.tebex-key-modal .modal-head{padding:0;border:0;margin:0 0 4px;}.tebex-key-modal .modal-body{padding:0;margin:0;}.tebex-key-modal .modal-copy {margin:0 0 16px;color:var(--muted);font-size:12px;}.tebex-key-modal .field{margin-bottom:10px;}.tebex-key-modal .field label{font-weight:400;margin-bottom:10px;}.tebex-key-modal #tebex-secret{height:34px;min-height:34px;border-radius:99px;padding:0 12px;font-size:12px;}.tebex-key-link{font-size:12px;color:var(--foreground);}.tebex-key-error{font-size:12px;color:var(--red);margin-bottom:0;}.tebex-key-modal .modal-foot{justify-content:flex-end;padding:0;border:0;margin-top:16px;}
.tebex-key-modal .modal-foot{gap:8px;}.tebex-key-modal .modal-foot .btn{height:32px;min-height:32px;padding:0 14px;line-height:16px;}.tebex-key-modal #m-cancel{background:transparent;border-color:transparent;color:var(--foreground);}.tebex-key-modal #m-cancel:hover{background:var(--hover);}
@keyframes integration-demo-in {from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes tebex-demo-zero {from{opacity:1;}to{opacity:0;}}
@keyframes tebex-demo-middle {0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}
@keyframes tebex-demo-third {0%{opacity:0;}66.6666667%{opacity:1;}100%{opacity:0;}}
@keyframes tebex-demo-final {from{opacity:0;}to{opacity:1;}}
@media(prefers-reduced-motion:reduce){.wh-empty-motion,.tebex-demo-total>span:first-child,.tebex-demo-total>span:nth-child(2),.tebex-demo-total>span:nth-child(3),.tebex-demo-total>span:last-child,.tebex-demo-sale,.tebex-demo-sale:nth-child(2),.tebex-demo-sale:last-child{animation:none;}.tebex-demo-total>span:first-child,.tebex-demo-total>span:nth-child(2),.tebex-demo-total>span:nth-child(3){opacity:0;}}

/* Copy/move destinations reuse File Manager navigation, vectors and row spacing. */
.modal.fm-destination-modal {width:500px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 40px);border-radius:16px;padding:20px;gap:16px;}
.fm-destination-modal .modal-head,.fm-destination-modal .modal-body,.fm-destination-modal .modal-foot{padding:0;border:0;margin:0;}.fm-destination-modal .modal-body{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:hidden;}.fm-destination-modal .modal-copy{font-size:13px;color:var(--muted);margin:0;}
.fm-destination-nav{display:flex;gap:8px;align-items:center;min-height:34px;}.fm-destination-nav>.iconbtn{flex:none;width:32px;height:32px;border:0;background:transparent;}.fm-destination-nav svg{width:18px;height:18px;}
.fm-destination-crumbs{display:flex;align-items:center;gap:4px;overflow:auto;min-width:0;flex:1;}.fm-destination-crumbs>button{border:0;border-radius:6px;background:transparent;color:var(--foreground);padding:6px 8px;font:inherit;font-size:12px;white-space:nowrap;cursor:pointer;}.fm-destination-crumbs>button:is(:hover,:focus-visible){background:var(--hover);}.fm-destination-crumbs>span{color:var(--muted-2);font-size:11px;}
.fm-destination-list{overflow:auto;min-height:110px;max-height:min(300px,40dvh);}.fm-destination-row{width:calc(100% - 8px);margin:1px 4px;border:0;border-radius:8px;background:transparent;color:var(--foreground);display:flex;align-items:center;gap:12px;padding:8px 16px;min-height:46px;text-align:start;cursor:pointer;}.fm-destination-row:is(:hover,:focus-visible){background:var(--hover);outline:none;}.fm-destination-row .ficon{display:grid;place-items:center;flex:none;width:28px;height:28px;}.fm-destination-row .ficon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;}.fm-destination-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:600;white-space:nowrap;}.fm-destination-arrow{display:flex;color:var(--muted-2);}.fm-destination-arrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;}.fm-destination-status{font-size:12px;color:var(--muted);margin:0;}.fm-destination-status:empty{display:none;}.fm-destination-modal .modal-foot{justify-content:flex-end;gap:8px;}.fm-destination-modal .modal-foot>.btn{height:34px;min-height:34px;border-radius:99px;padding:0 16px;}
@media(max-width:720px){.fm-destination-row{padding:7px 8px;gap:8px;}.fm-destination-row .ficon{width:24px;height:24px;}}

@media(max-width:719px){.modal.fm-destination-modal{border-radius:14px;}}

/* One circular status group while the account-scoped support check is pending. */
.support-status-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px 12px;text-align:center;}
.support-status-loading>.spinner{width:24px;height:24px;border-width:2.4px;border-color:transparent;border-top-color:var(--muted);border-right-color:var(--muted);}
.support-status-loading>p{margin:0;font-size:13px;line-height:19px;color:var(--muted);}
@media(prefers-reduced-motion:reduce){.support-status-loading>.spinner{animation:none;}}

/* One primary action when the owned server list is empty. */
.servers-empty-state{display:flex;min-height:200px;padding:24px;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;}
.servers-empty-state.hidden{display:none;}
.servers-empty-state>svg{width:32px;height:32px;color:var(--muted-2);}
.servers-empty-state>h2{margin:0;font-size:15px;font-weight:600;color:var(--foreground);}
.servers-empty-state>.create-btn{height:32px;min-height:32px;padding:0 14px;border-radius:99px;align-items:center;justify-content:center;font-size:12px;}
.servers-empty-state>.create-btn svg{width:12px;height:12px;}


/* Session artwork has no frame; the preview owns the quiet outline. */
.server-rail-item .server-rail-tile { border:0; background:transparent; }
.session-preview { background:var(--surface-1); border:1px solid var(--border-strong); border-radius:12px; box-shadow:var(--shadow); padding:12px; }
.session-preview-art.gico :is(svg,.gico-img) { object-fit:cover; }