/* Craftlio styles.
 * Design: the dashboard-design skill (github.com/abdiraimov-otabek/dashboard-design-skill): calm surfaces, one accent,
 * colour only where it means something, tokens with a light and a dark value. Minecraft touches the user asked for:
 * pixel-crisp player heads, a grass-green "online/running" colour, MOTD colour codes, a block logo.
 * Deviations from the skill, on purpose:
 *  - "live" green also marks a running server (status, not a metric), since a server being up is the screen's answer.
 *  - Console uses a monospace dark panel in both themes: logs read better that way and every game panel looks so.
 */
/* Theme v2 (2026-11, "Playful Pro / flat retro pastel", the design kit in docs/design): charcoal canvas and sidebar,
 * flat cards with fine borders, warm cream text, and five pastel accents: mint (ready / primary), teal (info), amber
 * (warning / backups), coral (stopped / errors / destructive), lavender (players / special). No glows, no banners.
 * The four measures keep one colour each everywhere (tiles, sparklines, graphs): CPU coral-red, memory blue, TPS
 * mint-green, players amber-yellow; disk lavender. Red and green can't be told apart by colour-blind readers, so every
 * tile and line also carries its name. The light theme uses the kit's light surfaces with deeper accents. */
:root {
  color-scheme: light;
  --page: #f7f5ef; --card: #ffffff; --soft: #f1f0ea; --side: #edece5; --raise: #f1f0ea;
  --ink: #20262a; --ink-2: #49545b; --muted: #66747a;
  --line: #e1e3df; --line-strong: #cdd1cd;
  --accent: #2b8556; --on-accent: #ffffff;
  --up: #2b8556; --down: #c94f4c; --warn: #a8750a; --tip: #20262a;
  --live: #2f9a5e; --grass: #5b9a3c; --dirt: #8a5a3b;
  /* the kit's five accents, deepened so text and lines read on white; tints straight from the kit */
  --mint: #2b8556; --teal: #17867c; --amber: #a8750a; --coral: #c94f4c; --lavender: #7d5cc0;
  --mint-tint: #e0f0e4; --teal-tint: #e0f1ef; --amber-tint: #fff2dd; --coral-tint: #fbe8e7; --lavender-tint: #f0e8f9;
  /* the four measures, the same everywhere: CPU red (coral), memory blue, TPS green (mint), players yellow (amber);
     disk lavender. Each has a partner colour for a second line in its graph. */
  --m-cpu: #c94f4c; --m-mem: #2a7fc4; --m-disk: #7d5cc0; --m-tps: #2e8a5a; --m-play: #a8850a;
  --m-cpu-2: #7d5cc0; --m-mem-2: #b8487f; --m-tps-2: #7d5cc0; --m-play-2: #17867c;
  --side-ink: #20262a; --side-muted: #5d6a70; --side-hover: rgb(32 38 42 / .05); --side-on: #d3eadb; --side-on-line: #9fcfb0; --side-line: #dcdcd3;
  --b-start: #2f8556; --b-stop: #c24f4b; --b-restart: #9a6a08; --b-backup: #7a5cc0; --b-logs: #1d7f77; --b-ink: #ffffff;
  /* the console follows the theme: paper-light here, charcoal in dark mode */
  --console: #fbfaf6; --console-ink: #20262a; --console-muted: #66747a;
  --console-line: rgb(32 38 42 / .09); --console-soft: rgb(32 38 42 / .05); --console-edge: rgb(32 38 42 / .14); --console-hover: rgb(32 38 42 / .08); --console-on: #20262a; --console-pop: #ffffff; --con-warn: #8a5d00; --con-error: #b3322b; --con-cmd: #2a62b8; --con-reply: #2b7a4a; --con-mark: rgb(245 193 109 / .45);
  --shadow-card: none;
  --shadow-pop: 0 12px 32px -8px rgb(32 38 42 / .2), 0 0 0 1px #cdd1cd;
  --focus: 0 0 0 3px rgb(43 133 86 / .28);
  --radius: 14px; --radius-c: 12px;
  --font: "Inter", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #15191f; --card: #242930; --soft: #2b3139; --side: #1d222a; --raise: #2b3139;
    --ink: #f3f0e9; --ink-2: #b7bac3; --muted: #9198a2;
    --line: #353b45; --line-strong: #434a54;
    --accent: #8ddcaf; --on-accent: #13251b;
    --up: #8ddcaf; --down: #ee8f91; --warn: #f5c16d; --tip: #343a43;
    --live: #8ddcaf; --grass: #7cc24f;
    --mint: #8ddcaf; --teal: #62d0c5; --amber: #f5c16d; --coral: #ee8f91; --lavender: #c2a0f0;
    --mint-tint: #263c34; --teal-tint: #24383b; --amber-tint: #3e352c; --coral-tint: #3e3037; --lavender-tint: #373044;
    --m-cpu: #ee8f91; --m-mem: #6cb4f0; --m-disk: #c2a0f0; --m-tps: #8ddcaf; --m-play: #f5c16d;
    --m-cpu-2: #c2a0f0; --m-mem-2: #f2a6d0; --m-tps-2: #c2a0f0; --m-play-2: #62d0c5;
    --side-ink: #f3f0e9; --side-muted: #9198a2; --side-hover: rgb(255 255 255 / .05); --side-on: #2f5440; --side-on-line: #4f8a66; --side-line: #2c323b;
    --b-start: #8ddcaf; --b-stop: #ee8f91; --b-restart: #f5c16d; --b-backup: #c2a0f0; --b-logs: #62d0c5; --b-ink: #15191f;
    --console: #111419; --console-ink: #e6e3dc; --console-muted: #8d949e;
    --console-line: rgb(255 255 255 / .07); --console-soft: rgb(255 255 255 / .06); --console-edge: rgb(255 255 255 / .1); --console-hover: rgb(255 255 255 / .12); --console-on: #fff; --console-pop: #242930; --con-warn: #f5c16d; --con-error: #ee8f91; --con-cmd: #9fc7f5; --con-reply: #b8ecd0; --con-mark: rgb(245 193 109 / .3);
    --shadow-card: none; --shadow-pop: 0 12px 32px -8px rgb(0 0 0 / .6), 0 0 0 1px #434a54;
    --focus: 0 0 0 3px rgb(141 220 175 / .32);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #15191f; --card: #242930; --soft: #2b3139; --side: #1d222a; --raise: #2b3139;
  --ink: #f3f0e9; --ink-2: #b7bac3; --muted: #9198a2;
  --line: #353b45; --line-strong: #434a54;
  --accent: #8ddcaf; --on-accent: #13251b;
  --up: #8ddcaf; --down: #ee8f91; --warn: #f5c16d; --tip: #343a43;
  --live: #8ddcaf; --grass: #7cc24f;
  --mint: #8ddcaf; --teal: #62d0c5; --amber: #f5c16d; --coral: #ee8f91; --lavender: #c2a0f0;
  --mint-tint: #263c34; --teal-tint: #24383b; --amber-tint: #3e352c; --coral-tint: #3e3037; --lavender-tint: #373044;
  --m-cpu: #ee8f91; --m-mem: #6cb4f0; --m-disk: #c2a0f0; --m-tps: #8ddcaf; --m-play: #f5c16d;
  --m-cpu-2: #c2a0f0; --m-mem-2: #f2a6d0; --m-tps-2: #c2a0f0; --m-play-2: #62d0c5;
  --side-ink: #f3f0e9; --side-muted: #9198a2; --side-hover: rgb(255 255 255 / .05); --side-on: #2f5440; --side-on-line: #4f8a66; --side-line: #2c323b;
  --b-start: #8ddcaf; --b-stop: #ee8f91; --b-restart: #f5c16d; --b-backup: #c2a0f0; --b-logs: #62d0c5; --b-ink: #15191f;
  --console: #111419; --console-ink: #e6e3dc; --console-muted: #8d949e;
  --console-line: rgb(255 255 255 / .07); --console-soft: rgb(255 255 255 / .06); --console-edge: rgb(255 255 255 / .1); --console-hover: rgb(255 255 255 / .12); --console-on: #fff; --console-pop: #242930; --con-warn: #f5c16d; --con-error: #ee8f91; --con-cmd: #9fc7f5; --con-reply: #b8ecd0; --con-mark: rgb(245 193 109 / .3);
  --shadow-card: none; --shadow-pop: 0 12px 32px -8px rgb(0 0 0 / .6), 0 0 0 1px #434a54;
  --focus: 0 0 0 3px rgb(141 220 175 / .32);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.ink2 { color: var(--ink-2); }
.small { font-size: 12.5px; }
.hidden { display: none !important; }
.ic { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; }
.ic.lg { width: 20px; height: 20px; }
.ic.sm { width: 14px; height: 14px; vertical-align: -2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.side { position: sticky; top: 0; height: 100vh; height: 100dvh; background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 14px 10px; gap: 2px; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 14px; font-weight: 650; font-size: 15px; letter-spacing: -.01em; }
.logo { width: 26px; height: 26px; flex: none; image-rendering: pixelated; }
.side-label { font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 14px 10px 6px; text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; justify-content: space-between; }
.nav { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 10px; color: var(--ink-2); cursor: pointer; border: 0; background: none; width: 100%; text-align: left; text-decoration: none !important; }
.nav:hover { background: color-mix(in srgb, var(--soft) 80%, transparent); color: var(--ink); }
.nav.on { background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); font-weight: 560; }
.nav .count { margin-left: auto; font-size: 12px; color: var(--muted); }
.side-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.icon-btn-plain { border: 0; background: none; padding: 4px; border-radius: 8px; color: var(--muted); cursor: pointer; display: inline-grid; place-items: center; }
.icon-btn-plain:hover { background: var(--soft); color: var(--ink); }

.main { min-width: 0; padding: 22px 28px 64px; }
.page { max-width: 1440px; margin: 0 auto; }
.page.narrow { max-width: 1060px; }
@media (min-width: 112.5rem) { .page { max-width: 1640px; } }

.topbar { display: none; }
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .main { padding: 0 16px 80px; }
  .topbar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--page) 92%, transparent); backdrop-filter: blur(10px); margin: 0 -16px 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
  .topbar .title { font-weight: 620; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
}

/* ---------- page header ---------- */
.head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.head h1 { font-size: 22px; line-height: 1.2; margin: 0; letter-spacing: -.02em; font-weight: 650; }
.head .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.head .actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.title-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.type-sq { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--soft); color: var(--ink-2); flex: none; border: 1px solid var(--line); }
.type-sq.sm { width: 32px; height: 32px; border-radius: 10px; }
.type-sq { overflow: hidden; }
.type-sq img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.type-sq img.srv-icon { image-rendering: pixelated; }
.type-sq img.type-logo[src$=".svg"] { image-rendering: pixelated; }
.type-sq.lg { width: 48px; height: 48px; border-radius: 13px; }

/* ---------- buttons, inputs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); cursor: pointer; font-weight: 520; white-space: nowrap; text-decoration: none !important; }
.btn:hover { background: var(--soft); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.primary { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, black); }
.btn.go { background: var(--live); border-color: transparent; color: #fff; }
:root[data-theme="dark"] .btn.go { color: #06210f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.go { color: #06210f; } }
.btn.go:hover { filter: brightness(.95); }
.btn.danger { color: var(--down); }
.btn.danger.solid { background: var(--down); color: #fff; border-color: transparent; }
.btn.ghost { border-color: transparent; background: none; }
.btn.ghost:hover { background: var(--soft); }
.btn.sm { height: 28px; padding: 0 10px; border-radius: 8px; font-size: 13px; }
.btn.icon { width: 34px; padding: 0; }
.btn.sm.icon { width: 28px; }
.btn .spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.input, .select, textarea.input { height: 34px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); padding: 0 11px; min-width: 0; width: 100%; outline: none; }
textarea.input { height: auto; padding: 8px 11px; resize: vertical; line-height: 1.4; }
.input:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px; background-size: 5px 5px; background-repeat: no-repeat; }
.input.num { width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .lbl { font-size: 13px; color: var(--ink-2); font-weight: 520; }
.field .hint { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 16px; }
.err { color: var(--down); font-size: 13px; }

.switch { position: relative; width: 38px; height: 22px; flex: none; display: inline-block; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--line-strong); transition: background .15s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .15s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; }

/* segmented control: shrinks and truncates, never scrolls */
.seg { display: flex; background: var(--soft); border-radius: 11px; padding: 3px; gap: 2px; min-width: 0; max-width: 100%; }
.seg button, .seg .segbtn { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); cursor: pointer; white-space: nowrap; font-weight: 520; text-decoration: none !important; }
.seg button span.l, .seg .segbtn span.l { overflow: hidden; text-overflow: ellipsis; }
.seg button:hover, .seg .segbtn:hover { color: var(--ink); }
.seg button.on, .seg .segbtn.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 1px var(--line); }
.seg button .n, .seg .segbtn .n { font-size: 12px; color: var(--muted); font-weight: 500; }
.seg.fit { display: inline-flex; }
.seg.fit button { flex: 0 1 auto; }
.seg.sm { display: inline-flex; padding: 2px; border-radius: 9px; }
.seg.sm button { flex: 0 1 auto; height: 26px; padding: 0 9px; font-size: 12.5px; border-radius: 7px; }
.tabs { margin-bottom: 18px; }
/* nine tabs: on narrower screens only the open tab keeps its label; the others show their icon (name in the tooltip) */
.tabs.seg .segbtn { padding: 0 8px; gap: 6px; font-size: 13.5px; }
@media (max-width: 1080px) { .tabs.seg .segbtn:not(.on) span.l, .tabs.seg .segbtn:not(.on) .n { display: none; } .tabs.seg .segbtn:not(.on) { padding: 0 6px; } .tabs.seg .segbtn.on { flex: 2.4 1 0; } }
@media (max-width: 600px) { .tabs.seg .segbtn span.l { display: none; } .tabs.seg .segbtn { padding: 0 6px; } .tabs.seg .segbtn.on { flex: 1 1 0; } }
.mod-icon { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex: none; background: var(--soft); }
.result-desc { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-card); padding: 20px; min-width: 0; }
.card.flush { padding: 0; }
.card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-height: 28px; }
.card-h h2 { font-size: 15px; margin: 0; font-weight: 620; letter-spacing: -.01em; }
.card-h .r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.card.flush .card-h { padding: 16px 20px 0; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g75 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 1100px) { .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .g2, .g75 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .g3 { grid-template-columns: minmax(0, 1fr); } }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.spacer { flex: 1; }
.sep { height: 1px; background: var(--line); margin: 14px 0; border: 0; }

/* KPI cards (report-only, so separate cards with a 16 px gap) */
.kpis { display: grid; gap: 16px; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin-bottom: 16px; }
/* narrower: no lone card on its own row. 4 → 2 × 2; 5 → 3 on top, 2 below (6-column grid) */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis.n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kpis.n5 > :nth-child(-n+3) { grid-column: span 2; }
  .kpis.n5 > :nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 760px) {
  .kpis { gap: 10px; }
  .kpis.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis.n5 > * { grid-column: auto !important; }
  .kpis.n5 > :last-child { grid-column: span 2 !important; }
  .hide-phone { display: none !important; }
}
.kpi { padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 2px; position: relative; }
.kpi .k-l { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.kpi .k-sq { width: 26px; height: 26px; border-radius: 8px; background: var(--soft); display: grid; place-items: center; color: var(--muted); }
.kpi .k-v { font-size: 28px; font-weight: 640; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .k-v small { font-size: 15px; font-weight: 520; color: var(--muted); letter-spacing: -.01em; margin-left: 3px; }
.kpi .k-b { font-size: 12.5px; color: var(--muted); min-height: 18px; display: flex; gap: 6px; align-items: center; white-space: nowrap; overflow: hidden; }
.kpi .spark { height: 30px; margin-top: 4px; }
.kpi.problem { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--down) 55%, transparent); }
@media (max-width: 760px) { .kpi .k-v { font-size: 22px; } .kpi { padding: 12px 12px 8px; } }

.spark { display: block; width: 100%; overflow: visible; }

/* meters: slim 3 px tracks */
.meter { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--line-strong) 70%, transparent); overflow: hidden; position: relative; }
.meter > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent); opacity: .8; }
.meter.thin { height: 3px; }
.meter.warn > i { background: var(--warn); opacity: 1; }
.meter.bad > i { background: var(--down); opacity: 1; }

/* status pill + chips */
.pill { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--soft); color: var(--ink-2); font-size: 12.5px; font-weight: 560; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; display: inline-block; }
.pill.running { background: color-mix(in srgb, var(--live) 12%, transparent); color: var(--ink); }
.pill.running .dot, .dot.live { background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent); animation: breathe 2.4s ease-in-out infinite; }
.pill.starting .dot, .pill.stopping .dot, .dot.busy { background: var(--accent); animation: blink 1s ease-in-out infinite; }
.pill.crashed { background: color-mix(in srgb, var(--down) 12%, transparent); color: var(--down); }
.pill.crashed .dot { background: var(--down); }
@keyframes breathe { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--live) 8%, transparent); } }
@keyframes blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dot, .btn .spin { animation: none !important; } }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 7px; background: var(--soft); color: var(--ink-2); font-size: 12px; font-weight: 540; white-space: nowrap; border: 0; }
button.chip { cursor: pointer; }
button.chip:hover { color: var(--ink); background: color-mix(in srgb, var(--soft) 60%, var(--line-strong)); }
.chip.accent { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.chip.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--ink); }
.chip.bad { background: color-mix(in srgb, var(--down) 12%, transparent); color: var(--down); }
.chip.good { background: color-mix(in srgb, var(--live) 12%, transparent); color: var(--ink); }
.chip.op { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--ink); }

/* attention row: noun + number + action, never sentences */
.attn { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 16px; }
.attn-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--warn) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.attn-item.bad { background: color-mix(in srgb, var(--down) 7%, var(--card)); border-color: color-mix(in srgb, var(--down) 35%, transparent); }
.attn-item .t { font-weight: 560; flex: 1; min-width: 0; }
.attn-item .ic { color: var(--warn); }
.attn-item.bad .ic { color: var(--down); }

/* lists */
.list { display: flex; flex-direction: column; }
.li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 12px; border-radius: 10px; position: relative; min-width: 0; }
.li.click { cursor: pointer; }
.li.click:hover, .li.hl { background: color-mix(in srgb, var(--soft) 70%, transparent); }
.li + .li { box-shadow: 0 -1px 0 var(--line); }
.li.click:hover + .li, .li + .li.click:hover { box-shadow: none; }
.li .main-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.li .name { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li .sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li .end { display: flex; align-items: center; gap: 6px; flex: none; }
.li .share { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; border-radius: 99px; background: color-mix(in srgb, var(--line-strong) 60%, transparent); overflow: hidden; }
.li .share > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent); opacity: .75; }
.grid > .li { box-shadow: none !important; padding: 6px 0; }
.list-h { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); padding: 0 12px 6px; }

/* avatars + player heads */
.head-img { width: 32px; height: 32px; border-radius: 7px; image-rendering: pixelated; image-rendering: crisp-edges; flex: none; background: var(--soft); display: inline-block; object-fit: cover; }
.head-img.sm { width: 22px; height: 22px; border-radius: 5px; }
.head-img.lg { width: 44px; height: 44px; border-radius: 9px; }
.letter { width: 32px; height: 32px; border-radius: 8px; display: inline-grid; place-items: center; font-weight: 650; font-size: 13px; flex: none; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.letter.sm { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; }
.heads { display: flex; align-items: center; }
.heads > * { margin-left: -6px; box-shadow: 0 0 0 2px var(--card); }
.heads > :first-child { margin-left: 0; }

/* server cards on the home page */
.srv-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.srv { display: flex; flex-direction: column; gap: 14px; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.srv:hover { border-color: var(--line-strong); }
.srv .top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.srv .nm { font-weight: 620; font-size: 15.5px; letter-spacing: -.01em; }
.srv .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.srv .fact .l { font-size: 12px; color: var(--muted); }
.srv .fact .v { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv .bottom { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.srv.problem { border-color: color-mix(in srgb, var(--down) 40%, transparent); }
.new-card { display: grid; place-items: center; border-style: dashed; color: var(--muted); min-height: 170px; cursor: pointer; background: transparent; box-shadow: none; }
.new-card:hover { color: var(--ink); border-color: var(--line-strong); }

/* empty states */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 34px 16px; color: var(--muted); }
.empty .ic { width: 28px; height: 28px; color: var(--line-strong); }
.empty .t { color: var(--ink-2); font-weight: 520; }

/* skeleton */
.sk { background: linear-gradient(90deg, var(--soft), color-mix(in srgb, var(--soft) 50%, var(--card)), var(--soft)); background-size: 200% 100%; animation: sk 1.4s linear infinite; border-radius: 8px; }
@keyframes sk { to { background-position: -200% 0; } }

/* ---------- console ---------- */
.console { background: var(--console); color: var(--console-ink); border-radius: 16px; display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); overflow: hidden; }
.console .bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--console-line); flex-wrap: wrap; }
.console .bar .seg { background: var(--console-soft); }
.console .bar .seg button { color: var(--console-muted); height: 26px; padding: 0 10px; }
.console .bar .seg button.on { background: var(--console-hover); color: var(--console-on); box-shadow: none; }
.console .bar .input { background: var(--console-soft); border-color: var(--console-edge); color: var(--console-ink); height: 30px; }
.console .bar .btn { background: var(--console-soft); border-color: var(--console-edge); color: var(--console-ink); }
.console .bar .btn:hover { background: var(--console-hover); }
.console .bar .btn.on { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.logview { flex: 1; overflow: auto; padding: 10px 0; font: 12.5px/1.55 var(--mono); min-height: 200px; overscroll-behavior: contain; }
.logview .ln { padding: 0 14px; white-space: pre-wrap; word-break: break-word; }
.logview .ln:hover { background: var(--console-soft); }
.logview .ln.warn { color: var(--con-warn); }
.logview .ln.error { color: var(--con-error); }
.logview .ln.cmd { color: var(--con-cmd); margin-top: 4px; }
.logview .ln.reply { color: var(--con-reply); padding-left: 28px; }
.logview .ln.info.md, .logview .ln .md { color: var(--console-muted); }
.logview .ln mark { background: var(--con-mark); color: inherit; border-radius: 2px; }
.logview .tm { color: var(--console-muted); }
.cmdbar { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--console-line); position: relative; }
.cmdbar .prompt { display: flex; align-items: center; flex: 1; gap: 8px; background: var(--console-soft); border: 1px solid var(--console-edge); border-radius: 10px; padding: 0 10px; }
.cmdbar .prompt:focus-within { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.cmdbar input { flex: 1; background: none; border: 0; outline: none; height: 36px; color: var(--console-ink); font: 13px var(--mono); min-width: 0; }
.cmdbar .gt { color: var(--console-muted); font-family: var(--mono); }
.cmdbar .btn { background: var(--accent); border: 0; color: var(--on-accent); }
.suggest { position: absolute; left: 12px; bottom: 54px; background: var(--console-pop); border: 1px solid var(--console-edge); border-radius: 10px; padding: 4px; min-width: 280px; max-width: calc(100% - 24px); max-height: 260px; overflow: auto; box-shadow: var(--shadow-pop); z-index: 5; }
.suggest div { padding: 6px 10px; border-radius: 7px; font: 12.5px var(--mono); color: var(--console-ink); cursor: pointer; display: flex; gap: 10px; justify-content: space-between; }
.suggest div span { color: var(--console-muted); font-family: var(--font); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest div.on, .suggest div:hover { background: var(--console-hover); }
.mini-log { font: 12px/1.6 var(--mono); background: var(--console); color: var(--console-ink); border-radius: 12px; padding: 10px 0; height: 300px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.mini-log .ln { padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* MOTD / Minecraft colour codes */
/* the MOTD preview: one entry of Minecraft's multiplayer list (always dark, like the game) */
.motd-box { background: linear-gradient(#1d1c1a, #141312); border: 1px solid #3b3934; border-radius: 12px; padding: 10px 12px; display: flex; gap: 12px; align-items: center; font-family: var(--mono); color: #aaaaaa; min-width: 0; box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), var(--shadow-card); }
.motd-box img, .motd-box .noicon { width: 48px; height: 48px; image-rendering: pixelated; border-radius: 6px; flex: none; }
.motd-box .noicon { display: grid; place-items: center; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .08); }
.motd-box .t { flex: 1; font-size: 13px; line-height: 1.4; min-width: 0; }
.motd-box .t .n { color: #fff; margin-bottom: 1px; }
.motd-box .meta { align-self: flex-start; display: flex; align-items: flex-end; gap: 8px; font-size: 12px; color: #aaaaaa; flex: none; }
.motd-box .bars { display: inline-flex; align-items: flex-end; gap: 1px; height: 12px; }
.motd-box .bars i { width: 2px; background: #55ff55; box-shadow: 1px 1px 0 #153f15; }
.motd-box .t .m { white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.mc-0{color:#000}.mc-1{color:#0000aa}.mc-2{color:#00aa00}.mc-3{color:#00aaaa}.mc-4{color:#aa0000}.mc-5{color:#aa00aa}.mc-6{color:#ffaa00}.mc-7{color:#aaaaaa}.mc-8{color:#555555}.mc-9{color:#5555ff}.mc-a{color:#55ff55}.mc-b{color:#55ffff}.mc-c{color:#ff5555}.mc-d{color:#ff55ff}.mc-e{color:#ffff55}.mc-f{color:#ffffff}
.mc-l{font-weight:700}.mc-o{font-style:italic}.mc-n{text-decoration:underline}.mc-m{text-decoration:line-through}
/* the MOTD palette */
.mc-tools { display: flex; flex-wrap: wrap; gap: 12px 22px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.mc-grp { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mc-lbl { font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.mc-sws { display: grid; grid-template-columns: repeat(8, 26px); gap: 9px; }
.mc-sw { width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: currentColor; box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--line-strong); transition: transform .12s ease, box-shadow .12s ease; }
.mc-sw:hover, .mc-sw:focus-visible { transform: scale(1.12); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); outline: none; }
.mc-fmts { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-fmt { width: 34px; height: 30px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font: 700 13px var(--font); cursor: pointer; transition: border-color .12s, background .12s; }
.mc-fmt:hover, .mc-fmt:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); outline: none; }
.mc-fmt.mc-l { font-weight: 800; } .mc-fmt.mc-o { font-style: italic; font-weight: 600; } .mc-fmt.mc-n { text-decoration: underline; font-weight: 600; } .mc-fmt.mc-m { text-decoration: line-through; font-weight: 600; }
@media (max-width: 420px) { .mc-sws { grid-template-columns: repeat(8, 1fr); gap: 8px; } .mc-sw { width: 100%; height: auto; aspect-ratio: 1; } .mc-grp { flex: 1 1 100%; } }


/* ---------- properties / settings rows ---------- */
.prow { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 8px 0; }
.prow + .prow { border-top: 1px solid var(--line); }
.prow .pl { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.prow .pl .k { font-weight: 540; display: flex; gap: 6px; align-items: center; }
.prow .pl .key { font: 11.5px var(--mono); color: var(--muted); }
.prow .pc { flex: none; display: flex; align-items: center; gap: 8px; max-width: 60%; }
.prow .pc .input, .prow .pc .select { width: 260px; max-width: 100%; }
.prow.dirty .pl .k::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.prow .help { color: var(--muted); cursor: help; }
@media (max-width: 640px) { .prow { flex-wrap: wrap; } .prow .pc { max-width: 100%; width: 100%; } .prow .pc .input, .prow .pc .select { width: 100%; } .prow .pc .input.num { width: 120px; } }
.savebar { position: sticky; bottom: 16px; z-index: 15; margin-top: 16px; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-pop); }
.savebar .n { font-weight: 560; flex: 1; }

/* ---------- files ---------- */
.crumbs { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; font-size: 13.5px; }
.crumbs button { border: 0; background: none; padding: 3px 6px; border-radius: 6px; color: var(--ink-2); cursor: pointer; }
.crumbs button:hover { background: var(--soft); color: var(--ink); }
.crumbs button:last-child { color: var(--ink); font-weight: 560; }
.crumbs .ic { color: var(--muted); }
.ftable .li { min-height: 42px; }
.ftable .fi { color: var(--muted); }
.ftable .fi.dir { color: var(--accent); }
.ftable .sz, .ftable .mt { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; flex: none; }
.ftable .sz { width: 84px; }
.ftable .mt { width: 132px; }
@media (max-width: 640px) { .ftable .mt { display: none; } .ftable .sz { width: 64px; } }
.dropzone { outline: 2px dashed var(--accent); outline-offset: -6px; background: color-mix(in srgb, var(--accent) 4%, var(--card)); }
.editor-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.editor-wrap .CodeMirror { height: calc(100vh - 250px); min-height: 360px; font: 13px/1.55 var(--mono); background: var(--card); color: var(--ink); }
.editor-wrap .CodeMirror-gutters { background: var(--side); border-right: 1px solid var(--line); }
.editor-wrap .CodeMirror-linenumber { color: var(--muted); }
.editor-wrap .CodeMirror-cursor { border-left-color: var(--ink); }
.editor-wrap .CodeMirror-activeline-background { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.editor-wrap .CodeMirror-selected, .editor-wrap .CodeMirror-focused .CodeMirror-selected { background: color-mix(in srgb, var(--accent) 18%, transparent) !important; }
.editor-wrap .CodeMirror-matchingbracket { color: var(--up) !important; font-weight: 700; }
.editor-wrap .cm-s-default .cm-comment { color: var(--muted); }
.editor-wrap .cm-s-default .cm-def, .editor-wrap .cm-s-default .cm-property, .editor-wrap .cm-s-default .cm-attribute { color: var(--accent); }
.editor-wrap .cm-s-default .cm-string, .editor-wrap .cm-s-default .cm-string-2 { color: var(--up); }
.editor-wrap .cm-s-default .cm-number, .editor-wrap .cm-s-default .cm-atom { color: #b5651d; }
.editor-wrap .cm-s-default .cm-keyword, .editor-wrap .cm-s-default .cm-tag { color: #a14bd4; }
.editor-wrap .cm-s-default .cm-variable-2, .editor-wrap .cm-s-default .cm-meta { color: var(--ink-2); }
.editor-wrap .CodeMirror-dialog { background: var(--soft); color: var(--ink); }

/* ---------- popovers, modals, drawer, toasts, tooltip ---------- */
.menu { position: fixed; z-index: 60; background: var(--card); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 5px; min-width: 200px; max-width: calc(100vw - 16px); }
.menu button { display: flex; width: 100%; align-items: center; gap: 10px; border: 0; background: none; height: 34px; padding: 0 10px; border-radius: 8px; cursor: pointer; text-align: left; color: var(--ink); white-space: nowrap; }
.menu button:hover, .menu button:focus-visible { background: var(--soft); outline: none; }
.menu button.danger { color: var(--down); }
.menu button:disabled { opacity: .4; pointer-events: none; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }
.menu .ic { color: var(--muted); }
.menu button.danger .ic { color: inherit; }
.menu .mi-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu button.on { font-weight: 620; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.menu .mi-ck { color: var(--accent); line-height: 0; flex: none; }
.menu.match { max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
.menu.match button { height: 44px; font-size: 15px; gap: 12px; }
.scrim { position: fixed; inset: 0; z-index: 50; background: rgb(10 10 12 / .38); display: grid; place-items: center; padding: 16px; animation: fade .12s ease-out; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--card); border-radius: 18px; box-shadow: var(--shadow-pop); width: min(520px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
.modal.wide { width: min(760px, 100%); }
.modal .mh { display: flex; align-items: center; gap: 10px; padding: 18px 20px 6px; }
.modal .mh h3 { margin: 0; font-size: 17px; font-weight: 640; flex: 1; }
.modal .mb { padding: 10px 20px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.modal .mf { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 18px; flex-wrap: wrap; }
.modal .mh, .modal .mf { transition: box-shadow .15s, border-color .15s; border: 0 solid transparent; position: relative; z-index: 1; }
.modal.scroll-up .mh { border-bottom-width: 1px; border-bottom-color: var(--line); box-shadow: 0 8px 14px -12px rgba(0,0,0,.45); }
.modal.scroll-down .mf { border-top-width: 1px; border-top-color: var(--line); box-shadow: 0 -8px 14px -12px rgba(0,0,0,.45); }
.modal.scroll-down .mf::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 22px; background: linear-gradient(transparent, var(--card)); pointer-events: none; }
.modal.scroll-up .mh::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; background: linear-gradient(var(--card), transparent); pointer-events: none; }
@media (max-width: 760px) { .scrim { place-items: end stretch; padding: 0; } .modal { width: 100%; border-radius: 18px 18px 0 0; max-height: 92dvh; } }
.drawer-scrim { position: fixed; inset: 0; z-index: 45; background: rgb(10 10 12 / .25); }
.drawer { position: fixed; z-index: 46; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--card); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; animation: slide .16s ease-out; }
@keyframes slide { from { transform: translateX(20px); opacity: 0; } }
.drawer .dh { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.drawer .db { padding: 16px 18px; overflow: auto; display: flex; flex-direction: column; gap: 16px; }
.skin3d { width: 100%; height: 300px; border-radius: 14px; background: radial-gradient(ellipse at 50% 85%, color-mix(in srgb, var(--grass) 25%, transparent), transparent 60%), var(--soft); display: grid; place-items: center; overflow: hidden; touch-action: pan-y; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.facts .l { font-size: 12px; color: var(--muted); }
.facts .v { font-weight: 560; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#toasts { position: fixed; z-index: 80; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast { background: var(--tip); color: #fff; padding: 10px 14px; border-radius: 12px; box-shadow: var(--shadow-pop); display: flex; align-items: center; gap: 10px; pointer-events: auto; animation: fade .15s ease-out; max-width: 100%; }
.toast.bad .ic { color: #ff8a8e; }
.toast.good .ic { color: #6ee7a8; }
.toast button { background: rgb(255 255 255 / .14); color: #fff; border: 0; border-radius: 8px; height: 26px; padding: 0 10px; cursor: pointer; font-weight: 560; }
#tip { position: fixed; z-index: 90; pointer-events: none; background: var(--tip); color: #fff; font-size: 12px; line-height: 1.4; padding: 7px 10px; border-radius: 9px; max-width: 300px; opacity: 0; transition: opacity .1s; }
#tip.show { opacity: 1; }
#tip b { font-size: 15px; display: block; }

/* phone menu: grid of pages */
.menugrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.menugrid button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); cursor: pointer; color: var(--ink-2); font-size: 12.5px; }
.menugrid button.on { color: var(--ink); background: color-mix(in srgb, var(--accent) 7%, transparent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.menugrid .ic { width: 20px; height: 20px; }

/* wizard */
.types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 520px) { .types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* logo on the left; name, tag and description to its right */
.type-opt { display: flex; flex-direction: row; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--card); cursor: pointer; text-align: left; min-width: 0; }
.type-opt:hover { background: var(--soft); }
.type-opt.on { background: color-mix(in srgb, var(--accent) 6%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); border-color: transparent; }
.type-opt .tn { font-weight: 620; }
.step-n { width: 24px; height: 24px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-size: 12.5px; font-weight: 620; color: var(--ink-2); flex: none; }
.step-n.done { background: var(--accent); color: var(--on-accent); }
.joblog { font: 12px/1.6 var(--mono); background: var(--console); color: var(--console-ink); border-radius: 12px; padding: 10px 12px; max-height: 280px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.range { width: 100%; accent-color: var(--accent); }

/* sign-in */
.auth-wrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--grass) 16%, transparent), transparent 55%), var(--page); }
.auth { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; }
.auth .brand { justify-content: center; font-size: 20px; padding: 0 0 6px; }
.auth .logo { width: 34px; height: 34px; }
/* the Modpack choice spans the row under the six server types */
.type-opt.wide { grid-column: 1 / -1; }
/* type tiles: the description sits in the tile (no hover needed) */
.type-opt .tw { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.type-opt .tn-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.type-opt .tn-row .chip { align-self: center; }
.type-opt .type-help { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
@media (max-width: 760px) { .types { grid-template-columns: minmax(0, 1fr) !important; } }
/* project description (plain-text blocks) */
.desc { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); max-height: 46vh; overflow: auto; border-top: 1px solid var(--line); padding-top: 10px; }
.desc h4 { margin: 14px 0 4px; font-size: 14.5px; color: var(--ink); }
.desc p { margin: 0 0 8px; }
.desc .li-b { padding-left: 6px; margin: 2px 0; }
/* screenshots strip + images in descriptions (click → viewer) */
.gallery { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; overscroll-behavior-x: contain; }
.gal-thumb, .desc-img { border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: 10px; flex: none; }
.gal-thumb img { height: 130px; border-radius: 10px; display: block; }
.desc-img { display: block; margin: 8px 0; max-width: 100%; }
.desc-img img { max-width: 100%; max-height: 320px; border-radius: 10px; display: block; }
.gal-thumb:hover img, .desc-img:hover img { filter: brightness(1.08); }
.modal .mb { overscroll-behavior: contain; }
/* image viewer */
.iv { position: fixed; inset: 0; z-index: 95; background: rgb(8 8 10 / .92); display: flex; flex-direction: column; animation: fade .12s ease-out; touch-action: pan-y; }
.iv-top { display: flex; align-items: center; gap: 8px; padding: 12px 14px; color: #e8e8ec; }
.iv-count { font-size: 13px; color: #b8b8c0; }
.iv-btn { width: 38px; height: 38px; border-radius: 10px; border: 0; background: rgb(255 255 255 / .08); color: #fff; display: grid; place-items: center; cursor: pointer; }
.iv-btn:hover { background: rgb(255 255 255 / .16); }
.iv-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 12px; }
.iv-img { max-width: calc(100% - 120px); max-height: 100%; object-fit: contain; border-radius: 8px; user-select: none; box-shadow: 0 20px 60px rgb(0 0 0 / .5); }
.iv-nav { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .1); color: #fff; display: grid; place-items: center; cursor: pointer; }
.iv-nav:hover { background: rgb(255 255 255 / .2); }
.iv-strip { display: flex; gap: 8px; padding: 12px 14px 16px; overflow-x: auto; justify-content: safe center; }
.iv-strip img { height: 56px; border-radius: 6px; opacity: .45; cursor: pointer; flex: none; border: 2px solid transparent; }
.iv-strip img.on { opacity: 1; border-color: #fff; }
@media (max-width: 640px) { .iv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; } .iv-prev { left: 8px; } .iv-next { right: 8px; } .iv-img { max-width: 100%; } }

/* the Modpack tile before a pack is chosen: the three loaders packs run on, fanned */
.pack-stack { position: relative; width: 100%; height: 100%; display: block; background: var(--soft); }
.pack-stack img { position: absolute; width: 26px; height: 26px; border-radius: 7px; box-shadow: 0 0 0 2px var(--card); }
.pack-stack img:nth-child(1) { left: 3px; top: 3px; }
.pack-stack img:nth-child(2) { left: 11px; top: 11px; }
.pack-stack img:nth-child(3) { left: 19px; top: 19px; }
/* side-by-side tiles need room: 3 across on wide screens, 2 on medium, 1 on phones */
@media (max-width: 1100px) { .types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* a dialog never grows past the window, whatever is inside (e.g. a long screenshot strip) */
.scrim { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.modal { min-width: 0; max-width: 100%; }
.modal .mb { min-width: 0; }
.editor-wrap .cm-bad-line { background: color-mix(in srgb, var(--down) 18%, transparent); }

/* ---- the open server's sections, nested in the sidebar ---- */
.side-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 14px; padding-left: 8px; border-left: 1px solid var(--line); }
.side-sub-label { font-size: 10.5px; font-weight: 600; color: var(--muted); padding: 8px 10px 3px; text-transform: uppercase; letter-spacing: .05em; }
.nav.sub { height: 30px; font-size: 13px; gap: 8px; border-radius: 8px; }
.nav.sub .ic { width: 15px; height: 15px; opacity: .8; }
.nav.sub.on .ic { opacity: 1; color: var(--accent); }
.section-pick { width: 100%; justify-content: flex-start; height: 40px; margin-bottom: 14px; }
.show-phone { display: none !important; }
@media (max-width: 760px) { .show-phone { display: flex !important; } }

/* ---- dashboards: one stat strip with hairline dividers instead of a row of separate cards ---- */
.kpis { gap: 1px !important; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.kpis > .card.kpi { border: 0; border-radius: 0; box-shadow: none; background: var(--card); }
.kpis > .card.kpi.problem { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--down) 55%, transparent); }
@media (max-width: 760px) { .kpis.n5 > :last-child { grid-column: span 2 !important; } }
.readonly-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); padding: 8px 12px; margin-bottom: 14px; border: 1px dashed var(--line); border-radius: 10px; }

/* ---- list pages: full-width tables with hairline rows ---- */
.table-wrap { overflow-x: auto; margin: 0 -4px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover, .tbl th.sorted { color: var(--ink); }
.tbl td { padding: 9px 10px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.tbl tr.off td { opacity: .55; }
.tbl tr.sel td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tbl td.end { text-align: right; white-space: nowrap; width: 1%; }
.tbl td.check, .tbl th.check { width: 1%; padding-right: 0; }
.tbl .row-actions { opacity: 0; transition: opacity .12s; }
.tbl tr:hover .row-actions, .tbl tr:focus-within .row-actions { opacity: 1; }
@media (hover: none) { .tbl .row-actions { opacity: 1; } }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar .bulk { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: 13px; }
.tbl .main-t { display: flex; flex-direction: column; min-width: 0; }
.tbl .main-t .sub { font-size: 12px; color: var(--muted); }
.tbl .main-t .name { font-weight: 560; }

/* ---- dashboards (Home, Overview): flat sections with headings and hairlines instead of boxes ---- */
.dash > .kpis { margin-bottom: 22px; }
.dash .card:not(.kpi):not(.srv) { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 14px 0 6px; border-top: 1px solid var(--line); }
.dash .card:not(.kpi):not(.srv) > .card-h { padding: 0 0 8px; }
.dash .card:not(.kpi):not(.srv) > .card-h h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.dash .grid { gap: 0 32px; }
/* Home: servers as hairline rows, not tiles */
.dash .srv-grid { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
.dash .srv-grid > .card.srv { display: grid; grid-template-columns: minmax(200px, 1.2fr) minmax(0, 2fr) auto; align-items: center; gap: 6px 24px; background: none; border: 0; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--line); padding: 12px 8px; }
.dash .srv-grid > .card.srv:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.dash .srv-grid > .card.srv.problem { box-shadow: inset 3px 0 0 var(--down); }
.dash .srv-grid > .card.srv > .small { grid-column: 1 / -1; }
.dash .srv-grid > .card.srv .facts { margin: 0; }
.dash .srv-grid > .card.srv .bottom { margin: 0; justify-content: flex-end; }
.dash .srv-grid > .card.new-card, .dash .srv-grid > .card[style*="grid-column"] { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
@media (max-width: 900px) { .dash .srv-grid > .card.srv { grid-template-columns: minmax(0, 1fr); } .dash .srv-grid > .card.srv .bottom { justify-content: flex-start; } }

/* ---- settings pages (Setup, Properties, System, Account): one column of groups with headings and hairlines ---- */
.settings { max-width: 860px; gap: 0 !important; }
.settings > .grid, .settings .grid.g2 { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
.settings .card, .settings > form.card { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 18px 0 8px; border-top: 1px solid var(--line); }
.settings > :first-child, .settings > .grid:first-child > .card:first-child { border-top: 0; padding-top: 4px; }
.settings .card > .card-h { padding: 0 0 6px; }
.settings .card > .card-h h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.settings .prow { padding-left: 0; padding-right: 0; }

/* the hidden attribute always wins over a component's own display (fields, cards and rows set display) */
[hidden] { display: none !important; }

/* ---- phones: navigation bar at the bottom ---- */
.bottomnav { display: none; }
@media (max-width: 760px) {
  .bottomnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); gap: 2px;
    background: color-mix(in srgb, var(--side) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .bottomnav .bn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 4px; border: 0; background: none; border-radius: 12px;
    color: var(--muted); font: inherit; font-size: 11px; font-weight: 520; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .bottomnav .bn .bn-i { position: relative; display: grid; place-items: center; width: 48px; height: 28px; border-radius: 14px; }
  .bottomnav .bn .ic { width: 20px; height: 20px; }
  .bottomnav .bn .bn-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bottomnav .bn.on { color: var(--ink); }
  .bottomnav .bn.on .bn-i { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
  .bottomnav .bn-n { position: absolute; top: -3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--live); color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
  .main { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  .savebar { bottom: calc(76px + env(safe-area-inset-bottom)); }
  #toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) {
  .toolbar .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .toolbar .seg button { flex: none; }
  .toolbar > .input[type=search] { max-width: none !important; flex: 1 1 100%; }
}
@media (max-width: 760px) {
  /* filter rows scroll sideways instead of squashing their labels */
  .main .seg:not(.tabs) { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .main .seg:not(.tabs)::-webkit-scrollbar { display: none; }
  .main .seg:not(.tabs) > button { flex: none; }
  .main .seg:not(.tabs) > button .l { overflow: visible; text-overflow: clip; }
}

/* ---- live stat graphs (graph.js); series colours validated against both chart surfaces ---- */
:root { --series-1: #3e63dd; --series-2: #eb6834; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --series-1: #3987e5; --series-2: #d95926; } }
:root[data-theme="dark"] { --series-1: #3987e5; --series-2: #d95926; }
.graph-head { display: flex; gap: 28px; flex-wrap: wrap; }
.graph-v { font-size: 26px; font-weight: 640; letter-spacing: -.02em; line-height: 1.15; }
.graph-key { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.graph-key i, .graph-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.graph-key i { width: 16px; height: 3px; border-radius: 2px; }
.graph-key { font-weight: 600; color: var(--ink); }
.graph-box { width: 100%; overflow: hidden; touch-action: pan-y; }
.graph-box svg { display: block; width: 100%; height: auto; }
.graph-axis { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.graph-tip { position: absolute; pointer-events: none; padding: 6px 10px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 4px 16px rgb(0 0 0 / .18); font-size: 12.5px; min-width: 110px; }
.kpi.click { cursor: pointer; }
.kpi.click:hover { background: color-mix(in srgb, var(--ink) 3%, var(--card)) !important; }
.kpi.click:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* six tiles: 3 + 3 when narrow, 2 + 2 + 2 on phones */
@media (max-width: 1100px) { .kpis.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 760px) { .kpis.n6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 760px) { .graph-axis { font-size: 12px; } .graph-v { font-size: 22px; } .graph-head { gap: 16px; } }
.graph-ranges { flex-wrap: wrap; max-width: 100%; }
.graph-ranges > button { flex: none !important; min-width: 40px; }
.graph-ranges > button .l { overflow: visible !important; text-overflow: clip !important; }

/* ---- graph time span slider: one row, a stop per span; labels sit exactly under the stops ---- */
.graph-span { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 2px; }
.graph-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: none; cursor: pointer; touch-action: none; --fill: 0%; }
.graph-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--gc, var(--accent)) var(--fill), var(--soft) var(--fill)); }
.graph-slider::-moz-range-track { height: 6px; border-radius: 3px; background: var(--soft); }
.graph-slider::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--gc, var(--accent)); }
.graph-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: var(--card); border: 2px solid var(--gc, var(--accent)); box-shadow: 0 1px 4px rgb(0 0 0 / .3); }
.graph-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--card); border: 2px solid var(--gc, var(--accent)); }
.graph-slider:focus-visible { outline: none; }
.graph-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--gc, var(--accent)); outline-offset: 2px; }
.graph-marks { display: flex; justify-content: space-between; padding: 0 10px; }
.graph-marks button { width: 0; display: flex; justify-content: center; overflow: visible; white-space: nowrap; border: 0; background: none; padding: 4px 0; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; font-variant-numeric: tabular-nums; }
.graph-marks button.on { color: var(--ink); font-weight: 640; }
.graph-box.loading { opacity: .45; transition: opacity .15s; }

/* ---- pop-ups: a grab handle on phones (drag down to close) ---- */
.sheet-grip { display: none; }
@media (max-width: 760px) {
  .sheet-grip { display: block; width: 40px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 22%, transparent); margin: 8px auto -4px; flex: none; }
  .drawer .sheet-grip { margin: 8px auto 0; }
}

/* asleep: stopped, but Craftlio wakes it when a player joins */
:root { --sleep: #6e56cf; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sleep: #9e8cfc; } }
:root[data-theme="dark"] { --sleep: #9e8cfc; }
.pill.asleep { background: color-mix(in srgb, var(--sleep) 12%, transparent); color: var(--ink); }
.pill.asleep .dot { background: var(--sleep); }

/* ======================================================================================================== */
/* New look (Phase 7, docs/design): green-tinted surfaces, a solid green sidebar in light mode, block icons,  */
/* coloured action buttons, tinted stat tiles, dashboard charts, pill tabs and a phone bar.   */
/* ======================================================================================================== */
body { font-size: 14.5px; }
.card { border-radius: var(--radius); }
.btn { border-radius: 12px; font-weight: 600; }
.btn.primary { font-weight: 650; }
.pill { font-weight: 620; }
.pill.running { background: color-mix(in srgb, var(--live) 18%, transparent); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--live) 35%, transparent); }
.pill.crashed { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--down) 35%, transparent); }
.pill.stopped .dot { background: var(--muted); }
.head h1, .dash-head h1 { font-size: 30px; font-weight: 750; letter-spacing: -.025em; }

/* block icons */
.block-ic { display: inline-block; flex: none; line-height: 0; }
.block-ic svg { width: 100%; height: 100%; display: block; }

/* ---- sidebar: solid green in light mode, deep green-black in dark ---- */
.side { background: var(--side); border-right-color: var(--side-line); color: var(--side-ink); padding: 18px 12px; }
.side .brand { color: var(--side-ink); gap: 12px; padding: 4px 8px 18px; align-items: center; border-bottom: 1px solid var(--side-line); margin-bottom: 10px; }
.side .brand .logo { width: 40px; height: 40px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand-txt b { font-size: 17px; font-weight: 760; letter-spacing: -.01em; }
.brand-txt span { font-size: 12px; font-weight: 520; color: var(--side-muted); }
.side .nav { color: var(--side-ink); height: 42px; border-radius: 12px; font-size: 15px; font-weight: 560; gap: 12px; }
.side .nav .ic { width: 19px; height: 19px; opacity: .9; }
.side .nav:hover { background: var(--side-hover); color: var(--side-ink); }
.side .nav.on { background: var(--side-on); box-shadow: none; color: var(--side-ink); font-weight: 680; }
.side .nav .count { color: var(--side-muted); }
.side .side-label { color: var(--side-ink); font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 18px 10px 8px; border-top: 1px solid var(--side-line); margin-top: 10px; }
.side .side-label .n { color: var(--side-muted); font-weight: 560; margin-left: 4px; }
.side .icon-btn-plain { color: var(--side-muted); }
.side .icon-btn-plain:hover { background: var(--side-hover); color: var(--side-ink); }
.side .side-sub { border-left-color: var(--side-line); }
.side .side-sub-label { color: var(--side-muted); }
.side .nav.sub { height: 32px; font-size: 13.5px; font-weight: 520; }
.side .nav.sub.on .ic { color: var(--side-ink); }
.side .srv-nav { height: auto; min-height: 50px; padding: 6px 10px; gap: 10px; align-items: center; }
/* each server's arrow: shows or hides its sections */
.side .srv-row { position: relative; }
.side .srv-row .srv-nav { padding-right: 38px; }
.side .srv-tog { position: absolute; right: 6px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--side-muted); cursor: pointer; }
.side .srv-tog:hover, .side .srv-tog:focus-visible { background: var(--side-hover, rgb(255 255 255 / .08)); color: var(--side-ink, inherit); outline: none; }
.side .srv-tog .ic { transition: rotate .15s ease; rotate: -90deg; }
.side .srv-tog.open .ic { rotate: 0deg; }
.side .srv-nav .srv-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.side .srv-nav .srv-t b { font-weight: 640; font-size: 14.5px; }
.side .srv-nav .srv-t span { font-size: 12.5px; color: var(--side-muted); }
.side .srv-nav .srv-t span.up { color: var(--accent); }
/* (the pale mint here was for the old green sidebar; the cream one uses the normal green) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .side .srv-nav .srv-t span.up { color: var(--accent); } }
.side .srv-nav .dot { flex: none; }
.side .side-foot { border-top-color: var(--side-line); }
.side .me-card { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--side-hover); color: var(--side-ink); text-decoration: none !important; margin-top: 6px; }
.side .me-card:hover { background: var(--side-on); }
/* the account at the foot of the sidebar: face (or letter), the whole name, an arrow to Account */
.side .me-card .me-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 680; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .me-card > .ic { flex: none; color: var(--side-muted); }
.side .me-card .head-img, .side .me-card .letter { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.side .me-card .letter { display: grid; place-items: center; font-size: 16px; font-weight: 750; line-height: 1; }
.side .letter { background: var(--side-on); color: var(--side-ink); }

/* ---- dashboard ---- */
.dash.new { display: flex; flex-direction: column; gap: 16px; }
.dash.new > * { margin-bottom: 0 !important; }
.dash-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dash-head .muted { font-size: 15.5px; margin-top: 2px; }
.dash-tools { margin-left: auto; display: flex; gap: 10px; align-items: center; flex: 1 1 320px; justify-content: flex-end; }
.dash-search { max-width: 460px; height: 44px; border-radius: 22px; padding-left: 16px; }
.bell { width: 44px; height: 44px; border-radius: 22px; position: relative; }
.bell.dot::after { content: ''; position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--down); box-shadow: 0 0 0 2px var(--card); }
.dash-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.btn.act { height: 52px; padding: 0 22px; border: 0; border-radius: 14px; font-size: 16.5px; font-weight: 680; color: var(--b-ink); flex: 1 1 150px; gap: 10px; box-shadow: 0 1px 0 rgb(0 0 0 / .06); }
.btn.act .ic { width: 20px; height: 20px; }
.btn.act:hover { filter: brightness(1.05); background: inherit; }
.act-start { background: var(--b-start) !important; } .act-stop { background: var(--b-stop) !important; } .act-restart { background: var(--b-restart) !important; }
.act-backup { background: var(--b-backup) !important; } .act-logs { background: var(--b-logs) !important; }
.btn.act-start, .btn.act-stop, .btn.act-restart, .btn.act-backup, .btn.act-logs { color: var(--b-ink); border-color: transparent; }
.focus-pick { height: 52px; border-radius: 14px; padding: 0 14px; gap: 10px; max-width: 220px; flex: 0 1 auto; font-size: 15px; }

/* tinted stat tiles: each in its measure's colour */
.kpis.tinted { margin-bottom: 0; }
.kpis.tinted .kpi { padding: 18px 20px; gap: 6px; border: 1px solid color-mix(in srgb, var(--mc) 30%, var(--line)); background: color-mix(in srgb, var(--mc) 14%, var(--card)); }
.kpi.m-cpu { --mc: var(--m-cpu); } .kpi.m-mem { --mc: var(--m-mem); } .kpi.m-disk { --mc: var(--m-disk); } .kpi.m-tps { --mc: var(--m-tps); } .kpi.m-play { --mc: var(--m-play); }
.kpis.tinted .k-v small { font-size: .5em; font-weight: 600; color: var(--ink-2); margin-left: 4px; }
.kpis.tinted .k-row { display: flex; gap: 14px; align-items: flex-start; }
.kpis.tinted .k-ic { color: var(--mc); line-height: 0; margin-top: 2px; }
.kpis.tinted .k-ic .ic { width: 34px; height: 34px; stroke-width: 1.8; }
.kpis.tinted .k-txt { min-width: 0; flex: 1; }
.kpis.tinted .k-l { font-size: 16px; font-weight: 700; color: var(--ink); }
.kpis.tinted .k-s { font-size: 13.5px; color: var(--ink-2); }
.kpis.tinted .k-v { font-size: 34px; font-weight: 780; }
.kpis.tinted .k-sp .spark { height: 34px; }
.kpis.tinted .k-b { font-size: 12.5px; }
.g-dash { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.dash .g-dash { gap: 16px 32px; } /* boxed cards: keep the space between them when they stack on phones */
.g-dash .card-h { gap: 10px; }
.g-dash .card-h > .ic { width: 20px; height: 20px; color: var(--ink-2); }
.g-dash .card-h h2 { font-size: 17px; font-weight: 720; }
.legend { display: flex; gap: 14px; font-size: 13px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i, .mchart-tip i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mchart { position: relative; width: 100%; }
.mchart-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mchart-grid { stroke: var(--line); stroke-width: 1; }
.mchart-ax { fill: var(--muted); font-size: 11.5px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.mchart-cross { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.mchart-tip { position: absolute; pointer-events: none; background: var(--card); border: 1px solid var(--line-strong); border-radius: 10px; padding: 7px 10px; font-size: 12.5px; box-shadow: var(--shadow-pop); white-space: nowrap; z-index: 2; }
.mchart-tip > div { display: flex; align-items: center; gap: 6px; }
.mchart-tt { color: var(--muted); font-size: 11.5px; margin-bottom: 2px; }
.mchart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.status-tbl td { vertical-align: middle; }
.status-tbl tr.click { cursor: pointer; }
.qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .qa-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.g-dash.one { grid-template-columns: minmax(0, 1fr); }
.btn.qa { height: 56px; border: 0; border-radius: 14px; font-size: 15.5px; font-weight: 680; justify-content: flex-start; padding: 0 18px; gap: 12px; color: var(--b-ink); }
.btn.qa .ic { width: 22px; height: 22px; }
.btn.qa .ic { flex: none; }
.btn.qa .qa-t { white-space: normal; line-height: 1.15; min-width: 0; overflow-wrap: anywhere; text-align: left; }
@media (max-width: 520px) { .qa-grid { gap: 10px; } .btn.qa { height: auto; min-height: 56px; padding: 8px 12px; gap: 9px; font-size: 14.5px; } .btn.qa .ic { width: 20px; height: 20px; } }
.srv-cards { display: none; flex-direction: column; gap: 12px; }
.srv-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; color: inherit; text-decoration: none !important; }
.srv-card .nm { font-size: 17px; font-weight: 720; margin-bottom: 4px; }
.srv-card-b { display: grid; grid-template-columns: auto auto 1fr; gap: 16px; align-items: center; color: var(--ink-2); padding-top: 10px; border-top: 1px solid var(--line); }
.srv-card-b .spark { height: 26px; }

/* server page header and pill tabs */
.ptabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 10px; margin-bottom: 4px; }
.ptabs::-webkit-scrollbar { display: none; }
.ptabs a { flex: none; height: 38px; padding: 0 16px; border-radius: 12px; display: inline-flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; text-decoration: none !important; }
.ptabs a.on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.ptabs { display: none; }

@media (max-width: 1100px) { .g-dash { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .head h1, .dash-head h1 { font-size: 26px; }
  .dash-tools { flex-basis: 100%; }
  .dash-search { max-width: none; flex: 1; }
  .dash-actions .btn.act { flex: 1 1 calc(50% - 6px); height: 50px; font-size: 15.5px; }
  .dash-actions .focus-pick { flex: 1 1 100%; max-width: none; }
  .kpis.tinted { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .kpis.tinted .kpi { padding: 14px; }
  .kpis.tinted .k-v { font-size: 26px; }
  .kpis.tinted .k-ic .ic { width: 26px; height: 26px; }
  .kpis.tinted .k-b { display: none; }
  .status-tbl, .g-dash > .card:has(.status-tbl) { display: none; }
  .srv-cards { display: flex; }
  .ptabs { display: flex; }
}
.meter.big { height: 12px; border-radius: 6px; }
.meter.big i { border-radius: 6px; background: var(--accent); }
.btn.act.wide { width: 100%; height: 54px; }
.add-btn { width: 44px; height: 44px; border-radius: 12px; }
.srv-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.srv-list .srv-card .nm { font-size: 18px; }
/* the new pages use separate rounded cards (the mockups), not the flat sections of the older pages */
.kpis.tinted { gap: 16px !important; background: none; border: 0; border-radius: 0; overflow: visible; }
.kpis.tinted > .card.kpi { border-radius: var(--radius); box-shadow: var(--shadow-card); }
.dash.new .card:not(.kpi) { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); border-radius: var(--radius); padding: 20px; }
.dash.new .card:not(.kpi) > .card-h { padding: 0; margin-bottom: 14px; }
.dash.new .card:not(.kpi) > .card-h h2 { font-size: 17px; text-transform: none; letter-spacing: -.01em; color: var(--ink); font-weight: 720; }
.dash.new .srv-card { padding: 16px; }
@media (max-width: 760px) { .kpis.tinted { gap: 10px !important; } .dash.new .card:not(.kpi) { padding: 16px; } }
/* server Overview tiles: separate, tinted by measure (players and uptime stay neutral) */
.kpis.tinted-lite { gap: 12px !important; background: none; border: 0; border-radius: 0; overflow: visible; }
.kpis.tinted-lite > .card.kpi { border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--mc) 28%, var(--line)); background: color-mix(in srgb, var(--mc) 12%, var(--card)); box-shadow: var(--shadow-card); }
.kpi.m-none { --mc: var(--muted); }
.kpis.tinted-lite > .card.kpi.m-none { background: var(--card); border-color: var(--line); }
.kpis.tinted-lite .k-sq { background: color-mix(in srgb, var(--mc) 18%, transparent); color: var(--mc); }
.ov-actions { display: none; }
@media (max-width: 760px) {
  .ov-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 16px; }
  .ov-actions .btn.act { height: 50px; font-size: 15.5px; }
  .main:has(.title-row) .topbar .title { visibility: hidden; }
}

.block-pick { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 420px; }
.block-pick button { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--soft); display: grid; place-items: center; cursor: pointer; padding: 0; }
.block-pick button:hover { border-color: var(--line-strong); }
.block-pick button.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }

.quickrow { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px 0; }
.quickrow:empty { display: none; }
.quickrow .chip { font-family: var(--mono); font-size: 12px; height: 26px; cursor: pointer; }
/* public pages (invite, status): no sidebar, one centred column */
.pub { min-height: 100dvh; display: flex; justify-content: center; padding: 28px 16px; }
.pub-wrap { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 14px; }
.pub-brand { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.pub-brand .logo { width: 32px; height: 32px; }
.pub .card.stack { gap: 12px; }
.pub .input { height: 46px; font-size: 16px; }
.pub .btn.act, .dash.new > div > .btn.act.wide { flex: none; }

.or-line { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* long unbroken text (paths, links, error messages) wraps instead of spilling out of its box on phones */
body { overflow-wrap: break-word; }
.empty .t, .err, .attn-item .t { overflow-wrap: anywhere; }
/* card titles: on narrow phones, let the extras (subtitle, legend, buttons) drop to a second line instead of crushing the title */
@media (max-width: 520px) { .card-h { flex-wrap: wrap; row-gap: 6px; } }
/* themed dropdowns (select.js): the button looks like the .select box; the list is a pop-up or, on phones, a sheet */
.select.tsel-native { display: none !important; }
.tsel { display: inline-flex; align-items: center; text-align: left; cursor: pointer; color: var(--ink); font-weight: inherit; }
.tsel:disabled { opacity: .55; cursor: default; }
.tsel-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsel.empty .tsel-l::before { content: "—"; color: var(--muted); }
.tsel-pop { display: flex; flex-direction: column; overflow: hidden; padding: 5px; }
.tsel-list { overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 1px; min-height: 0; }
.tsel-o { display: flex; width: 100%; align-items: center; gap: 10px; border: 0; background: none; min-height: 34px; padding: 6px 10px; border-radius: 8px; cursor: pointer; text-align: left; color: var(--ink); font: inherit; }
.tsel-o:hover, .tsel-o:focus-visible { background: var(--soft); outline: none; }
.tsel-o.on { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 620; }
.tsel-o:disabled { opacity: .4; pointer-events: none; }
.tsel-o[hidden], .tsel-g[hidden] { display: none; }
.tsel-ot { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tsel-ck { color: var(--accent); line-height: 0; flex: none; }
.tsel-g { font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px 4px; }
.tsel-f { margin: 0 0 5px; flex: none; }
.tsel-sheet { background: var(--card); width: 100%; border-radius: 18px 18px 0 0; box-shadow: var(--shadow-pop); max-height: 70dvh; display: flex; flex-direction: column; padding: 4px 10px calc(14px + env(safe-area-inset-bottom)); animation: tsel-up .18s ease-out; }
.tsel-sheet .tsel-o { min-height: 46px; font-size: 15.5px; padding: 8px 12px; border-radius: 10px; }
.tsel-sh { font-weight: 650; font-size: 16px; padding: 6px 12px 10px; }
.tsel-sheet .tsel-f { margin: 0 2px 8px; width: auto; height: 40px; }
@keyframes tsel-up { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.dash:not(.new) > .kpis.tinted { margin-bottom: 16px; } /* server Overview: space between the tiles and the buttons */
/* tile values: the main number never cuts off; an add-on like "/ 64 GB" drops to its own line when it does not fit */
.kpis.tinted .k-v { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; white-space: nowrap; overflow: visible; text-overflow: clip; }
.kpis.tinted .k-v small { margin-left: 0; }
@media (max-width: 760px) { .kpis.tinted .k-v { font-size: clamp(19px, 6.4vw, 26px); } } /* numbers shrink a little on small phones instead of spilling */

/* Automation: Backups | Tasks tabs */
.auto-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.auto-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--ink-2); font-weight: 600; text-decoration: none !important; white-space: nowrap; }
.auto-tab:hover { color: var(--ink); }
.auto-tab.on { color: var(--ink); border-bottom-color: var(--accent); }
/* backup schedules */
.plan-list { display: flex; flex-direction: column; gap: 8px; }
.plan { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.plan.off { opacity: .65; }
.plan-i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--pc) 16%, transparent); color: var(--pc); }
.plan-i.worlds { --pc: var(--m-tps); } .plan-i.all { --pc: var(--m-mem); } .plan-i.configs { --pc: var(--m-play); }
.plan-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan-t b { font-weight: 650; }
.plan-t .sub { font-size: 12.5px; color: var(--muted); }
@media (max-width: 760px) { .plan { flex-wrap: wrap; } .plan-t { flex-basis: calc(100% - 50px); } .plan .plan-a { margin-left: auto; } }
/* Servers page: the "New server" tile */
.add-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px; border: 2px dashed var(--line-strong); background: none; box-shadow: none; color: var(--ink-2); text-decoration: none !important; text-align: center; padding: 16px; transition: border-color .15s, color .15s, background .15s; }
.add-tile:hover, .add-tile:focus-visible { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 6%, transparent); outline: none; }
.add-tile-i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.add-tile-i .ic { width: 22px; height: 22px; }
.add-tile-t { font-weight: 700; font-size: 16px; color: var(--ink); }
.add-tile-s { font-size: 12.5px; color: var(--muted); }
.srv-list > .card.add-tile, .dash.new .srv-list > .card.add-tile { border: 2px dashed var(--line-strong); background: none; box-shadow: none; }
.srv-list > .card.add-tile:hover, .srv-list > .card.add-tile:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
/* the sidebar scrolls (wheel, trackpad, touch) without a scrollbar, so opening a server never changes its width */
.side { scrollbar-width: none; overscroll-behavior: contain; }
.side::-webkit-scrollbar { display: none; }
.mini-log, .joblog { border: 1px solid var(--line); } /* their edge shows on the light theme too */
/* tiles: four big ones, then (server, System) two small ones stacked in the last column */
.kpis.has-stack { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(220px, 1fr) !important; }
.kpis.has-stack.two { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(240px, 1fr) !important; }
.kpi-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kpis.tinted .kpi-stack > .kpi.mini { flex: 1; padding: 12px 14px; gap: 0; justify-content: center; }
.kpis.tinted .kpi.mini .k-row { align-items: flex-start; gap: 10px; }
.kpis.tinted .kpi.mini .k-ic { margin: 2px 0 0; }
.kpis.tinted .kpi.mini .k-ic .ic { width: 20px; height: 20px; }
.kpis.tinted .kpi.mini .k-txt { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "s s"; column-gap: 8px; row-gap: 2px; align-items: baseline; }
.kpis.tinted .kpi.mini .k-l { grid-area: l; font-size: 14px; }
.kpis.tinted .kpi.mini .k-s { grid-area: s; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpis.tinted .kpi.mini .k-v { grid-area: v; font-size: 19px; justify-self: end; }
.kpis.tinted .kpi.mini .k-sp { display: none; }
/* tile text always fits: the number scales with the tile's own width; the line under the label stays on two lines at most */
.kpis.tinted .kpi:not(.mini) { container-type: inline-size; }
.kpis.tinted .kpi:not(.mini) .k-v { font-size: clamp(20px, 12.5cqi, 34px); }
.kpis.tinted .kpi:not(.mini) .k-s { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@container (max-width: 230px) { .kpis.tinted .k-row { gap: 10px; } .kpis.tinted .k-ic .ic { width: 26px; height: 26px; } }
@media (max-width: 1250px) { .kpis.has-stack { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .kpis.has-stack > .kpi-stack { grid-column: 1 / -1; flex-direction: row; } .kpis.has-stack > .kpi-stack > .kpi.mini { flex: 1 1 0; } }
@media (max-width: 1250px) { .kpis.has-stack.two { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 520px) { .kpis.has-stack > .kpi-stack { flex-direction: column; } }

/* ===================================================================================================================
 * Craftlio v2 (docs/design): shell, header and shared components. The tokens at the top carry most of the change;
 * these rules give the kit's shapes: a 256px sidebar with a filled active row, a top bar with search / bell /
 * account, 14px cards with fine borders and no shadows, 12px controls, Inter.
 * =================================================================================================================== */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
body { font-size: 14.5px; font-feature-settings: "cv11", "ss01"; }
h1, h2, h3 { letter-spacing: -.015em; }

/* ---- shell ---- */
@media (min-width: 761px) { .shell { grid-template-columns: 256px minmax(0, 1fr); } }
.side { padding: 20px 16px 0; gap: 4px; }
.side .brand { border-bottom: 0; padding: 2px 6px 22px; margin-bottom: 4px; gap: 12px; }
.side .brand .logo { width: 44px; height: 44px; }
.brand-txt b { font-size: 21px; font-weight: 780; letter-spacing: -.02em; }
.brand-txt span { font-size: 12px; color: var(--side-muted); }
.side .nav { height: 46px; padding: 0 14px; gap: 14px; font-size: 15.5px; font-weight: 560; border-radius: 12px; color: var(--side-ink); }
.side .nav .ic { width: 21px; height: 21px; }
.side .nav.on { background: var(--side-on); box-shadow: inset 0 0 0 1px var(--side-on-line); font-weight: 680; }
.side .side-label { border-top: 1px solid var(--side-line); font-size: 13px; font-weight: 650; color: var(--side-muted); text-transform: uppercase; letter-spacing: .05em; padding: 16px 10px 6px; }
.side .side-label .n { color: var(--side-muted); }
.side .srv-nav { height: auto; min-height: 50px; padding: 6px 10px; }
.side .nav.sub { height: 34px; font-size: 14px; padding: 0 10px; gap: 10px; }
.side .nav.sub .ic { width: 16px; height: 16px; }
.side .nav.sub.on { box-shadow: inset 0 0 0 1px var(--side-on-line); }
.side .side-foot { margin-top: auto; padding: 20px 0 0; border-top: 0; }
.side-pixels { height: 96px; margin: 0 -16px; background: var(--pixels) left bottom / 192px 96px no-repeat; pointer-events: none; }
:root { --pixels: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 96'%3E%3Cg fill='%237cb98c'%3E%3Crect x='48' y='0' width='24' height='24' opacity='.55'/%3E%3Crect x='0' y='24' width='24' height='24' opacity='.35'/%3E%3Crect x='24' y='24' width='24' height='24' opacity='.6'/%3E%3Crect x='120' y='24' width='24' height='24' opacity='.4'/%3E%3Crect x='0' y='48' width='24' height='24' opacity='.7'/%3E%3Crect x='72' y='48' width='24' height='24' opacity='.45'/%3E%3Crect x='96' y='48' width='24' height='24' opacity='.6'/%3E%3Crect x='144' y='48' width='24' height='24' opacity='.3'/%3E%3Crect x='0' y='72' width='24' height='24' opacity='.5'/%3E%3Crect x='24' y='72' width='24' height='24' opacity='.75'/%3E%3Crect x='48' y='72' width='24' height='24' opacity='.4'/%3E%3Crect x='96' y='72' width='24' height='24' opacity='.55'/%3E%3Crect x='120' y='72' width='24' height='24' opacity='.35'/%3E%3C/g%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pixels: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 96'%3E%3Cg fill='%234f9a62'%3E%3Crect x='48' y='0' width='24' height='24' opacity='.45'/%3E%3Crect x='0' y='24' width='24' height='24' opacity='.3'/%3E%3Crect x='24' y='24' width='24' height='24' opacity='.5'/%3E%3Crect x='120' y='24' width='24' height='24' opacity='.35'/%3E%3Crect x='0' y='48' width='24' height='24' opacity='.6'/%3E%3Crect x='72' y='48' width='24' height='24' opacity='.4'/%3E%3Crect x='96' y='48' width='24' height='24' opacity='.5'/%3E%3Crect x='144' y='48' width='24' height='24' opacity='.25'/%3E%3Crect x='0' y='72' width='24' height='24' opacity='.45'/%3E%3Crect x='24' y='72' width='24' height='24' opacity='.65'/%3E%3Crect x='48' y='72' width='24' height='24' opacity='.35'/%3E%3Crect x='96' y='72' width='24' height='24' opacity='.5'/%3E%3Crect x='120' y='72' width='24' height='24' opacity='.3'/%3E%3C/g%3E%3C/svg%3E"); } }
:root[data-theme="dark"] { --pixels: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 96'%3E%3Cg fill='%234f9a62'%3E%3Crect x='48' y='0' width='24' height='24' opacity='.45'/%3E%3Crect x='0' y='24' width='24' height='24' opacity='.3'/%3E%3Crect x='24' y='24' width='24' height='24' opacity='.5'/%3E%3Crect x='120' y='24' width='24' height='24' opacity='.35'/%3E%3Crect x='0' y='48' width='24' height='24' opacity='.6'/%3E%3Crect x='72' y='48' width='24' height='24' opacity='.4'/%3E%3Crect x='96' y='48' width='24' height='24' opacity='.5'/%3E%3Crect x='144' y='48' width='24' height='24' opacity='.25'/%3E%3Crect x='0' y='72' width='24' height='24' opacity='.45'/%3E%3Crect x='24' y='72' width='24' height='24' opacity='.65'/%3E%3Crect x='48' y='72' width='24' height='24' opacity='.35'/%3E%3Crect x='96' y='72' width='24' height='24' opacity='.5'/%3E%3Crect x='120' y='72' width='24' height='24' opacity='.3'/%3E%3C/g%3E%3C/svg%3E"); }
@media (max-height: 760px) { .side-pixels { height: 64px; background-size: 128px 64px; } }

/* ---- the top bar ---- */
.main { padding: 0 32px 64px; }
.topbar.appbar { display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 30; height: 76px; margin: 0 -32px 28px; padding: 0 32px;
  background: var(--page); border-bottom: 1px solid var(--line); backdrop-filter: none; }
.appbar .app-logo, .appbar > .title { display: none; }
.app-search { display: flex; align-items: center; gap: 12px; flex: 0 1 560px; min-width: 0; height: 46px; padding: 0 8px 0 16px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--soft); color: var(--muted); font: inherit; font-size: 15px; cursor: text; text-align: left; }
.app-search:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
.app-search:focus-visible { outline: none; box-shadow: var(--focus); border-color: var(--accent); }
.app-search .ic { width: 19px; height: 19px; flex: none; color: var(--ink-2); }
.app-search-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-search kbd, .pal kbd { font: 600 12px/1 var(--font); color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 7px; padding: 6px 8px; background: var(--card); }
.app-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.app-btn { width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; position: relative; }
.app-btn:hover { background: var(--soft); }
.app-btn:focus-visible, .app-me:focus-visible { outline: none; box-shadow: var(--focus); }
.app-btn .ic { width: 22px; height: 22px; }
.app-btn.bell.dot::after { content: ''; position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px var(--page); }
.app-search-ic { display: none; }
.app-sep { width: 1px; height: 30px; background: var(--line-strong); margin: 0 6px; }
.app-me { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 4px; border: 0; border-radius: 12px; background: none; color: var(--ink-2); cursor: pointer; }
.app-me:hover { background: var(--soft); }
.app-me .head-img, .app-me .letter { width: 38px; height: 38px; border-radius: 10px; font-size: 16px; }
@media (max-width: 760px) {
  .main { padding: 0 16px 80px; }
  .topbar.appbar { height: 60px; gap: 10px; margin: 0 -16px 16px; padding: 0 12px 0 16px; background: color-mix(in srgb, var(--page) 94%, transparent); backdrop-filter: blur(10px); }
  .appbar .app-logo { display: grid; place-items: center; }
  .appbar .app-logo .logo { width: 30px; height: 30px; }
  .appbar > .title { display: flex; flex: 1; min-width: 0; font-weight: 700; font-size: 16.5px; align-items: center; gap: 8px; }
  .app-search { display: none; }
  .app-search-ic { display: grid; }
  .app-r { gap: 2px; }
  .app-sep, .app-me > .ic { display: none; }
  .app-me { padding: 0 2px; }
  .app-me .head-img, .app-me .letter { width: 34px; height: 34px; }
}

/* ---- search (Ctrl K) ---- */
.modal.pal { width: min(640px, 100%); }
.modal.pal .mb { gap: 10px; padding-bottom: 16px; }
.pal-in { height: 48px; font-size: 16px; border-radius: 12px; }
.pal-list { display: flex; flex-direction: column; gap: 2px; max-height: min(56vh, 460px); overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 6px; }
.pal-kind { font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 8px 4px; }
.pal-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.pal-row.on { background: var(--soft); box-shadow: inset 0 0 0 1px var(--line-strong); }
.pal-lead { width: 28px; display: grid; place-items: center; flex: none; color: var(--ink-2); }
.pal-lead .ic { width: 19px; height: 19px; }
.pal-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.pal-t b { font-weight: 620; }
.pal-t span { font-size: 12.5px; color: var(--muted); }
.pal-go { color: var(--muted); opacity: 0; }
.pal-row.on .pal-go { opacity: 1; }
.pal-empty { padding: 24px 8px; text-align: center; color: var(--muted); }

/* ---- shared components ---- */
.card { border-radius: var(--radius); border-color: var(--line); box-shadow: none; }
.btn { height: 40px; padding: 0 16px; border-radius: var(--radius-c); font-weight: 620; background: var(--soft); border-color: var(--line-strong); }
.btn:hover { background: var(--surface-hover, color-mix(in srgb, var(--ink) 6%, var(--soft))); }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 680; }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.btn.ghost { background: none; border-color: transparent; }
.btn.sm { height: 32px; padding: 0 12px; border-radius: 10px; }
.btn.icon { width: 40px; padding: 0; }
.btn.sm.icon { width: 32px; }
.btn.danger { color: var(--coral); }
.btn.danger.solid { background: var(--coral); color: var(--b-ink); }
.input, .select, textarea.input { height: 40px; border-radius: var(--radius-c); background: var(--soft); border-color: var(--line-strong); padding: 0 13px; }
textarea.input { height: auto; padding: 10px 13px; }
.input:focus, .select:focus { border-color: var(--accent); box-shadow: var(--focus); }
.pill { height: 28px; padding: 0 11px; font-weight: 620; }
.pill.running { background: var(--mint-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mint) 35%, transparent); color: var(--mint); }
.pill.crashed { background: var(--coral-tint); color: var(--coral); }
.pill.stopped { color: var(--ink-2); }
.chip { border-radius: 999px; padding: 0 9px; }
.chip.good { background: var(--mint-tint); color: var(--mint); }
.chip.bad { background: var(--coral-tint); color: var(--coral); }
.chip.warn { background: var(--amber-tint); color: var(--amber); }
.card-h { margin-bottom: 16px; gap: 12px; }
.card-h > .ic { width: 22px; height: 22px; color: var(--ink-2); }
.card-h h2 { font-size: 18px; font-weight: 720; }
.seg { border-radius: 12px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.seg button.on, .seg .segbtn.on { background: var(--card); box-shadow: inset 0 0 0 1px var(--line-strong); }
.menu { border-radius: 12px; background: var(--card); }
.modal { border-radius: 16px; background: var(--card); box-shadow: var(--shadow-pop); }
.toast { background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); }
.toast.bad .ic { color: var(--coral); }
.toast.good .ic { color: var(--mint); }
.toast button { background: var(--soft); color: var(--ink); }
.tbl th { color: var(--muted); }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--ink) 4%, transparent); }
:focus-visible { outline-color: var(--accent); }
@media (max-width: 760px) {
  .bottomnav { background: color-mix(in srgb, var(--side) 96%, transparent); }
  .bottomnav .bn.on .bn-i { background: var(--side-on); color: var(--ink); box-shadow: inset 0 0 0 1px var(--side-on-line); }
}

/* ---- v2 dashboard (references/01-approved-dashboard.png) ---- */
.dash.v2 { display: flex; flex-direction: column; gap: 20px; }
.dash.v2 > * { margin: 0 !important; }
.dash.v2 .card:not(.kpi) { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; padding: 22px 24px; border-top: 1px solid var(--line); }
.dash.v2 .card:not(.kpi) > .card-h { padding: 0; margin-bottom: 16px; }
.dash.v2 .card:not(.kpi) > .card-h h2 { font-size: 19px; text-transform: none; letter-spacing: -.015em; color: var(--ink); font-weight: 720; }
.dash-head.v2 { display: flex; align-items: center; gap: 16px; }
.dash-head.v2 h1 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 780; letter-spacing: -.025em; }
.dash-head.v2 .muted { font-size: 16px; margin-top: 6px; color: var(--ink-2); }
.dash-head.v2 .wave { display: inline-block; font-size: .9em; }
.head-pixels { margin-left: auto; width: 104px; height: 56px; flex: none; opacity: .9;
  background:
    linear-gradient(var(--px-a), var(--px-a)) 26px 0 / 26px 26px no-repeat,
    linear-gradient(var(--px-b), var(--px-b)) 78px 0 / 26px 26px no-repeat,
    linear-gradient(var(--px-b), var(--px-b)) 0 28px / 26px 26px no-repeat,
    linear-gradient(var(--px-a), var(--px-a)) 52px 28px / 26px 26px no-repeat; }
:root { --px-a: #bfe0c9; --px-b: #d6ebdc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --px-a: #2e4a38; --px-b: #253a2d; } }
:root[data-theme="dark"] { --px-a: #2e4a38; --px-b: #253a2d; }

/* tiles: a pastel tint and border, coloured icon, cream number, a small badge */
.kpis.tinted.sum, .kpis.tinted.pc { display: grid; gap: 20px !important; background: none; border: 0; border-radius: 0; overflow: visible; margin: 0; }
.kpis.tinted.sum { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis.tinted.pc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px !important; }
.kpi.m-srv { --mc: var(--teal); --mt: var(--teal-tint); } .kpi.m-play { --mt: var(--amber-tint); } .kpi.m-tps { --mt: var(--mint-tint); }
.kpi.m-up { --mc: var(--lavender); --mt: var(--lavender-tint); } .kpi.m-cpu { --mt: var(--coral-tint); } .kpi.m-mem { --mt: color-mix(in srgb, var(--m-mem) 14%, var(--card)); }
.kpi.m-disk { --mt: var(--lavender-tint); }
.dash.v2 .kpis.tinted > .card.kpi { background: var(--mt, color-mix(in srgb, var(--mc) 14%, var(--card))); border: 1px solid color-mix(in srgb, var(--mc) 55%, transparent); border-radius: var(--radius); box-shadow: none; padding: 20px 22px; }
.dash.v2 .kpis.tinted .k-row { display: flex; gap: 18px; align-items: center; }
.dash.v2 .kpis.tinted .k-ic { color: var(--mc); margin: 0; }
.dash.v2 .kpis.tinted .k-ic .ic { width: 40px; height: 40px; stroke-width: 1.9; }
.dash.v2 .kpis.tinted .k-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; flex: 1; }
.dash.v2 .kpis.tinted .k-l { font-size: 16px; font-weight: 650; color: var(--ink); }
.dash.v2 .kpis.tinted .kpi:not(.compact) .k-v { font-size: clamp(24px, 13cqi, 34px); font-weight: 780; line-height: 1.1; letter-spacing: -.02em; }
.k-badge { display: inline-flex; align-items: center; gap: 7px; height: 28px; max-width: 100%; margin-top: 8px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--mc) 22%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--mc); flex: none; }
.k-badge.good i { background: var(--mint); } .k-badge.warn i { background: var(--amber); } .k-badge.bad i { background: var(--coral); }
.dash.v2 .kpis.tinted .kpi.compact { padding: 14px 18px; }
.dash.v2 .kpis.tinted .kpi.compact .k-row { gap: 14px; }
.dash.v2 .kpis.tinted .kpi.compact .k-ic .ic { width: 28px; height: 28px; }
.dash.v2 .kpis.tinted .kpi.compact .k-txt { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "l v" "s s"; column-gap: 10px; align-items: baseline; }
.dash.v2 .kpis.tinted .kpi.compact .k-l { grid-area: l; font-size: 15px; }
.dash.v2 .kpis.tinted .kpi.compact .k-v { grid-area: v; font-size: 22px; font-weight: 760; justify-self: start; }
.dash.v2 .kpis.tinted .kpi.compact .k-s { grid-area: s; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }
.dash.v2 .kpis.tinted .kpi.compact .k-sp { width: 34%; max-width: 140px; flex: none; }
.dash.v2 .kpis.tinted .kpi.compact .k-sp .spark { height: 36px; width: 100%; }
.dash.v2 .kpis.tinted > .card.kpi.click:hover { border-color: var(--mc); background: color-mix(in srgb, var(--mc) 8%, var(--mt)) !important; }

/* rows: chart + status (about 58 / 42), activity + quick actions (50 / 50) */
.dash-row { display: grid; gap: 20px; }
.dash-row.r58 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.dash-row.r50 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1180px) { .dash-row.r58, .dash-row.r50 { grid-template-columns: minmax(0, 1fr); } }
.perf .card-h { flex-wrap: wrap; }
.perf .card-h .r { gap: 10px; }
.perf-range { width: auto; min-width: 150px; }
.perf .legend { display: flex; gap: 16px; align-items: center; font-size: 13.5px; color: var(--ink-2); margin: -4px 0 10px; }
.perf .legend span { display: inline-flex; align-items: center; gap: 7px; }
.perf-note { margin-top: 8px; }
.link-btn { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 4px 6px; border-radius: 8px; color: var(--accent); font: inherit; font-weight: 620; font-size: 14px; cursor: pointer; text-decoration: none !important; }
.link-btn:hover { background: var(--soft); }

/* server status list */
.st-list { display: flex; flex-direction: column; gap: 10px; }
.st-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); color: var(--ink); text-decoration: none !important; min-width: 0; }
.st-row:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--ink) 4%, var(--soft)); }
.st-row:focus-visible { outline: none; box-shadow: var(--focus); }
.st-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.st-t b { font-size: 16px; font-weight: 700; }
.st-t span { font-size: 13px; color: var(--ink-2); }
.st-p { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 14px; min-width: 64px; justify-content: flex-end; }
.st-go { color: var(--muted); line-height: 0; }
.srv-pic.has-img img { width: 100%; height: 100%; border-radius: 10px; image-rendering: pixelated; object-fit: cover; display: block; }

/* recent activity */
.ev-list { display: flex; flex-direction: column; }
.ev { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 8px 4px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none !important; min-width: 0; }
.ev-list > .ev:first-child { border-top: 0; }
a.ev:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); border-radius: 10px; }
.ev-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.ev-ic .ic { width: 19px; height: 19px; }
.ev-ic.mint { background: var(--mint-tint); color: var(--mint); } .ev-ic.coral { background: var(--coral-tint); color: var(--coral); }
.ev-ic.amber { background: var(--amber-tint); color: var(--amber); } .ev-ic.lavender { background: var(--lavender-tint); color: var(--lavender); }
.ev-ic.teal { background: var(--teal-tint); color: var(--teal); }
.ev-t { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 15px; font-weight: 560; line-height: 1.3; }
.ev-s { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.ev-at { font-size: 13px; color: var(--ink-2); white-space: nowrap; flex: none; }

/* quick actions: four tinted tiles */
.qa2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.qa2 { --qc: var(--mint); --qt: var(--mint-tint); display: flex; align-items: center; gap: 16px; min-height: 92px; padding: 16px 18px; border-radius: var(--radius); border: 1.5px solid color-mix(in srgb, var(--qc) 70%, transparent);
  background: var(--qt); color: var(--ink); text-align: left; font: inherit; cursor: pointer; text-decoration: none !important; min-width: 0; }
.qa2.coral { --qc: var(--coral); --qt: var(--coral-tint); } .qa2.amber { --qc: var(--amber); --qt: var(--amber-tint); }
.qa2.lavender { --qc: var(--lavender); --qt: var(--lavender-tint); } .qa2.teal { --qc: var(--teal); --qt: var(--teal-tint); }
.qa2:hover { border-color: var(--qc); background: color-mix(in srgb, var(--qc) 10%, var(--qt)); }
.qa2:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--qc) 40%, transparent); }
.qa2:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.qa2-i { color: var(--qc); line-height: 0; flex: none; }
.qa2-i .ic { width: 34px; height: 34px; stroke-width: 1.9; }
.qa2-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1.25; }
.qa2-t b { font-size: 17px; font-weight: 720; }
.qa2-t span { font-size: 13.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa2-more { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 14px; }
.quick .focus-pick { max-width: 220px; gap: 8px; }

/* tablets and phones */
@media (max-width: 1250px) { .kpis.tinted.sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .kpis.tinted.pc { grid-template-columns: minmax(0, 1fr); gap: 10px !important; } }
@media (max-width: 760px) {
  .dash.v2 { gap: 14px; }
  .dash-head.v2 h1 { font-size: 24px; }
  .dash-head.v2 .muted { font-size: 14.5px; }
  .head-pixels { display: none; }
  .kpis.tinted.sum { gap: 12px !important; }
  .dash.v2 .kpis.tinted > .card.kpi { padding: 14px; }
  .dash.v2 .kpis.tinted .kpi:not(.compact) .k-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dash.v2 .kpis.tinted .kpi:not(.compact) .k-ic .ic { width: 28px; height: 28px; }
  .dash.v2 .kpis.tinted .kpi:not(.compact) .k-v { font-size: clamp(22px, 7vw, 28px); }
  .k-badge { height: 24px; padding: 0 9px; font-size: 12px; margin-top: 6px; }
  .dash.v2 .card:not(.kpi) { padding: 16px; }
  .dash.v2 .card:not(.kpi) > .card-h h2 { font-size: 17px; }
  .perf .card-h .r { width: 100%; margin-left: 0; justify-content: space-between; }
  .st-row { padding: 10px; gap: 10px; }
  .st-row .pill { height: 24px; padding: 0 8px; font-size: 12px; }
  .st-p { min-width: 0; }
  .st-t b { font-size: 15px; }
  .qa2-grid { gap: 10px; }
  .qa2 { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; padding: 14px; }
  .qa2-i .ic { width: 26px; height: 26px; }
  .qa2-t b { font-size: 15.5px; }
  .qa2-t span { white-space: normal; font-size: 12.5px; }
  .ev-at { font-size: 12px; }
}
@media (max-width: 420px) { .st-row .st-p { display: none; } }
.perf .card-h .r .seg button { flex: none; }
.perf .card-h .tsel { width: auto; min-width: 150px; height: 36px; border-radius: 10px; font-size: 14px; font-weight: 560; }
@media (max-width: 760px) { .perf .card-h .tsel { min-width: 0; } }

/* ---- v2 Servers (references/02-approved-servers.png) ---- */
.servers-v2 { display: flex; flex-direction: column; gap: 20px; }
.sv-head { display: flex; align-items: center; gap: 16px; }
.sv-head h1 { margin: 0; font-size: 34px; font-weight: 780; letter-spacing: -.025em; line-height: 1.1; }
.sv-head .muted { font-size: 16px; color: var(--ink-2); margin-top: 4px; }
.sv-head .add-srv { margin-left: auto; height: 46px; padding: 0 22px; font-size: 16px; border-radius: 12px; }
.sv-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.sv-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sv-tools { display: flex; gap: 12px; align-items: center; }
.srv-search { height: 46px; font-size: 15.5px; border-radius: 12px; flex: 1; }
.vtoggle { display: flex; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; flex: none; }
.vt { width: 50px; height: 44px; border: 0; background: var(--soft); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.vt + .vt { border-left: 1px solid var(--line-strong); }
.vt.on { background: var(--accent); color: var(--on-accent); }
.vt:focus-visible { outline: none; box-shadow: inset var(--focus); }
.vt .ic { width: 20px; height: 20px; }
.srv-rows { display: flex; flex-direction: column; gap: 14px; }
.srv-rows.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* one server as a row */
.sv-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(250px, 1.1fr) auto; align-items: center; gap: 22px; padding: 14px 18px 14px 14px; color: var(--ink); text-decoration: none !important; }
.sv-row:hover, .sv-card:hover { border-color: var(--line-strong); }
.sv-row.up { border-color: color-mix(in srgb, var(--mint) 45%, var(--line)); }
.sv-row:focus-visible, .sv-card:focus-visible { outline: none; box-shadow: var(--focus); }
.sv-pic .block-ic, .sv-pic .srv-pic { border-radius: 12px; }
.sv-pic { line-height: 0; padding: 4px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); }
.sv-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sv-nm { font-size: 21px; font-weight: 760; letter-spacing: -.015em; line-height: 1.2; }
.sv-st { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 640; color: var(--ink-2); }
.sv-st i { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.sv-st.running { color: var(--mint); } .sv-st.running i { background: var(--mint); }
.sv-st.stopped { color: var(--coral); } .sv-st.stopped i { background: var(--coral); }
.sv-st.crashed { color: var(--coral); } .sv-st.crashed i { background: var(--coral); }
.sv-st.starting, .sv-st.stopping, .sv-st.installing { color: var(--amber); } .sv-st.starting i, .sv-st.stopping i, .sv-st.installing i { background: var(--amber); }
.sv-st.asleep { color: var(--lavender); } .sv-st.asleep i { background: var(--lavender); }
.sv-meta { display: flex; align-items: center; gap: 14px; font-size: 14.5px; color: var(--ink-2); min-width: 0; }
.sv-pl { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sv-note { grid-column: 2 / -1; font-size: 12.5px; color: var(--coral); margin-top: -10px; }
.mts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-left: 22px; border-left: 1px solid var(--line); }
.mt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mt.m-cpu { --mc: var(--m-cpu); } .mt.m-mem { --mc: var(--m-mem); } .mt.m-tps { --mc: var(--m-tps); }
.mt-l { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.mt-v { font-size: 20px; font-weight: 740; letter-spacing: -.01em; white-space: nowrap; }
.mt-bar { height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 4px; }
.mt-bar i { display: block; height: 100%; border-radius: 999px; background: var(--mc); }
.sv-act { display: flex; align-items: center; gap: 6px; }
.pw { width: 60px; height: 46px; border-radius: 12px; border: 0; display: grid; place-items: center; cursor: pointer; }
.pw .ic { width: 22px; height: 22px; fill: currentColor; }
.pw.start { background: var(--b-start); color: var(--b-ink); }
.pw.stop { background: var(--b-stop); color: var(--b-ink); }
.pw:hover { filter: brightness(1.06); }
.pw:disabled { background: var(--soft); color: var(--muted); cursor: not-allowed; filter: none; }
.pw:focus-visible, .more:focus-visible { outline: none; box-shadow: var(--focus); }
.more { width: 36px; height: 46px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.more:hover { background: var(--soft); color: var(--ink); }
.sv-add { min-height: 110px; }
.srv-rows.grid .sv-add { min-height: 220px; }

/* grid view card */
.sv-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; color: var(--ink); text-decoration: none !important; min-width: 0; }
.sv-card.up { border-color: color-mix(in srgb, var(--mint) 45%, var(--line)); }
.sv-card-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sv-card-top .sv-id { flex: 1; }
.sv-card .sv-nm { font-size: 18px; }
.sv-card .pw { width: 48px; height: 42px; }
.sv-card .more { height: 42px; }
.sv-card .sv-meta .k-sp { margin-left: auto; width: 90px; }
.sv-card .sv-meta .spark { height: 24px; width: 100%; }
.sv-card .mts { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); }

/* the column beside */
.srv-rail { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.rail-card { padding: 20px !important; }
.rail-card .card-h { margin-bottom: 14px; }
.rail-card .card-h h2 { font-size: 18px; }
.qa3-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qa3 { --qc: var(--mint); --qt: var(--mint-tint); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; padding: 12px 8px; border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--qc) 70%, transparent); background: var(--qt); color: var(--ink); font: inherit; font-size: 15.5px; font-weight: 680; cursor: pointer; text-decoration: none !important; text-align: center; }
.qa3 .ic { width: 28px; height: 28px; color: var(--qc); }
.qa3.teal { --qc: var(--teal); --qt: var(--teal-tint); } .qa3.amber { --qc: var(--amber); --qt: var(--amber-tint); } .qa3.lavender { --qc: var(--lavender); --qt: var(--lavender-tint); }
.qa3:hover { border-color: var(--qc); background: color-mix(in srgb, var(--qc) 10%, var(--qt)); }
.qa3:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--qc) 40%, transparent); }
.nv { display: flex; flex-direction: column; }
.nv-row { display: flex; align-items: center; gap: 14px; min-height: 42px; border-top: 1px solid var(--line); font-size: 15px; }
.nv-row:first-child { border-top: 0; }
.nv-row .ic { width: 20px; height: 20px; color: var(--ink-2); flex: none; }
.nv-row span { flex: 1; min-width: 0; color: var(--ink); }
.nv-row b { font-weight: 720; }
.ev-list.compact .ev { min-height: 46px; gap: 12px; padding: 6px 2px; }
.ev-list.compact .ev-ic { width: 32px; height: 32px; border-radius: 9px; }
.ev-list.compact .ev-ic .ic { width: 16px; height: 16px; }
.ev-list.compact .ev-t { font-size: 14px; }
.ev-list.compact .ev-at { font-size: 12.5px; }

@media (max-width: 1300px) { .sv-row { grid-template-columns: auto minmax(0, 1fr) auto; } .sv-row .mts { grid-column: 1 / -1; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); } .sv-row .sv-act { grid-column: 3; grid-row: 1; } }
@media (max-width: 1100px) { .sv-layout { grid-template-columns: minmax(0, 1fr); } .srv-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
@media (max-width: 760px) {
  .servers-v2 { gap: 14px; }
  .sv-head h1 { font-size: 26px; }
  .sv-head .muted { font-size: 14.5px; }
  .sv-head .add-srv { height: 42px; padding: 0 14px; font-size: 15px; }
  .srv-search { height: 44px; }
  .sv-row { gap: 12px; padding: 12px; }
  .sv-pic { padding: 3px; }
  .sv-pic .block-ic { width: 52px !important; height: 52px !important; }
  .sv-nm { font-size: 18px; }
  .sv-st { font-size: 14px; }
  .sv-meta { font-size: 13.5px; gap: 10px; }
  .pw { width: 48px; height: 44px; }
  .more { width: 32px; height: 44px; }
  .mts { gap: 12px; }
  .mt-v { font-size: 17px; }
  .srv-rows.grid { grid-template-columns: minmax(0, 1fr); }
  .srv-rail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) { .dash.v2 .kpis.tinted.pc { grid-template-columns: minmax(0, 1fr) !important; } }
@media (max-width: 760px) { .app-me > :not(.head-img):not(.letter) { display: none; } .dash.v2 .kpis.tinted.sum { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.app-me-ch { display: grid; place-items: center; }
@media (max-width: 760px) { .app-me-ch { display: none; } }
@media (min-width: 1101px) { .srv-rail { position: sticky; top: 100px; } }
.side > * { flex-shrink: 0; } /* a long server list scrolls the sidebar instead of squashing its links */
/* sign in: flat, no glow (v2) */
.auth-wrap { background: var(--page); }
.auth .brand { font-size: 24px; font-weight: 780; gap: 12px; }
.auth .logo { width: 44px; height: 44px; }
.auth form.card { padding: 24px; gap: 16px; }
.app-me .letter { background: var(--mint-tint); color: var(--mint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mint) 40%, transparent); }

/* ---- v2 server pages: header, section tabs (references/03-server-overview-concept.png, provisional) ---- */
.srv-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.crumb { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; color: var(--ink-2); font-size: 15px; font-weight: 600; padding: 4px 8px 4px 2px; border-radius: 8px; text-decoration: none !important; }
.crumb:hover { color: var(--ink); background: var(--soft); }
.srv-hero { display: flex; align-items: center; gap: 22px; padding: 16px 20px 16px 16px; }
.hero-pic { padding: 4px; }
.hero-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.hero-n { display: flex; align-items: center; gap: 16px; min-width: 0; flex-wrap: wrap; }
.hero-n h1 { margin: 0; font-size: 32px; font-weight: 780; letter-spacing: -.025em; line-height: 1.1; min-width: 0; }
.hero-n .sv-st { font-size: 17px; }
.hero-m { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16px; color: var(--ink-2); }
.hero-m .chip { height: 26px; font-size: 12.5px; cursor: pointer; border: 0; }
.dotsep { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.hero-a { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.btn.pwr { height: 46px; padding: 0 20px; font-size: 16px; font-weight: 700; border: 0; color: var(--b-ink); gap: 9px; }
.btn.pwr .ic { width: 19px; height: 19px; }
.btn.pwr.start { background: var(--b-start); } .btn.pwr.restart { background: var(--b-restart); } .btn.pwr.stop { background: var(--b-stop); }
.btn.pwr:hover { filter: brightness(1.06); }
.btn.pwr:disabled { background: var(--soft); color: var(--muted); opacity: 1; box-shadow: inset 0 0 0 1px var(--line); }
.btn.pwr-more { width: 46px; height: 46px; }
/* section tabs: on every screen size now (the sidebar keeps its list too) */
.ptabs { display: flex !important; gap: 6px; padding: 0 0 2px; margin-bottom: 18px; }
.ptabs a { height: 44px; padding: 0 16px; gap: 9px; font-size: 15px; font-weight: 600; border-radius: 12px; background: none; border: 1px solid transparent; color: var(--ink); }
.ptabs a .ic { width: 18px; height: 18px; color: var(--ink-2); }
.ptabs a:hover { background: var(--soft); }
.ptabs a.on { background: var(--side-on); color: var(--ink); border-color: var(--side-on-line); }
.ptabs a.on .ic { color: var(--ink); }

/* overview tiles: five (six with the network helper) */
.kpis.tinted.ov-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px !important; background: none; border: 0; border-radius: 0; overflow: visible; margin: 0; }
.kpis.tinted.ov-tiles.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi.m-net { --mc: var(--teal); --mt: var(--teal-tint); }
.ov2 .kpis.tinted > .card.kpi { padding: 16px 18px; }
.ov2 .kpis.tinted .k-row { gap: 14px; align-items: flex-start; }
.ov2 .kpis.tinted .k-ic .ic { width: 32px; height: 32px; }
.ov2 .kpis.tinted .kpi .k-v { font-size: clamp(22px, 14cqi, 30px) !important; display: flex; align-items: baseline; gap: 5px; }
.ov2 .kpis.tinted .k-v small { font-size: .55em; color: var(--ink-2); font-weight: 600; }
.ov2 .kpis.tinted .k-s { font-size: 13px; color: var(--ink-2); }
.k-bar { display: block; width: 100%; height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--mc) 18%, var(--card)); overflow: hidden; margin-top: 8px; }
.k-bar i { display: block; height: 100%; border-radius: 999px; background: var(--mc); }
.ov2 .k-badge { margin-top: 6px; }
.ov2 .kpi.problem { border-color: var(--coral) !important; }
.ov2 > .attn:not(.hidden) { margin: 0; }

/* row 1: performance · info · online */
.dash-row.ov-r1 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .9fr); }
@media (max-width: 1400px) { .dash-row.ov-r1 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .dash-row.ov-r1 > .ov-players { grid-column: 1 / -1; } }
@media (max-width: 1180px) { .dash-row.ov-r1 { grid-template-columns: minmax(0, 1fr); } }
.perf .seg.sm button { flex: none; }
.inf { display: flex; flex-direction: column; }
.inf-row { display: grid; grid-template-columns: 20px 118px minmax(0, 1fr) 28px; align-items: center; gap: 12px; min-height: 40px; border-top: 1px solid var(--line); font-size: 14.5px; }
.inf-row:first-child { border-top: 0; }
.inf-row > .ic { width: 18px; height: 18px; color: var(--ink-2); }
.inf-l { color: var(--ink-2); }
.inf-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.inf-foot { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.ov-players .list { max-height: 300px; overflow-y: auto; }
.ov-qa { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ov-qa .qa2 { min-height: 80px; }
.qa2.coral { --qc: var(--coral); --qt: var(--coral-tint); }
.ov-log .mini-log { background: var(--console); color: var(--console-ink); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: 12.5px/1.55 var(--mono); max-height: 320px; overflow: auto; }
.ov-log .mini-log .ln { white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.ov-log .mini-log .ln.err { color: var(--con-error); } .ov-log .mini-log .ln.warn { color: var(--con-warn); } .ov-log .mini-log .ln.md { color: var(--console-muted); }

@media (max-width: 1250px) { .kpis.tinted.ov-tiles, .kpis.tinted.ov-tiles.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .srv-hero { flex-wrap: wrap; } .hero-a { width: 100%; justify-content: flex-start; } }
@media (max-width: 760px) {
  .crumb { display: none; }
  .srv-head { margin-bottom: 10px; }
  .srv-hero { gap: 14px; padding: 12px; }
  .hero-pic .block-ic { width: 56px !important; height: 56px !important; }
  .hero-n { gap: 4px 10px; }
  .hero-n h1 { font-size: 22px; }
  .hero-n .sv-st { font-size: 14px; }
  .hero-m { font-size: 14px; gap: 6px 8px; }
  .hero-m .chip { display: none; }
  .hero-a { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; }
  .btn.pwr { height: 44px; padding: 0 8px; font-size: 14.5px; gap: 6px; }
  .btn.pwr-more { width: 44px; height: 44px; }
  .ptabs { margin-bottom: 12px; }
  .ptabs a { height: 40px; padding: 0 13px; font-size: 14px; background: var(--card); border-color: var(--line); }
  .kpis.tinted.ov-tiles, .kpis.tinted.ov-tiles.six { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .ov2 .kpis.tinted > .card.kpi { padding: 12px; }
  .ov2 .kpis.tinted .k-row { flex-direction: column; gap: 6px; }
  .ov2 .kpis.tinted .k-ic .ic { width: 24px; height: 24px; }
  .ov2 .kpis.tinted .k-ic { line-height: 0; }
  .inf-row { grid-template-columns: 18px 96px minmax(0, 1fr) 28px; gap: 10px; font-size: 14px; }
  .ov-qa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ov2 > .quick .ov-qa { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (max-width: 760px) { .ov2 > .quick .ov-qa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .kpis.tinted.ov-tiles:not(.six) > .kpi:last-child { grid-column: 1 / -1; }
  .main:has(.srv-hero) .appbar > .title { visibility: hidden; }
}
@media (min-width: 761px) { .ptabs { flex-wrap: wrap; overflow: visible; } .ptabs a { padding: 0 14px; } }
.ov-qa .qa2 { gap: 12px; padding: 14px 16px; }
.ov-qa .qa2-i .ic { width: 28px; height: 28px; }
.ov-qa .qa2-t b { font-size: 16px; white-space: nowrap; }

/* ---- brand (2026-11): the Craftlio icon and wordmark. The wordmark comes in ink (light backgrounds) and cream
   (dark backgrounds); only the one that fits the current theme shows. ---- */
.logo { image-rendering: auto; object-fit: contain; }
.wm { display: inline-flex; align-items: center; line-height: 0; }
.wm img { height: 1em; width: auto; display: block; }
.wm .wm-cream { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wm .wm-ink { display: none; } :root:not([data-theme="light"]) .wm .wm-cream { display: block; } }
:root[data-theme="dark"] .wm .wm-ink { display: none; }
:root[data-theme="dark"] .wm .wm-cream { display: block; }
.side .brand { align-items: center; }
.side .brand .logo { width: 48px; height: 48px; }
.side .brand-txt .wm { font-size: 25px; margin: 2px 0 5px; }
.auth .brand { flex-direction: column; gap: 14px; padding-bottom: 10px; }
.auth .logo { width: 84px; height: 84px; }
.auth .brand .wm { font-size: 38px; }
.appbar .app-logo .logo { width: 34px; height: 34px; }
.pub-brand .logo { width: 36px; height: 36px; }