/* ── reset & base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* Force the HTML `hidden` attribute to actually hide elements. Without this,
 * any element with `display: flex/grid/inline-block` etc. will keep its
 * display value and show even when `hidden` is set. Bit me on #auth-view
 * (display:flex) and #shell (display:grid). */
[hidden] { display: none !important; }

:root, [data-theme="dark"] {
  --bg-0: #0a0e12;
  --bg-1: #11161c;
  --bg-2: #161c24;
  --bg-3: #1e2632;
  --bg-hover: #232c39;
  --line: #232a35;
  --line-soft: #1b2129;

  --text-0: #e8edf2;
  --text-1: #b6becb;
  --text-2: #7a8595;
  --text-3: #4f5867;

  --accent:        #2dd4bf;
  --accent-dim:    #1ba896;
  --accent-glow:   rgba(45,212,191,0.15);
  --accent-soft:   rgba(45,212,191,0.08);

  --warn: #f59e0b;
  --err:  #ef4444;
  --ok:   #22c55e;
  --info: #38bdf8;

  --shadow: 0 10px 30px rgba(0,0,0,0.4);
  --shadow-card: 0 4px 14px rgba(0,0,0,0.25);

  --font-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;

  --sidebar-w: 240px;
}

/* Light theme — for daytime comfort */
[data-theme="light"] {
  --bg-0: #f6f7f9;
  --bg-1: #ffffff;
  --bg-2: #f0f2f5;
  --bg-3: #e6e9ee;
  --bg-hover: #eaedf2;
  --line: #d8dde4;
  --line-soft: #e8ebef;

  --text-0: #0d1419;
  --text-1: #3b4654;
  --text-2: #6b7689;
  --text-3: #9aa3b0;

  --accent:        #0d9488;
  --accent-dim:    #0f766e;
  --accent-glow:   rgba(13,148,136,0.12);
  --accent-soft:   rgba(13,148,136,0.06);

  --shadow: 0 10px 30px rgba(20,30,40,0.08);
  --shadow-card: 0 4px 14px rgba(20,30,40,0.04);
}

/* Midnight — purple/blue with vibrant accent */
[data-theme="midnight"] {
  --bg-0: #0b0917;
  --bg-1: #131129;
  --bg-2: #1a1734;
  --bg-3: #232045;
  --bg-hover: #2a2654;
  --line: #2a2654;
  --line-soft: #1f1c3f;

  --text-0: #ece9ff;
  --text-1: #bfb9e6;
  --text-2: #8a82b8;
  --text-3: #5a5388;

  --accent:        #a78bfa;
  --accent-dim:    #8b5cf6;
  --accent-glow:   rgba(167,139,250,0.20);
  --accent-soft:   rgba(167,139,250,0.10);

  --info: #60a5fa;
}

html, body {
  height: 100%;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text-0); }

/* ── loading screen ───────────────────────────────────────────────────── */
#loading-screen {
  position: fixed; inset: 0;
  background: var(--bg-0);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.loading-pulse {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(.6); opacity: .3; }
  50%      { transform: scale(1);   opacity: 1;   }
}

/* ── auth screen ──────────────────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at top, var(--accent-soft), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(56,189,248,0.04), transparent 60%),
    var(--bg-0);
  padding: 24px;
}
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 40px 36px;
  box-shadow: var(--shadow);
}
.auth-brand { text-align: center; margin-bottom: 32px; }
.auth-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: var(--accent);
  color: #001;
  border-radius: var(--r-md);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 16px;
  box-shadow: 0 0 30px var(--accent-glow);
}
.auth-brand h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.auth-tagline { color: var(--text-2); font-size: 13px; margin-top: 4px; }

/* ── shell ────────────────────────────────────────────────────────────── */
#shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns 0.2s ease;
}
#shell.sidebar-collapsed {
  grid-template-columns: 0 1fr;
}
#shell.sidebar-collapsed .sidebar {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}
.sidebar-toggle {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 100;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--text-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, left 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.sidebar-toggle:hover { background: var(--bg-2); }
.sidebar-toggle svg { width: 18px; height: 18px; }
#shell:not(.sidebar-collapsed) .sidebar-toggle {
  left: calc(var(--sidebar-w) + 14px);
}
#shell:not(.sidebar-collapsed) .sidebar-toggle svg {
  /* hint that it will close when clicked */
}
@media (max-width: 900px) {
  /* On mobile, the sidebar overlays the content instead of pushing it */
  #shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 90;
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
  }
  #shell.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-toggle { left: 14px !important; }
}

.sidebar {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 20px 12px;
  position: sticky; top: 0; height: 100vh;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 18px;
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--accent); color: #001;
  border-radius: 6px;
  font-weight: 700; font-size: 18px;
}
.brand-text {
  font-weight: 600; letter-spacing: -0.01em; font-size: 16px;
}

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: auto; }
.nav-section {
  color: var(--text-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 18px 12px 6px;
  font-weight: 500;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--text-1);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.nav-item svg { width: 18px; height: 18px; opacity: 0.85; }
.nav-item:hover { background: var(--bg-hover); color: var(--text-0); }
.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  position: relative;
}
.nav-item.active::before {
  content: '';
  position: absolute; left: -12px; top: 6px; bottom: 6px; width: 3px;
  background: var(--accent);
  border-radius: 2px;
}
[data-admin-only] { display: none; }
.is-admin [data-admin-only] { display: flex; }
.nav-section[data-admin-only] { display: none; }
.is-admin .nav-section[data-admin-only] { display: block; }

.sidebar-foot {
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
  margin-top: 8px;
}
.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
}
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-3);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  font-size: 13px;
  border: 1px solid var(--line);
}
.user-info { line-height: 1.2; min-width: 0; flex: 1; }
.user-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta { font-size: 11px; color: var(--text-3); }
.sidebar-actions {
  display: flex; gap: 4px; margin-top: 8px; padding: 0 4px;
}
.icon-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.12s;
  font-family: var(--font-mono);
  font-size: 11px;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text-0); border-color: var(--line); }
.icon-btn svg { width: 16px; height: 16px; }

/* ── main content ─────────────────────────────────────────────────────── */
.content {
  padding: 32px 40px;
  min-width: 0;
  max-width: 1400px;
}

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px; flex-wrap: wrap;
}
.page-head h2 {
  font-size: 24px; font-weight: 600;
  letter-spacing: -0.02em;
}
.page-head p { color: var(--text-2); font-size: 13.5px; margin-top: 4px; }
.page-actions { display: flex; gap: 8px; }

/* ── typography helpers ───────────────────────────────────────────────── */
h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 12px; }
h4 { font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.subtle { color: var(--text-2); }
.dim { color: var(--text-3); }
.mono { font-family: var(--font-mono); font-size: 0.9em; }
small { color: var(--text-2); font-size: 12px; }

/* ── cards ────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px;
}
.card + .card { margin-top: 16px; }
.card-tight { padding: 14px; }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* ── stats / KPIs ─────────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.stat {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 20px;
}
.stat-label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.stat-value {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: var(--font-mono);
}
.stat-sub {
  font-size: 12px; color: var(--text-2); margin-top: 4px;
}

/* ── form controls ────────────────────────────────────────────────────── */
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-row label {
  font-size: 12px; font-weight: 500;
  color: var(--text-1);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.input, .select, .textarea {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  color: var(--text-0);
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  transition: border 0.12s, background 0.12s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-1);
}
.textarea { min-height: 100px; resize: vertical; font-family: var(--font-mono); font-size: 13px; }
.hint { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--text-0);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all 0.12s;
}
.btn:hover { background: var(--bg-hover); border-color: var(--accent-dim); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: var(--accent); color: #001; border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); color: #001; }
.btn-danger { background: transparent; color: var(--err); border-color: rgba(239,68,68,0.4); }
.btn-danger:hover { background: rgba(239,68,68,0.1); border-color: var(--err); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--bg-hover); border-color: var(--line); }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-block { width: 100%; }

/* ── tables ───────────────────────────────────────────────────────────── */
.tbl {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.tbl th, .tbl td {
  padding: 10px 14px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid var(--line-soft);
}
.tbl th {
  background: var(--bg-2);
  font-weight: 500;
  color: var(--text-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tbl tbody tr:hover { background: var(--bg-hover); }
.tbl tbody tr:last-child td { border-bottom: none; }

/* ── badges ───────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-mono);
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text-1);
}
.badge-ok    { color: var(--ok);    border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.08); }
.badge-warn  { color: var(--warn);  border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.08); }
.badge-err   { color: var(--err);   border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.08); }
.badge-info  { color: var(--info);  border-color: rgba(56,189,248,0.3); background: rgba(56,189,248,0.08); }
.badge-accent { color: var(--accent); border-color: rgba(45,212,191,0.3); background: var(--accent-soft); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── server card ──────────────────────────────────────────────────────── */
.server-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  display: flex; flex-direction: column;
}
.server-card:hover { border-color: var(--accent-dim); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.server-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 12px; gap: 10px;
}
.server-card-title {
  font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em;
}
.server-card-game {
  font-size: 11px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-top: 2px;
}
.server-card-meta {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  font-size: 12px;
  margin-bottom: 12px;
}
.server-card-meta dt { color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.server-card-meta dd { font-family: var(--font-mono); color: var(--text-1); margin-top: 2px; }
.server-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
  margin-top: auto;
}

/* ── order page ──────────────────────────────────────────────────────── */
.order-flow {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: flex-start;
}
@media (max-width: 900px) {
  .order-flow { grid-template-columns: 1fr; }
}
.order-step { margin-bottom: 24px; }
.order-step-title {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  font-size: 14px; font-weight: 600;
}
.order-step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--text-1);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px;
  border: 1px solid var(--line);
}
.order-step.active .order-step-num { background: var(--accent); color: #001; border-color: var(--accent); }

.choice-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.choice {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all 0.12s;
  font-size: 13px;
}
.choice:hover { border-color: var(--accent-dim); }
.choice.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.choice-game-icon {
  width: 28px; height: 28px;
  border-radius: 4px;
  background: var(--bg-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--accent);
}
.discount-tag {
  font-size: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
}

.slider-row {
  display: flex; align-items: center; gap: 16px;
}
.slider-row input[type=range] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--bg-3);
  border-radius: 4px;
  outline: none;
}
.slider-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
  border: 2px solid var(--bg-0);
}
.slider-row input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
  border: 2px solid var(--bg-0);
}
.slider-val {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
  min-width: 50px;
  text-align: right;
}

.order-summary {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px;
  position: sticky; top: 24px;
}
.summary-row {
  display: flex; justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}
.summary-row + .summary-row { border-top: 1px solid var(--line-soft); }
.summary-row.total {
  border-top: 2px solid var(--line);
  margin-top: 8px;
  padding-top: 14px;
  font-size: 18px; font-weight: 600;
}
.summary-row.total .summary-val { color: var(--accent); font-family: var(--font-mono); }
.summary-row .summary-val { font-family: var(--font-mono); }

/* ── server control panel ────────────────────────────────────────────── */
.control-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) { .control-grid { grid-template-columns: 1fr; } }
.control-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 12px;
}

.chat-log {
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  height: 200px;
  overflow-y: auto;
}

/* ── toasts ───────────────────────────────────────────────────────────── */
.toasts {
  position: fixed;
  bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 9000;
  max-width: 360px;
}
.toast {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--info);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  box-shadow: var(--shadow);
  font-size: 13px;
  animation: slideIn 0.2s ease-out;
}
.toast.toast-ok   { border-left-color: var(--ok); }
.toast.toast-err  { border-left-color: var(--err); }
.toast.toast-warn { border-left-color: var(--warn); }
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── empty states ─────────────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  color: var(--text-2);
}
.empty h3 { color: var(--text-1); margin-bottom: 6px; }
.empty p { font-size: 13.5px; margin-bottom: 16px; }

/* ── tabs ─────────────────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.tab {
  background: transparent;
  border: none;
  padding: 10px 16px;
  color: var(--text-2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border 0.12s;
}
.tab:hover { color: var(--text-0); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── modal ────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  z-index: 8000;
  display: flex; align-items: center; justify-content: center;
}
.modal {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  width: 90%; max-width: 500px;
  padding: 24px;
  box-shadow: var(--shadow);
}
.modal h3 { margin-bottom: 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* ── small responsive tweaks ──────────────────────────────────────────── */
@media (max-width: 720px) {
  #shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
  .nav-section { padding-top: 8px; }
  .content { padding: 20px; }
}

/* ──────────────────────────────────────────────────────────────────────
 * LANDING PAGE — public marketing front. Lives at /, replaces login as
 * the unauthenticated entry point.
 * ────────────────────────────────────────────────────────────────────── */

.landing {
  min-height: 100vh;
  background: var(--bg-0);
  color: var(--text-0);
  position: relative;
  overflow-x: hidden;
}

/* Decorative gradient orbs in the background */
.landing::before, .landing::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
.landing::before {
  width: 500px; height: 500px;
  background: var(--accent);
  top: -100px; right: -150px;
}
.landing::after {
  width: 400px; height: 400px;
  background: var(--info);
  top: 400px; left: -100px;
  opacity: 0.15;
}
[data-theme="light"] .landing::before { opacity: 0.18; }
[data-theme="light"] .landing::after { opacity: 0.08; }

.landing > * { position: relative; z-index: 1; }

/* Nav bar at top of landing page */
.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 48px;
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg-0) 70%, transparent);
  position: sticky;
  top: 0;
  z-index: 100;
}
.landing-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 600;
  letter-spacing: -0.02em;
}
.landing-brand .mark {
  width: 32px; height: 32px;
  background: var(--accent);
  color: #001;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.landing-nav-links {
  display: flex; align-items: center; gap: 24px;
}
.landing-nav-links a {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 500;
}
.landing-nav-links a:hover { color: var(--text-0); }
.landing-nav-actions {
  display: flex; align-items: center; gap: 8px;
}

/* Hero */
.hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 48px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; padding: 48px 24px; gap: 40px; }
  .landing-nav { padding: 16px 24px; }
}

.hero-text h1 {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.hero-text h1 .accent {
  background: linear-gradient(135deg, var(--accent), var(--info));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-text p {
  font-size: 18px;
  color: var(--text-2);
  margin-bottom: 28px;
  max-width: 500px;
  line-height: 1.55;
}
.hero-stats {
  display: flex; gap: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
  margin-top: 28px;
}
.hero-stat {
  display: flex; flex-direction: column;
}
.hero-stat-val {
  font-size: 28px; font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent);
  letter-spacing: -0.02em;
}
.hero-stat-lbl {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* The big live-quote widget */
.order-widget {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow);
}
.order-widget h3 {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
  font-size: 18px;
}
.order-widget-sub {
  color: var(--text-2);
  font-size: 13px;
  margin-bottom: 20px;
}
.ow-section { margin-bottom: 18px; }
.ow-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  margin-bottom: 8px;
}
.ow-games {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.ow-game {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  color: var(--text-1);
  transition: all 0.12s;
}
.ow-game:hover { border-color: var(--accent-dim); }
.ow-game.selected {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.ow-game-name { font-weight: 600; }
.ow-game-meta { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.ow-game.selected .ow-game-meta { color: color-mix(in srgb, var(--accent) 70%, var(--text-2)); }

.ow-durations {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.ow-duration {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 4px;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  position: relative;
  color: var(--text-1);
  transition: all 0.12s;
}
.ow-duration:hover { border-color: var(--accent-dim); }
.ow-duration.selected {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.ow-duration .num { font-weight: 700; font-size: 16px; display: block; }
.ow-duration .label { font-size: 10px; opacity: 0.7; text-transform: uppercase; }
.ow-duration .save {
  position: absolute;
  top: -7px; right: 4px;
  background: var(--accent);
  color: #001;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.ow-summary {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 6px;
  display: flex; align-items: flex-end; justify-content: space-between;
}
.ow-price-label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ow-price {
  font-size: 30px;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1;
  letter-spacing: -0.02em;
}
.ow-price-period { font-size: 12px; color: var(--text-2); }
.ow-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent);
  color: #001;
  border: none;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
}
.ow-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--accent-glow); }

/* Game showcase section */
.section-block {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 48px;
}
@media (max-width: 880px) { .section-block { padding: 40px 24px; } }

.section-head {
  text-align: center;
  margin-bottom: 40px;
}
.section-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding: 4px 12px;
  background: var(--accent-soft);
  border-radius: 999px;
  margin-bottom: 16px;
}
.section-head h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.section-head p {
  color: var(--text-2);
  font-size: 16px;
  max-width: 580px;
  margin: 0 auto;
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.game-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  text-align: left;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.game-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-dim);
  box-shadow: var(--shadow-card);
}
.game-card-icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 18px;
  margin-bottom: 14px;
}
.game-card h4 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  color: var(--text-0);
  text-transform: none;
}
.game-card-desc {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.game-card-meta {
  display: flex; gap: 12px;
  font-size: 11px;
  color: var(--text-3);
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}
.game-card-meta strong { color: var(--text-1); font-family: var(--font-mono); }

/* Features */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.feature {
  padding: 8px;
}
.feature-icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 12px;
  margin-bottom: 16px;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature h4 {
  font-size: 15px; font-weight: 600;
  text-transform: none; letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: var(--text-0);
}
.feature p {
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.55;
}

/* FAQ */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--line-soft);
  padding: 16px 0;
}
.faq-item summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  color: var(--accent);
  font-size: 20px;
  font-weight: 300;
  transition: transform 0.2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item-body {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
  padding-top: 10px;
}

/* CTA banner */
.cta-banner {
  background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--info) 10%, transparent));
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 48px;
  text-align: center;
  margin: 60px auto;
  max-width: 1100px;
}
.cta-banner h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.cta-banner p {
  color: var(--text-2);
  margin-bottom: 20px;
  font-size: 15px;
}

/* Footer */
.landing-foot {
  border-top: 1px solid var(--line-soft);
  padding: 28px 48px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}
.landing-foot a { color: var(--text-2); margin: 0 8px; }
.landing-foot a:hover { color: var(--text-0); }

/* Theme switcher dropdown — used in both shell and landing nav */
.theme-switcher {
  position: relative;
  display: inline-block;
}
.theme-switcher-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 4px;
  min-width: 140px;
  box-shadow: var(--shadow);
  z-index: 50;
}
.theme-switcher-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--text-1);
  cursor: pointer;
  font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}
.theme-switcher-menu button:hover { background: var(--bg-hover); color: var(--text-0); }
.theme-switcher-menu button.active { color: var(--accent); }
.theme-swatch {
  width: 14px; height: 14px; border-radius: 50%;
  display: inline-block;
  border: 1px solid var(--line);
}

/* Invoice rendering — for both inline view and print */
.invoice-doc {
  background: white;
  color: #111;
  padding: 40px;
  font-family: 'Inter', system-ui, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.5;
}
.invoice-doc-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 36px; padding-bottom: 20px;
  border-bottom: 2px solid #111;
}
.invoice-doc-head h1 {
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
}
.invoice-doc-num { font-family: var(--font-mono); color: #555; font-size: 13px; margin-top: 4px; }
.invoice-doc-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 28px;
}
.invoice-doc-meta h5 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #888; margin-bottom: 6px;
}
.invoice-doc-meta p { font-size: 14px; white-space: pre-line; }
.invoice-doc-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 28px;
}
.invoice-doc-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  padding: 8px 12px;
  border-bottom: 1px solid #ddd;
}
.invoice-doc-table td {
  padding: 12px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}
.invoice-doc-table .num { text-align: right; font-family: var(--font-mono); }
.invoice-doc-totals {
  margin-left: auto;
  width: 320px;
}
.invoice-doc-totals .row {
  display: flex; justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
}
.invoice-doc-totals .row.total {
  border-top: 2px solid #111;
  padding-top: 10px; margin-top: 8px;
  font-weight: 700;
  font-size: 18px;
}
.invoice-doc-foot {
  margin-top: 40px; padding-top: 16px;
  border-top: 1px solid #ddd;
  color: #888;
  font-size: 11px;
  text-align: center;
}
@media print {
  body * { visibility: hidden; }
  .invoice-doc, .invoice-doc * { visibility: visible; }
  .invoice-doc { position: absolute; left: 0; top: 0; }
}

/* ── User dashboard (home.js) ─────────────────────────────────────────── */
#home-root { padding-bottom: 40px; }
.dash-hero {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  margin-bottom: 18px;
  min-height: 140px;
  border: 1px solid var(--line);
}
.dash-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 200px at 100% 0%, rgba(46,196,182,0.18), transparent),
    radial-gradient(600px 200px at 0% 100%, rgba(38,128,235,0.10), transparent),
    linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
}
.dash-hero-content {
  position: relative; z-index: 1;
  padding: 28px 32px;
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.dash-hero-eyebrow { font-size: 12px; color: var(--text-2); letter-spacing: 1px; text-transform: uppercase; }
.dash-hero-title   { font-size: 28px; margin: 4px 0 6px; font-weight: 700; }
.dash-hero-sub     { font-size: 14px; color: var(--text-2); }
.dash-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.dash-stat {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  border-radius: 10px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none; color: inherit;
}
.dash-stat:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.dash-stat-warn { border-color: #d63031; }
.dash-stat-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.dash-stat-meta { flex: 1; min-width: 0; }
.dash-stat-label { font-size: 11px; color: var(--text-2); letter-spacing: 0.5px; text-transform: uppercase; }
.dash-stat-value { font-size: 22px; font-weight: 700; line-height: 1.1; margin-top: 2px; }
.dash-stat-sub   { font-size: 11px; color: var(--text-2); margin-top: 2px; }

.dash-main {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
}
.dash-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.dash-section-head h3 { margin: 0; font-size: 16px; }

.dash-server-card {
  display: flex; gap: 0;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.dash-server-card:hover { transform: translateX(2px); border-color: var(--accent); }
.dash-server-card-bar { width: 4px; flex-shrink: 0; }
.dash-server-card-body { padding: 12px 16px; flex: 1; min-width: 0; }
.dash-server-card-title { font-size: 15px; font-weight: 600; }
.dash-server-card-meta { display: flex; gap: 14px; font-size: 12px; color: var(--text-2); margin-top: 6px; flex-wrap: wrap; }

.empty-card {
  background: var(--bg-1);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
}

.dash-widget {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 14px;
}
.dash-widget-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.dash-widget-head h4 { margin: 0; font-size: 14px; }
.dash-ticket-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; font-size: 13px;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--line);
}
.dash-ticket-item:last-of-type { border-bottom: 0; }
.dash-ticket-item:hover { color: var(--accent); }
.dash-chat-line {
  padding: 4px 0; font-size: 12px; line-height: 1.4;
  border-bottom: 1px solid var(--line);
}
.dash-chat-line:last-of-type { border-bottom: 0; }
.dash-chat-author { font-weight: 600; margin-right: 4px; }
.dash-order-item {
  display: flex; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.dash-order-item:last-of-type { border-bottom: 0; }

@media (max-width: 1100px) {
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-main { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dash-stats { grid-template-columns: 1fr; }
  .dash-hero-content { padding: 20px; }
  .dash-hero-title { font-size: 22px; }
}

/* ── Support ticket bubbles ───────────────────────────────────────────── */
.tk-bubble { padding: 12px 16px; border-radius: 10px; margin-bottom: 10px; }
.tk-bubble-user  { background: var(--bg-2); border-left: 3px solid var(--text-2); }
.tk-bubble-staff { background: rgba(46,196,182,0.08); border-left: 3px solid var(--accent); }
.tk-bubble-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.tk-bubble-body { font-size: 14px; line-height: 1.6; }

/* ── Community chat ───────────────────────────────────────────────────── */
.chat-shell {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex; flex-direction: column;
  height: calc(100vh - 220px);
  min-height: 420px;
  overflow: hidden;
}
.chat-stream {
  flex: 1; overflow-y: auto;
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.chat-msg {
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.15s ease;
  word-wrap: break-word;
}
.chat-msg:hover { background: var(--bg-2); }
.chat-msg-self { background: rgba(46,196,182,0.04); }
.chat-msg-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.chat-msg-author { font-weight: 600; font-size: 13px; }
.chat-msg-body { font-size: 14px; line-height: 1.5; padding-left: 2px; }
.chat-compose {
  display: grid; grid-template-columns: 1fr auto;
  gap: 8px; padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}

/* ── Server Control: Overview redesign ────────────────────────────────── */
.sv-hero {
  position: relative; overflow: hidden;
  border-radius: 14px;
  margin-bottom: 18px;
  min-height: 170px;
  border: 1px solid var(--line);
}
.sv-hero-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.15) 100%),
    url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=1400&q=80&auto=format&fit=crop') center/cover;
}
.sv-hero-content {
  position: relative; z-index: 1;
  padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; min-height: 170px;
}
.sv-hero-info { flex: 1; min-width: 280px; }
.sv-hero-status-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; align-items: center; }
.sv-hero-title { margin: 0; font-size: 26px; color: #fff; font-weight: 700; }
.sv-hero-sub   { color: #ccc; font-size: 13px; margin-top: 6px; font-family: ui-monospace, monospace; }
.sv-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.sv-hero-actions .btn { box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.btn-success { background: #26c281; color: #fff; border-color: #26c281; }
.btn-success:hover { background: #1eaa6f; border-color: #1eaa6f; }

.sv-pill, .sv-pill-mut, .sv-pill-ok, .sv-pill-err, .sv-pill-warn {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,0.12); color: #fff;
}
.sv-pill-mut  { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); font-weight: 500; }
.sv-pill-ok   { background: rgba(38,194,129,0.25); color: #4dffb1; }
.sv-pill-err  { background: rgba(214,48,49,0.25); color: #ff7575; }
.sv-pill-warn { background: rgba(244,180,0,0.25); color: #ffd966; }

.sv-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 18px;
}
.sv-stat {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; border-radius: 10px;
  background: var(--bg-1); border: 1px solid var(--line);
}
.sv-stat-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.sv-stat-label { font-size: 11px; color: var(--text-2); letter-spacing: 0.5px; text-transform: uppercase; }
.sv-stat-value { font-size: 22px; font-weight: 700; line-height: 1.1; margin-top: 2px; }
.sv-stat-sub   { font-size: 11px; color: var(--text-2); margin-top: 2px; }

.sv-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 900px) {
  .sv-stats   { grid-template-columns: repeat(2, 1fr); }
  .sv-grid-2  { grid-template-columns: 1fr; }
}

.sv-panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.sv-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #888; }
.sv-dot-on { background: var(--accent); box-shadow: 0 0 6px var(--accent); }

.sv-livechat, .sv-players { padding: 0; overflow: hidden; }
.sv-chat-stream {
  padding: 12px 14px;
  font-family: ui-monospace, monospace;
  font-size: 12px; line-height: 1.6;
  height: 280px; overflow-y: auto;
  white-space: pre-wrap;
}
.sv-chat-compose {
  display: grid; grid-template-columns: 1fr 90px; gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}

.sv-control { padding: 0; overflow: hidden; }
.sv-control-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.sv-control-icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.sv-control-titles { flex: 1; min-width: 0; }
.sv-control-eyebrow { font-size: 10px; letter-spacing: 1.2px; font-weight: 600; color: var(--text-2); }
.sv-control-title   { font-size: 16px; font-weight: 600; }
.sv-control-body    { padding: 14px 18px; }
.sv-control-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ── Map playlist (drag-drop) ─────────────────────────────────────────── */
.sv-map-list {
  list-style: none; margin: 0; padding: 0;
}
.sv-map-row {
  display: grid;
  grid-template-columns: 32px 36px 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  transition: background 0.15s ease;
}
.sv-map-row:last-child { border-bottom: 0; }
.sv-map-row:hover { background: var(--bg-2); }
.sv-map-row.dragging { opacity: 0.4; cursor: grabbing; }
.sv-map-row.dragover { border-top: 2px solid var(--accent); }
.sv-map-grip {
  cursor: grab; color: var(--text-2);
  font-size: 16px; text-align: center; user-select: none;
}
.sv-map-grip:active { cursor: grabbing; }
.sv-map-num {
  font-family: ui-monospace, monospace;
  font-size: 12px; color: var(--text-2);
  text-align: right;
}
.sv-map-env {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 12px;
}
.sv-map-body { min-width: 0; }
.sv-map-name { font-weight: 600; font-size: 14px; }
.sv-map-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.sv-map-actions { display: flex; gap: 4px; }

/* ── Plugin Library ───────────────────────────────────────────────────── */
.pl-toolbar {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 14px;
}
.pl-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.pl-tag {
  padding: 4px 12px;
  border-radius: 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pl-tag:hover { background: var(--bg-1); color: var(--text-1); }
.pl-tag-on { background: var(--accent); color: #001; border-color: var(--accent); font-weight: 600; }
.pl-tag-mini {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 10px;
  margin-right: 4px;
  margin-bottom: 4px;
}

.pl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.pl-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pl-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.pl-card-head { display: flex; gap: 12px; align-items: flex-start; }
.pl-card-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.pl-card-titles { flex: 1; min-width: 0; }
.pl-card-name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.pl-card-meta { margin-top: 4px; }
.pl-card-desc {
  font-size: 12px; line-height: 1.5; color: var(--text-2);
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pl-card-tags { display: flex; flex-wrap: wrap; }
.pl-card-actions {
  display: flex; gap: 6px;
  margin-top: auto; padding-top: 8px;
  border-top: 1px solid var(--line);
}
.pl-card-actions .btn { flex: 1; }
.pl-card-actions .btn[data-info-id] { flex: 0 0 auto; padding: 4px 10px; }

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.modal {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}

/* ══════════════════════════════════════════════════════════════════
   Server Overview — Mission Control redesign
   ══════════════════════════════════════════════════════════════════ */

/* ─── ROW 1: Status strip ─────────────────────────────────────── */
.ov-strip {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;                   /* sharp */
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ov-strip-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: 0.5px;
  padding-right: 16px;
  border-right: 1px solid var(--line);
}
.ov-strip-name {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 200px;
}
.ov-strip-name > span:first-child {
  font-size: 17px; font-weight: 700;
}
.ov-strip-sub { font-size: 11px; letter-spacing: 0.3px; }
.ov-strip-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ov-led {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #444; flex-shrink: 0;
}
.ov-led-on  { background: #26c281; box-shadow: 0 0 8px #26c281; animation: ov-pulse 2s infinite; }
.ov-led-off { background: #d63031; }
@keyframes ov-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(38,194,129, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(38,194,129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(38,194,129, 0); }
}
.ov-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 6px;
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: 11px; font-weight: 600;
}
.ov-chip-copy   { cursor: pointer; transition: background 0.15s; }
.ov-chip-copy:hover { background: var(--bg-1); border-color: var(--accent); }
.ov-chip-warn   { background: rgba(214,48,49,0.15); color: #ff7575; border-color: rgba(214,48,49,0.3); }
.ov-chip-mut    { color: var(--text-2); font-weight: 500; }
.ov-chip-num {
  margin-left: auto;
  background: var(--accent); color: #001;
  padding: 2px 10px; border-radius: 10px;
  font-size: 11px; font-weight: 700;
}

/* ─── ROW 2: Map card + Action panel ──────────────────────────── */
.ov-row-2 {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 14px; margin-bottom: 14px;
}
@media (max-width: 1100px) { .ov-row-2 { grid-template-columns: 1fr; } }

.ov-mapcard {
  position: relative; overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
  min-height: 230px;
  background: var(--bg-1);
}
.ov-mapcard-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 250px at 80% 0%, color-mix(in srgb, var(--env) 25%, transparent), transparent 70%),
    radial-gradient(600px 300px at 0% 100%, color-mix(in srgb, var(--env) 12%, transparent), transparent 60%),
    linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
}
.ov-mapcard-content {
  position: relative; z-index: 1;
  padding: 24px 28px;
  display: flex; flex-direction: column; gap: 14px; height: 100%;
}
.ov-mapcard-eyebrow {
  font-size: 10px; letter-spacing: 1.6px;
  color: var(--env); font-weight: 700;
}
.ov-mapcard-title {
  font-size: 28px; font-weight: 700; line-height: 1.1;
  word-break: break-word;
}
.ov-mapcard-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-2);
}
.ov-mapcard-env-pill {
  display: inline-block;
  padding: 2px 10px; border-radius: 10px;
  background: var(--env); color: #fff;
  font-size: 11px; font-weight: 700;
}
.ov-mapcard-slots {
  display: grid; grid-template-columns: auto auto auto 1fr;
  align-items: baseline; gap: 6px;
  margin-top: auto;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.ov-slots-num    { font-size: 32px; font-weight: 700; color: var(--env); }
.ov-slots-of     { font-size: 18px; color: var(--text-2); }
.ov-slots-label  { font-size: 11px; color: var(--text-2); letter-spacing: 0.5px; text-transform: uppercase; }
.ov-slots-bar {
  grid-column: 1 / -1; margin-top: 6px;
  height: 4px; background: var(--bg-2); border-radius: 2px; overflow: hidden;
}
.ov-slots-fill { height: 100%; background: var(--env); transition: width 0.3s ease; }

.ov-actions {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex; flex-direction: column;
}
.ov-actions-head {
  font-size: 10px; letter-spacing: 1.6px; font-weight: 700;
  color: var(--text-2); margin-bottom: 14px;
}
.ov-actions-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: auto;
}
.ov-action {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-1);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ov-action:hover { transform: translateY(-1px); border-color: var(--accent); background: var(--bg-1); }
.ov-action:disabled { opacity: 0.4; cursor: not-allowed; }
.ov-action-icon { font-size: 16px; line-height: 1; }
.ov-action-primary { background: var(--accent); color: #001; border-color: var(--accent); }
.ov-action-primary:hover { background: #1eaa6f; border-color: #1eaa6f; color: #001; }
.ov-action-success { background: #26c281; color: #fff; border-color: #26c281; }
.ov-action-success:hover { background: #1eaa6f; border-color: #1eaa6f; color: #fff; }
.ov-actions-foot {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex; gap: 6px; flex-wrap: wrap;
}

/* ─── ROW 3: Service health rows ──────────────────────────────── */
.ov-services {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 14px;
}
.ov-service-row {
  display: grid; grid-template-columns: 28px 1fr auto;
  gap: 16px; align-items: center;
  padding: 14px 18px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 3px solid #444;
  border-radius: 8px;
}
.ov-service-on  { border-left-color: #26c281; }
.ov-service-off { border-left-color: #d63031; }
.ov-service-label {
  font-size: 11px; letter-spacing: 1.2px; font-weight: 700;
  color: var(--text-2);
}
.ov-service-detail {
  margin-top: 4px;
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 12px;
}
.ov-service-detail strong { color: var(--text-1); }
.ov-service-detail span { color: var(--text-2); }
.ov-service-actions {
  display: flex; gap: 6px; align-items: center;
}

/* ─── ROW 4: Chat + Players ───────────────────────────────────── */
.ov-row-activity {
  display: grid; grid-template-columns: 2fr 1fr;
  gap: 14px; margin-bottom: 14px;
}
@media (max-width: 1000px) { .ov-row-activity { grid-template-columns: 1fr; } }

.ov-chat, .ov-players {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ov-section-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.ov-chat-stream {
  flex: 1; min-height: 480px; max-height: 720px;
  padding: 14px 18px;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace;
  font-size: 13px; line-height: 1.65;
  overflow-y: auto;
  white-space: pre-wrap;
  background: #0a0e14;
}
.ov-chat-compose {
  display: grid; grid-template-columns: 1fr 90px;
  gap: 6px; padding: 10px 12px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
.ov-empty {
  padding: 40px 20px; text-align: center;
  color: var(--text-2); font-size: 13px;
}

.ov-player-list {
  list-style: none; margin: 0; padding: 0;
  flex: 1; min-height: 480px; max-height: 720px;
  overflow-y: auto;
}
.ov-player-list li {
  display: grid; grid-template-columns: 1fr auto;
  gap: 4px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.ov-player-list li:last-child { border-bottom: 0; }
.ov-player-nick { font-size: 13px; font-weight: 600; grid-column: 1; }
.ov-player-login { font-size: 10px; color: var(--text-2); grid-column: 1; grid-row: 2; }
.ov-player-actions { grid-row: 1 / span 2; display: flex; gap: 4px; }

/* ─── ROW 5: Quick links ──────────────────────────────────────── */
.ov-quicklinks {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
@media (max-width: 900px) { .ov-quicklinks { grid-template-columns: repeat(2, 1fr); } }

.ov-ql {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;                   /* sharp */
  text-decoration: none; color: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ov-ql:hover { border-color: var(--accent); background: var(--bg-2); }
.ov-ql-icon  { font-size: 18px; line-height: 1; }
.ov-ql-label { font-size: 13px; font-weight: 600; }
.ov-ql-sub   { font-size: 10px; color: var(--text-2); }

/* ── Log line rendering (LIVE CHAT panel) — colorful, matches XAseco style ─ */
.ov-log-line {
  padding: 2px 8px;
  border-left: 2px solid transparent;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
/* Chat line:  [Tag] [Player] message  */
.ov-log-chat {
  background: rgba(46,196,182,0.06);
  border-left-color: var(--accent);
  color: #ffffff;
}
.ov-log-chat .lg-tag    { color: #f4b400; font-weight: 700; }     /* [Beginner], [Veteran] */
.ov-log-chat .lg-player { color: #5fa8ff; font-weight: 600; }     /* [Player] */
/* System events: >> player from country has left/joined */
.ov-log-sysevent { color: #5fa8ff; font-style: italic; }
/* Personal records: > You improved your record */
.ov-log-record   { color: #75c7f5; }
/* Player connection */
.ov-log-connect  { color: #26c281; background: rgba(38,194,129,0.08); border-left-color: #26c281; font-weight: 600; }
/* Map loading */
.ov-log-loading  { color: #f4b400; background: rgba(244,180,0,0.06); border-left-color: #f4b400; font-weight: 600; }
/* Match flow markers */
.ov-log-flow     { color: #6c7d8c; font-style: italic; }
/* Aseco system messages */
.ov-log-sys      { color: #a085ff; }
/* Errors / Warnings */
.ov-log-err  { border-left-color: #d63031; color: #ff7b7b; background: rgba(214,48,49,0.10); font-weight: 600; }
.ov-log-warn { border-left-color: #f4b400; color: #ffd966; background: rgba(244,180,0,0.08); }

/* ── MatchSettings structured editor ──────────────────────────────────── */
.ms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.ms-field { display: flex; flex-direction: column; gap: 4px; }
.ms-field label { font-size: 12px; font-weight: 600; }
.ms-field small { font-size: 10px; color: var(--text-2); }
.ms-field input, .ms-field select { font-size: 13px; }
.ms-toggles {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px;
  padding: 10px 14px;
  background: var(--bg-2);
  border-radius: 6px;
}
.ms-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════
   Server Overview — Restructured 2-row layout
   ══════════════════════════════════════════════════════════════════ */

/* Main row: map photo card + unified control center */
.ov-main-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 1100px) { .ov-main-row { grid-template-columns: 1fr; } }

/* Map card: photo BG + dark overlay + content */
.ov-mapcard {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
  min-height: 270px;
}
.ov-mapcard-bg-img {
  position: absolute; inset: 0;
  background-size: cover;
  /* center, not top, to avoid the sky-only crop bug */
  background-position: center center;
  background-repeat: no-repeat;
  transition: opacity 0.4s ease;
  /* Prevent any browser-side smoothing from blurring the GBX thumb */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.ov-mapcard-bg-real {
  /* When we have the real thumbnail, scale it slightly to fill nicer.
     The GBX-embedded JPG is 512×512 — without scaling it looks small at
     FullHD. We use background-size: cover (above) and let the browser
     resample once. */
  background-size: cover;
  background-position: center 35%;   /* 35% from top tends to land on the track, not the sky */
  filter: saturate(1.12) contrast(1.04);
}
.ov-mapcard-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.55) 50%,
    rgba(0,0,0,0.35) 100%);
}

/* Map list thumbnails (Maps tab) — fixed 16:9, sharp */
.sv-map-thumb {
  width: 80px; height: 45px;          /* 16:9 — matches dedi panel hero ratio */
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: -webkit-optimize-contrast;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.ov-mapcard-content {
  position: relative; z-index: 1;
  padding: 24px 28px;
  display: flex; flex-direction: column; gap: 14px;
  height: 100%; min-height: 270px;
  color: #fff;
}
.ov-mapcard-eyebrow {
  font-size: 10px; letter-spacing: 1.6px; font-weight: 700;
  color: var(--env);
  text-shadow: 0 0 12px var(--env);
}
.ov-mapcard-title {
  font-size: 32px; font-weight: 700; line-height: 1.1; margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  word-break: break-word;
}
.ov-mapcard-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,0.85);
}
.ov-mapcard-meta strong { color: #fff; }
.ov-mapcard-env-pill {
  display: inline-block;
  padding: 3px 12px; border-radius: 12px;
  background: var(--env); color: #fff;
  font-size: 11px; font-weight: 700;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--env) 60%, transparent);
}
.ov-mapcard-slots {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.ov-slots-text {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 8px;
}
.ov-slots-num    { font-size: 36px; font-weight: 800; color: var(--env); line-height: 1; }
.ov-slots-of     { font-size: 18px; color: rgba(255,255,255,0.7); }
.ov-slots-label  { font-size: 11px; color: rgba(255,255,255,0.7); letter-spacing: 0.5px; text-transform: uppercase; margin-left: auto; }
.ov-slots-bar {
  height: 5px; background: rgba(255,255,255,0.12);
  border-radius: 3px; overflow: hidden;
}
.ov-slots-fill { height: 100%; background: var(--env); transition: width 0.3s ease; }

/* Unified control center: process status + actions + footer */
.ov-control {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex; flex-direction: column;
  min-height: 270px;
}
.ov-control-head {
  font-size: 10px; letter-spacing: 1.6px; font-weight: 700;
  color: var(--text-2);
  margin-bottom: 14px;
}

/* Process rows: server + controller status pills */
.ov-procs {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.ov-proc {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: 6px;
}
.ov-proc-info { min-width: 0; }
.ov-proc-name { font-size: 14px; font-weight: 700; }
.ov-proc-sub  { font-size: 11px; color: var(--text-2); font-family: ui-monospace, monospace; margin-top: 2px; }
.ov-proc-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ov-proc-btns .btn-sm {
  padding: 6px 12px; font-size: 12px;
  white-space: nowrap;
}

/* On smaller widths, stack the buttons below the name so they have room */
@media (max-width: 1200px) {
  .ov-proc { grid-template-columns: 14px 1fr; }
  .ov-proc-btns { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Actions grid */
.ov-actions-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 14px;
}
.ov-action {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 8px; color: var(--text-1);
  font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: all 0.15s ease;
}
.ov-action:hover { transform: translateY(-1px); border-color: var(--accent); background: var(--bg-1); }
.ov-action:disabled { opacity: 0.4; cursor: not-allowed; }
.ov-action-icon { font-size: 16px; }
.ov-action-primary { background: var(--accent); color: #001; border-color: var(--accent); }
.ov-action-primary:hover { background: #1eaa6f; border-color: #1eaa6f; color: #001; }
.ov-action-success { background: #26c281; color: #fff; border-color: #26c281; }

.ov-actions-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex; gap: 6px;
}

/* Player click items */
.ov-player-item {
  cursor: pointer;
  transition: background 0.15s ease;
}
.ov-player-item:hover { background: var(--bg-2); }

/* Player detail modal */
.pm-avatar {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--accent);
  color: #001;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700;
  flex-shrink: 0;
}
.pm-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 14px;
}
.pm-stat {
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: 8px;
}
.pm-stat-label { font-size: 10px; color: var(--text-2); letter-spacing: 0.5px; text-transform: uppercase; }
.pm-stat-value { font-size: 16px; font-weight: 600; margin-top: 2px; }
.pm-ip {
  padding: 8px 12px; margin-bottom: 14px;
  background: rgba(244,180,0,0.08);
  border-left: 3px solid #f4b400;
  border-radius: 4px;
  font-size: 13px;
}
.pm-actions {
  display: flex; gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}


/* ══════════════════════════════════════════════════════════════════
   Server Overview — 4 symmetric tiles
   ══════════════════════════════════════════════════════════════════ */
.ov-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 1280px) { .ov-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .ov-tiles { grid-template-columns: 1fr; } }

.ov-tile {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  min-height: 260px;
  display: flex; flex-direction: column;
  position: relative;
}

/* Map tile: photo BG + dark overlay */
.ov-tile-map { padding: 0; }
.ov-tile-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 0.4s ease;
}
.ov-tile-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.75) 60%,
    rgba(0,0,0,0.90) 100%);
}
.ov-tile-content {
  position: relative; z-index: 1;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  height: 100%; color: #fff;
}
.ov-tile-eyebrow {
  font-size: 9px; letter-spacing: 1.5px; font-weight: 700;
  color: var(--env); text-shadow: 0 0 8px var(--env);
}
.ov-tile-title {
  font-size: 18px; font-weight: 700; line-height: 1.2;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  word-break: break-word;
}
.ov-tile-meta {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  font-size: 11px; color: rgba(255,255,255,0.85);
}
.ov-tile-foot { margin-top: auto; }
.ov-tile-big {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 26px; font-weight: 800; color: var(--env);
  line-height: 1;
}
.ov-tile-big-of { font-size: 14px; color: rgba(255,255,255,0.6); }
.ov-tile-bar {
  margin-top: 6px;
  height: 4px; background: rgba(255,255,255,0.12);
  border-radius: 2px; overflow: hidden;
}
.ov-tile-fill { height: 100%; background: var(--env); }

/* Control tile: header + body with status + buttons */
.ov-tile-control { padding: 0; }
.ov-tile-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  font-size: 11px; letter-spacing: 1.2px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.ov-tile-body {
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  height: 100%; flex: 1;
}
.ov-tile-status {
  font-size: 18px; font-weight: 800; letter-spacing: 1px;
}
.ov-tile-btns {
  display: flex; flex-direction: column; gap: 6px;
}
.ov-tile-btns .btn-block {
  width: 100%; justify-content: center;
  font-size: 12px; font-weight: 600;
  padding: 8px 10px;
}
.ov-tile-btns-foot {
  flex-direction: row;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.ov-tile-btns-foot .btn-block { flex: 1; }

/* Make sure btn-success has its own visible styling */
.btn-success { background: #26c281; color: #fff; border-color: #26c281; }
.btn-success:hover { background: #1eaa6f; border-color: #1eaa6f; }

/* ══════════════════════════════════════════════════════════════════
   Server Overview — Hero (big map + control stack) layout
   ══════════════════════════════════════════════════════════════════ */
.ov-hero {
  display: grid;
  grid-template-columns: 2fr 1fr;       /* map gets 2/3, controls 1/3 (slim) */
  gap: 10px;
  margin-bottom: 10px;
}
@media (max-width: 1200px) { .ov-hero { grid-template-columns: 1fr; } }

/* LEFT: big map preview */
.ov-hero-map {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 360px;                    /* slightly shorter */
  display: flex;
}
.ov-hero-map-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 0.4s ease;
}
.ov-hero-map-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(0,0,0,0.78) 0%,
    rgba(0,0,0,0.40) 45%,
    rgba(0,0,0,0.30) 100%);
}
.ov-hero-map-content {
  position: relative; z-index: 1;
  flex: 1;
  padding: 22px 26px;
  display: flex; flex-direction: column;
  color: #fff;
}
.ov-hero-map-top    { display: flex; flex-direction: column; gap: 10px; }
.ov-hero-map-bottom { margin-top: auto; padding-top: 14px; }
.ov-hero-eyebrow {
  font-size: 10px; letter-spacing: 1.8px; font-weight: 700;
  color: var(--env);
  text-shadow: 0 0 14px var(--env);
}
.ov-hero-title {
  font-size: 30px; font-weight: 700; line-height: 1.1;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  word-break: break-word;
}
.ov-hero-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,0.85);
}
.ov-hero-meta strong { color: #fff; }
.ov-hero-slots { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.ov-hero-slots-num { font-size: 38px; font-weight: 700; color: var(--env); line-height: 1; }
.ov-hero-slots-of  { font-size: 18px; color: rgba(255,255,255,0.7); }
.ov-hero-slots-lbl { font-size: 11px; color: rgba(255,255,255,0.7); letter-spacing: 1px; margin-left: auto; }
.ov-hero-bar {
  height: 5px; background: rgba(255,255,255,0.12);
  border-radius: 0;                     /* sharp */
  overflow: hidden;
}
.ov-hero-bar-fill { height: 100%; background: var(--env); transition: width 0.3s ease; }

/* RIGHT: stacked control cards — SLIM, no scrollbar */
.ov-hero-controls {
  display: flex; flex-direction: column;
  gap: 6px;
  overflow: visible;
}
.ov-control-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;                   /* sharp */
  padding: 10px 12px;
}
.ov-control-card-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 2px;
}
.ov-control-card-eyebrow {
  font-size: 9px; letter-spacing: 1.2px; font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
}
.ov-control-card-title {
  font-size: 16px; font-weight: 700;
  margin: 0 0 2px;
  line-height: 1.2;
}
.ov-control-card-desc {
  font-size: 11px; color: var(--text-2);
  margin: 0 0 8px;
  line-height: 1.35;
}
.ov-control-card-btns {
  display: flex; flex-wrap: wrap; gap: 4px;
}

/* Coloured rectangular buttons — clean, harmonious palette
   Only 3 levels of intensity: primary (accent), danger (red), ghost (neutral) */
.ov-cbtn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px;
  border-radius: 3px;
  font-size: 11px; font-weight: 700;
  border: 1px solid var(--line);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--bg-2);
  color: var(--text-1);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ov-cbtn:hover  { background: var(--bg-1); border-color: var(--accent); }
.ov-cbtn:active { transform: translateY(1px); }
/* Primary action — uses the panel's accent color (single brand color) */
.ov-cbtn-success,
.ov-cbtn-accent {
  background: var(--accent);
  color: #001;
  border-color: var(--accent);
}
.ov-cbtn-success:hover,
.ov-cbtn-accent:hover { background: var(--accent); filter: brightness(1.08); border-color: var(--accent); }
/* Destructive — red kept but muted */
.ov-cbtn-danger {
  background: transparent;
  color: #e87a7a;
  border-color: #5a2a2a;
}
.ov-cbtn-danger:hover { background: #3a1a1a; border-color: #d63031; color: #ff8585; }
/* Warn / Info / Ghost all share the neutral ghost style for cohesion */
.ov-cbtn-warn,
.ov-cbtn-info,
.ov-cbtn-ghost {
  background: var(--bg-2);
  color: var(--text-1);
  border-color: var(--line);
}
.ov-cbtn-warn:hover,
.ov-cbtn-info:hover,
.ov-cbtn-ghost:hover { background: var(--bg-1); border-color: var(--accent); }

/* ROW 2: Two log columns side-by-side */
.ov-logs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
@media (max-width: 1100px) { .ov-logs-row { grid-template-columns: 1fr; } }

.ov-logcard {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 180px;                    /* half */
}
.ov-logcard-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.ov-logcard-body {
  flex: 1; min-height: 140px; max-height: 230px;   /* halved from 260-460 */
  padding: 10px 12px;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace;
  font-size: 12px; line-height: 1.5;
  overflow-y: auto;
  white-space: pre-wrap;
  background: #0a0e14;
}
.ov-logcard-compose {
  display: grid; grid-template-columns: 1fr 80px;
  gap: 4px; padding: 8px 10px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}

/* Players strip */
.ov-players-strip {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;                   /* sharp */
  overflow: hidden;
  margin-bottom: 10px;
}
.ov-player-grid {
  list-style: none; margin: 0; padding: 8px 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px;
}
.ov-player-grid .ov-player-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  background: var(--bg-2);
  border-radius: 3px;                   /* almost square */
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ov-player-grid .ov-player-item:hover { background: var(--bg-1); outline: 1px solid var(--accent); }
.ov-player-grid .ov-player-nick { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ov-player-grid .ov-player-login { font-size: 10px; color: var(--text-2); }
.ov-player-grid .ov-player-actions { display: flex; gap: 4px; }

/* ══════════════════════════════════════════════════════════════════
   New overview — strip + big map with overlaid controls + ctrl strip
   ══════════════════════════════════════════════════════════════════ */
.ov-strip-actions { display: flex; gap: 6px; align-items: center; }

/* Big map card — full width, controls overlaid in the top-right */
.ov-mapbig {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 280px;
  margin-bottom: 10px;
}
.ov-mapbig-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 0.4s ease;
}
.ov-mapbig-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(0,0,0,0.78) 0%,
    rgba(0,0,0,0.40) 50%,
    rgba(0,0,0,0.25) 100%);
}
.ov-mapbig-content {
  position: relative; z-index: 1;
  padding: 22px 26px;
  display: flex; flex-direction: column; gap: 14px;
  color: #fff;
  min-height: 280px;
}
.ov-mapbig-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap;
}
.ov-mapbig-bottom { margin-top: auto; }
.ov-mapbig-eyebrow {
  font-size: 10px; letter-spacing: 1.8px; font-weight: 700;
  color: var(--env);
  text-shadow: 0 0 12px var(--env);
}
.ov-mapbig-title {
  font-size: 30px; font-weight: 700; line-height: 1.1;
  margin: 6px 0 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  word-break: break-word;
}
.ov-mapbig-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 8px;
  font-size: 13px; color: rgba(255,255,255,0.85);
}
.ov-mapbig-meta strong { color: #fff; }
.ov-mapbig-controls {
  display: flex; flex-wrap: wrap; gap: 6px;
  /* Ensure buttons are visible on the dark overlay */
}
.ov-mapbig-controls .ov-cbtn:not(.ov-cbtn-success):not(.ov-cbtn-accent):not(.ov-cbtn-danger) {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
  backdrop-filter: blur(4px);
}
.ov-mapbig-controls .ov-cbtn:hover { background: rgba(255,255,255,0.16); }

/* Controller strip — one long widget below the map */
.ov-ctrlstrip {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-bottom: 10px;
}
.ov-ctrlstrip-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.ov-ctrlstrip-name { font-size: 14px; font-weight: 700; }
.ov-ctrlstrip-sub  { font-size: 11px; }
.ov-ctrlstrip-btns { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 800px) {
  .ov-ctrlstrip { flex-direction: column; align-items: stretch; }
  .ov-ctrlstrip-btns { justify-content: stretch; }
  .ov-mapbig-top { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════════
   Disk-Maps Folder Browser — sidebar + file panel + breadcrumb
   ══════════════════════════════════════════════════════════════════ */
.dm-browser {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 320px;
  border-top: 1px solid var(--line);
}
.dm-folders {
  border-right: 1px solid var(--line);
  background: var(--bg-2);
  overflow-y: auto;
  max-height: 600px;
  padding: 6px 0;
}
.dm-folder-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-folder-item:hover { background: var(--bg-1); }
.dm-folder-item.active {
  background: var(--bg-1);
  border-left: 3px solid var(--accent);
  padding-left: 7px;
}
.dm-folder-ico { font-size: 13px; flex-shrink: 0; }
.dm-folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.dm-folder-count {
  color: var(--text-2);
  font-size: 10px;
  background: var(--bg-1);
  padding: 1px 6px;
  border-radius: 8px;
}
.dm-folder-item.active .dm-folder-count { background: var(--bg-2); }

.dm-files {
  display: flex; flex-direction: column;
  min-width: 0;          /* prevent grid overflow */
}
.dm-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  flex-wrap: wrap;
}
.dm-breadcrumb {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 12px;
  color: var(--text-1);
}
.dm-crumb-part {
  color: var(--accent);
}
.dm-crumb-part::before { content: ''; }
.dm-table { max-height: 540px; overflow-y: auto; }
.dm-table .tbl { box-shadow: none; border-radius: 0; }

@media (max-width: 700px) {
  .dm-browser { grid-template-columns: 1fr; }
  .dm-folders { max-height: 200px; border-right: none; border-bottom: 1px solid var(--line); }
}

/* ══════════════════════════════════════════════════════════════════
   Playlist toolbar + grouped-by-folder view
   ══════════════════════════════════════════════════════════════════ */
.ml-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 18px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  flex-wrap: wrap;
}
.ml-toolbar .btn { font-size: 11px; padding: 4px 9px; }
.ml-toolbar .select { font-size: 11px; padding: 4px 6px; }

/* Grouped playlist — collapsible folder sections */
.pl-group { border-bottom: 1px solid var(--line); }
.pl-group:last-child { border-bottom: 0; }
.pl-group > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 18px;
  background: var(--bg-2);
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 12px;
}
.pl-group > summary::-webkit-details-marker { display: none; }
.pl-group > summary:hover { background: var(--bg-1); }
.pl-group > summary::before {
  content: '▾';
  display: inline-block;
  width: 12px;
  transition: transform 0.15s ease;
  color: var(--text-2);
}
.pl-group:not([open]) > summary::before { transform: rotate(-90deg); }
.pl-group-ico { font-size: 13px; }
.pl-group-name { font-weight: 600; flex: 1; font-family: ui-monospace, monospace; font-size: 11px; }
.pl-group-count {
  color: var(--text-2); font-size: 10px;
  background: var(--bg-1); padding: 1px 8px; border-radius: 8px;
}
.pl-group-list { margin: 0; }

/* ══════════════════════════════════════════════════════════════════
   Plugin Library — stats banner, sidebar, redesigned cards
   ══════════════════════════════════════════════════════════════════ */
.pl-stats {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px 18px;
  margin: 14px 0;
}
.pl-stat {
  text-align: left;
  padding: 4px 14px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.pl-stat:hover { background: var(--bg-2); }
.pl-stat-active { background: var(--bg-2); border-color: var(--accent); }
.pl-stat-num { font-size: 22px; font-weight: 700; line-height: 1; }
.pl-stat-lbl { font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

.pl-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
}
.pl-sidebar {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 0;
  height: fit-content;
  position: sticky;
  top: 14px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.pl-side-head {
  padding: 10px 14px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-2); font-weight: 700;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.pl-side-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  font-size: 12px;
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
  text-transform: capitalize;
}
.pl-side-item:hover { background: var(--bg-2); }
.pl-side-active {
  background: var(--bg-2);
  border-left: 3px solid var(--accent);
  padding-left: 11px;
  font-weight: 600;
}
.pl-side-count {
  margin-left: auto;
  color: var(--text-2);
  font-size: 10px;
  background: var(--bg-2);
  padding: 1px 8px;
  border-radius: 8px;
}
.pl-side-active .pl-side-count { background: var(--bg-1); }

.pl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.pl-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 4px solid var(--card-color, var(--accent));
  border-radius: 4px;
  padding: 14px;
  display: flex; flex-direction: column;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.pl-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.pl-card-installed { opacity: 0.85; }
.pl-card-missing { opacity: 0.7; }
.pl-card-missing:hover { transform: none; }
.pl-card-head {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 10px;
}
.pl-card-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: color-mix(in srgb, var(--card-color) 15%, transparent);
  color: var(--card-color);
  border-radius: 4px;
  flex-shrink: 0;
}
.pl-card-titles { flex: 1; min-width: 0; }
.pl-card-name {
  font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-card-meta {
  font-size: 10px; color: var(--text-2);
  display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
  margin-top: 2px;
}
.pl-card-desc {
  font-size: 12px; line-height: 1.5; color: var(--text-1);
  margin: 0 0 10px;
  flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pl-card-foot {
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: auto;
}
.pl-card-tags { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.pl-tag-mini {
  font-size: 9px; padding: 2px 6px;
  background: var(--bg-2); color: var(--text-2);
  border-radius: 8px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.pl-card-actions { display: flex; gap: 4px; }

/* Status badges on cards */
.pl-badge {
  font-size: 9px; padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  white-space: nowrap;
  align-self: flex-start;
}
.pl-badge-ok   { background: rgba(34,197,94,0.15);  color: #22c55e; }
.pl-badge-warn { background: rgba(245,158,11,0.15); color: #f59e0b; }
.pl-badge-cdn  { background: rgba(96,165,250,0.15); color: #60a5fa; }
.pl-badge-self { background: rgba(139,92,246,0.15); color: #a78bfa; }

@media (max-width: 900px) {
  .pl-layout { grid-template-columns: 1fr; }
  .pl-sidebar { position: static; max-height: none; }
  .pl-stats { flex-wrap: wrap; }
  .pl-stats input.input { width: 100% !important; order: -1; }
}

/* Patch 2026-05-18: GBX embedded thumbnails are stored flipped on this stack.
   Rotate only real map thumbnails, keep stock environment photos untouched. */
.ov-mapbig-bg.ov-mapcard-bg-real {
  transform: rotate(180deg) scale(1.08);
  transform-origin: center center;
  image-rendering: auto;
  background-size: cover;
  background-position: center center;
}
.sv-map-thumb {
  transform: rotate(180deg);
  image-rendering: auto;
  background-size: cover;
  background-position: center center;
}

/* Controller/server action buttons — stronger visual separation */
.tm-actionbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.tm-actionbar .btn{font-weight:800;letter-spacing:.01em;border-radius:10px;padding:9px 12px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.btn-success,.tm-btn-run{background:linear-gradient(135deg,#22c55e,#16a34a)!important;border-color:rgba(34,197,94,.55)!important;color:#04130a!important}
.btn-success-soft{background:rgba(34,197,94,.10)!important;border-color:rgba(34,197,94,.35)!important;color:#86efac!important}
.tm-btn-stop{background:linear-gradient(135deg,#ef4444,#b91c1c)!important;border-color:rgba(239,68,68,.55)!important;color:#fff!important}
.tm-btn-restart{background:linear-gradient(135deg,#f59e0b,#d97706)!important;border-color:rgba(245,158,11,.55)!important;color:#1b1000!important}
.tm-btn-skip{background:linear-gradient(135deg,#38bdf8,#2563eb)!important;border-color:rgba(56,189,248,.55)!important;color:#fff!important}
.tm-actionbar-controller{padding:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:12px}

/* ManiaPlanet title/environment selector */
.mp-titlepack-card{position:relative;overflow:hidden}
.mp-line-hero{height:38px;margin:-2px -2px 12px;display:grid;grid-template-columns:1.2fr 1fr .9fr 1.1fr;gap:4px;opacity:.95}
.mp-line-hero span{display:block;border-radius:999px;filter:saturate(1.15);box-shadow:0 0 18px rgba(255,255,255,.08) inset}
.mp-line-hero span:nth-child(1){background:linear-gradient(90deg,#f97316,#facc15)}
.mp-line-hero span:nth-child(2){background:linear-gradient(90deg,#22c55e,#14b8a6)}
.mp-line-hero span:nth-child(3){background:linear-gradient(90deg,#38bdf8,#2563eb)}
.mp-line-hero span:nth-child(4){background:linear-gradient(90deg,#a855f7,#ec4899)}
.mp-pack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px}
.mp-pack.active{outline:2px solid rgba(16,185,129,.75);box-shadow:0 0 0 4px rgba(16,185,129,.15)}


/* HOTFIX V3 — hard visible controls even if older button styles win */
#srv-start,#ctrl-start,.tm-btn-run{background:#16a34a!important;color:#031b0b!important;border:1px solid #4ade80!important;box-shadow:0 0 0 1px rgba(74,222,128,.18),0 10px 26px rgba(22,163,74,.25)!important}
#srv-stop,#ctrl-stop,.tm-btn-stop{background:#dc2626!important;color:#fff!important;border:1px solid #f87171!important;box-shadow:0 10px 26px rgba(220,38,38,.22)!important}
#srv-restart,#ctrl-restart,.tm-btn-restart{background:#f59e0b!important;color:#1f1300!important;border:1px solid #fbbf24!important;box-shadow:0 10px 26px rgba(245,158,11,.22)!important}
#srv-nextmap,.tm-btn-skip{background:#2563eb!important;color:#fff!important;border:1px solid #60a5fa!important;box-shadow:0 10px 26px rgba(37,99,235,.24)!important}
#srv-start,#srv-stop,#srv-restart,#srv-nextmap,#ctrl-start,#ctrl-stop,#ctrl-restart{min-width:112px;text-align:center;font-weight:900;text-transform:none}
.mp-titlepack-card{border-color:rgba(56,189,248,.35)!important;background:linear-gradient(180deg,rgba(56,189,248,.08),rgba(255,255,255,.025))!important}
.mp-line-hero{height:44px!important;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.04)}
.mp-pack{font-weight:800!important;border-radius:10px!important}
.mp-pack:hover{transform:translateY(-1px)}
.ov-mapbig{min-height:215px!important}
.ov-mapbig-bg.ov-mapcard-bg-real{transform:rotate(180deg) scale(1.12)!important;image-rendering:auto!important;filter:saturate(1.18) contrast(1.08) sharpen(1)}

/* HOTFIX V8 — real ManiaPlanet pack installer */
.mp-v8-shell{display:flex;flex-direction:column;gap:18px}.mp-v8-hero{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;padding:24px;border-radius:24px;background:radial-gradient(circle at top left,rgba(20,184,166,.18),transparent 38%),linear-gradient(135deg,rgba(15,23,42,.98),rgba(2,6,23,.98));border:1px solid rgba(45,212,191,.18);box-shadow:0 18px 50px rgba(0,0,0,.28)}.mp-v8-kicker{display:inline-flex;margin-bottom:8px;padding:6px 10px;border-radius:999px;background:rgba(20,184,166,.12);border:1px solid rgba(45,212,191,.24);color:#5eead4;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.mp-v8-hero h2{margin:0 0 8px;font-size:30px;line-height:1.1;color:#f8fafc}.mp-v8-hero p{margin:0;color:#93a4ba;line-height:1.55}.mp-v8-status{display:grid;grid-template-columns:1fr;gap:10px}.mp-v8-status>div{padding:13px 14px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(148,163,184,.12)}.mp-v8-status span{display:block;color:#64748b;font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}.mp-v8-status strong{color:#e2e8f0;font-size:14px}.mp-v8-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px}.mp-v8-card{overflow:hidden;border-radius:22px;background:linear-gradient(180deg,rgba(12,18,29,.98),rgba(5,9,16,.98));border:1px solid rgba(148,163,184,.13);box-shadow:0 16px 44px rgba(0,0,0,.26)}.mp-v8-card.is-active{border-color:rgba(16,185,129,.55);box-shadow:0 0 0 1px rgba(16,185,129,.18),0 20px 54px rgba(0,0,0,.34)}.mp-v8-preview{height:126px;position:relative;overflow:hidden}.mp-v8-fake-img{height:100%;display:flex;align-items:end;padding:18px;background:linear-gradient(135deg,#0f172a,#1e293b)}.tone-blue .mp-v8-fake-img{background:linear-gradient(135deg,#0ea5e9,#1d4ed8)}.tone-orange .mp-v8-fake-img{background:linear-gradient(135deg,#f97316,#facc15)}.tone-green .mp-v8-fake-img{background:linear-gradient(135deg,#22c55e,#14b8a6)}.tone-cyan .mp-v8-fake-img{background:linear-gradient(135deg,#22d3ee,#2563eb)}.tone-purple .mp-v8-fake-img{background:linear-gradient(135deg,#a855f7,#ec4899)}.mp-v8-fake-img span{font-size:28px;font-weight:950;color:#fff;text-shadow:0 6px 20px rgba(0,0,0,.35)}.mp-v8-active{position:absolute;right:14px;top:14px;padding:6px 10px;border-radius:999px;background:rgba(6,95,70,.9);color:#d1fae5;border:1px solid rgba(52,211,153,.45);font-size:11px}.mp-v8-body{padding:18px}.mp-v8-body h3{margin:0 0 8px;font-size:22px;color:#f8fafc}.mp-v8-body code{color:#bfdbfe;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.14);padding:2px 6px;border-radius:8px}.mp-v8-mini-stats{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.mp-v8-mini-stats span{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(148,163,184,.12);color:#cbd5e1;font-size:12px}.mp-v8-list{min-height:62px;display:flex;flex-direction:column;gap:5px;margin:10px 0 14px}.mp-v8-list span,.mp-v8-list em{font-size:12px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mp-v8-actions{display:flex;flex-wrap:wrap;gap:8px}.mp-v8-upload{margin-top:14px;padding:14px;border-radius:16px;background:rgba(2,6,23,.42);border:1px solid rgba(148,163,184,.14)}.mp-v8-upload label{display:block;margin:8px 0 6px;color:#dbeafe;font-size:13px;font-weight:800}.mp-v8-upload input[type=file]{width:100%;padding:10px;border-radius:12px;background:rgba(15,23,42,.92);border:1px solid rgba(148,163,184,.16);color:#cbd5e1}.mp-v8-form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}.mp-v8-tools{padding:20px!important}.mp-v8-tools h3{margin:0 0 14px;color:#f8fafc}.mp-v8-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.mp-v8-steps>div{display:flex;gap:10px;align-items:center;padding:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.1)}.mp-v8-steps b{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;background:rgba(20,184,166,.18);color:#5eead4}.mp-v8-steps span{color:#cbd5e1;font-size:13px}@media(max-width:900px){.mp-v8-hero{grid-template-columns:1fr}.mp-v8-grid{grid-template-columns:1fr}}

/* HOTFIX V9 — ManiaPlanet pack UI is Settings-only and hidden outside TM2 */
.tabs [data-stab="maniaplanet"],
.mp-titlepack-card-control{display:none!important}


/* V16_OWNER_CONTROLLER_INSTALLER_FILEONLY */
.owner-controller-installer{margin:16px 0 22px!important;padding:20px!important;border-radius:20px!important;background:linear-gradient(135deg,rgba(5,11,22,.98),rgba(15,23,42,.96))!important;border:1px solid rgba(16,185,129,.22)!important;box-shadow:0 18px 44px rgba(0,0,0,.28)!important;display:block!important}
.oci-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.oci-head h2{margin:0 0 6px!important;font-size:24px!important;color:#ecfeff!important;font-weight:900!important}.oci-head p{margin:0!important;color:#94a3b8!important;line-height:1.45!important}.oci-pill{padding:7px 10px;border-radius:999px;background:rgba(16,185,129,.16);border:1px solid rgba(16,185,129,.35);color:#d1fae5;font-weight:800;font-size:12px;white-space:nowrap}.oci-grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(240px,.7fr);gap:14px;margin-bottom:14px}.oci-grid label span{display:block;color:#cbd5e1;font-size:13px;font-weight:800;margin-bottom:7px}.oci-grid select{width:100%;height:42px;border-radius:12px;background:#020617;color:#e5e7eb;border:1px solid rgba(148,163,184,.24);padding:0 12px}.oci-check{display:flex!important;align-items:center!important;gap:10px!important;padding:11px 12px!important;border-radius:14px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(148,163,184,.12)!important}.oci-check span{margin:0!important}.oci-actions{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}.oci-btn{height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.14);padding:0 14px;color:white;font-weight:900;cursor:pointer}.oci-green{background:linear-gradient(135deg,#10b981,#059669)}.oci-green-soft{background:linear-gradient(135deg,#22c55e,#16a34a)}.oci-blue{background:linear-gradient(135deg,#38bdf8,#2563eb)}.oci-red{background:linear-gradient(135deg,#ef4444,#991b1b)}.oci-yellow{background:linear-gradient(135deg,#f59e0b,#b45309)}.oci-status{min-height:54px;max-height:180px;overflow:auto;margin:10px 0 0!important;padding:12px!important;border-radius:14px!important;background:#020617!important;color:#bfdbfe!important;border:1px solid rgba(148,163,184,.14)!important;font-size:12px!important;white-space:pre-wrap!important}@media(max-width:800px){.oci-grid{grid-template-columns:1fr}.oci-head{flex-direction:column}.oci-actions .oci-btn{width:100%}}
/* keep broken ManiaPlanet pack installer hidden */.mp-shell,.mp-pack-grid,.mp-pack-card,.mp-status-card,.mp-quick-tools,.maniaplanet-pack-installer,[data-stab="maniaplanet"],#stab-maniaplanet{display:none!important}


/* v20: hide broken ManiaPlanet pack installer cards; start parameters remain normal */
.mp-shell,.mp-pack-grid,.mp-pack-card,.mp-status-card,.mp-quick-tools,.maniaplanet-pack-installer,[data-stab="maniaplanet"],#stab-maniaplanet{display:none!important}

/* v23: remove broken ManiaPlanet switch / pack installer from Settings UI */
.mp-v8-shell,
.mp-v8-hero,
.mp-v8-grid,
.mp-v8-card,
.mp-v8-tools,
.mp-titlepack-card,
.mp-titlepack-card-control,
.mp-line-hero,
.mp-pack-grid,
.mp-pack,
.maniaplanet-installer,
.maniaplanet-pack-installer,
[data-stab="maniaplanet"],
#stab-maniaplanet,
#tab-maniaplanet {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   FINAL CLEAN DARK SQUARE DESIGN PATCH
   - square widgets
   - sidebar logo
   - minimal login with background
   - startpage with header image, panel preview, features, small footer
   - fixes white native buttons inside file browser / file editor
   ════════════════════════════════════════════════════════════════════════ */
:root, [data-theme="dark"] {
  --bg-0: #070b10;
  --bg-1: #0d131a;
  --bg-2: #111922;
  --bg-3: #16202b;
  --bg-hover: #182431;
  --line: #263241;
  --line-soft: #1b2530;
  --text-0: #f3f6f8;
  --text-1: #b9c2cf;
  --text-2: #7f8b9b;
  --text-3: #536071;
  --accent: #2dd4bf;
  --accent-dim: #19b8a4;
  --accent-soft: rgba(45, 212, 191, .10);
  --accent-glow: rgba(45, 212, 191, .16);
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 6px;
}

body {
  background:
    linear-gradient(rgba(7,11,16,.93), rgba(7,11,16,.96)),
    url('https://cdn.tmcdn.io/api/cdn/d706c791/4.jpg') center top / cover fixed no-repeat;
}

.card,
.server-card,
.order-card,
.stat-card,
.quick-card,
.panel,
.widget,
.tbl,
.input,
.select,
.textarea,
.btn,
.badge,
.auth-card,
.shop-card,
.offer-card,
.start-card,
.start-panel-card,
.start-offer,
.sidebar,
.sidebar-toggle,
.user-chip,
.avatar,
.icon-btn,
.nav-item {
  border-radius: var(--r-md) !important;
}

/* Sidebar: clean, dark, logo at top */
#shell { grid-template-columns: var(--sidebar-w) 1fr; }
.sidebar {
  background: rgba(13,19,26,.98) !important;
  border-right: 1px solid #202b38 !important;
  padding: 18px 12px !important;
  box-shadow: none !important;
  scrollbar-width: thin;
  scrollbar-color: #3b4653 #0d131a;
}
.sidebar::-webkit-scrollbar,
.nav::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track,
.nav::-webkit-scrollbar-track { background: #0d131a; }
.sidebar::-webkit-scrollbar-thumb,
.nav::-webkit-scrollbar-thumb { background: #3b4653; border-radius: 0; }
.brand {
  padding: 0 12px 20px !important;
  gap: 12px !important;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 10px;
}
.brand-mark {
  width: 36px !important;
  height: 36px !important;
  background: var(--accent) !important;
  color: #071014 !important;
  overflow: hidden;
  flex: 0 0 36px;
}
.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.brand-logo[src=""], .brand-logo:not([src]) { display: none; }
.brand-mark .brand-fallback { font-weight: 900; font-size: 17px; line-height: 1; }
.brand-mark:has(.brand-logo:not([src=""])) .brand-fallback { display: none; }
.brand-text {
  color: #f5f7fa !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
}
.nav { gap: 3px !important; padding-right: 4px; }
.nav-section {
  color: #647084 !important;
  padding: 17px 12px 6px !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
}
.nav-item {
  min-height: 38px;
  padding: 9px 12px !important;
  color: #aab4c2 !important;
  background: transparent !important;
  border: 1px solid transparent;
}
.nav-item:hover {
  background: #121b24 !important;
  border-color: #243140 !important;
  color: #edf2f7 !important;
}
.nav-item.active {
  background: rgba(45,212,191,.10) !important;
  border-color: rgba(45,212,191,.28) !important;
  color: var(--accent) !important;
}
.nav-item.active::before { display: none !important; }
.sidebar-foot {
  border-top: 1px solid var(--line-soft) !important;
  background: rgba(7,11,16,.35);
  padding: 12px 8px 4px !important;
}
.avatar { border-radius: var(--r-md) !important; background: #151f2b !important; }

/* Fix native buttons/fields turning white inside file browser/editor */
.dm-browser button:not(.btn),
.dm-browser input,
.dm-browser select,
.dm-browser textarea,
.dm-toolbar button:not(.btn),
.dm-table button:not(.btn),
.file-browser button:not(.btn),
.file-editor button:not(.btn),
.files-panel button:not(.btn),
.matchsettings-editor button:not(.btn),
[data-file-browser] button:not(.btn),
[data-file-editor] button:not(.btn),
#file-editor button:not(.btn),
button.file-action,
button.copy-btn,
button[data-copy],
button[data-action] {
  background: #16202b !important;
  color: #e8edf2 !important;
  border: 1px solid #2a3544 !important;
  border-radius: 3px !important;
  padding: 5px 9px;
  box-shadow: none !important;
}
.dm-browser button:not(.btn):hover,
.dm-toolbar button:not(.btn):hover,
.dm-table button:not(.btn):hover,
button.file-action:hover,
button.copy-btn:hover,
button[data-copy]:hover,
button[data-action]:hover {
  background: #1b2836 !important;
  color: var(--accent) !important;
  border-color: rgba(45,212,191,.45) !important;
}
.dm-table .tbl button,
.tbl td button {
  background: #16202b !important;
  color: #e8edf2 !important;
  border-color: #2a3544 !important;
}
code, kbd, pre, .mono {
  background: rgba(17,25,34,.8);
  color: #dbe7ef;
  border-radius: 3px;
}

/* Minimal login */
.auth-wrap.auth-minimal {
  min-height: 100vh;
  display: grid !important;
  place-items: center;
  padding: 34px;
  background:
    linear-gradient(90deg, rgba(7,11,16,.96) 0%, rgba(7,11,16,.88) 42%, rgba(7,11,16,.52) 100%),
    var(--auth-bg-image) center / cover no-repeat !important;
  position: relative;
}
.auth-wrap.auth-minimal::after {
  content: '';
  position: fixed;
  right: 42px;
  bottom: 42px;
  width: min(560px, 42vw);
  height: min(330px, 32vh);
  background: var(--auth-panel-image) center / cover no-repeat;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 80px rgba(0,0,0,.48);
  opacity: .92;
  pointer-events: none;
}
.auth-wrap.auth-minimal .auth-card {
  width: min(430px, 100%);
  margin-right: min(46vw, 620px);
  background: rgba(13,19,26,.94) !important;
  border: 1px solid #263241 !important;
  border-radius: 4px !important;
  padding: 28px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.42) !important;
}
.auth-wrap.auth-minimal .auth-logo {
  width: 42px;
  height: 42px;
  border-radius: 3px !important;
  margin-bottom: 10px;
  box-shadow: none;
}
.auth-wrap.auth-minimal .auth-logo img { width: 100%; height: 100%; object-fit: cover; }
.auth-wrap.auth-minimal .auth-brand {
  text-align: left !important;
  margin-bottom: 22px !important;
}
.auth-wrap.auth-minimal .auth-brand h1 { font-size: 22px; }
.auth-wrap.auth-minimal .auth-tagline { color: #8190a2; }
.auth-mini-head span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.auth-mini-head h2 {
  margin: 4px 0 6px;
  font-size: 28px;
  letter-spacing: -.03em;
}
.auth-mini-head p { color: #8996a8; margin-bottom: 20px; }
.auth-mini-form .input {
  background: #101821 !important;
  border-color: #283545 !important;
}
.auth-submit { height: 42px; margin-top: 4px; }
.auth-links-row, .auth-switch {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  color: #8996a8;
  font-size: 13px;
}
.auth-back-home { display: inline-flex; margin-top: 14px; color: #8491a1; }
@media (max-width: 980px) {
  .auth-wrap.auth-minimal .auth-card { margin-right: 0; }
  .auth-wrap.auth-minimal::after { display: none; }
}

/* Start page — header image, no nav */
.start-page {
  min-height: 100vh;
  background: #070b10;
  color: var(--text-0);
}
.start-hero {
  position: relative;
  min-height: 580px;
  overflow: hidden;
  border-bottom: 1px solid #202b38;
}
.start-hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7,11,16,.98) 0%, rgba(7,11,16,.84) 42%, rgba(7,11,16,.30) 100%),
    var(--start-bg-image) center / cover no-repeat;
  transform: scale(1.02);
}
.start-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 28px 56px;
  min-height: 580px;
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 42px;
  align-items: center;
}
.start-brand {
  position: absolute;
  top: 26px;
  left: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 800;
}
.start-brand img { width: 36px; height: 36px; border-radius: 3px; }
.start-copy { max-width: 620px; padding-top: 40px; }
.start-kicker {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.start-copy h1 {
  margin: 12px 0 14px;
  font-size: clamp(38px, 5vw, 66px);
  line-height: .98;
  letter-spacing: -.055em;
}
.start-copy p {
  color: #a0adbf;
  font-size: 17px;
  max-width: 560px;
}
.start-actions { display: flex; gap: 10px; margin-top: 24px; }
.start-panel-card {
  height: 320px;
  background: #0d131a;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 90px rgba(0,0,0,.48);
  overflow: hidden;
}
.start-panel-shot { width: 100%; height: 100%; background: var(--start-panel-image) center / cover no-repeat; }
.start-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 42px 28px 24px;
}
.start-section { margin-bottom: 42px; }
.start-section-head { margin-bottom: 16px; }
.start-section-head span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.start-section-head h2 { font-size: 26px; margin-top: 4px; }
.start-features,
.start-offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.start-card {
  background: #0d131a;
  border: 1px solid #263241;
  padding: 18px;
}
.start-card h3 { margin-bottom: 8px; color: #f3f6f8; }
.start-card p, .start-card li { color: #8d9aac; }
.start-offer > span {
  display: inline-flex;
  padding: 3px 7px;
  background: rgba(45,212,191,.10);
  border: 1px solid rgba(45,212,191,.25);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  margin-bottom: 10px;
}
.start-offer strong {
  display: block;
  color: var(--accent);
  font-size: 24px;
  margin: 12px 0;
}
.start-offer small { margin-left: 5px; color: #7f8b9b; font-size: 12px; }
.start-offer ul { margin: 0 0 14px 18px; }
.start-footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 28px 32px;
  border-top: 1px solid #202b38;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #7f8b9b;
  font-size: 13px;
}
@media (max-width: 980px) {
  .start-hero-inner { grid-template-columns: 1fr; }
  .start-panel-card { height: 240px; }
}