/* ============================================================================
   GSV Games Command Deck — games.g-sv.eu  (STATIC MOCKUP, no backend)
   Token system: ported 1:1 from Data/proxy/ui/theme.css (Aurora default)
   + spec additions (glass discipline, stat-rail, console tinting, power seg).
   ============================================================================ */

/* ---- Non-color tokens (theme-independent) ---- */
:root{
  --radius:14px; --radius-sm:9px; --radius-lg:20px;
  --gap:8px;
  --font:-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  --font-mono:"Cascadia Code","JetBrains Mono","Consolas",monospace;
  --shadow:0 12px 38px rgba(0,0,0,.40);
  --shadow-sm:0 2px 10px rgba(0,0,0,.28);
  --tr:150ms ease;
  --sidebar-w:232px;
  /* 4px spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --blur-glass:12px; --blur-deep:24px;
}

/* ---- THEME: G-SV proxy (Aurora dark, MAGENTA accent) ----
   The dark "Aurora" base is preserved 1:1; only the accent family is retinted
   from violet/blue to magenta/pink (#ff5cc8) so proxy.g-sv.eu has its own
   identity while keeping the proven Command-Deck layout & components. */
:root{
  --bg:#0b0710; --bg-elev:#130b18; --surface:#1a1020; --surface-2:#251530;
  --border:#33203f;
  --text:#fbeef7; --text-dim:#c1a3bd; --text-faint:#7f6584;
  --accent:#ff5cc8; --accent-hover:#ff86d8; --accent-soft:rgba(255,92,200,.20);
  --accent-text:#fff;
  --danger:#ff6b81; --ok:#4be0a8; --warn:#ffce5a;
  --info:#c06bff;
  --glass-bg:rgba(26,16,32,.62); --glass-elev:rgba(19,11,24,.66);
  --glass-strong:rgba(33,20,42,.86); --glass-opaque:#160d1c; --glass-opaque-2:#120a17;
  --glass-border:rgba(255,160,225,.12); --glass-border-bright:rgba(255,170,225,.26);
  --aurora-glow:0 0 32px rgba(255,92,200,.32);
  --aurora-grad:linear-gradient(120deg,#ff5cc8 0%,#e159d6 45%,#c06bff 100%);
  --aurora-soft:linear-gradient(135deg,rgba(255,92,200,.16),rgba(192,107,255,.16));
  --ok-soft:rgba(75,224,168,.14); --warn-soft:rgba(255,206,90,.14); --danger-soft:rgba(255,107,129,.14);
}
/* alt theme: Mitternacht (deep magenta) — toggle */
:root[data-theme="mitternacht"]{
  --bg:#120a16; --bg-elev:#1a0f20; --surface:#22142b; --surface-2:#2d1b39; --border:#3a2647;
  --text:#f3e6ef; --text-dim:#bea3bd; --text-faint:#7f6584;
  --accent:#e159d6; --accent-hover:#ff86d8; --accent-soft:rgba(225,89,214,.18);
  --aurora-grad:linear-gradient(120deg,#e159d6,#ff86d8 55%,#c06bff);
  --aurora-soft:linear-gradient(135deg,rgba(225,89,214,.16),rgba(192,107,255,.14));
  --aurora-glow:0 0 32px rgba(225,89,214,.32);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font);color:var(--text);font-size:14px;line-height:1.5;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1200px 600px at 100% -10%,rgba(255,92,200,.13),transparent 60%),
    radial-gradient(1000px 520px at -10% 8%,rgba(192,107,255,.12),transparent 55%),
    var(--bg);
  background-attachment:fixed;
  overflow-x:hidden;
}
a{color:var(--accent);text-decoration:none}
button{font-family:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(126,150,255,.28);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(126,150,255,.5)}
.mono{font-family:var(--font-mono)}
.dim{color:var(--text-dim)}
.faint{color:var(--text-faint)}
.hide{display:none!important}

/* ============================ LOGIN (Game-Hosting-Panel) ============================ */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--text-dim);font-weight:600;margin-bottom:6px}
.field-hint{font-size:11px;color:var(--text-faint);margin-top:6px;text-align:center}

@keyframes auroraDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-18px,0) scale(1.06)}}

/* shell: split hero (left) + login pane (right) */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;position:relative;overflow:hidden;isolation:isolate}
.auth-aurora{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 560px at 16% 22%,rgba(255,92,200,.24),transparent 60%),
    radial-gradient(960px 620px at 86% 86%,rgba(192,107,255,.26),transparent 62%),
    radial-gradient(640px 480px at 64% 8%,rgba(225,89,214,.16),transparent 64%);
  animation:auroraDrift 16s ease-in-out infinite alternate}
.auth-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,170,225,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,170,225,.05) 1px,transparent 1px);
  background-size:46px 46px;-webkit-mask-image:radial-gradient(circle at 30% 40%,#000,transparent 78%);mask-image:radial-gradient(circle at 30% 40%,#000,transparent 78%)}

/* left hero */
.auth-hero{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:56px clamp(40px,6vw,96px);position:relative}
.auth-brand{display:flex;align-items:center;gap:13px;font-weight:800}
.auth-brand .logo{width:46px;height:46px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;color:#fff;
  background:var(--aurora-grad);box-shadow:0 12px 30px -8px rgba(90,110,255,.7),var(--aurora-glow)}
.auth-brand .logo svg{width:26px;height:26px}
.auth-wordmark{font-size:26px;letter-spacing:-.02em}
.auth-wordmark b{background:var(--aurora-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}
.auth-wordmark .gm{color:var(--text);font-weight:700;opacity:.9;margin-left:-3px}
.auth-h1{font-size:clamp(30px,3.4vw,46px);line-height:1.06;font-weight:800;letter-spacing:-.025em;margin-top:4px}
.auth-lede{color:var(--text-dim);font-size:15.5px;line-height:1.6;max-width:46ch}
.auth-feats{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:4px}
.auth-feats li{display:flex;align-items:center;gap:13px}
.auth-feats .af-ic{width:42px;height:42px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;color:var(--accent-hover);
  background:var(--accent-soft);border:1px solid var(--glass-border-bright)}
.auth-feats .af-ic svg{width:21px;height:21px}
.auth-feats b{display:block;font-size:14.5px;font-weight:700}
.auth-feats small{display:block;color:var(--text-faint);font-size:12.5px;margin-top:1px}
.auth-trust{display:flex;align-items:center;gap:9px;color:var(--text-dim);font-size:12.5px;font-weight:600;margin-top:6px}
.auth-trust .at-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(75,224,168,.16)}
.auth-trust .at-dot.run{animation:atPulse 2.4s ease-in-out infinite}
@keyframes atPulse{0%,100%{box-shadow:0 0 0 4px rgba(75,224,168,.16)}50%{box-shadow:0 0 0 7px rgba(75,224,168,.05)}}

/* right login pane */
.auth-pane{display:flex;align-items:center;justify-content:center;padding:48px clamp(20px,4vw,64px);position:relative}
.auth-card{width:100%;max-width:408px;border:1px solid var(--glass-border-bright);border-radius:22px;padding:36px 34px;
  background:var(--glass-strong);-webkit-backdrop-filter:blur(var(--blur-deep));backdrop-filter:blur(var(--blur-deep));
  box-shadow:0 44px 100px -44px rgba(2,5,20,.92)}
.auth-brand--card{display:none;justify-content:center;margin-bottom:18px;font-size:22px}
.auth-brand--card .logo{width:40px;height:40px}
.auth-brand--card .auth-wordmark{font-size:22px}
.auth-title{font-size:24px;font-weight:800;letter-spacing:-.02em}
.auth-sub{color:var(--text-dim);font-size:13.5px;margin:6px 0 24px}
.auth-form{display:block}
.auth-pwrow{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.auth-link{color:var(--accent-hover);font-size:12px;font-weight:600}
.auth-link:hover{text-decoration:underline}
.auth-remember{display:flex;align-items:center;gap:8px;color:var(--text-dim);font-size:12.5px;font-weight:600;margin:2px 0 18px;cursor:pointer;user-select:none}
.auth-remember input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
.auth-submit{width:100%;padding:12px 16px;font-size:14.5px;font-weight:700}
.auth-foot{text-align:center;color:var(--text-dim);font-size:13px;margin-top:20px;padding-top:18px;border-top:1px solid var(--glass-border)}
.auth-note{text-align:center;color:var(--text-faint);font-size:11px;margin-top:14px}

/* responsive: stack to single login card (hero hidden, brand moves into card) */
@media(max-width:920px){
  .auth{grid-template-columns:1fr}
  .auth-hero{display:none}
  .auth-pane{min-height:100vh;padding:24px 18px}
  .auth-brand--card{display:flex}
  .auth-grid{-webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 80%);mask-image:radial-gradient(circle at 50% 30%,#000,transparent 80%)}
}
@media(max-width:480px){
  .auth-card{padding:30px 22px;border-radius:18px}
  .auth-title{font-size:22px}
}

/* ============================ BRAND ============================ */
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px}
.brand .logo{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;
  background:var(--aurora-grad);box-shadow:0 8px 22px -8px rgba(90,110,255,.7),var(--aurora-glow)}
.brand .logo svg{width:20px;height:20px}
.brand .name{background:var(--aurora-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brand .name b{font-weight:800}
.brand .gm{color:var(--text);font-weight:700;opacity:.85;margin-left:-4px}

/* ============================ APP SHELL ============================ */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh;align-items:stretch}
.app.collapsed{grid-template-columns:64px 1fr}

/* ---- Left rail (Level 0 nav) ---- */
.rail{display:flex;flex-direction:column;padding:16px 12px;border-right:1px solid var(--border);
  background:var(--glass-elev);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  position:sticky;top:0;height:100vh;overflow-y:auto;z-index:30}
.rail-brand{display:flex;align-items:center;gap:11px;padding:6px 8px 16px;border-bottom:1px solid var(--border);margin-bottom:8px}
.rail-brand .logo{width:38px;height:38px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;background:var(--aurora-grad);box-shadow:0 8px 20px -6px rgba(90,110,255,.6);color:#fff}
.rail-brand .logo svg{width:22px;height:22px}
.rail-btxt b{display:block;font-size:16px;font-weight:800;letter-spacing:-.3px;line-height:1.08}
.rail-btxt b span{background:var(--aurora-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rail-btxt small{font-size:10.5px;color:var(--text-dim);letter-spacing:.2px}
.app.collapsed .rail-btxt,.app.collapsed .navlabel,.app.collapsed .nav-i .nt,.app.collapsed .nav-i .next{display:none}
.app.collapsed .rail-brand{justify-content:center;padding:6px 0 16px}

.nav{display:flex;flex-direction:column;gap:2px}
.navlabel{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint);padding:14px 11px 5px;font-weight:700}
.nav-i{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;color:var(--text-dim);font-weight:600;font-size:13.5px;transition:.16s;cursor:pointer;border:1px solid transparent}
.nav-i:hover{color:var(--text);background:rgba(255,255,255,.04)}
.nav-i.on{color:#fff;background:var(--aurora-soft);border-color:var(--glass-border-bright);box-shadow:inset 0 0 0 1px rgba(124,92,240,.18),0 8px 20px -12px rgba(90,110,255,.6)}
.nav-i .ni{width:20px;height:20px;flex:0 0 auto;display:grid;place-items:center}
.nav-i .ni svg{width:18px;height:18px}
.nav-i .nt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-i .next{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent-hover)}
.app.collapsed .nav-i{justify-content:center;padding:9px 0}
.rail-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 8px 4px;border-top:1px solid var(--border)}
.rail-foot .fava{width:34px;height:34px;border-radius:50%;background:var(--aurora-grad);display:grid;place-items:center;font-weight:700;color:#fff;flex:0 0 auto}
.app.collapsed .rail-foot .fmeta{display:none}
.rail-foot .fmeta{display:flex;flex-direction:column;min-width:0}
.rail-foot .fmeta small{font-size:10.5px;color:var(--text-dim)}
.rail-foot .fmeta b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* scrim hidden + out of flow on desktop (only used as mobile rail backdrop) */
.rail-scrim{display:none}

/* ---- Main column ---- */
.main{display:flex;flex-direction:column;min-width:0}

/* ---- Top bar (Level 0) ---- */
.topbar{display:flex;align-items:center;gap:14px;padding:12px 24px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:25;
  background:var(--glass-bg);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)}
.topbar .menu-btn{display:none}
.cmdk{flex:1;max-width:520px;display:flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid var(--border);border-radius:12px;
  background:rgba(255,255,255,.03);color:var(--text-dim);cursor:pointer;transition:.15s;font-size:13.5px}
.cmdk:hover{border-color:var(--glass-border-bright);color:var(--text)}
.cmdk>svg{width:18px;height:18px;flex:0 0 auto}
.cmdk .kbd{margin-left:auto;display:flex;gap:3px}
.kbd b{font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono)}
.topbar-r{display:flex;align-items:center;gap:10px}
.icon-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.03);color:var(--text-dim);cursor:pointer;font-size:16px;transition:.15s;position:relative}
.icon-btn:hover{color:var(--text);background:var(--aurora-soft);border-color:var(--glass-border-bright)}
.icon-btn svg{width:18px;height:18px}
.icon-btn .badge-dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--surface)}
.user-chip{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 6px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.03);cursor:pointer;transition:.15s}
.user-chip:hover{border-color:var(--glass-border-bright)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--aurora-grad);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;box-shadow:0 4px 14px -4px rgba(90,110,255,.7);font-size:13px}
.user-chip .uname{font-size:13px;font-weight:600}

/* ---- Content ---- */
.content{padding:24px 28px 56px;min-width:0}
@media(max-width:1100px){.content{padding:20px}}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:6px 2px 22px;flex-wrap:wrap}
.page-head h1{font-size:26px;font-weight:800;letter-spacing:-.03em}
.page-head p{color:var(--text-dim);font-size:13.5px;margin-top:3px}
.page-head .ph-actions{display:flex;gap:8px;flex-wrap:wrap}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 2px 14px}
.section-title h2{font-size:15px;font-weight:700;letter-spacing:-.01em}
.section-title .st-sub{color:var(--text-faint);font-size:12px;font-weight:500}

/* ============================ BUTTONS ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border:1px solid transparent;border-radius:11px;
  font-family:var(--font);font-weight:600;font-size:13.5px;cursor:pointer;transition:.15s;color:var(--text);background:rgba(255,255,255,.04);white-space:nowrap}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn:active{transform:translateY(1px)}
.btn.primary{color:#fff;background:var(--aurora-grad);border:0;box-shadow:0 8px 22px -10px rgba(90,110,255,.6)}
.btn.primary:hover{filter:brightness(1.08);box-shadow:0 10px 28px -10px rgba(90,110,255,.75),var(--aurora-glow)}
.btn.ghost{background:rgba(255,255,255,.04);color:var(--text);border:1px solid var(--border)}
.btn.ghost:hover{border-color:var(--glass-border-bright);background:rgba(255,255,255,.06)}
.btn.subtle{background:transparent;border:1px solid var(--border);color:var(--text-dim)}
.btn.subtle:hover{color:var(--text);border-color:var(--glass-border-bright)}
.btn.danger{background:var(--danger-soft);color:var(--danger);border:1px solid rgba(255,107,129,.3)}
.btn.danger:hover{background:rgba(255,107,129,.2)}
.btn.sm{padding:7px 12px;font-size:12.5px;border-radius:9px}
.btn.xs{padding:5px 10px;font-size:12px;border-radius:8px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}

/* ============================ CARDS ============================ */
.card{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent),var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:0 2px 10px rgba(2,5,20,.5)}
.card.tight{padding:16px}
.card.flush{padding:0;overflow:hidden}
.card .card-h{font-size:15px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.card .card-sub{color:var(--text-dim);font-size:12.5px;margin-bottom:16px}
.grid{display:grid;gap:16px}

/* ============================ BADGES / CHIPS ============================ */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.badge .bdot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.badge.ok{background:var(--ok-soft);color:var(--ok)} .badge.ok .bdot{background:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)} .badge.warn .bdot{background:var(--warn)}
.badge.danger{background:var(--danger-soft);color:var(--danger)} .badge.danger .bdot{background:var(--danger)}
.badge.info{background:rgba(77,159,255,.14);color:var(--info)} .badge.info .bdot{background:var(--info)}
.badge.brand{background:var(--accent-soft);color:var(--accent-hover)} .badge.brand .bdot{background:var(--accent-hover)}
.badge.idle{background:rgba(151,160,194,.14);color:var(--text-dim)} .badge.idle .bdot{background:var(--text-dim)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim);white-space:nowrap}
.chip.mono{font-family:var(--font-mono);font-size:11.5px}
.catchip{padding:7px 14px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text-dim);cursor:pointer;font-size:13px;white-space:nowrap;transition:.15s;font-weight:600}
.catchip:hover{color:var(--text);border-color:var(--glass-border-bright)}
.catchip.on{background:var(--aurora-soft);color:#fff;border-color:var(--accent)}

/* status dot */
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.dot.run{background:var(--ok);box-shadow:0 0 0 3px rgba(75,224,168,.18)}
.dot.stop{background:var(--text-dim);box-shadow:0 0 0 3px rgba(151,160,194,.14)}
.dot.warn{background:var(--warn);box-shadow:0 0 0 3px rgba(255,206,90,.18)}

/* bar */
.bar{height:8px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:6px;background:var(--aurora-grad);transition:width .4s ease}
.bar.ok>i{background:linear-gradient(90deg,#3ddc84,#4be0a8)}
.bar.warn>i{background:linear-gradient(90deg,#ffce5a,#ffb443)}
.bar.danger>i{background:linear-gradient(90deg,#ff6b81,#ff5a72)}

/* ============================ FORM ============================ */
.inp{width:100%;font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg-elev);border:1px solid var(--border);border-radius:11px;padding:11px 13px;outline:none;transition:.15s}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.inp::placeholder{color:var(--text-faint)}
select.inp{cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%2397a0c2' stroke-width='1.6' fill='none'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
select.inp option{background:var(--surface);color:var(--text)}
textarea.inp{resize:vertical;min-height:120px;font-family:var(--font-mono);font-size:13px;line-height:1.6}

/* toggle */
.tog{position:relative;width:42px;height:24px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);cursor:pointer;flex:0 0 auto;transition:.2s}
.tog::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--text-dim);transition:.2s}
.tog.on{background:var(--accent-soft);border-color:var(--accent)}
.tog.on::after{transform:translateX(18px);background:var(--accent-hover)}
.tog-row{display:flex;align-items:center;gap:12px;padding:11px 0}
.tog-row .tl{flex:1;min-width:0}
.tog-row .tl b{font-size:13.5px;font-weight:600;display:block}
.tog-row .tl small{font-size:12px;color:var(--text-dim)}

/* segmented (from .v-sd-seg) */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:3px;gap:3px;flex-wrap:wrap}
.seg button{appearance:none;border:0;background:transparent;color:var(--text-dim);font:inherit;font-weight:600;padding:8px 14px;border-radius:8px;cursor:pointer;transition:.15s;font-size:13px}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--accent-soft);color:#fff;box-shadow:inset 0 0 0 1px rgba(124,92,240,.3)}

/* ============================ TABLE ============================ */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;padding:10px 14px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);border-bottom:1px solid var(--border);white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(255,255,255,.02)}
.tbl .ta-r{text-align:right}

/* ============================ TOAST ============================ */
.toastbox{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;align-items:center;gap:9px;
  background:var(--surface);border:1px solid var(--glass-border-bright);border-left:3px solid var(--accent);border-radius:12px;padding:12px 20px;font-weight:600;font-size:14px;
  box-shadow:0 18px 40px -18px rgba(2,5,20,.9);animation:toastIn .25s ease;max-width:92vw}
.toastbox.ok{border-left-color:var(--ok)} .toastbox.err{border-left-color:var(--danger)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

/* ============================ MODAL ============================ */
.modal-ov{position:fixed;inset:0;background:rgba(3,5,14,.68);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9000;padding:20px;animation:mf .12s ease}
@keyframes mf{from{opacity:0}to{opacity:1}}
.modal{width:min(480px,100%);background:var(--surface);border:1px solid var(--glass-border-bright);border-radius:18px;box-shadow:var(--shadow);padding:24px;animation:ms .18s cubic-bezier(.2,.8,.2,1)}
@keyframes ms{from{transform:translateY(10px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.modal h3{font-size:17px;font-weight:700;margin-bottom:10px}
.modal .mbody{font-size:13.5px;line-height:1.55;color:var(--text-dim);margin-bottom:18px}
.modal .mfoot{display:flex;justify-content:flex-end;gap:10px}

/* ============================ COMMAND PALETTE (cmdk) ============================ */
.cmdk-ov{position:fixed;inset:0;background:rgba(3,5,14,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;z-index:9500;padding:14vh 20px 20px;animation:mf .12s ease}
.cmdk-box{width:min(620px,100%);background:var(--glass-strong);-webkit-backdrop-filter:blur(var(--blur-deep));backdrop-filter:blur(var(--blur-deep));border:1px solid var(--glass-border-bright);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;animation:ms .18s cubic-bezier(.2,.8,.2,1)}
.cmdk-in{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)}
.cmdk-in svg{width:20px;height:20px;color:var(--text-dim);flex:0 0 auto}
.cmdk-in input{flex:1;background:transparent;border:0;outline:0;color:var(--text);font-size:16px;font-family:inherit}
.cmdk-results{max-height:50vh;overflow-y:auto;padding:8px}
.cmdk-grp{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);padding:10px 12px 4px}
.cmdk-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:.12s}
.cmdk-item:hover,.cmdk-item.sel{background:var(--aurora-soft)}
.cmdk-item .ci{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--surface-2);color:var(--text-dim);flex:0 0 auto}
.cmdk-item .ci svg{width:16px;height:16px}
.cmdk-item .ctxt{flex:1;min-width:0}
.cmdk-item .ctxt b{font-size:13.5px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-item .ctxt small{font-size:11.5px;color:var(--text-dim)}
.cmdk-foot{display:flex;align-items:center;gap:14px;padding:10px 16px;border-top:1px solid var(--border);font-size:11px;color:var(--text-faint)}
.cmdk-foot .kbd b{font-size:10px;padding:1px 6px}

/* ============================ GALLERY (Level 0 "Spielen") ============================ */
/* Hero cover */
.cover-hero{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);min-height:230px;display:flex;
  box-shadow:0 18px 50px -30px rgba(2,5,20,.9)}
.cover-hero .ch-art{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.05)}
.cover-hero .ch-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,10,22,.94) 0%,rgba(7,10,22,.78) 42%,rgba(7,10,22,.35) 100%)}
.cover-hero .ch-body{position:relative;z-index:1;padding:26px 28px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;width:100%}
.ch-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ch-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);margin-bottom:8px}
.ch-title{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.05;display:flex;align-items:center;gap:12px}
.ch-meta{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.status-ring{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:radial-gradient(circle,rgba(75,224,168,.16),transparent 70%);border:2px solid var(--ok)}
.status-ring.run{animation:ringPulse 2.4s ease-in-out infinite}
.status-ring.stop{border-color:var(--text-dim);background:radial-gradient(circle,rgba(151,160,194,.12),transparent 70%)}
.status-ring i{width:14px;height:14px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok)}
.status-ring.stop i{background:var(--text-dim);box-shadow:none}
@keyframes ringPulse{0%,100%{box-shadow:0 0 0 0 rgba(75,224,168,.32)}50%{box-shadow:0 0 0 8px rgba(75,224,168,0)}}
.connect-chip{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;cursor:pointer;
  background:rgba(8,11,24,.55);border:1px solid var(--glass-border-bright);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:.18s}
.connect-chip:hover{border-color:var(--accent);box-shadow:var(--aurora-glow)}
.connect-chip .cc-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}
.connect-chip .cc-addr{font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--text)}
.connect-chip .cc-ico{color:var(--text-dim)}
.connect-chip.copied{border-color:var(--ok)} .connect-chip.copied .cc-ico{color:var(--ok)}
.ch-spark{position:relative;z-index:1;min-width:160px;display:flex;flex-direction:column;gap:10px;align-self:center}

/* gallery grid */
.gamegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.gamecard{cursor:pointer;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:var(--bg-elev);transition:.16s;position:relative}
.gamecard:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 16px 36px -16px rgba(90,110,255,.55)}
.gamecover{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--aurora-grad)}
.gamecover .gc-art{position:absolute;inset:0;background-size:cover;background-position:center}
.gamecover .gc-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,10,22,.05),rgba(7,10,22,.55))}
.gamecover.game{background:linear-gradient(135deg,#4d9fff,#a06bff)}
.gamecover.web{background:linear-gradient(135deg,#34e29b,#1f9d6b)}
.gamecover.database{background:linear-gradient(135deg,#ffb443,#ff7a3d)}
.gamecover.vps{background:linear-gradient(135deg,#7c8bff,#5a6a9e)}
.gameicon{position:relative;z-index:1;font-size:40px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.gamever{position:absolute;top:9px;left:9px;background:rgba(0,0,0,.55);color:#fff;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:2}
.gc-ring{position:absolute;top:9px;right:9px;z-index:2;width:14px;height:14px;border-radius:50%}
.gc-ring.run{background:var(--ok);box-shadow:0 0 10px var(--ok);animation:ringPulse 2.4s ease-in-out infinite}
.gc-ring.stop{background:var(--text-dim)}
.gamebody{padding:12px 14px}
.gamename{font-weight:700;font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px}
.gamecat{font-size:11.5px;color:var(--text-dim);margin-top:2px}
.gamemini{display:flex;gap:14px;margin-top:12px;font-size:11.5px}
.gamemini .gmm{flex:1}
.gamemini .gmm .gl{color:var(--text-faint);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.gamemini .gmm b{font-family:var(--font-mono);font-size:13px}
.gamecard.build{border-style:dashed;border-color:var(--border);background:transparent;display:flex;align-items:center;justify-content:center;min-height:100%}
.gamecard.build:hover{border-color:var(--accent);background:var(--aurora-soft)}
.gc-build{text-align:center;padding:28px 16px}
.gc-build .plus{width:52px;height:52px;border-radius:14px;background:var(--aurora-soft);display:grid;place-items:center;margin:0 auto 12px;font-size:28px;color:var(--accent-hover)}
.gc-build b{font-size:14px;font-weight:700;display:block}
.gc-build small{font-size:12px;color:var(--text-dim)}

/* ============================ SERVER DECK (Level 1) ============================ */
.deck-topbar{display:flex;align-items:center;gap:14px;padding:14px 0 0;flex-wrap:wrap}
.srv-switch{position:relative;display:flex;align-items:center;gap:10px;padding:7px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer;transition:.15s}
.srv-switch:hover{border-color:var(--accent)}
.srv-switch .ssname{font-size:19px;font-weight:800;letter-spacing:-.02em}
.srv-switch .sschev{color:var(--text-dim);font-size:12px}
.srv-switch-menu{position:absolute;top:calc(100% + 8px);left:0;width:300px;background:var(--glass-strong);-webkit-backdrop-filter:blur(var(--blur-deep));backdrop-filter:blur(var(--blur-deep));border:1px solid var(--glass-border-bright);border-radius:14px;box-shadow:var(--shadow);z-index:60;padding:8px;animation:ms .15s ease}
.ssm-grp{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);padding:9px 10px 4px}
.ssm-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;transition:.12s}
.ssm-item:hover{background:var(--aurora-soft)}
.ssm-item.on{background:var(--accent-soft)}
.ssm-item .ssm-n{flex:1;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ssm-item .ssm-m{font-size:11px;color:var(--text-dim)}
.runtime-chips{display:flex;gap:8px;flex-wrap:wrap}
.deck-topbar .dt-spacer{flex:1}

/* power control (gsv-power) */
.power{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:3px;gap:2px}
.power button{appearance:none;border:0;background:transparent;color:var(--text-dim);font:inherit;font-weight:600;padding:8px 13px;border-radius:8px;cursor:pointer;transition:.15s;display:flex;align-items:center;gap:7px;font-size:13px}
.power button svg{width:15px;height:15px}
.power button:hover:not(:disabled){color:var(--text);background:rgba(255,255,255,.05)}
.power button:disabled{opacity:.35;cursor:not-allowed}
.power button.start.live{color:var(--ok)}
.power button.stop:hover{color:var(--danger);background:var(--danger-soft)}

/* tab bar */
.tabbar{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:18px 0 0;overflow-x:auto;scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tab{display:flex;align-items:center;gap:8px;padding:12px 15px;color:var(--text-dim);font-weight:600;font-size:13.5px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:.15s;position:relative;top:1px}
.tab svg{width:16px;height:16px}
.tab:hover{color:var(--text)}
.tab.on{color:#fff;border-bottom-color:var(--accent);text-shadow:0 0 18px rgba(124,92,240,.5)}
.tab .tcount{font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--surface-2);color:var(--text-dim)}
.tab.on .tcount{background:var(--accent-soft);color:var(--accent-hover)}

.tabpane{padding:22px 0 0;animation:paneIn .18s ease}
@keyframes paneIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ============================ STAT RAIL (gsv-stat) ============================ */
.statrail{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:1100px){.statrail{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.statrail{grid-template-columns:repeat(2,1fr)}}
.stat{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent),var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;cursor:pointer;transition:.15s;position:relative;overflow:hidden}
.stat:hover{border-color:var(--glass-border-bright);transform:translateY(-2px)}
.stat .s-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);display:flex;align-items:center;gap:6px}
.stat .s-label svg{width:14px;height:14px;opacity:.8}
.stat .s-val{font-size:27px;font-weight:800;letter-spacing:-.02em;margin:8px 0 2px;font-variant-numeric:tabular-nums}
.stat .s-val.grad{background:var(--aurora-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat .s-val.ok{color:var(--ok)} .stat .s-val.warn{color:var(--warn)} .stat .s-val.danger{color:var(--danger)}
.stat .s-sub{font-size:11.5px;color:var(--text-faint)}
.stat .s-spark{margin-top:10px;height:30px;width:100%}

/* quick actions */
.qa-grid{display:flex;flex-wrap:wrap;gap:8px}
.qa{display:flex;align-items:center;gap:9px;padding:11px 14px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.02);cursor:pointer;transition:.15s;font-weight:600;font-size:13px}
.qa svg{width:16px;height:16px;color:var(--accent-hover)}
.qa:hover{border-color:var(--accent);background:var(--aurora-soft);transform:translateY(-1px)}

/* ============================ CONSOLE (gsv-console) ============================ */
.console-wrap{display:grid;grid-template-columns:1fr 280px;gap:16px}
@media(max-width:1100px){.console-wrap{grid-template-columns:1fr}}
.console{background:var(--glass-opaque);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;min-height:560px}
.console-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02);flex-wrap:wrap}
.live-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ok)}
.live-badge .ld{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:liveBlink 1.6s ease-in-out infinite}
@keyframes liveBlink{0%,100%{opacity:1}50%{opacity:.4}}
.console-search{flex:1;min-width:140px;max-width:280px;display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--border);border-radius:9px;background:var(--bg-elev)}
.console-search svg{width:14px;height:14px;color:var(--text-dim)}
.console-search input{flex:1;background:transparent;border:0;outline:0;color:var(--text);font-size:12.5px;font-family:var(--font-mono)}
.cf-chips{display:flex;gap:6px;flex-wrap:wrap}
.cf-chip{font-size:11px;font-weight:600;padding:5px 10px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;transition:.12s}
.cf-chip.on{background:var(--accent-soft);color:var(--accent-hover);border-color:var(--accent)}
.console-log{flex:1;overflow-y:auto;padding:12px 14px;font-family:var(--font-mono);font-size:12.5px;line-height:1.65;background:
  repeating-linear-gradient(180deg,transparent,transparent 23px,rgba(255,255,255,.012) 23px,rgba(255,255,255,.012) 24px)}
.logline{display:flex;gap:10px;padding:1px 0;white-space:pre-wrap;word-break:break-word}
.logline .lt{color:var(--text-faint);flex:0 0 auto;-webkit-user-select:none;user-select:none}
.logline.info .lm{color:var(--text-dim)}
.logline.warn{padding-left:8px;border-left:2px solid var(--warn);margin-left:-10px}
.logline.warn .lm{color:var(--warn)}
.logline.error{padding-left:8px;border-left:2px solid var(--danger);margin-left:-10px;background:rgba(255,107,129,.05)}
.logline.error .lm{color:var(--danger)}
.logline.chat .lm{color:var(--text)}
.logline.chat .lm .pname{color:var(--accent-hover);font-weight:700}
.logline.join .lm{color:var(--ok)}
.logline.leave .lm{color:var(--text-dim)}
.logline.cmd .lm{color:var(--info)}
.logline mark{background:rgba(255,206,90,.32);color:#fff;border-radius:2px;padding:0 1px}
.scroll-pill{position:absolute;bottom:84px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:7px 14px;border-radius:999px;cursor:pointer;box-shadow:var(--shadow-sm);z-index:5;display:flex;align-items:center;gap:6px}
.console-foot{border-top:1px solid var(--border);padding:10px 14px;background:rgba(255,255,255,.02)}
.quickcmd-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.qcmd{font-size:11px;font-weight:600;padding:5px 11px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-family:var(--font-mono);transition:.12s}
.qcmd:hover{color:var(--text);border-color:var(--accent);background:var(--aurora-soft)}
.cmd-input{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-elev)}
.cmd-input .prompt{color:var(--accent-hover);font-family:var(--font-mono);font-weight:700;flex:0 0 auto}
.cmd-input input{flex:1;background:transparent;border:0;outline:0;color:var(--text);font-family:var(--font-mono);font-size:13px}
/* console side panel */
.console-side{display:flex;flex-direction:column;gap:14px}
.cside-players{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.csp-head{padding:12px 14px;border-bottom:1px solid var(--border);font-size:12px;font-weight:700;color:var(--text-dim);display:flex;align-items:center;justify-content:space-between}
.csp-list{max-height:340px;overflow-y:auto}
.csp-row{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border);transition:.12s}
.csp-row:last-child{border-bottom:none}
.csp-row:hover{background:rgba(255,255,255,.02)}
.csp-row:hover .csp-kebab{opacity:1}
.csp-kebab{margin-left:auto;opacity:0;transition:.12s;cursor:pointer;color:var(--text-dim);padding:2px 6px;border-radius:6px}
.csp-kebab:hover{color:var(--text);background:rgba(255,255,255,.06)}

/* player avatar (from MinecraftPermissions) */
.pavatar{width:32px;height:32px;border-radius:8px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
.pavatar.sm{width:26px;height:26px;font-size:11px;border-radius:7px}

/* ============================ MODS GALLERY ============================ */
.mods-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.source-pills{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:3px;gap:3px}
.source-pills button{appearance:none;border:0;background:transparent;color:var(--text-dim);font:inherit;font-weight:600;padding:8px 16px;border-radius:8px;cursor:pointer;transition:.15s;display:flex;align-items:center;gap:8px;font-size:13px}
.source-pills button.on{background:var(--aurora-soft);color:#fff;box-shadow:inset 0 0 0 1px rgba(124,92,240,.3)}
.modsearch{flex:1;min-width:180px;max-width:340px}

/* pack hero cards */
.packgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.packhero{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:var(--bg-elev);transition:.16s;display:flex;flex-direction:column}
.packhero:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 16px 36px -16px rgba(90,110,255,.5)}
.packhero .ph-cover{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center;background-color:var(--surface-2)}
.packhero .ph-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(7,10,22,.85))}
.packhero .ph-badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;z-index:2}
.packhero .ph-cover-txt{position:absolute;bottom:10px;left:12px;right:12px;z-index:2}
.packhero .ph-cover-txt b{font-size:16px;font-weight:800;color:#fff;display:block;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.packhero .ph-cover-txt small{font-size:11.5px;color:rgba(255,255,255,.8)}
.packhero .ph-body{padding:13px 14px;display:flex;flex-direction:column;gap:10px;flex:1}
.packhero .ph-desc{font-size:12px;color:var(--text-dim);line-height:1.5;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.packhero .ph-foot{display:flex;align-items:center;gap:8px}

/* mod cards */
.modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.modcard{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg-elev);display:flex;flex-direction:column;transition:.15s}
.modcard:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 10px 26px -14px rgba(90,110,255,.5)}
.modbanner{height:96px;display:flex;align-items:center;justify-content:center;background:var(--aurora-soft);overflow:hidden;position:relative;background-size:cover;background-position:center}
.modbanner .modicon{font-size:34px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.modbody{padding:11px 13px;display:flex;flex-direction:column;gap:6px;flex:1}
.modname{font-weight:700;font-size:13.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.moddesc{font-size:11.5px;color:var(--text-dim);line-height:1.45;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.modmeta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;margin-top:2px}
.modmeta .dl{color:var(--text-dim);display:flex;align-items:center;gap:5px}
.compat{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px}
.compat.ok{background:var(--ok-soft);color:var(--ok)}
.compat.warn{background:var(--warn-soft);color:var(--warn)}
.compat.no{background:rgba(151,160,194,.14);color:var(--text-dim)}

/* update bar */
.update-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;background:var(--aurora-soft);border:1px solid var(--glass-border-bright);margin-bottom:16px}
.update-bar .ub-ico{color:var(--accent-hover)}

/* install progress */
.progress{height:6px;border-radius:4px;background:var(--surface-2);overflow:hidden;margin-top:8px}
.progress>i{display:block;height:100%;background:var(--aurora-grad);width:0;transition:width .3s ease}

/* ============================ FILES / CONFIG ============================ */
.files-layout{display:grid;grid-template-columns:1fr;gap:16px}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-dim);font-family:var(--font-mono);flex-wrap:wrap}
.breadcrumb a{color:var(--accent-hover)}
.breadcrumb span{color:var(--text-faint)}
.file-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border);transition:.12s;cursor:pointer}
.file-row:last-child{border-bottom:none}
.file-row:hover{background:rgba(255,255,255,.02)}
.file-row .fic{width:20px;text-align:center;flex:0 0 auto;color:var(--text-dim)}
.file-row .fname{flex:1;font-size:13.5px;font-family:var(--font-mono)}
.file-row .fmeta{font-size:12px;color:var(--text-faint);font-family:var(--font-mono)}
.editor{background:var(--glass-opaque);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.editor-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02);flex-wrap:wrap}
.editor-bar .ebfile{font-family:var(--font-mono);font-size:13px;color:var(--text-dim)}
.editor-body{display:flex;font-family:var(--font-mono);font-size:13px;line-height:1.7;max-height:480px;overflow:auto}
.gutter{padding:14px 10px;text-align:right;color:var(--text-faint);-webkit-user-select:none;user-select:none;border-right:1px solid var(--border);background:rgba(0,0,0,.18)}
.code{padding:14px 16px;flex:1;white-space:pre;overflow-x:auto}
.code .k{color:#9579ff} .code .s{color:#4be0a8} .code .n{color:#ffce5a} .code .c{color:var(--text-faint);font-style:italic} .code .b{color:var(--info)}
.restart-banner{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:11px;background:var(--warn-soft);border:1px solid rgba(255,206,90,.3);color:var(--warn);font-size:13px;font-weight:600;margin-bottom:16px}

/* ============================ METRICS ============================ */
.metric-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.metric-card .mc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.metric-card .mc-head b{font-size:14px;font-weight:700}
.chart-wrap{position:relative;height:200px}
.chart-wrap svg{width:100%;height:100%;overflow:visible}

/* timeline (backups) */
.timeline{display:flex;flex-direction:column;gap:10px}
.bkp-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.02);transition:.15s}
.bkp-row:hover{border-color:var(--glass-border-bright)}
.bkp-row .bk-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--aurora-soft);color:var(--accent-hover);flex:0 0 auto}
.bkp-row .bk-info{flex:1;min-width:0}
.bkp-row .bk-info b{font-size:14px;font-weight:600}
.bkp-row .bk-info small{font-size:12px;color:var(--text-dim);display:block;margin-top:1px}

/* matrix (permissions) */
.matrix-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.matrix-row:last-child{border-bottom:none}
.matrix-label{display:flex;align-items:center;gap:6px;min-width:150px;flex:0 0 auto}
.matrix-label .rln{font-size:13.5px;font-weight:600}
.matrix-label .rlc{font-family:var(--font-mono);font-size:11px;color:var(--text-faint)}
.matrix-pick{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.gpick{padding:6px 13px;border:2px solid var(--border);border-radius:9px;background:transparent;color:var(--text);cursor:pointer;font-size:12px;font-weight:600;transition:.15s}
.gpick:hover{background:rgba(255,255,255,.04)}
.gpick.on{background:var(--accent-soft);color:#fff;font-weight:700}

/* ============================ RESPONSIVE / MOBILE ============================ */
.mobile-tabbar{display:none}
@media(max-width:880px){
  .app{display:block}
  .rail{position:fixed;left:0;top:0;bottom:0;width:264px;transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow)}
  .app.rail-open .rail{transform:translateX(0)}
  .rail-scrim{display:block;position:fixed;inset:0;background:rgba(3,5,14,.6);z-index:29;opacity:0;pointer-events:none;transition:.2s}
  .app.rail-open .rail-scrim{opacity:1;pointer-events:auto}
  .topbar .menu-btn{display:flex}
  .user-chip .uname{display:none}
  .console-wrap{grid-template-columns:1fr}
  .console-side{order:-1}
  .statrail{grid-template-columns:repeat(2,1fr)}
  .page-head h1{font-size:22px}
  .cover-hero{min-height:auto}
  .ch-title{font-size:24px}
  .ch-spark{display:none}
  .mobile-tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;background:var(--glass-strong);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid var(--border);padding:6px 4px env(safe-area-inset-bottom)}
  .mtab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;color:var(--text-dim);font-size:10px;font-weight:600;cursor:pointer}
  .mtab svg{width:20px;height:20px}
  .mtab.on{color:var(--accent-hover)}
  .content{padding-bottom:80px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .auth-aurora,.at-dot.run,.status-ring.run,.gc-ring.run,.live-badge .ld{animation:none!important}
}

/* ============================================================================
   GAMES-PANEL — additions on top of the Aurora preview stylesheet.
   New runtime elements introduced by the real shell + view loader.
   ============================================================================ */

/* login inline error */
.auth-error{
  background:rgba(255,107,129,.12); border:1px solid rgba(255,107,129,.35);
  color:var(--danger,#ff6b81); border-radius:10px; padding:10px 12px;
  font-size:13px; margin-bottom:14px; line-height:1.4;
}

/* rail-foot becomes a clickable logout affordance */
.rail-foot{ cursor:pointer; transition:background .15s ease; }
.rail-foot:hover{ background:var(--surface-2, rgba(255,255,255,.04)); }
.user-chip{ cursor:pointer; }

/* view skeletons (shown by the lazy loader before a view registers) */
.view-skeleton{ animation:ggp-fade .2s ease; }
.sk-row{ height:12px; border-radius:7px; background:linear-gradient(90deg,var(--surface-2,#1a2030) 25%, rgba(255,255,255,.06) 37%, var(--surface-2,#1a2030) 63%); background-size:400% 100%; animation:ggp-shimmer 1.3s ease infinite; }
.sk-head{ width:36%; height:26px; margin-bottom:18px; }
.sk-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px; }
.sk-card{ height:92px; border-radius:16px; background:linear-gradient(90deg,var(--surface-2,#1a2030) 25%, rgba(255,255,255,.05) 37%, var(--surface-2,#1a2030) 63%); background-size:400% 100%; animation:ggp-shimmer 1.3s ease infinite; }
.sk-tall{ height:220px; }
@keyframes ggp-shimmer{ 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } }
@keyframes ggp-fade{ from{ opacity:0; } to{ opacity:1; } }

/* deck loading wrapper */
.deck-loading{ padding-top:4px; }

/* quick-action grid fallback (in case base lacks it for non-game overview) */
.qa-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; }
.qa{ cursor:pointer; }

/* ============================================================================
   G-SV proxy — MAGENTA glow override.
   Retints the few hard-coded violet/blue box-shadow glows (rgba(90,110,255,*)
   that the token retint can't reach) to magenta. Last-rule-wins; surgical so
   it doesn't duplicate base layout rules. Dark base stays identical.
   ============================================================================ */
.btn.primary{box-shadow:0 8px 22px -10px rgba(255,92,200,.6)}
.btn.primary:hover{box-shadow:0 10px 28px -10px rgba(255,92,200,.75),var(--aurora-glow)}
.rail-brand .logo,.brand .logo{box-shadow:0 8px 20px -6px rgba(255,92,200,.6)}
.rail-foot .fava,.avatar{box-shadow:0 4px 14px -4px rgba(255,92,200,.7)}
.auth-brand .logo{box-shadow:0 12px 30px -8px rgba(255,92,200,.7),var(--aurora-glow)}
.gamecard:hover{box-shadow:0 16px 36px -16px rgba(255,92,200,.55)}
.srv-switch:hover,.connect-chip:hover{box-shadow:var(--aurora-glow)}
.nav-i.on{box-shadow:inset 0 0 0 1px rgba(255,92,200,.18),0 8px 20px -12px rgba(255,92,200,.6)}
.packhero:hover,.modcard:hover{box-shadow:0 14px 32px -16px rgba(255,92,200,.5)}
.tab.on{text-shadow:0 0 18px rgba(255,92,200,.5)}