/* ===================== NodePanel v2 — from scratch =====================
   Neues Layout: Top-Navigation + Bento. Aurora-Identitaet (Logo bleibt). */
:root{
  --bg:#070a16; --bg2:#0c1126; --surface:#121937; --elevated:#1b2348;
  --border:rgba(126,150,255,.14); --border2:rgba(126,150,255,.30);
  --primary:#7c8bff; --grad:linear-gradient(135deg,#4d9fff,#a06bff);
  --grad-soft:linear-gradient(135deg,rgba(77,159,255,.16),rgba(160,107,255,.16));
  --ok:#34e29b; --warn:#ffb443; --danger:#ff5a72;
  --text:#eef1ff; --muted:#9aa3c8;
  --r:18px; --r-sm:12px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif;
  --mono:"SF Mono","JetBrains Mono",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body,#app{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(160,107,255,.12),transparent 60%),
    radial-gradient(1000px 520px at -10% 8%,rgba(77,159,255,.12),transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
a{color:var(--primary);text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(126,150,255,.3);border-radius:10px;border:2px solid transparent;background-clip:padding-box}

/* ---------- Top Navigation ---------- */
.topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:22px;
  padding:14px 26px;margin:14px 18px;border:1px solid var(--border);border-radius:20px;
  background:rgba(18,25,55,.72);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 18px 50px -30px rgba(2,5,20,.9);
}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px}
.brand .logo{width:30px;height:30px;border-radius:9px;flex-shrink:0}
.brand .name{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.nav a{
  display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:12px;color:var(--muted);
  font-weight:600;font-size:13.5px;transition:.18s;
}
.nav a:hover{color:var(--text);background:rgba(255,255,255,.04)}
.nav a.active{color:#fff;background:var(--grad-soft);box-shadow:inset 0 0 0 1px var(--border2),0 8px 20px -10px rgba(90,110,255,.5)}
.nav a .ic{font-size:16px;opacity:.9}
.topbar .spacer{flex:0}
.user-chip{display:flex;align-items:center;gap:9px;padding:6px 12px 6px 7px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.03);cursor:pointer}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--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)}
.icon-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;font-size:17px;transition:.18s}
.icon-btn:hover{color:var(--text);background:var(--grad-soft)}

/* ---------- Content ---------- */
.content{padding:24px 28px 46px}

/* ===== ControlHQ Sidebar-Shell ===== */
.shell{display:grid;grid-template-columns:252px 1fr;min-height:100vh;align-items:stretch}
.gside{display:flex;flex-direction:column;padding:18px 14px;border-right:1px solid var(--border);
  background:rgba(12,17,38,.66);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  position:sticky;top:0;height:100vh;overflow-y:auto}
.gbrand{display:flex;align-items:center;gap:12px;padding:6px 8px 16px;border-bottom:1px solid var(--border);margin-bottom:10px}
.glogo{width:42px;height:42px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;background:var(--grad);box-shadow:0 8px 20px -6px rgba(90,110,255,.6);color:#fff}
.glogo svg{width:24px;height:24px}
.gbtxt b{display:block;font-size:17px;font-weight:800;letter-spacing:-.3px;line-height:1.08}
.gbtxt b span{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gbtxt small{font-size:10.5px;color:var(--muted);letter-spacing:.2px}
.gnav{display:flex;flex-direction:column;gap:2px}
.navlabel{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#5a6796;padding:13px 11px 5px;font-weight:700}
.gnav-i{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;color:var(--muted);font-weight:600;font-size:13.5px;transition:.16s;cursor:pointer}
.gnav-i:hover{color:var(--text);background:rgba(255,255,255,.04)}
.gnav-i.on{color:#fff;background:var(--grad-soft);box-shadow:inset 0 0 0 1px var(--border2),0 8px 20px -12px rgba(90,110,255,.6)}
.gnav-i .gi{font-size:16px;width:20px;text-align:center;flex:0 0 auto}
.gnav-i .gt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gnav-i .gext{font-size:11px;opacity:.5}
.gfoot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 8px 4px;border-top:1px solid var(--border)}
.gfoot .gava{width:34px;height:34px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:700;color:#fff;flex:0 0 auto}
.gfoot .gfmeta{display:flex;flex-direction:column;min-width:0}
.gfoot .gfmeta small{font-size:10.5px;color:var(--muted)}
.gfoot .gfmeta b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gmain{display:flex;flex-direction:column;min-width:0}
.gtop{display:flex;align-items:center;gap:14px;justify-content:flex-end;padding:12px 24px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40;
  background:rgba(12,17,38,.62);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)}
.gtop-l{flex:1;min-width:0}
.gtop-r{display:flex;align-items:center;gap:12px}
@media(max-width:880px){.shell{display:block}.gside{position:static;height:auto;flex-direction:column;border-right:none;border-bottom:1px solid var(--border)}.content{padding:18px 16px 40px}}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin:14px 4px 18px}
.page-head h1{font-size:26px;font-weight:800;letter-spacing:-.03em}
.page-head p{color:var(--muted);font-size:13.5px;margin-top:2px}

/* bento grid */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent),var(--surface);
  border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:0 2px 10px rgba(2,5,20,.5);
}
.card:hover{border-color:var(--border2)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-6{grid-column:span 6}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media(max-width:1100px){.col-3{grid-column:span 6}.col-4{grid-column:span 6}.col-8,.col-6{grid-column:span 12}}
@media(max-width:680px){.bento>*{grid-column:span 12!important}.topbar{flex-wrap:wrap}}

.stat .label{color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.stat .big{font-size:34px;font-weight:800;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:6px 0 2px}
.stat .sub{color:var(--muted);font-size:12.5px}
.bar{height:8px;border-radius:6px;background:var(--elevated);overflow:hidden;margin-top:12px}
.bar > i{display:block;height:100%;border-radius:6px;background:var(--grad)}
.ring{display:flex;align-items:center;justify-content:center}

.card h3{font-size:15px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.chart-wrap{position:relative;height:240px}

.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:0;border-radius:12px;font-family:var(--font);font-weight:600;font-size:13.5px;cursor:pointer;transition:.15s;color:#fff;background:var(--grad);box-shadow:0 8px 22px -10px rgba(90,110,255,.6)}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:rgba(255,255,255,.04);color:var(--text);border:1px solid var(--border2)}
.btn:active{transform:translateY(1px)}

input,select,textarea{width:100%;font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:12px 14px;outline:none;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--grad-soft)}
select{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='%239aa3c8' stroke-width='1.6' fill='none'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
select option{background:var(--surface);color:var(--text)}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary)}

/* containers list */
.clist{display:flex;flex-direction:column;gap:10px}
.crow{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.02);transition:.15s}
.crow:hover{border-color:var(--border2);background:var(--grad-soft)}
.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dot.run{background:var(--ok);box-shadow:0 0 12px var(--ok)}
.dot.stop{background:var(--muted)}
.crow .cname{font-weight:600}
.crow .cmeta{color:var(--muted);font-size:12.5px}
.pill{margin-left:auto;font-size:11px;font-weight:700;padding:4px 11px;border-radius:999px;background:var(--grad-soft);color:var(--primary)}

/* login */
.login-wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:100%;max-width:400px;border:1px solid var(--border);border-radius:24px;padding:34px 30px;background:rgba(18,25,55,.6);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 40px 90px -40px rgba(2,5,20,.9)}
.login-card .brand{justify-content:center;font-size:24px;margin-bottom:6px}
.login-card .brand .logo{width:40px;height:40px}
.login-sub{text-align:center;color:var(--muted);margin-bottom:22px;font-size:13.5px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px}
.err{color:var(--danger);font-size:13px;text-align:center;margin-bottom:10px;min-height:18px}
.muted{color:var(--muted)}
.spin{width:34px;height:34px;border:3px solid var(--border2);border-top-color:var(--primary);border-radius:50%;animation:sp 1s linear infinite;margin:30px auto}
@keyframes sp{to{transform:rotate(360deg)}}
.center{display:flex;align-items:center;justify-content:center;min-height:60vh}
/* toast */
.toastbox{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:999;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border2);border-left:3px solid var(--primary);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)}
.toastbox .ti{font-size:15px} .toastbox.ok .ti{color:var(--ok)} .toastbox.err .ti{color:var(--danger)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
/* Produkt-Karten (End-User-Dashboard) */
.prodgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;margin-top:8px}
.prodcard{border:1px solid var(--border);border-radius:14px;padding:15px 16px;background:rgba(8,11,24,.4);cursor:pointer;transition:.16s}
.prodcard:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 18px 40px -28px rgba(2,5,20,.9)}
.prodhead{display:flex;align-items:center;gap:9px}
.prodhead .cname{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prodsub{color:var(--muted);font-size:12.5px;margin:2px 0 12px 17px}
.prodmetrics{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.pm{display:flex;align-items:center;justify-content:space-between;font-size:12.5px}
.pm .pml{color:var(--muted)} .pm b{font-family:var(--mono,ui-monospace,monospace);font-weight:700}
.prodactions{display:flex;align-items:center;gap:7px;margin-top:13px}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px}
.badge.run{background:rgba(52,226,155,.14);color:#34e29b}
.badge.stop{background:rgba(154,163,200,.16);color:var(--muted)}

/* Modal (Ersatz für natives confirm/prompt) */
.gmodal-ov{position:fixed;inset:0;background:rgba(3,5,14,.68);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;animation:gmf .12s ease}
@keyframes gmf{from{opacity:0}to{opacity:1}}
.gmodal{width:min(460px,100%);background:var(--surface);border:1px solid var(--border2);border-radius:18px;box-shadow:0 28px 80px rgba(0,0,0,.6);padding:22px 22px 18px;animation:gms .16s cubic-bezier(.2,.8,.2,1)}
@keyframes gms{from{transform:translateY(10px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.gmodal-h{font-size:16.5px;font-weight:700;margin-bottom:10px;color:#fff}
.gmodal-b{font-size:13.5px;line-height:1.55;color:var(--muted);white-space:pre-wrap;margin-bottom:15px}
.gmodal-in{margin-bottom:16px}
.gmodal-f{display:flex;justify-content:flex-end;gap:10px}
.gmodal-f .btn{min-width:100px;justify-content:center}
.btn.gm-danger{background:linear-gradient(135deg,#ff5a72,#ff3d5e);color:#fff;border:none}

/* GodLike-Style Server-Detail: Umschalter + linke Sub-Navigation */
.srv-switch{appearance:none;-webkit-appearance:none;background:var(--surface);border:1px solid var(--border2);color:#fff;font-size:19px;font-weight:800;padding:5px 36px 5px 13px;border-radius:12px;cursor:pointer;font-family:inherit;max-width:60vw;text-overflow:ellipsis;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 17px) 53%,calc(100% - 12px) 53%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;transition:.15s}
.srv-switch:hover{border-color:var(--primary)}
.srv-switch:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--grad-soft)}
.srv-switch option{background:var(--surface);color:var(--text);font-size:14px}
.srv-dot{width:10px;height:10px;border-radius:50%;flex:none}
.srv-dot.on{background:var(--ok);box-shadow:0 0 0 3px rgba(52,226,155,.18)}
.srv-dot.off{background:var(--muted);box-shadow:0 0 0 3px rgba(154,163,200,.14)}
.srv-shell{display:grid;grid-template-columns:214px 1fr;gap:18px;align-items:start;padding:18px}
.srv-nav{display:flex;flex-direction:column;gap:4px;position:sticky;top:14px}
.srv-nav .btn{width:100%;justify-content:flex-start;padding:10px 14px;border:1px solid transparent;background:transparent;color:var(--muted);font-weight:600;font-size:13.5px}
.srv-nav .btn:hover{background:rgba(255,255,255,.05);color:var(--text);border-color:var(--border)}
.srv-nav .btn[style*="primary"]{background:var(--grad-soft);color:#fff;border-color:var(--border2)!important}
.srv-nav .btn[style*="danger"]{background:rgba(255,90,114,.10);border-color:var(--danger)!important}
.srv-main{min-width:0}
@media(max-width:860px){.srv-shell{grid-template-columns:1fr;padding:14px}.srv-nav{flex-direction:row;flex-wrap:wrap;position:static}.srv-nav .btn{width:auto}}

/* Admin-Dashboard: Server-(Node-)Übersicht */
.nodecard{padding:0;overflow:hidden}
.nodehead{display:flex;align-items:center;gap:14px;padding:15px 18px;background:var(--grad-soft);border-bottom:1px solid var(--border);flex-wrap:wrap}
.nodename{font-size:16px;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nodepill{background:rgba(124,139,255,.16);color:var(--primary);font-size:11px}
.nodestats{display:flex;gap:18px}
.nodestats .ns{display:flex;flex-direction:column;align-items:flex-end;min-width:46px}
.nodestats .ns span{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.nodestats .ns b{font-size:16px}
.nodegroup{padding:12px 18px 2px}
.nodegrouplabel{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em}
.nodeos{display:flex;gap:10px}
.nodeos button{flex:1;padding:12px;border:1px solid var(--border2);border-radius:12px;background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;font-size:13.5px;font-family:inherit;transition:.15s}
.nodeos button:hover{border-color:var(--primary)}
.nodeos button.on{background:var(--grad-soft);border-color:var(--primary);color:#fff}
.codebox{font-family:var(--mono);font-size:12.5px;background:#05070f;border:1px solid var(--border);border-radius:10px;padding:12px 14px;color:#9fe7c4;word-break:break-all;line-height:1.5}
.col-chev{display:inline-block;width:15px;font-size:11px;color:var(--muted);text-align:center}
/* DB-Konsole Ergebnis-Tabelle */
.sqltbl{border-collapse:collapse;width:100%;font-size:12.5px}
.sqltbl th{position:sticky;top:0;background:var(--surface);text-align:left;padding:8px 10px;border-bottom:1px solid var(--border2);font-family:var(--mono);color:var(--primary);white-space:nowrap;z-index:1}
.sqltbl td{padding:7px 10px;border-bottom:1px solid var(--border);font-family:var(--mono);white-space:nowrap;max-width:340px;overflow:hidden;text-overflow:ellipsis}
.sqltbl tr:hover td{background:rgba(255,255,255,.03)}
/* One-Click Game-Picker */
.catchip{padding:7px 14px;border-radius:999px;border:1px solid var(--border2);background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;font-size:13px;white-space:nowrap;font-family:inherit;transition:.15s}
.catchip:hover{color:var(--text);border-color:var(--primary)}
.catchip.on{background:var(--grad-soft);color:#fff;border-color:var(--primary)}
.gamegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px}
.gamecard{cursor:pointer;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--bg2);transition:.16s}
.gamecard:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:0 12px 30px -12px rgba(90,110,255,.55)}
.gamecover{position:relative;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:var(--grad)}
.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{font-size:42px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.gamever{position:absolute;top:8px;left:8px;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)}
.gamename{padding:10px 12px 2px;font-weight:700;font-size:13.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gamecat{padding:0 12px 11px;font-size:11px;color:var(--muted)}
/* Mod/Plugin-Browser Karten */
.modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;max-height:440px;overflow:auto;padding:2px}
.modcard{cursor:pointer;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg2);display:flex;flex-direction:column;transition:.15s}
.modcard:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 10px 26px -14px rgba(90,110,255,.5)}
.modbanner{height:82px;display:flex;align-items:center;justify-content:center;background:var(--grad-soft);overflow:hidden}
.modbanner img{width:100%;height:100%;object-fit:cover}
.modbanner .modicon{font-size:34px}
.modbody{padding:10px 12px;display:flex;flex-direction:column;gap:4px;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(--muted);line-height:1.4;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:4px}
h3:hover>.col-chev,.nodegrouplabel:hover>.col-chev{color:var(--primary)}
.btn-spin::after{content:"";display:inline-block;width:10px;height:10px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:btnSpin 0.7s linear infinite;vertical-align:-1px;margin-left:6px}
@keyframes btnSpin{to{transform:rotate(360deg)}}

/* ===== APP-LAYOUT (single source of truth — alle alten Layout-Edits ersetzt) ===== */

/* Viewport: ganze App auf 100vh, kein Page-Scroll */
html,body{height:100vh;overflow:hidden;margin:0}
.shell{display:grid;grid-template-columns:252px 1fr;height:100vh;overflow:hidden;position:relative}
.shell.gside-collapsed{grid-template-columns:64px 1fr}

/* Sidebar: 100vh, eigener Scroll wenn Nav-Liste lang, KEINE sichtbare Scrollbar */
.gside{height:100vh;overflow-y:auto;overflow-x:visible;
  transition:width .22s ease,padding .22s ease;
  scrollbar-width:none;-ms-overflow-style:none}
.gside::-webkit-scrollbar{display:none;width:0}

/* Toggle-Button: absolut zur .shell (außerhalb .gside damit kein Clipping) */
.gside-toggle{position:absolute;left:240px;top:18px;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--border2);background:var(--surface);color:var(--muted);cursor:pointer;
  font-size:14px;line-height:1;display:grid;place-items:center;z-index:60;
  box-shadow:0 4px 10px -4px rgba(2,5,20,.7);transition:.18s;padding:0}
.gside-toggle:hover{color:var(--text);border-color:var(--primary);transform:scale(1.08)}
.shell.gside-collapsed .gside-toggle{left:52px;transform:rotate(180deg)}
.shell.gside-collapsed .gside-toggle:hover{transform:rotate(180deg) scale(1.08)}

/* Main-Bereich rechts: 100vh, top-bar fix, content scrollt wenn nötig */
.gmain{height:100vh;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.gmain > .gtop{flex-shrink:0}
.gmain > .content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:24px 28px 28px}

/* Container-Detail: spezielles No-Scroll-Layout — nur .srv-main scrollt */
.gmain > .content:has(> .detail-c){overflow:hidden;padding:0 28px}
/* === DEPRECATED-by-v5.10-APP-BASE === legacy HTN-LAYOUT .detail-c; ersetzt durch v5.10-APP-BASE block weiter unten
.detail-c{display:flex !important;flex-direction:column;height:100%;overflow:hidden}
*/
.detail-sticky-top{flex-shrink:0;padding:14px 0 10px;display:flex;flex-direction:column;gap:10px;background:var(--bg);z-index:5}
.detail-sticky-top > .page-head{margin:0 4px 4px}
.detail-sticky-top > .card{margin:0}
.detail-c > .bento{display:flex;flex-direction:column;flex:1;min-height:0;gap:0;overflow:hidden;margin:0}
/* srv-shell: items füllen Zelle vertikal (kein align-items:start hier) */
.detail-c > .bento > .srv-shell{flex:1 1 auto;min-height:0;overflow:hidden;padding:14px;align-items:stretch !important;height:100%}
/* srv-nav: scrollt selbst, full-height der Grid-Cell */
.detail-c .srv-nav{position:static !important;align-self:stretch !important;height:100%;max-height:100%;overflow-y:auto;scrollbar-width:thin}
.detail-c .srv-nav::-webkit-scrollbar{width:6px}
.detail-c .srv-nav::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
/* srv-main: das einzige Scroll-Element, füllt Cell vertikal komplett */
.detail-c .srv-main{align-self:stretch !important;height:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;min-height:0;padding-right:6px;scrollbar-width:thin}
.detail-c .srv-main::-webkit-scrollbar{width:8px}
.detail-c .srv-main::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
/* Log-Viewer: KEIN flex:1 mehr (würde mit srv-main:overflow:auto kollidieren).
   Feste min-height, Konsole hat ihren eigenen internen Scroll. Wenn Viewport schmal, scrollt srv-main. */
.detail-c #gamelogbox,.detail-c #logbox{height:55vh !important;min-height:280px;max-height:60vh}
/* DUPLIKAT-RULES gelöscht (alte .gside-toggle{right:-12px} hat den Fix oben überschrieben) */
.gside-hamburger{display:none;width:38px;height:38px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;font-size:18px;align-items:center;justify-content:center}
.gside-hamburger:hover{color:var(--text);background:var(--grad-soft)}

/* Collapsed state — applied on .shell, cascades into .gside */
/* === DEPRECATED-by-v5.10-APP-BASE === identische Regel bereits weiter oben (line ~253) deklariert
.shell.gside-collapsed{grid-template-columns:64px 1fr}
*/
.shell.gside-collapsed .gside{padding:18px 8px}
.shell.gside-collapsed .gside-toggle{transform:rotate(180deg)}
.shell.gside-collapsed .gbrand{justify-content:center;gap:0;padding:6px 0 16px}
.shell.gside-collapsed .gbtxt{display:none}
.shell.gside-collapsed .navlabel{display:none}
.shell.gside-collapsed .gnav-i{justify-content:center;padding:10px 6px;position:relative}
.shell.gside-collapsed .gnav-i .gt,
.shell.gside-collapsed .gnav-i .gext{display:none}
.shell.gside-collapsed .gfoot{justify-content:center;padding:12px 0 4px}
.shell.gside-collapsed .gfoot .gfmeta{display:none}

/* data-label CSS-tooltip for collapsed nav (and any element with data-label) */
.shell.gside-collapsed .gnav-i[data-label]:hover::after{
  content:attr(data-label);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  background:var(--surface);color:var(--text);border:1px solid var(--border2);border-radius:8px;
  padding:6px 10px;font-size:12px;font-weight:600;white-space:nowrap;z-index:60;
  box-shadow:0 8px 22px -10px rgba(2,5,20,.9);pointer-events:none}

/* Mobile drawer */
@media(max-width:880px){
  .gside-hamburger{display:inline-flex}
  .shell{grid-template-columns:1fr}
  .gside{position:fixed;top:0;left:0;height:100vh;width:260px;transform:translateX(-100%);transition:transform .22s ease;z-index:80;border-right:1px solid var(--border)}
  .shell.gside-mobile-open .gside{transform:translateX(0)}
  .shell.gside-mobile-open::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:70}
  .gside-toggle{display:none}
  /* on mobile, collapsed-state desktop styles should not apply */
  .shell.gside-collapsed{grid-template-columns:1fr}
  .shell.gside-collapsed .gside{padding:18px 14px;width:260px}
  .shell.gside-collapsed .gbtxt,
  .shell.gside-collapsed .navlabel,
  .shell.gside-collapsed .gnav-i .gt,
  .shell.gside-collapsed .gnav-i .gext,
  .shell.gside-collapsed .gfoot .gfmeta{display:initial}
  .shell.gside-collapsed .gnav-i{justify-content:flex-start;padding:9px 11px}
  .shell.gside-collapsed .gbrand{justify-content:flex-start;gap:12px;padding:6px 8px 16px}
  .shell.gside-collapsed .gfoot{justify-content:flex-start;padding:12px 8px 4px}
}

/* v5.10 HTN-LAYOUT */
.dash-grid { display:grid; grid-template-columns: 3fr 2fr; gap:14px; height:100%; align-items:stretch }
/* v5.10 HTN-LAYOUT */
.dash-stats-col { display:flex; flex-direction:column; gap:12px; overflow:auto; min-height:0 }
/* v5.10 HTN-LAYOUT */
.dash-stat-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px }
/* v5.10 HTN-LAYOUT */
.dash-stat-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:6px }
/* v5.10 HTN-LAYOUT */
.dash-stat-card:hover { border-color:var(--border2) }
/* v5.10 HTN-LAYOUT */
.dash-stat-card .ico { font-size:12px; font-weight:600; opacity:0.75; text-transform:uppercase; letter-spacing:.05em; color:var(--muted) }
/* v5.10 HTN-LAYOUT */
.dash-stat-card .val { font-size:22px; font-weight:700; letter-spacing:-.01em }
/* v5.10 HTN-LAYOUT */
.dash-stat-card .bar { height:6px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; margin-top:auto }
/* v5.10 HTN-LAYOUT */
.dash-stat-card .bar > i { display:block; height:100%; background:var(--primary); transition:width 0.3s; border-radius:3px }
/* v5.10 HTN-LAYOUT */
.dash-server-info { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:6px }
/* v5.10 HTN-LAYOUT */
.dash-info-row { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; padding:4px 0; border-bottom:1px solid var(--border) }
/* v5.10 HTN-LAYOUT */
.dash-info-row:last-child { border-bottom:0 }
/* v5.10 HTN-LAYOUT */
.dash-info-row b { font-weight:600 }
/* v5.10 HTN-LAYOUT */
.dash-console-col { display:flex; flex-direction:column; min-height:0 }
/* v5.10 HTN-LAYOUT */
.dash-console-col > .card { display:flex; flex-direction:column; flex:1; min-height:0; margin:0 }
/* v5.10 HTN-LAYOUT */
.dash-console-col #gamelogbox { flex:1; min-height:0; height:auto !important; max-height:none !important }
/* v5.10 HTN-LAYOUT — Server-Card (HTN-Look) für Produkt-Grid */
.prodcard { border-radius:14px; transition:.16s; position:relative }
/* v5.10 HTN-LAYOUT */
.prodcard .prodhead .badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px }
/* v5.10 HTN-LAYOUT */
.prodcard .prodhead .badge.run::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); display:inline-block }
/* v5.10 HTN-LAYOUT */
.prodcard .prodhead .badge.stop::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--danger); display:inline-block }

/* v5.10 HTN-LAYOUT — Detail-Konsole im Grid darf keine feste vh-Höhe haben */
.detail-c .dash-console-col #gamelogbox { height:100% !important; min-height:0 !important; max-height:none !important }

/* v5.10 HOTFIX-DUP-STATS — sticky-top CPU/RAM/Disk/Net row hidden on Dashboard tab; ensure dash-grid + console get usable viewport-anchored height */
.detail-c .dash-grid { min-height: calc(70vh - 160px) }
/* v5.10 HOTFIX-DUP-STATS */
.detail-c .dash-console-col { min-height: calc(60vh - 160px) }
/* v5.10 HOTFIX-DUP-STATS */
.detail-c .dash-console-col #gamelogbox { min-height: calc(60vh - 200px) !important }

/* ================ v5.10-APP-BASE ================ */
/* Operator-Console Design System — scoped to .detail-c.
   Provides design tokens, chrome layout, page-head pill, sidebar nav.
   All new tokens are scoped under .detail-c so they don't leak globally. */

/* === DEPRECATED-by-v5.10-APP-BASE === tokens block consolidated into APP-BASE canvas block below
.detail-c{
  --app-bg-0:#060810;
  --app-bg-1:#0a0d18;
  --app-surface-0:rgba(15,20,35,0.5);
  --app-surface-1:rgba(20,26,42,0.7);
  --app-border-0:rgba(255,255,255,0.07);
  --app-border-1:rgba(255,255,255,0.10);
  --app-accent:#5ec0ff;
  --app-accent-soft:rgba(94,192,255,0.12);
  --app-accent-glow:rgba(94,192,255,0.28);
  --app-success:#34e29b;
  --app-warn:#ffb84d;
  --app-danger:#ff5c7c;
  --app-text:#e8ecf5;
  --app-text-muted:#9aa3c8;
  --app-r-sm:8px;
  --app-r-md:12px;
  --app-r-lg:16px;
  --app-shadow-card:0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6);
  --app-blur:blur(14px) saturate(140%);
  --gtop-h:60px;
}
*/

/* v5.10-APP-BASE — single source of truth: design tokens + outer canvas merged */
.detail-c{
  --app-bg-0:#060810;
  --app-bg-1:#0a0d18;
  --app-surface-0:rgba(15,20,35,0.5);
  --app-surface-1:rgba(20,26,42,0.7);
  --app-border-0:rgba(255,255,255,0.07);
  --app-border-1:rgba(255,255,255,0.10);
  --app-accent:#5ec0ff;
  --app-accent-soft:rgba(94,192,255,0.12);
  --app-accent-glow:rgba(94,192,255,0.28);
  --app-success:#34e29b;
  --app-warn:#ffb84d;
  --app-danger:#ff5c7c;
  --app-text:#e8ecf5;
  --app-text-muted:#9aa3c8;
  --app-r-sm:8px;
  --app-r-md:12px;
  --app-r-lg:16px;
  --app-shadow-card:0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6);
  --app-blur:blur(14px) saturate(140%);
  --gtop-h:60px;
  height:calc(100vh - var(--gtop-h, 60px)) !important;
  max-height:calc(100vh - var(--gtop-h, 60px));
  overflow:hidden !important;
  padding:12px 16px !important;
  color:var(--app-text);
  background:
    radial-gradient(900px 480px at 100% -8%, rgba(94,192,255,0.06), transparent 60%),
    radial-gradient(720px 420px at -8% 0%, rgba(160,107,255,0.05), transparent 55%),
    linear-gradient(180deg, var(--app-bg-1) 0%, var(--app-bg-0) 100%);
  display:flex !important;
  flex-direction:column;
  gap:10px;
}

/* v5.10-APP-BASE — sticky top region (page-head + optional info bars) */
.detail-c .detail-sticky-top{
  flex:0 0 auto !important;
  padding:0 !important;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:transparent !important;
}

/* v5.10-APP-BASE — page-head as floating glass card with pill area */
.detail-c .detail-sticky-top > .page-head{
  margin:0 !important;
  padding:12px 16px !important;
  border:1px solid var(--app-border-1);
  border-radius:var(--app-r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,0.025), transparent 60%), var(--app-surface-1);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
  display:flex !important;
  align-items:center !important;
  gap:14px;
  position:relative;
  overflow:visible;
}

/* v5.10-APP-BASE — page-head h1 cleanup */
.detail-c .detail-sticky-top > .page-head h1{
  font-size:18px !important;
  font-weight:700 !important;
  letter-spacing:-.01em;
  color:var(--app-text);
}
.detail-c .detail-sticky-top > .page-head h1 a{
  color:var(--app-text-muted);
  font-size:18px;
  padding:2px 8px;
  border-radius:var(--app-r-sm);
  transition:.16s;
}
.detail-c .detail-sticky-top > .page-head h1 a:hover{
  color:var(--app-accent);
  background:var(--app-accent-soft);
}
.detail-c .detail-sticky-top > .page-head p{
  font-size:11.5px !important;
  color:var(--app-text-muted) !important;
  margin:2px 0 0 !important;
}

/* v5.10-APP-BASE — server switch dropdown polish */
.detail-c .srv-switch{
  font-size:15px !important;
  font-weight:700 !important;
  background:var(--app-surface-0) !important;
  border:1px solid var(--app-border-1) !important;
  border-radius:var(--app-r-md) !important;
  padding:5px 30px 5px 11px !important;
  color:var(--app-text) !important;
  transition:.16s;
}
.detail-c .srv-switch:hover{
  border-color:var(--app-accent) !important;
}
.detail-c .srv-switch:focus{
  border-color:var(--app-accent) !important;
  box-shadow:0 0 0 3px var(--app-accent-soft) !important;
}

/* v5.10-APP-BASE — head-center pill stack */
.detail-c .head-center{
  flex:1 1 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  min-width:0;
  flex-wrap:wrap;
}

/* v5.10-APP-BASE — head-pill: glass capsule with bottom progress bar slot */
.detail-c .head-pill{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid var(--app-border-1);
  background:var(--app-surface-0);
  font-size:12.5px;
  line-height:1.1;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:.16s;
  overflow:hidden;
}
.detail-c .head-pill:hover{
  border-color:var(--app-accent);
  box-shadow:0 0 0 3px var(--app-accent-soft);
}
.detail-c .head-pill .muted{
  color:var(--app-text-muted);
}
.detail-c .head-pill-bar{
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:rgba(255,255,255,0.04);
  overflow:hidden;
}
.detail-c .head-pill-bar > i{
  display:block;
  height:100%;
  background:var(--app-accent);
  transition:width .3s ease;
}
.detail-c .head-pill-btn{
  padding:1px 6px !important;
  font-size:10.5px !important;
  border-radius:var(--app-r-sm) !important;
  background:rgba(255,255,255,0.05) !important;
  border:1px solid var(--app-border-1) !important;
  line-height:1.2 !important;
}
.detail-c .head-pill-btn:hover{
  background:var(--app-accent-soft) !important;
  border-color:var(--app-accent) !important;
}

/* v5.10-APP-BASE — server status dot with pulse animation */
.detail-c .srv-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  flex:none;
  position:relative;
}
.detail-c .srv-dot.on{
  background:var(--app-success);
  box-shadow:0 0 0 3px rgba(52,226,155,0.18), 0 0 12px var(--app-success);
  animation:appDotPulse 2.2s ease-in-out infinite;
}
.detail-c .srv-dot.off{
  background:var(--app-danger);
  box-shadow:0 0 0 3px rgba(255,92,124,0.16);
}
@keyframes appDotPulse{
  0%, 100% { box-shadow:0 0 0 3px rgba(52,226,155,0.18), 0 0 12px var(--app-success); }
  50%      { box-shadow:0 0 0 5px rgba(52,226,155,0.10), 0 0 18px var(--app-success); }
}

/* v5.10-APP-BASE — pill (status pill) in page-head reskinned */
.detail-c .detail-sticky-top > .page-head .pill{
  background:var(--app-accent-soft) !important;
  color:var(--app-accent) !important;
  border:1px solid var(--app-border-1);
  font-weight:700;
  font-size:10.5px;
  padding:3px 9px;
}

/* v5.10-APP-BASE — primary action buttons in page-head */
.detail-c .detail-sticky-top > .page-head .btn{
  padding:8px 14px;
  font-size:12.5px;
  border-radius:var(--app-r-md);
  background:linear-gradient(135deg, var(--app-accent), #4aa9ed);
  box-shadow:0 6px 18px -8px var(--app-accent-glow);
}
.detail-c .detail-sticky-top > .page-head .btn.ghost{
  background:var(--app-surface-0);
  color:var(--app-text);
  border:1px solid var(--app-border-1);
  box-shadow:none;
}
.detail-c .detail-sticky-top > .page-head .btn.ghost:hover{
  border-color:var(--app-accent);
  background:var(--app-accent-soft);
}

/* v5.10-APP-BASE — bento container as flex column owning remaining space */
.detail-c > .bento{
  display:flex !important;
  flex-direction:column;
  flex:1 1 auto !important;
  min-height:0;
  overflow:hidden !important;
  margin:0 !important;
  gap:0;
}

/* v5.10-APP-BASE — secondary stats strip (when shown on non-dashboard tabs) */
.detail-c > .bento > .card[style*="padding:10px 14px"]{
  background:var(--app-surface-0) !important;
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-md) !important;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  margin-bottom:8px !important;
  box-shadow:none !important;
}

/* v5.10-APP-BASE — srv-shell layout: sidebar + main */
.detail-c .srv-shell{
  display:grid !important;
  grid-template-columns:200px 1fr !important;
  gap:12px !important;
  flex:1 1 auto !important;
  min-height:0;
  height:100% !important;
  overflow:hidden !important;
  padding:12px !important;
  background:var(--app-surface-0);
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-lg);
  box-shadow:var(--app-shadow-card);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  align-items:stretch !important;
}

/* v5.10-APP-BASE — sidebar nav capsule */
.detail-c .srv-nav{
  display:flex !important;
  flex-direction:column;
  gap:4px;
  position:static !important;
  align-self:stretch !important;
  height:100% !important;
  max-height:100%;
  overflow-y:auto;
  padding:8px 6px;
  background:var(--app-bg-1);
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-md);
  scrollbar-width:thin;
}
.detail-c .srv-nav::-webkit-scrollbar{ width:5px; }
.detail-c .srv-nav::-webkit-scrollbar-thumb{ background:var(--app-border-1); border-radius:3px; }

/* v5.10-APP-BASE — sidebar nav buttons (.btn.ghost overrides) */
.detail-c .srv-nav .btn{
  width:100% !important;
  justify-content:flex-start !important;
  gap:9px;
  padding:9px 11px !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  border:1px solid transparent !important;
  background:transparent !important;
  color:var(--app-text-muted) !important;
  border-radius:var(--app-r-sm) !important;
  box-shadow:none !important;
  text-align:left;
  transition:.14s;
  position:relative;
}
.detail-c .srv-nav .btn:hover{
  background:rgba(255,255,255,0.04) !important;
  color:var(--app-text) !important;
  border-color:var(--app-border-1) !important;
}
/* v5.10-APP-BASE — active tab uses accent border + soft fill */
.detail-c .srv-nav .btn[style*="primary"]{
  background:var(--app-accent-soft) !important;
  color:var(--app-text) !important;
  border-color:var(--app-accent) !important;
  box-shadow:inset 0 0 0 1px var(--app-accent-soft), 0 4px 14px -8px var(--app-accent-glow) !important;
}
.detail-c .srv-nav .btn[style*="danger"]{
  background:rgba(255,92,124,0.10) !important;
  color:var(--app-danger) !important;
  border-color:var(--app-danger) !important;
}

/* v5.10-APP-BASE — srv-main: only inner scroll, fills cell */
.detail-c .srv-main{
  align-self:stretch !important;
  height:100% !important;
  max-height:100%;
  overflow-y:auto !important;
  overflow-x:hidden;
  min-height:0;
  padding:0 6px 0 2px;
  scrollbar-width:thin;
}
.detail-c .srv-main::-webkit-scrollbar{ width:7px; }
.detail-c .srv-main::-webkit-scrollbar-thumb{
  background:var(--app-border-1);
  border-radius:4px;
}
.detail-c .srv-main::-webkit-scrollbar-thumb:hover{
  background:var(--app-accent-soft);
}

/* v5.10-APP-BASE — generic card polish inside srv-main (subtle, doesn't conflict) */
.detail-c .srv-main > div > .card,
.detail-c .srv-main .card{
  background:var(--app-surface-0);
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-md);
  box-shadow:none;
}
.detail-c .srv-main .card:hover{
  border-color:var(--app-border-1);
}

/* v5.10-APP-BASE — empty state / placeholder polish */
.detail-c .srv-main .muted{
  color:var(--app-text-muted);
}

/* v5.10-APP-BASE — log boxes keep their own scroll inside srv-main */
.detail-c #gamelogbox,
.detail-c #logbox{
  background:#05070f !important;
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-md) !important;
  font-family:var(--mono);
}

/* v5.10-APP-BASE — no-scroll invariant for known interior containers */
.detail-c .dash-grid{ overflow:hidden !important; }

/* v5.10-APP-BASE — responsive collapse: sidebar becomes top strip below 980px */
@media(max-width:980px){
  .detail-c .srv-shell{
    grid-template-columns:1fr !important;
    grid-template-rows:auto 1fr;
  }
  .detail-c .srv-nav{
    flex-direction:row !important;
    flex-wrap:wrap;
    height:auto !important;
    max-height:none;
    overflow-x:auto;
    overflow-y:hidden;
  }
  .detail-c .srv-nav .btn{
    width:auto !important;
  }
}

/* ================ v5.10-APP-TAB-MODS ================ */
/* Mods/Plugins tab — search/filter toolbar, mod-grid cards, installed list, modpacks.
   All rules scoped under .detail-c .tab-mods so they cannot leak. */

/* v5.10-APP-TAB-MODS — tab root: scrollable area below the page-head */
.detail-c .tab-mods{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:2px 2px 8px;
}

/* v5.10-APP-TAB-MODS — compatibility hint bar (loader + MC version pills) */
.detail-c .tab-mods .tm-compat-bar{
  padding:8px 12px !important;
  background:var(--app-surface-0);
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-md);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  margin-bottom:12px !important;
}
.detail-c .tab-mods .tm-compat-bar .pill{
  background:var(--app-accent-soft) !important;
  color:var(--app-accent) !important;
  border:1px solid rgba(94,192,255,0.22) !important;
  border-radius:999px !important;
  font-weight:600 !important;
  letter-spacing:.02em;
}

/* v5.10-APP-TAB-MODS — search/filter toolbar as a sticky-feeling card */
.detail-c .tab-mods .tm-toolbar{
  padding:10px 12px !important;
  background:var(--app-surface-0);
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-md);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
  margin-bottom:10px !important;
  align-items:center;
}
.detail-c .tab-mods .tm-search{
  background:var(--app-surface-1) !important;
  border:1px solid var(--app-border-1) !important;
  border-radius:var(--app-r-sm) !important;
  color:var(--app-text) !important;
  padding:8px 12px !important;
  font-size:13px !important;
  transition:border-color .16s, box-shadow .16s;
}
.detail-c .tab-mods .tm-search::placeholder{ color:var(--app-text-muted); }
.detail-c .tab-mods .tm-search:focus{
  outline:none !important;
  border-color:var(--app-accent) !important;
  box-shadow:0 0 0 3px var(--app-accent-soft) !important;
}
.detail-c .tab-mods .tm-btn-primary{
  background:linear-gradient(135deg, var(--app-accent), #4aa9ed) !important;
  border:0 !important;
  color:#04121e !important;
  font-weight:700 !important;
  border-radius:var(--app-r-sm) !important;
  padding:8px 16px !important;
  box-shadow:0 6px 18px -8px var(--app-accent-glow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.detail-c .tab-mods .tm-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px -10px var(--app-accent-glow);
}
.detail-c .tab-mods .tm-btn-scan{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid var(--app-border-1) !important;
  color:var(--app-text) !important;
  border-radius:var(--app-r-sm) !important;
  padding:8px 14px !important;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.detail-c .tab-mods .tm-btn-scan:hover{
  background:var(--app-accent-soft) !important;
  border-color:var(--app-accent) !important;
  transform:translateY(-1px);
}

/* v5.10-APP-TAB-MODS — sources row (provider chips) */
.detail-c .tab-mods .tm-sources{
  padding:6px 4px !important;
  margin-bottom:14px !important;
}
.detail-c .tab-mods .tm-sources-label{
  font-size:11px !important;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--app-text-muted) !important;
  font-weight:600;
}
.detail-c .tab-mods .catchip{
  background:var(--app-surface-0) !important;
  border:1px solid var(--app-border-1) !important;
  color:var(--app-text-muted) !important;
  border-radius:999px !important;
  padding:6px 14px !important;
  font-size:12.5px !important;
  font-weight:600;
  transition:.16s;
}
.detail-c .tab-mods .catchip:hover{
  color:var(--app-text) !important;
  border-color:var(--app-accent) !important;
  background:var(--app-accent-soft) !important;
}
.detail-c .tab-mods .catchip.on{
  color:#04121e !important;
  background:var(--app-accent) !important;
  border-color:var(--app-accent) !important;
  box-shadow:0 4px 12px -4px var(--app-accent-glow);
}

/* v5.10-APP-TAB-MODS — section titles */
.detail-c .tab-mods .tm-sec-title{
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:-.005em;
  color:var(--app-text);
  margin:4px 2px 10px !important;
}
.detail-c .tab-mods .tm-installed-title{
  margin-top:22px !important;
  padding-top:14px;
  border-top:1px dashed rgba(255,255,255,0.06);
}

/* v5.10-APP-TAB-MODS — mod search results grid */
.detail-c .tab-mods .modgrid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;
  gap:12px !important;
  max-height:52vh !important;
  overflow-y:auto !important;
  padding:2px 6px 2px 2px !important;
}
.detail-c .tab-mods .modgrid::-webkit-scrollbar{ width:8px }
.detail-c .tab-mods .modgrid::-webkit-scrollbar-thumb{ background:var(--app-border-1,#2a3350); border-radius:4px }

/* v5.10-APP-TAB-MODS — mod cards (search results) */
.detail-c .tab-mods .modcard{
  background:var(--app-surface-0) !important;
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-md) !important;
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.detail-c .tab-mods .modcard:hover{
  border-color:var(--app-accent) !important;
  transform:translateY(-2px);
  box-shadow:0 18px 36px -18px rgba(0,0,0,0.7), 0 0 0 1px var(--app-accent-soft);
}
.detail-c .tab-mods .modcard .modbanner{
  height:88px;
  background:linear-gradient(135deg, var(--app-accent-soft), rgba(160,107,255,0.10)) !important;
  border-bottom:1px solid var(--app-border-0);
  display:flex; align-items:center; justify-content:center;
}
.detail-c .tab-mods .modcard .modbanner .modicon{
  font-size:36px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.25));
}
.detail-c .tab-mods .modcard .modbody{
  padding:12px 13px !important;
  gap:5px !important;
}
.detail-c .tab-mods .modcard .modname{
  color:var(--app-text) !important;
  font-size:13.5px !important;
  font-weight:700 !important;
}
.detail-c .tab-mods .modcard .moddesc{
  color:var(--app-text-muted) !important;
  font-size:11.5px !important;
  line-height:1.45 !important;
}
.detail-c .tab-mods .modcard .modmeta{
  margin-top:6px !important;
  padding-top:6px;
  border-top:1px solid rgba(255,255,255,0.04);
}
.detail-c .tab-mods .modcard .modmeta .btn{
  background:var(--app-accent-soft) !important;
  border:1px solid rgba(94,192,255,0.22) !important;
  color:var(--app-accent) !important;
  font-weight:700 !important;
  border-radius:var(--app-r-sm) !important;
  transition:.15s;
}
.detail-c .tab-mods .modcard .modmeta .btn:hover{
  background:var(--app-accent) !important;
  color:#04121e !important;
}

/* v5.10-APP-TAB-MODS — version-picker modal card */
.detail-c .tab-mods .tm-modal-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.03), transparent 60%), var(--app-surface-1) !important;
  border:1px solid var(--app-border-1) !important;
  border-radius:var(--app-r-lg) !important;
  box-shadow:var(--app-shadow-card), 0 24px 60px -20px rgba(0,0,0,0.8);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  padding:18px !important;
}

/* v5.10-APP-TAB-MODS — installed mods list as compact list */
.detail-c .tab-mods .tm-installed{
  background:var(--app-surface-0);
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-md);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
  padding:6px;
  overflow:hidden;
}
.detail-c .tab-mods .tm-installed .tm-installed-row{
  padding:8px 10px !important;
  border-bottom:1px dashed rgba(255,255,255,0.06) !important;
  transition:background .14s ease;
  border-radius:var(--app-r-sm);
}
.detail-c .tab-mods .tm-installed .tm-installed-row:last-of-type{
  border-bottom:0 !important;
}
.detail-c .tab-mods .tm-installed .tm-installed-row:hover{
  background:rgba(94,192,255,0.04);
}
.detail-c .tab-mods .tm-installed .tm-installed-row .cname{
  color:var(--app-text) !important;
  font-size:13px !important;
  font-weight:600;
}
.detail-c .tab-mods .tm-installed .tm-installed-row .cmeta{
  color:var(--app-text-muted) !important;
  font-size:11px !important;
}
.detail-c .tab-mods .tm-installed .tm-installed-row .pill{
  background:var(--app-accent-soft) !important;
  color:var(--app-accent) !important;
  border:1px solid rgba(94,192,255,0.22) !important;
  border-radius:999px !important;
  font-size:10.5px !important;
  letter-spacing:.04em;
  padding:2px 9px !important;
  text-transform:uppercase;
  font-weight:700;
}

/* v5.10-APP-TAB-MODS — empty state card */
.detail-c .tab-mods .tm-empty{
  background:var(--app-surface-0);
  border:1px dashed var(--app-border-1);
  border-radius:var(--app-r-md);
  margin:4px 0;
  padding:34px 16px !important;
}

/* v5.10-APP-TAB-MODS — modpacks section panel */
.detail-c .tab-mods .tm-modpacks{
  margin-top:22px !important;
  padding:16px !important;
  border-top:0 !important;
  background:var(--app-surface-0);
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-md);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
}
.detail-c .tab-mods .tm-modpacks h3{
  font-size:14px !important;
  font-weight:700 !important;
  color:var(--app-text);
  margin-bottom:6px !important;
}
.detail-c .tab-mods .tm-modpacks input{
  background:var(--app-surface-1) !important;
  border:1px solid var(--app-border-1) !important;
  border-radius:var(--app-r-sm) !important;
  color:var(--app-text) !important;
  padding:8px 12px !important;
  font-size:13px !important;
}
.detail-c .tab-mods .tm-modpacks input:focus{
  outline:none !important;
  border-color:var(--app-accent) !important;
  box-shadow:0 0 0 3px var(--app-accent-soft) !important;
}
.detail-c .tab-mods .tm-modpacks .clist .crow{
  border-bottom:1px dashed rgba(255,255,255,0.06);
  padding:8px 10px;
  transition:background .14s ease;
}
.detail-c .tab-mods .tm-modpacks .clist .crow:hover{
  background:rgba(94,192,255,0.04);
}
.detail-c .tab-mods .tm-modpacks .clist .crow:last-child{
  border-bottom:0;
}

/* ================ v5.10-APP-TAB-DASH ================ */
/* Game Dashboard tab — stat cards, server-info table, console hero, log toolbar.
   Scoped to .detail-c .tab-dash. All rules use --app-* tokens from v5.10-APP-BASE. */

/* v5.10-APP-TAB-DASH — outer container layout */
.detail-c .tab-dash{
  display:flex;
  flex-direction:column;
  gap:12px;
  height:100%;
  min-height:0;
}

/* v5.10-APP-TAB-DASH — dash-grid spacing inside polished tab */
.detail-c .tab-dash .dash-grid{
  gap:14px;
}

/* v5.10-APP-TAB-DASH — stats column rhythm */
.detail-c .tab-dash .dash-stats-col{
  gap:14px;
}

/* v5.10-APP-TAB-DASH — stat-cards grid */
.detail-c .tab-dash .dash-stat-cards{
  gap:12px;
}

/* v5.10-APP-TAB-DASH — beautiful stat card base */
.detail-c .tab-dash .dash-stat-card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,0.025), transparent 70%), var(--app-surface-0);
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-lg);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:hidden;
  transition:.18s ease;
}

/* v5.10-APP-TAB-DASH — stat card hover lift */
.detail-c .tab-dash .dash-stat-card:hover{
  border-color:var(--app-border-1);
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 18px 38px -18px rgba(0,0,0,0.7);
}

/* v5.10-APP-TAB-DASH — accent glow accent bar at top of stat card */
.detail-c .tab-dash .dash-stat-card::before{
  content:"";
  position:absolute;
  top:0; left:14px; right:14px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--app-accent-glow), transparent);
  opacity:.55;
  pointer-events:none;
}

/* v5.10-APP-TAB-DASH — stat card label/icon line */
.detail-c .tab-dash .dash-stat-card .ico{
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--app-text-muted);
  opacity:.9;
  display:flex;
  align-items:center;
  gap:6px;
  line-height:1;
  margin-bottom:2px;
}

/* v5.10-APP-TAB-DASH — big stat value */
.detail-c .tab-dash .dash-stat-card .val{
  font-size:22px;
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--app-text);
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}

/* v5.10-APP-TAB-DASH — xl value for headline metric */
.detail-c .tab-dash .dash-stat-card .val-xl{
  font-size:28px;
  font-weight:800;
  letter-spacing:-.02em;
}

/* v5.10-APP-TAB-DASH — sub-line below value (e.g. used/total bytes) */
.detail-c .tab-dash .dash-stat-card .disk-sub{
  font-size:11.5px;
  color:var(--app-text-muted);
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}

/* v5.10-APP-TAB-DASH — progress bar polish */
.detail-c .tab-dash .dash-stat-card .bar{
  height:6px;
  background:rgba(255,255,255,0.05);
  border-radius:999px;
  overflow:hidden;
  margin-top:auto;
  position:relative;
}

/* v5.10-APP-TAB-DASH — progress bar — larger variant */
.detail-c .tab-dash .dash-stat-card .bar.bar-lg{
  height:8px;
}

/* v5.10-APP-TAB-DASH — progress bar fill polish */
.detail-c .tab-dash .dash-stat-card .bar > i{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--app-accent);
  box-shadow:0 0 12px var(--app-accent-glow);
  transition:width .4s cubic-bezier(.4,0,.2,1);
}

/* v5.10-APP-TAB-DASH — Network card: rows of dir + value */
.detail-c .tab-dash .dash-stat-card.stat-net .net-rows{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:4px;
}

/* v5.10-APP-TAB-DASH — single network row */
.detail-c .tab-dash .dash-stat-card.stat-net .net-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:6px 0;
  border-bottom:1px dashed rgba(255,255,255,0.06);
}

/* v5.10-APP-TAB-DASH — last row drops separator */
.detail-c .tab-dash .dash-stat-card.stat-net .net-row:last-child{
  border-bottom:0;
}

/* v5.10-APP-TAB-DASH — direction label (↓ Download / ↑ Upload) */
.detail-c .tab-dash .dash-stat-card.stat-net .net-row .dir{
  font-size:12px;
  font-weight:500;
  color:var(--app-text-muted);
  letter-spacing:.01em;
}

/* v5.10-APP-TAB-DASH — value in network row */
.detail-c .tab-dash .dash-stat-card.stat-net .net-row b{
  font-size:15px;
  font-weight:700;
  color:var(--app-text);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

/* v5.10-APP-TAB-DASH — disk card visual trend marker (decorative micro spark) */
.detail-c .tab-dash .dash-stat-card.stat-disk::after{
  content:"";
  position:absolute;
  right:14px;
  top:14px;
  width:42px;
  height:18px;
  background:
    linear-gradient(180deg, transparent 55%, var(--app-accent-soft) 55%, var(--app-accent-soft) 70%, transparent 70%) 0 0/8px 100% repeat-x;
  opacity:.35;
  pointer-events:none;
  border-radius:2px;
  mask-image:linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}

/* v5.10-APP-TAB-DASH — Server-Info card as tidy key-value table */
.detail-c .tab-dash .dash-server-info{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent 60%), var(--app-surface-0);
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-lg);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
  padding:6px 16px 8px;
  display:flex;
  flex-direction:column;
  gap:0;
  transition:.18s ease;
}

/* v5.10-APP-TAB-DASH — server-info hover */
.detail-c .tab-dash .dash-server-info:hover{
  border-color:var(--app-border-1);
}

/* v5.10-APP-TAB-DASH — info row layout */
.detail-c .tab-dash .dash-server-info .dash-info-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:9px 0;
  font-size:13px;
  border-bottom:1px dashed rgba(255,255,255,0.06);
  min-height:32px;
}

/* v5.10-APP-TAB-DASH — last info row has no border */
.detail-c .tab-dash .dash-server-info .dash-info-row:last-child{
  border-bottom:0;
}

/* v5.10-APP-TAB-DASH — left label (the muted span) */
.detail-c .tab-dash .dash-server-info .dash-info-row > .muted{
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--app-text-muted);
  flex:0 0 auto;
}

/* v5.10-APP-TAB-DASH — right value */
.detail-c .tab-dash .dash-server-info .dash-info-row > b{
  font-size:13px;
  font-weight:600;
  color:var(--app-text);
  text-align:right;
  letter-spacing:-.005em;
  font-variant-numeric:tabular-nums;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* v5.10-APP-TAB-DASH — Console column: card becomes hero with proper structure */
.detail-c .tab-dash .dash-console-col > .card{
  background:linear-gradient(180deg, rgba(255,255,255,0.025), transparent 50%), var(--app-surface-0);
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-lg);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
  padding:14px 16px;
  transition:.18s ease;
}

/* v5.10-APP-TAB-DASH — console card hover */
.detail-c .tab-dash .dash-console-col > .card:hover{
  border-color:var(--app-border-1);
}

/* v5.10-APP-TAB-DASH — console card header (h3 + buttons row) */
.detail-c .tab-dash .dash-console-col > .card > div:first-child{
  border-bottom:1px solid var(--app-border-0);
  padding-bottom:10px;
  margin-bottom:12px !important;
  gap:8px !important;
}

/* v5.10-APP-TAB-DASH — console h3 */
.detail-c .tab-dash .dash-console-col > .card > div:first-child > h3{
  font-size:14px;
  font-weight:700;
  letter-spacing:-.005em;
  color:var(--app-text);
  display:flex;
  align-items:center;
  gap:8px;
}

/* v5.10-APP-TAB-DASH — console header hint */
.detail-c .tab-dash .dash-console-col > .card > div:first-child > span.muted{
  font-size:11px !important;
  color:var(--app-text-muted) !important;
  letter-spacing:.01em;
}

/* v5.10-APP-TAB-DASH — toolbar ghost buttons */
.detail-c .tab-dash .dash-console-col > .card > div:first-child > button.btn.ghost{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-sm);
  color:var(--app-text-muted);
  padding:5px 11px !important;
  font-size:11px !important;
  font-weight:600;
  letter-spacing:.01em;
  transition:.14s ease;
  cursor:pointer;
}

/* v5.10-APP-TAB-DASH — toolbar button hover */
.detail-c .tab-dash .dash-console-col > .card > div:first-child > button.btn.ghost:hover{
  background:rgba(255,255,255,0.06);
  border-color:var(--app-border-1);
  color:var(--app-text);
  transform:translateY(-1px);
}

/* v5.10-APP-TAB-DASH — toolbar accent (active) state */
.detail-c .tab-dash .dash-console-col > .card > div:first-child > button.btn.ghost.accent{
  background:var(--app-accent-soft);
  border-color:var(--app-accent);
  color:var(--app-accent);
  box-shadow:0 0 0 1px var(--app-accent-soft);
}

/* v5.10-APP-TAB-DASH — toolbar button active press */
.detail-c .tab-dash .dash-console-col > .card > div:first-child > button.btn.ghost:active{
  transform:translateY(0);
}

/* v5.10-APP-TAB-DASH — gamelogbox typography polish (inside dash) */
.detail-c .tab-dash #gamelogbox{
  background:#04060d !important;
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-md) !important;
  font-family:var(--mono) !important;
  font-size:12.5px !important;
  line-height:1.55 !important;
  letter-spacing:.005em;
  color:#d4d8e6;
  padding:14px 16px !important;
  box-shadow:inset 0 1px 0 rgba(0,0,0,0.3), inset 0 0 60px rgba(94,192,255,0.018);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.08) transparent;
  transition:border-color .18s ease, box-shadow .18s ease;
}

/* v5.10-APP-TAB-DASH — webkit scrollbar for gamelogbox */
.detail-c .tab-dash #gamelogbox::-webkit-scrollbar{
  width:10px;
}
.detail-c .tab-dash #gamelogbox::-webkit-scrollbar-track{
  background:transparent;
}
.detail-c .tab-dash #gamelogbox::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.08);
  border-radius:6px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.detail-c .tab-dash #gamelogbox::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,0.14);
  background-clip:padding-box;
}

/* v5.10-APP-TAB-DASH — gamelogbox focus ring */
.detail-c .tab-dash #gamelogbox[data-focused="true"]{
  border-color:var(--app-accent) !important;
  box-shadow:inset 0 1px 0 rgba(0,0,0,0.3), 0 0 0 3px var(--app-accent-soft);
}

/* v5.10-APP-TAB-DASH — footer hint paragraph */
.detail-c .tab-dash > p.muted{
  color:var(--app-text-muted) !important;
  opacity:.75;
  font-size:11.5px !important;
  letter-spacing:.01em;
  padding:6px 0 2px;
}

/* v5.10-APP-TAB-DASH — responsive: stack columns on narrow viewports */
@media(max-width:1080px){
  .detail-c .tab-dash .dash-grid{
    grid-template-columns:1fr !important;
  }
}

/* v5.10-APP-TAB-DASH — responsive: stat cards single column on very narrow */
@media(max-width:560px){
  .detail-c .tab-dash .dash-stat-cards{
    grid-template-columns:1fr !important;
  }
}

/* ================ v5.10-APP-TAB-DANGER ================ */
/* Destructive actions tab — reinstall + delete + type-swap. Big visual warning,
   then three clearly separated action rows. All hover/active styles use --app-* tokens.
   Scoped to .detail-c .tab-danger. */

/* v5.10-APP-TAB-DANGER — outer wrapper: vertical stack with breathing room */
.detail-c .tab-danger{
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:880px;
  margin:0 auto;
  padding:4px 0 12px;
}

/* v5.10-APP-TAB-DANGER — intro banner: prominent warning header */
.detail-c .tab-danger__intro{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  background:linear-gradient(135deg, rgba(255,92,124,0.10), rgba(255,184,77,0.06));
  border:1px solid rgba(255,92,124,0.32);
  border-left:4px solid var(--app-danger);
  border-radius:var(--app-r-lg);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card), 0 0 0 1px rgba(255,92,124,0.06) inset;
  transition:transform .25s ease, box-shadow .25s ease;
}
.detail-c .tab-danger__intro:hover{
  transform:translateY(-1px);
  box-shadow:var(--app-shadow-card), 0 0 24px -8px rgba(255,92,124,0.32);
}

/* v5.10-APP-TAB-DANGER — intro icon: pulsing warning glyph */
.detail-c .tab-danger__intro-icon{
  flex-shrink:0;
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  border-radius:50%;
  background:rgba(255,92,124,0.14);
  color:var(--app-danger);
  border:1px solid rgba(255,92,124,0.30);
  box-shadow:0 0 0 4px rgba(255,92,124,0.06);
  animation:tab-danger-pulse 2.2s ease-in-out infinite;
}
@keyframes tab-danger-pulse{
  0%, 100%{ box-shadow:0 0 0 4px rgba(255,92,124,0.06); }
  50%{ box-shadow:0 0 0 7px rgba(255,92,124,0.02), 0 0 18px rgba(255,92,124,0.22); }
}

/* v5.10-APP-TAB-DANGER — intro text block */
.detail-c .tab-danger__intro-text{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.detail-c .tab-danger__intro-title{
  font-size:17px;
  font-weight:700;
  letter-spacing:0.2px;
  color:var(--app-danger);
}
.detail-c .tab-danger__intro-sub{
  font-size:12.5px;
  color:var(--app-muted, rgba(220,225,240,0.62));
  line-height:1.45;
}

/* v5.10-APP-TAB-DANGER — main card overrides: stronger glass treatment */
.detail-c .tab-danger__card.tab-danger__card--warn{
  background:rgba(255,92,124,0.045) !important;
  border:1px solid rgba(255,92,124,0.24) !important;
  border-radius:var(--app-r-lg);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
  padding:18px 18px 14px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* v5.10-APP-TAB-DANGER — legend heading kept but visually de-duplicated */
.detail-c .tab-danger__legend{
  margin:0 0 12px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1.4px;
  font-weight:700;
  opacity:0.78;
}

/* v5.10-APP-TAB-DANGER — action row: card-within-card pattern */
.detail-c .tab-danger__row{
  position:relative;
  padding:14px 16px !important;
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--app-r-md, 12px);
  margin-bottom:10px !important;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.detail-c .tab-danger__row:hover{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.10);
  transform:translateY(-1px);
}
.detail-c .tab-danger__row:last-child{
  margin-bottom:0 !important;
}

/* v5.10-APP-TAB-DANGER — accent stripe on left side per action type */
.detail-c .tab-danger__row::before{
  content:'';
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:2px;
  transition:opacity .18s ease;
  opacity:0.55;
}
.detail-c .tab-danger__row:hover::before{
  opacity:1;
}
.detail-c .tab-danger__row--recreate::before{
  background:linear-gradient(180deg,#ffb443,#ff7e3b);
}
.detail-c .tab-danger__row--reinstall::before{
  background:var(--app-warn);
}
.detail-c .tab-danger__row--delete::before{
  background:var(--app-danger);
}

/* v5.10-APP-TAB-DANGER — row description text refinement */
.detail-c .tab-danger__row b{
  display:block;
  font-size:14px;
  font-weight:600;
  margin-bottom:4px;
  letter-spacing:0.1px;
}
.detail-c .tab-danger__row .cmeta{
  font-size:12.5px;
  line-height:1.5;
  opacity:0.72;
}

/* v5.10-APP-TAB-DANGER — action buttons: rounded pill, lift on hover */
.detail-c .tab-danger__btn{
  border-radius:var(--app-r-md, 12px) !important;
  font-weight:600;
  padding:9px 16px;
  letter-spacing:0.2px;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.detail-c .tab-danger__btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
}
.detail-c .tab-danger__btn:active{
  transform:translateY(0);
  filter:brightness(0.96);
}

/* v5.10-APP-TAB-DANGER — recreate (orange gradient) glow on hover */
.detail-c .tab-danger__btn--recreate:hover{
  box-shadow:0 6px 18px -6px rgba(255,126,59,0.55);
}

/* v5.10-APP-TAB-DANGER — reinstall (warn ghost) tint background on hover */
.detail-c .tab-danger__btn--reinstall:hover{
  background:rgba(255,184,77,0.10) !important;
  box-shadow:0 4px 14px -6px rgba(255,184,77,0.40);
}

/* v5.10-APP-TAB-DANGER — delete (danger ghost) tint background on hover */
.detail-c .tab-danger__btn--delete:hover{
  background:rgba(255,92,124,0.10) !important;
  box-shadow:0 4px 14px -6px rgba(255,92,124,0.45);
}

/* v5.10-APP-TAB-DANGER — responsive: stack action rows on narrow screens */
@media(max-width:620px){
  .detail-c .tab-danger__row{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .detail-c .tab-danger__row .tab-danger__btn,
  .detail-c .tab-danger__row > button{
    width:100%;
    justify-content:center;
  }
  .detail-c .tab-danger__intro{
    padding:14px 16px;
  }
  .detail-c .tab-danger__intro-title{
    font-size:15px;
  }
}

/* ================ v5.10-APP-TAB-ENV ================ */
/* Variablen tab — Version-Switch, Server-Einstellungen, Admin Raw-Editor.
   Scoped under .detail-c .tab-env. Uses BASE design tokens only. */

/* v5.10-APP-TAB-ENV — tab root container */
.detail-c .tab-env{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:2px 2px 8px;
}

/* v5.10-APP-TAB-ENV — every card-section gets the glass treatment */
.detail-c .tab-env .tab-env-section{
  background:var(--app-surface-0) !important;
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-lg) !important;
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card) !important;
  padding:16px !important;
  transition:border-color .18s ease, transform .18s ease;
}
.detail-c .tab-env .tab-env-section:hover{
  border-color:var(--app-border-1) !important;
}

/* v5.10-APP-TAB-ENV — subheading head with subtle separator */
.detail-c .tab-env .tab-env-head{
  padding-bottom:10px;
  border-bottom:1px dashed rgba(255,255,255,0.06);
  margin-bottom:14px !important;
}
.detail-c .tab-env .tab-env-head h3{
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:-0.01em;
  color:var(--app-text) !important;
  margin:0 !important;
}
.detail-c .tab-env .tab-env-head .muted{
  font-size:11px !important;
  color:var(--app-text-muted) !important;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

/* v5.10-APP-TAB-ENV — version section: subtle accent left rail */
.detail-c .tab-env .tab-env-version{
  position:relative;
  overflow:hidden;
}
.detail-c .tab-env .tab-env-version::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:linear-gradient(180deg, var(--app-accent), transparent);
  opacity:0.55;
  pointer-events:none;
}
.detail-c .tab-env .tab-env-version-row select{
  background:var(--app-surface-1) !important;
  border:1px solid var(--app-border-1) !important;
  color:var(--app-text) !important;
  border-radius:var(--app-r-sm) !important;
  padding:8px 12px !important;
  font-size:13px !important;
  transition:border-color .16s, box-shadow .16s;
}
.detail-c .tab-env .tab-env-version-row select:focus{
  outline:none !important;
  border-color:var(--app-accent) !important;
  box-shadow:0 0 0 3px var(--app-accent-soft) !important;
}

/* v5.10-APP-TAB-ENV — informational hint paragraphs */
.detail-c .tab-env .tab-env-hint{
  color:var(--app-text-muted) !important;
  font-size:12px !important;
  line-height:1.5;
  margin:10px 0 0 !important;
}

/* v5.10-APP-TAB-ENV — curated form grid */
.detail-c .tab-env .tab-env-grid{
  gap:14px !important;
}
.detail-c .tab-env .tab-env-field label{
  font-size:11px !important;
  color:var(--app-text-muted) !important;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-weight:600 !important;
  margin-bottom:6px !important;
  display:block;
}
.detail-c .tab-env .tab-env-field input,
.detail-c .tab-env .tab-env-field select{
  background:var(--app-surface-1) !important;
  border:1px solid var(--app-border-1) !important;
  color:var(--app-text) !important;
  border-radius:var(--app-r-sm) !important;
  padding:8px 11px !important;
  font-size:13px !important;
  width:100% !important;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.detail-c .tab-env .tab-env-field input:hover,
.detail-c .tab-env .tab-env-field select:hover{
  border-color:rgba(94,192,255,0.30) !important;
}
.detail-c .tab-env .tab-env-field input:focus,
.detail-c .tab-env .tab-env-field select:focus{
  outline:none !important;
  border-color:var(--app-accent) !important;
  box-shadow:0 0 0 3px var(--app-accent-soft) !important;
}
.detail-c .tab-env .tab-env-empty{
  color:var(--app-text-muted) !important;
  font-size:12.5px !important;
  padding:10px 0;
  text-align:center;
}

/* v5.10-APP-TAB-ENV — admin raw editor list (KEY=VALUE rows, mono) */
.detail-c .tab-env .tab-env-raw{
  border-color:rgba(255,184,77,0.18) !important;
}
.detail-c .tab-env .tab-env-raw .pill{
  background:rgba(255,184,77,0.14) !important;
  color:var(--app-warn) !important;
  border:1px solid rgba(255,184,77,0.30) !important;
  border-radius:999px !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:3px 9px !important;
}
.detail-c .tab-env .tab-env-rawlist{
  max-height:420px;
  overflow-y:auto;
  padding-right:4px;
  scrollbar-width:thin;
}
.detail-c .tab-env .tab-env-rawlist::-webkit-scrollbar{ width:6px; }
.detail-c .tab-env .tab-env-rawlist::-webkit-scrollbar-thumb{
  background:var(--app-border-1);
  border-radius:4px;
}
.detail-c .tab-env .tab-env-rawrow{
  padding:6px 8px;
  border-radius:var(--app-r-sm);
  border:1px dashed transparent;
  transition:background .12s, border-color .12s;
}
.detail-c .tab-env .tab-env-rawrow:hover{
  background:rgba(255,255,255,0.025);
  border-color:rgba(255,255,255,0.06);
}
.detail-c .tab-env .tab-env-rawkey,
.detail-c .tab-env .tab-env-rawval{
  background:var(--app-surface-1) !important;
  border:1px solid var(--app-border-1) !important;
  color:var(--app-text) !important;
  border-radius:var(--app-r-sm) !important;
  padding:7px 10px !important;
  font-size:12.5px !important;
  transition:border-color .15s, box-shadow .15s;
}
.detail-c .tab-env .tab-env-rawkey{
  font-family:var(--mono) !important;
  color:var(--app-accent) !important;
  background:rgba(94,192,255,0.06) !important;
  border-color:rgba(94,192,255,0.16) !important;
}
.detail-c .tab-env .tab-env-rawkey[disabled]{
  opacity:0.85;
  cursor:default;
}
.detail-c .tab-env .tab-env-rawval:focus,
.detail-c .tab-env .tab-env-rawval:hover{
  border-color:var(--app-accent) !important;
}
.detail-c .tab-env .tab-env-rawval:focus{
  outline:none !important;
  box-shadow:0 0 0 3px var(--app-accent-soft) !important;
}
.detail-c .tab-env .tab-env-rawadd{
  margin-top:14px !important;
  padding-top:12px;
  border-top:1px dashed rgba(255,255,255,0.06);
}
.detail-c .tab-env .tab-env-rawadd input{
  background:var(--app-surface-1) !important;
  border:1px solid var(--app-border-1) !important;
  color:var(--app-text) !important;
  border-radius:var(--app-r-sm) !important;
  padding:7px 10px !important;
  font-size:12.5px !important;
}
.detail-c .tab-env .tab-env-rawadd input:focus{
  outline:none !important;
  border-color:var(--app-accent) !important;
  box-shadow:0 0 0 3px var(--app-accent-soft) !important;
}
.detail-c .tab-env .tab-env-rawfoot{
  margin-top:16px !important;
}

/* v5.10-APP-TAB-ENV — section spacing collapse on narrow widths */
@media(max-width:680px){
  .detail-c .tab-env .tab-env-section{
    padding:14px !important;
  }
  .detail-c .tab-env .tab-env-rawrow{
    flex-wrap:wrap;
  }
  .detail-c .tab-env .tab-env-rawkey,
  .detail-c .tab-env .tab-env-rawval{
    width:100% !important;
  }
}

/* ================ v5.10-APP-TAB-LIMITS ================ */
/* Limits tab — CPU/RAM/Disk resource form, glass card with numeric fields.
   Scoped under .detail-c .tab-limits. Uses BASE design tokens only. */

/* v5.10-APP-TAB-LIMITS — tab root + intro paragraph */
.detail-c .tab-limits{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:2px 2px 8px;
}
.detail-c .tab-limits > .muted{
  color:var(--app-text-muted) !important;
  font-size:12.5px !important;
  line-height:1.5;
  margin:0 0 14px !important;
  padding:10px 14px;
  background:rgba(255,184,77,0.06);
  border:1px solid rgba(255,184,77,0.16);
  border-radius:var(--app-r-md);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
}

/* v5.10-APP-TAB-LIMITS — form grid wrapped in a glass card */
.detail-c .tab-limits > div:nth-of-type(1){
  background:var(--app-surface-0);
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-lg);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
  padding:18px !important;
  max-width:none !important;
  gap:16px !important;
  transition:border-color .18s ease;
}
.detail-c .tab-limits > div:nth-of-type(1):hover{
  border-color:var(--app-border-1);
}

/* v5.10-APP-TAB-LIMITS — fields */
.detail-c .tab-limits .field{
  margin-bottom:0 !important;
  display:flex;
  flex-direction:column;
}
.detail-c .tab-limits .field label{
  font-size:11px !important;
  color:var(--app-text-muted) !important;
  letter-spacing:0.05em;
  text-transform:uppercase;
  font-weight:600 !important;
  margin-bottom:8px !important;
  display:block;
}
.detail-c .tab-limits .field input{
  background:var(--app-surface-1) !important;
  border:1px solid var(--app-border-1) !important;
  color:var(--app-text) !important;
  border-radius:var(--app-r-sm) !important;
  padding:10px 12px !important;
  font-size:16px !important;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  width:100%;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.detail-c .tab-limits .field input:hover{
  border-color:rgba(94,192,255,0.30) !important;
  background:rgba(255,255,255,0.02) !important;
}
.detail-c .tab-limits .field input:focus{
  outline:none !important;
  border-color:var(--app-accent) !important;
  box-shadow:0 0 0 3px var(--app-accent-soft) !important;
}

/* v5.10-APP-TAB-LIMITS — save-button row */
.detail-c .tab-limits > div:last-child{
  margin-top:16px !important;
  display:flex;
  justify-content:flex-end;
}
.detail-c .tab-limits > div:last-child .btn{
  background:linear-gradient(135deg, var(--app-accent), #4aa9ed) !important;
  border:0 !important;
  color:#04121e !important;
  font-weight:700 !important;
  border-radius:var(--app-r-sm) !important;
  padding:9px 18px !important;
  box-shadow:0 6px 18px -8px var(--app-accent-glow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.detail-c .tab-limits > div:last-child .btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 10px 22px -10px var(--app-accent-glow);
}
.detail-c .tab-limits > div:last-child .btn:disabled{
  opacity:0.55;
  cursor:not-allowed;
}

/* v5.10-APP-TAB-LIMITS — responsive collapse */
@media(max-width:680px){
  .detail-c .tab-limits > div:nth-of-type(1){
    grid-template-columns:1fr !important;
    padding:14px !important;
  }
  .detail-c .tab-limits > div:last-child{
    justify-content:stretch;
  }
  .detail-c .tab-limits > div:last-child .btn{
    width:100%;
    justify-content:center;
  }
}

/* v5.10-APP-TAB-ENV — structural fallbacks (targeting existing .card markup) */
.detail-c .tab-env > template + *,
.detail-c .tab-env > .card{
  /* no-op anchor to keep specificity context */
}
.detail-c .tab-env .card{
  background:var(--app-surface-0) !important;
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-lg) !important;
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card) !important;
  padding:16px !important;
  transition:border-color .18s ease;
}
.detail-c .tab-env .card:hover{
  border-color:var(--app-border-1) !important;
}
/* v5.10-APP-TAB-ENV — headings inside cards */
.detail-c .tab-env .card h3{
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:-0.01em;
  color:var(--app-text) !important;
  margin:0 !important;
}
/* v5.10-APP-TAB-ENV — soft separator under the heading row */
.detail-c .tab-env .card > div:first-child{
  padding-bottom:10px;
  border-bottom:1px dashed rgba(255,255,255,0.06);
  margin-bottom:12px !important;
}
/* v5.10-APP-TAB-ENV — version card accent rail (first card in tab-env, if version pill is present) */
.detail-c .tab-env > template ~ .card:first-of-type,
.detail-c .tab-env .card:first-of-type{
  position:relative;
  overflow:hidden;
}
/* v5.10-APP-TAB-ENV — inputs/selects styling fallback */
.detail-c .tab-env .card select,
.detail-c .tab-env .card input[type="text"],
.detail-c .tab-env .card input[type="number"],
.detail-c .tab-env .card input:not([type]){
  background:var(--app-surface-1) !important;
  border:1px solid var(--app-border-1) !important;
  color:var(--app-text) !important;
  border-radius:var(--app-r-sm) !important;
  padding:8px 11px !important;
  font-size:13px !important;
  transition:border-color .15s, box-shadow .15s;
}
.detail-c .tab-env .card select:hover,
.detail-c .tab-env .card input:hover:not([disabled]){
  border-color:rgba(94,192,255,0.30) !important;
}
.detail-c .tab-env .card select:focus,
.detail-c .tab-env .card input:focus{
  outline:none !important;
  border-color:var(--app-accent) !important;
  box-shadow:0 0 0 3px var(--app-accent-soft) !important;
}
/* v5.10-APP-TAB-ENV — disabled key input in raw editor gets mono treatment */
.detail-c .tab-env .card input[disabled]{
  font-family:var(--mono) !important;
  color:var(--app-accent) !important;
  background:rgba(94,192,255,0.06) !important;
  border-color:rgba(94,192,255,0.16) !important;
  opacity:0.9 !important;
}
/* v5.10-APP-TAB-ENV — labels */
.detail-c .tab-env .card label{
  font-size:11px !important;
  color:var(--app-text-muted) !important;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-weight:600 !important;
  margin-bottom:6px !important;
}
/* v5.10-APP-TAB-ENV — muted text & hints */
.detail-c .tab-env .card .muted,
.detail-c .tab-env .card > p.muted{
  color:var(--app-text-muted) !important;
  font-size:12px !important;
  line-height:1.5;
}
/* v5.10-APP-TAB-ENV — admin/raw editor pill */
.detail-c .tab-env .card .pill{
  background:rgba(255,184,77,0.14) !important;
  color:var(--app-warn) !important;
  border:1px solid rgba(255,184,77,0.30) !important;
  border-radius:999px !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:3px 9px !important;
}
/* v5.10-APP-TAB-ENV — primary "Save & Restart" buttons */
.detail-c .tab-env .card .btn:not(.ghost){
  background:linear-gradient(135deg, var(--app-accent), #4aa9ed) !important;
  border:0 !important;
  color:#04121e !important;
  font-weight:700 !important;
  border-radius:var(--app-r-sm) !important;
  padding:8px 14px !important;
  box-shadow:0 6px 18px -8px var(--app-accent-glow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.detail-c .tab-env .card .btn:not(.ghost):hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 10px 22px -10px var(--app-accent-glow);
}
.detail-c .tab-env .card .btn:not(.ghost):disabled{
  opacity:0.55;
  cursor:not-allowed;
  background:rgba(255,255,255,0.04) !important;
  color:var(--app-text-muted) !important;
  box-shadow:none;
}
/* v5.10-APP-TAB-ENV — ghost buttons (delete row, add) get soft hover */
.detail-c .tab-env .card .btn.ghost{
  background:rgba(255,255,255,0.03) !important;
  border:1px solid var(--app-border-1) !important;
  color:var(--app-text) !important;
  border-radius:var(--app-r-sm) !important;
  transition:background .15s, border-color .15s;
}
.detail-c .tab-env .card .btn.ghost:hover:not(:disabled){
  background:var(--app-accent-soft) !important;
  border-color:var(--app-accent) !important;
}
/* v5.10-APP-TAB-ENV — admin raw editor row tint on hover */
.detail-c .tab-env .card > div[style*="display:flex"][style*="gap:8px"]{
  padding:5px 6px;
  border-radius:var(--app-r-sm);
  transition:background .12s;
}
.detail-c .tab-env .card > div[style*="display:flex"][style*="gap:8px"]:hover{
  background:rgba(255,255,255,0.025);
}

/* ================ v5.10-APP-TAB-LOGS ================ */
/* Logs tab — glassy file picker, chip-style filter bar, search input,
   and a hero log console with subtle scrollbar.
   All rules scoped under .detail-c .tab-logs so they cannot leak. */

/* v5.10-APP-TAB-LOGS — tab root: flex column owning available height */
.detail-c .tab-logs{
  display:flex;
  flex-direction:column;
  min-height:0;
  height:100%;
  gap:14px;
}

/* v5.10-APP-TAB-LOGS — outer card becomes flex container with internal scroll */
.detail-c .tab-logs .tab-logs-files{
  display:flex;
  flex-direction:column;
  min-height:0;
  flex:1 1 auto;
  background:var(--app-surface-0) !important;
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-lg) !important;
  box-shadow:var(--app-shadow-card) !important;
  padding:16px !important;
}

/* v5.10-APP-TAB-LOGS — Log-Dateien head row polish */
.detail-c .tab-logs .tab-logs-files-head{
  padding-bottom:10px;
  border-bottom:1px dashed rgba(255,255,255,0.06);
  margin-bottom:12px !important;
}
.detail-c .tab-logs .tab-logs-files-head h3{
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--app-text);
}
.detail-c .tab-logs .tab-logs-files-head code{
  font-family:var(--mono);
  font-size:10.5px;
  padding:2px 7px;
  border-radius:6px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--app-border-0);
  color:var(--app-text-muted);
}
.detail-c .tab-logs .tab-logs-files-head .pill{
  background:var(--app-accent-soft) !important;
  color:var(--app-accent) !important;
  border:1px solid rgba(94,192,255,0.22);
  border-radius:999px;
  padding:3px 10px;
  font-weight:600;
  font-size:11px !important;
  letter-spacing:.01em;
}
.detail-c .tab-logs .tab-logs-files-head .btn{
  border-radius:var(--app-r-sm) !important;
  transition:.16s;
}
.detail-c .tab-logs .tab-logs-files-head .btn.ghost{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid var(--app-border-0) !important;
  color:var(--app-text-muted) !important;
}
.detail-c .tab-logs .tab-logs-files-head .btn.ghost:hover{
  color:var(--app-text) !important;
  background:rgba(255,255,255,0.07) !important;
  border-color:var(--app-border-1) !important;
  transform:translateY(-1px);
}

/* v5.10-APP-TAB-LOGS — loading / empty states */
.detail-c .tab-logs .tab-logs-loading,
.detail-c .tab-logs .tab-logs-empty{
  color:var(--app-text-muted) !important;
  font-size:12.5px;
  text-align:center;
  padding:18px 0 !important;
  background:rgba(255,255,255,0.02);
  border:1px dashed rgba(255,255,255,0.06);
  border-radius:var(--app-r-md);
}

/* v5.10-APP-TAB-LOGS — file tile grid */
.detail-c .tab-logs .tab-logs-files-grid{
  gap:10px !important;
}
.detail-c .tab-logs .tab-logs-file-tile{
  background:rgba(255,255,255,0.03) !important;
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-md) !important;
  color:var(--app-text) !important;
  padding:10px 12px !important;
  transition:.18s;
}
.detail-c .tab-logs .tab-logs-file-tile:hover{
  background:rgba(255,255,255,0.06) !important;
  border-color:var(--app-border-1) !important;
  transform:translateY(-1px);
  box-shadow:0 8px 22px -16px rgba(0,0,0,0.5);
}
.detail-c .tab-logs .tab-logs-file-tile.accent{
  border-color:var(--app-accent) !important;
  background:var(--app-accent-soft) !important;
  box-shadow:0 0 0 1px var(--app-accent-glow) inset;
}
.detail-c .tab-logs .tab-logs-file-tile .tab-logs-file-name{
  color:var(--app-text);
  font-size:12.5px;
}
.detail-c .tab-logs .tab-logs-file-tile .tab-logs-file-sub{
  color:var(--app-text-muted) !important;
  font-size:10.5px !important;
  letter-spacing:.02em;
}
.detail-c .tab-logs .tab-logs-file-tile input[type="checkbox"]{
  accent-color:var(--app-accent);
}

/* v5.10-APP-TAB-LOGS — opened log viewer wrapper */
.detail-c .tab-logs .tab-logs-viewer{
  display:flex;
  flex-direction:column;
  min-height:0;
  flex:1 1 auto;
  margin-top:14px !important;
  padding-top:14px;
  border-top:1px dashed rgba(255,255,255,0.06);
}

/* v5.10-APP-TAB-LOGS — viewer head: file name + stats + close */
.detail-c .tab-logs .tab-logs-viewer-head{
  padding:0 2px 4px;
}
.detail-c .tab-logs .tab-logs-viewer-name{
  color:var(--app-text) !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:-.005em;
}
.detail-c .tab-logs .tab-logs-viewer-stats{
  color:var(--app-text-muted) !important;
  font-size:10.5px !important;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.detail-c .tab-logs .tab-logs-close{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid var(--app-border-0) !important;
  color:var(--app-text-muted) !important;
  border-radius:var(--app-r-sm) !important;
  transition:.16s;
}
.detail-c .tab-logs .tab-logs-close:hover{
  background:rgba(255,92,124,0.10) !important;
  border-color:rgba(255,92,124,0.32) !important;
  color:var(--app-danger) !important;
}

/* v5.10-APP-TAB-LOGS — filter bar as glass row */
.detail-c .tab-logs .tab-logs-filterbar{
  background:rgba(255,255,255,0.025);
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-md);
  padding:8px 10px !important;
  margin-bottom:10px !important;
  gap:6px !important;
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
}
.detail-c .tab-logs .tab-logs-filterbar-label{
  color:var(--app-text-muted) !important;
  font-size:10.5px !important;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:600;
}

/* v5.10-APP-TAB-LOGS — chip-style filter buttons */
.detail-c .tab-logs .tab-logs-chip{
  background:rgba(255,255,255,0.03) !important;
  border:1px solid var(--app-border-0) !important;
  border-radius:999px !important;
  color:var(--app-text-muted) !important;
  font-size:11px !important;
  font-weight:600;
  padding:4px 11px !important;
  letter-spacing:.01em;
  transition:.15s ease;
}
.detail-c .tab-logs .tab-logs-chip:hover{
  background:rgba(255,255,255,0.07) !important;
  color:var(--app-text) !important;
  border-color:var(--app-border-1) !important;
  transform:translateY(-1px);
}
.detail-c .tab-logs .tab-logs-chip.accent{
  background:var(--app-accent-soft) !important;
  color:var(--app-accent) !important;
  border-color:var(--app-accent) !important;
  box-shadow:0 0 0 1px var(--app-accent-glow);
}

/* v5.10-APP-TAB-LOGS — glass search input */
.detail-c .tab-logs .tab-logs-search{
  background:var(--app-surface-1) !important;
  border:1px solid var(--app-border-1) !important;
  border-radius:999px !important;
  color:var(--app-text) !important;
  padding:5px 12px !important;
  font-size:11.5px !important;
  transition:.18s;
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
}
.detail-c .tab-logs .tab-logs-search::placeholder{
  color:var(--app-text-muted);
}
.detail-c .tab-logs .tab-logs-search:focus{
  outline:none;
  border-color:var(--app-accent) !important;
  box-shadow:0 0 0 3px var(--app-accent-glow);
  background:var(--app-surface-1) !important;
}

/* v5.10-APP-TAB-LOGS — hero log console box */
.detail-c .tab-logs .tab-logs-hero{
  flex:1 1 auto;
  min-height:240px !important;
  height:auto !important;
  background:var(--app-bg-0) !important;
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-md) !important;
  font-family:var(--mono) !important;
  font-size:12px !important;
  line-height:1.55 !important;
  color:#cdd6f0;
  padding:14px 16px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03), inset 0 0 30px -12px rgba(0,0,0,0.4);
  scrollbar-width:thin;
  scrollbar-color:rgba(94,192,255,0.25) transparent;
}
.detail-c .tab-logs .tab-logs-hero::-webkit-scrollbar{
  width:9px;
  height:9px;
}
.detail-c .tab-logs .tab-logs-hero::-webkit-scrollbar-track{
  background:transparent;
}
.detail-c .tab-logs .tab-logs-hero::-webkit-scrollbar-thumb{
  background:rgba(94,192,255,0.18);
  border-radius:6px;
  border:2px solid transparent;
  background-clip:padding-box;
  transition:background .2s;
}
.detail-c .tab-logs .tab-logs-hero::-webkit-scrollbar-thumb:hover{
  background:rgba(94,192,255,0.34);
  background-clip:padding-box;
}

/* v5.10-APP-TAB-LOGS — responsive: filterbar wrap on narrow */
@media(max-width:680px){
  .detail-c .tab-logs .tab-logs-filterbar{
    padding:6px 8px !important;
  }
  .detail-c .tab-logs .tab-logs-chip{
    padding:3px 9px !important;
    font-size:10.5px !important;
  }
  .detail-c .tab-logs .tab-logs-hero{
    font-size:11px !important;
    padding:10px 12px !important;
  }
}


/* ================ v5.10-APP-TAB-BACKUPS ================ */
/* Backups tab: header action area, schedule card, backup list rows.
   Scoped to .detail-c .tab-backups. */

/* v5.10-APP-TAB-BACKUPS — tab root: vertical flow with breathing space */
.detail-c .tab-backups{
  display:flex !important;
  flex-direction:column;
  gap:14px;
  padding:4px 2px 24px;
}

/* v5.10-APP-TAB-BACKUPS — header row: title + create button as floating action bar */
.detail-c .tab-backups .bk-header{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin:0 0 4px !important;
  padding:14px 16px !important;
  background:var(--app-surface-0) !important;
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-lg) !important;
  box-shadow:var(--app-shadow-card) !important;
  transition:border-color .2s, transform .2s;
}
.detail-c .tab-backups .bk-header:hover{
  border-color:var(--app-border-1) !important;
}

/* v5.10-APP-TAB-BACKUPS — title h3 styling */
.detail-c .tab-backups .bk-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:16px !important;
  font-weight:700 !important;
  letter-spacing:-.01em;
  color:var(--app-text) !important;
  margin:0 !important;
}
.detail-c .tab-backups .bk-title-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  font-size:18px;
  border-radius:var(--app-r-sm);
  background:var(--app-accent-soft);
  box-shadow:inset 0 0 0 1px var(--app-border-0);
}
.detail-c .tab-backups .bk-title-tx{
  font-size:16px;
  font-weight:700;
}

/* v5.10-APP-TAB-BACKUPS — create button (primary action) */
.detail-c .tab-backups .bk-create-btn{
  padding:8px 16px !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  border-radius:var(--app-r-md) !important;
  background:var(--app-accent-soft) !important;
  color:var(--app-text) !important;
  border:1px solid var(--app-accent) !important;
  box-shadow:0 4px 14px -8px var(--app-accent-glow) !important;
  transition:transform .15s, box-shadow .2s, background .2s !important;
}
.detail-c .tab-backups .bk-create-btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 8px 22px -10px var(--app-accent-glow) !important;
  background:rgba(94,192,255,0.20) !important;
}
.detail-c .tab-backups .bk-create-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* v5.10-APP-TAB-BACKUPS — schedule card: top action card with subtle accent */
.detail-c .tab-backups .bk-schedule-card{
  background:var(--app-surface-0) !important;
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-lg) !important;
  padding:16px !important;
  margin:0 0 4px !important;
  box-shadow:var(--app-shadow-card) !important;
  transition:border-color .2s;
}
.detail-c .tab-backups .bk-schedule-card:hover{
  border-color:var(--app-border-1) !important;
}

/* v5.10-APP-TAB-BACKUPS — schedule row layout */
.detail-c .tab-backups .bk-schedule-row{
  align-items:center;
  gap:16px !important;
}

/* v5.10-APP-TAB-BACKUPS — toggle label */
.detail-c .tab-backups .bk-sched-toggle{
  font-size:13px;
  font-weight:600;
  color:var(--app-text);
  padding:4px 0;
}
.detail-c .tab-backups .bk-sched-toggle input[type=checkbox]{
  accent-color:var(--app-accent);
  width:16px !important;
  height:16px;
  cursor:pointer;
}

/* v5.10-APP-TAB-BACKUPS — schedule field group */
.detail-c .tab-backups .bk-sched-field{
  background:var(--app-surface-1);
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-sm);
  padding:5px 9px;
  transition:border-color .15s, box-shadow .15s;
}
.detail-c .tab-backups .bk-sched-field:focus-within{
  border-color:var(--app-accent);
  box-shadow:0 0 0 3px var(--app-accent-soft);
}

/* v5.10-APP-TAB-BACKUPS — small field label */
.detail-c .tab-backups .bk-sched-lbl{
  font-size:11px !important;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
  color:var(--app-text-muted) !important;
}

/* v5.10-APP-TAB-BACKUPS — schedule inputs/selects */
.detail-c .tab-backups .bk-sched-field input,
.detail-c .tab-backups .bk-sched-field select{
  background:transparent !important;
  border:none !important;
  color:var(--app-text) !important;
  font-size:13px !important;
  padding:2px 4px !important;
  outline:none;
}

/* v5.10-APP-TAB-BACKUPS — save schedule button (ghost-style) */
.detail-c .tab-backups .bk-save-sched-btn{
  padding:7px 14px !important;
  font-size:12px !important;
  font-weight:600 !important;
  border-radius:var(--app-r-md) !important;
  background:rgba(255,255,255,0.04) !important;
  color:var(--app-text) !important;
  border:1px solid var(--app-border-1) !important;
  margin-left:auto;
  transition:transform .15s, background .15s, border-color .15s !important;
}
.detail-c .tab-backups .bk-save-sched-btn:hover{
  transform:translateY(-1px);
  background:var(--app-accent-soft) !important;
  border-color:var(--app-accent) !important;
}

/* v5.10-APP-TAB-BACKUPS — schedule hint text */
.detail-c .tab-backups .bk-sched-hint{
  color:var(--app-text-muted) !important;
  font-size:11.5px !important;
  line-height:1.55 !important;
  margin:12px 0 0 !important;
  padding-top:12px;
  border-top:1px dashed rgba(255,255,255,0.06);
}
.detail-c .tab-backups .bk-sched-hint b{
  color:var(--app-text);
  font-weight:600;
}

/* v5.10-APP-TAB-BACKUPS — locked variant card for non-admin users */
.detail-c .tab-backups .bk-locked-card{
  background:var(--app-surface-0) !important;
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-lg) !important;
  padding:14px 16px !important;
  color:var(--app-text-muted) !important;
  font-size:12.5px !important;
  line-height:1.55;
  box-shadow:var(--app-shadow-card) !important;
}
.detail-c .tab-backups .bk-locked-card b{
  color:var(--app-text);
}

/* v5.10-APP-TAB-BACKUPS — loading state */
.detail-c .tab-backups .bk-loading{
  background:var(--app-surface-0);
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-lg);
  padding:24px;
}

/* v5.10-APP-TAB-BACKUPS — backup list container */
.detail-c .tab-backups .bk-list{
  display:flex !important;
  flex-direction:column;
  gap:10px;
}

/* v5.10-APP-TAB-BACKUPS — backup row card (one row = one backup) */
.detail-c .tab-backups .bk-row{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  padding:13px 16px !important;
  background:var(--app-surface-0) !important;
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-lg) !important;
  box-shadow:var(--app-shadow-card) !important;
  transition:transform .15s, border-color .2s, background .2s !important;
}
.detail-c .tab-backups .bk-row:hover{
  transform:translateY(-1px);
  border-color:var(--app-accent) !important;
  background:rgba(94,192,255,0.04) !important;
}

/* v5.10-APP-TAB-BACKUPS — backup icon bubble */
.detail-c .tab-backups .bk-row-ic{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:34px !important;
  height:34px;
  font-size:18px;
  flex:none;
  border-radius:var(--app-r-sm);
  background:var(--app-accent-soft);
  box-shadow:inset 0 0 0 1px var(--app-border-0);
}

/* v5.10-APP-TAB-BACKUPS — row body */
.detail-c .tab-backups .bk-row-body{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

/* v5.10-APP-TAB-BACKUPS — row name (filename / id) */
.detail-c .tab-backups .bk-row-name{
  font-size:13.5px !important;
  font-weight:600 !important;
  color:var(--app-text) !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family:var(--mono);
}

/* v5.10-APP-TAB-BACKUPS — row meta (date + size) */
.detail-c .tab-backups .bk-row-meta{
  font-size:11.5px !important;
  color:var(--app-text-muted) !important;
  letter-spacing:.02em;
}

/* v5.10-APP-TAB-BACKUPS — action buttons row */
.detail-c .tab-backups .bk-act{
  padding:6px 11px !important;
  font-size:12px !important;
  font-weight:600 !important;
  border-radius:var(--app-r-sm) !important;
  background:rgba(255,255,255,0.04) !important;
  color:var(--app-text) !important;
  border:1px solid var(--app-border-1) !important;
  transition:transform .12s, background .15s, border-color .15s, color .15s !important;
  flex:none;
}
.detail-c .tab-backups .bk-act:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.07) !important;
  border-color:var(--app-border-1) !important;
}

/* v5.10-APP-TAB-BACKUPS — download action accent on hover */
.detail-c .tab-backups .bk-act-dl:hover{
  background:var(--app-accent-soft) !important;
  border-color:var(--app-accent) !important;
  color:var(--app-accent) !important;
}

/* v5.10-APP-TAB-BACKUPS — restore action (success accent on hover) */
.detail-c .tab-backups .bk-act-restore{
  background:rgba(52,226,155,0.08) !important;
  border-color:rgba(52,226,155,0.30) !important;
  color:var(--app-success) !important;
}
.detail-c .tab-backups .bk-act-restore:hover{
  background:rgba(52,226,155,0.15) !important;
  border-color:var(--app-success) !important;
}

/* v5.10-APP-TAB-BACKUPS — delete action (danger accent on hover) */
.detail-c .tab-backups .bk-act-del{
  color:var(--app-danger) !important;
}
.detail-c .tab-backups .bk-act-del:hover{
  background:rgba(255,92,124,0.12) !important;
  border-color:var(--app-danger) !important;
  color:var(--app-danger) !important;
}

/* v5.10-APP-TAB-BACKUPS — empty state card */
.detail-c .tab-backups .bk-empty{
  text-align:center !important;
  padding:36px 18px !important;
  background:var(--app-surface-0) !important;
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  border:1px dashed var(--app-border-1) !important;
  border-radius:var(--app-r-lg) !important;
  color:var(--app-text-muted) !important;
}
.detail-c .tab-backups .bk-empty-ic{
  font-size:42px !important;
  opacity:.45 !important;
  margin-bottom:10px !important;
  filter:grayscale(.2);
}
.detail-c .tab-backups .bk-empty-title{
  font-size:14.5px !important;
  font-weight:700 !important;
  color:var(--app-text) !important;
  margin-bottom:5px !important;
  letter-spacing:-.01em;
}
.detail-c .tab-backups .bk-empty-sub{
  font-size:12px !important;
  color:var(--app-text-muted) !important;
  margin-bottom:16px !important;
  line-height:1.5;
}
.detail-c .tab-backups .bk-empty-btn{
  padding:9px 18px !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  border-radius:var(--app-r-md) !important;
  background:var(--app-accent-soft) !important;
  color:var(--app-text) !important;
  border:1px solid var(--app-accent) !important;
  box-shadow:0 4px 14px -8px var(--app-accent-glow) !important;
  transition:transform .15s, box-shadow .2s, background .2s !important;
}
.detail-c .tab-backups .bk-empty-btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 8px 22px -10px var(--app-accent-glow) !important;
  background:rgba(94,192,255,0.20) !important;
}

/* v5.10-APP-TAB-BACKUPS — responsive collapse on narrow viewports */
@media(max-width:680px){
  .detail-c .tab-backups .bk-row{
    flex-wrap:wrap;
    gap:10px !important;
  }
  .detail-c .tab-backups .bk-row-body{
    flex:1 1 100% !important;
    min-width:0;
  }
  .detail-c .tab-backups .bk-act{
    flex:1 1 auto;
  }
  .detail-c .tab-backups .bk-schedule-row{
    flex-direction:column;
    align-items:stretch !important;
  }
  .detail-c .tab-backups .bk-save-sched-btn{
    margin-left:0;
  }
}

/* ================ v5.10-APP-TAB-ACCESS ================ */
/* ACCESS tab — share-by-code action card, owner card, user-list cards.
   All rules scoped under .detail-c .tab-access so they cannot leak.
   Existing classes preserved: .card, .btn, .btn.ghost, .muted, .avatar, .spin, .center. */

/* v5.10-APP-TAB-ACCESS — tab root: fills scrollable area below the page-head */
.detail-c .tab-access{
  display:flex;
  flex-direction:column;
  min-height:0;
  height:100%;
  overflow:hidden;
}

/* v5.10-APP-TAB-ACCESS — loading state */
.detail-c .tab-access .tab-access__loading{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--app-surface-0);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-lg);
  box-shadow:var(--app-shadow-card);
}

/* v5.10-APP-TAB-ACCESS — body: stacked sections, inner scroll */
.detail-c .tab-access .tab-access__body{
  flex:1;
  min-height:0;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:2px 4px 12px 2px;
  scrollbar-width:thin;
}
.detail-c .tab-access .tab-access__body::-webkit-scrollbar{ width:8px; }
.detail-c .tab-access .tab-access__body::-webkit-scrollbar-thumb{
  background:var(--app-border-1);
  border-radius:8px;
}

/* v5.10-APP-TAB-ACCESS — section card: floating glass panel matching design system */
.detail-c .tab-access .tab-access__sec{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent 60%), var(--app-surface-0);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-lg);
  box-shadow:var(--app-shadow-card);
  padding:14px 16px;
  transition:border-color .2s, transform .2s;
}
.detail-c .tab-access .tab-access__sec:hover{
  border-color:var(--app-border-1);
}

/* v5.10-APP-TAB-ACCESS — section title (replaces raw h3) */
.detail-c .tab-access .tab-access__sec-title{
  margin:0 0 4px 0;
  font-size:13px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--app-text);
  display:flex;
  align-items:center;
  gap:8px;
}

/* v5.10-APP-TAB-ACCESS — section subtitle/hint */
.detail-c .tab-access .tab-access__sec-sub{
  margin:0 0 10px 0 !important;
  font-size:11.5px !important;
  color:var(--app-text-muted) !important;
  letter-spacing:.2px;
}

/* v5.10-APP-TAB-ACCESS — owner card: subtle accent edge */
.detail-c .tab-access .tab-access__sec-owner{
  border-color:var(--app-border-1);
  background:linear-gradient(180deg, var(--app-accent-soft), transparent 80%), var(--app-surface-0);
}

/* v5.10-APP-TAB-ACCESS — share card row spacing */
.detail-c .tab-access .tab-access__sec-share .tab-access__share-row{
  margin-top:6px;
}
.detail-c .tab-access .tab-access__sec-share .tab-access__share-row select,
.detail-c .tab-access .tab-access__sec-share .tab-access__share-row input{
  background:var(--app-surface-1) !important;
  border:1px solid var(--app-border-1) !important;
  border-radius:var(--app-r-md) !important;
  color:var(--app-text) !important;
  padding:8px 12px !important;
  font-size:13px !important;
  transition:border-color .15s, box-shadow .15s;
}
.detail-c .tab-access .tab-access__sec-share .tab-access__share-row select:focus,
.detail-c .tab-access .tab-access__sec-share .tab-access__share-row input:focus{
  outline:none !important;
  border-color:var(--app-accent) !important;
  box-shadow:0 0 0 3px var(--app-accent-soft) !important;
}

/* v5.10-APP-TAB-ACCESS — owner row select polish */
.detail-c .tab-access .tab-access__owner-row select{
  background:var(--app-surface-1) !important;
  border:1px solid var(--app-border-1) !important;
  border-radius:var(--app-r-md) !important;
  color:var(--app-text) !important;
  padding:8px 12px !important;
  font-size:13px !important;
  transition:border-color .15s, box-shadow .15s;
}
.detail-c .tab-access .tab-access__owner-row select:focus{
  outline:none !important;
  border-color:var(--app-accent) !important;
  box-shadow:0 0 0 3px var(--app-accent-soft) !important;
}

/* v5.10-APP-TAB-ACCESS — users list container */
.detail-c .tab-access .tab-access__users{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:0 !important;
}

/* v5.10-APP-TAB-ACCESS — user card row (preserves existing .card.tab-access__user) */
.detail-c .tab-access .tab-access__user{
  background:linear-gradient(180deg, rgba(255,255,255,0.018), transparent 70%), var(--app-surface-1) !important;
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-md) !important;
  padding:12px 14px !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 4px 14px -10px rgba(0,0,0,0.5);
  transition:border-color .18s, transform .18s, box-shadow .18s;
  margin-bottom:0 !important;
}
.detail-c .tab-access .tab-access__user:hover{
  border-color:var(--app-border-1) !important;
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 22px -12px rgba(0,0,0,0.55);
}

/* v5.10-APP-TAB-ACCESS — user head row */
.detail-c .tab-access .tab-access__user-head{
  border-bottom:1px dashed rgba(255,255,255,0.06);
  padding-bottom:8px;
}

/* v5.10-APP-TAB-ACCESS — avatar variant: bigger, glow */
.detail-c .tab-access .tab-access__avatar{
  width:34px !important;
  height:34px !important;
  font-size:14px !important;
  border-radius:50%;
  box-shadow:0 4px 14px -4px var(--app-accent-glow), 0 0 0 1px var(--app-border-1) inset;
  letter-spacing:0;
}

/* v5.10-APP-TAB-ACCESS — user name layout (preserves inline color/font-weight) */
.detail-c .tab-access .tab-access__user-name{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  color:var(--app-text);
}

/* v5.10-APP-TAB-ACCESS — role pill next to name */
.detail-c .tab-access .tab-access__role-pill{
  display:inline-flex;
  align-items:center;
  height:18px;
  padding:0 8px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--app-accent);
  background:var(--app-accent-soft);
  border:1px solid var(--app-accent-soft);
  border-radius:999px;
}

/* v5.10-APP-TAB-ACCESS — remove button polish (preserves color/padding from inline) */
.detail-c .tab-access .tab-access__remove{
  background:rgba(255,92,124,0.06) !important;
  border:1px solid rgba(255,92,124,0.18) !important;
  border-radius:var(--app-r-sm) !important;
  font-size:12px !important;
  transition:.15s;
}
.detail-c .tab-access .tab-access__remove:hover{
  background:rgba(255,92,124,0.14) !important;
  border-color:rgba(255,92,124,0.32) !important;
  transform:translateY(-1px);
}

/* v5.10-APP-TAB-ACCESS — feat-label (per-user permission heading) */
.detail-c .tab-access .tab-access__feat-label{
  font-size:10.5px !important;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--app-text-muted) !important;
  margin-bottom:6px !important;
}

/* v5.10-APP-TAB-ACCESS — feats grid */
.detail-c .tab-access .tab-access__feats{
  gap:6px !important;
}

/* v5.10-APP-TAB-ACCESS — single feature chip (preserves inline color/border for active state) */
.detail-c .tab-access .tab-access__feat{
  background:rgba(255,255,255,0.025);
  border-color:var(--app-border-0) !important;
  border-radius:999px !important;
  padding:4px 10px !important;
  font-size:11.5px !important;
  letter-spacing:.1px;
  transition:.15s;
  user-select:none;
}
.detail-c .tab-access .tab-access__feat:hover{
  background:rgba(255,255,255,0.05);
  border-color:var(--app-border-1) !important;
}
.detail-c .tab-access .tab-access__feat input[type="checkbox"]{
  accent-color:var(--app-accent);
  cursor:pointer;
}

/* v5.10-APP-TAB-ACCESS — empty state */
.detail-c .tab-access .tab-access__empty{
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 14px;
  border:1px dashed var(--app-border-1);
  border-radius:var(--app-r-md);
  background:rgba(255,255,255,0.015);
  font-size:12.5px !important;
  color:var(--app-text-muted) !important;
  letter-spacing:.2px;
  margin:0;
}

/* v5.10-APP-TAB-ACCESS — primary button polish inside this tab */
.detail-c .tab-access .tab-access__owner-row .btn:not(.ghost),
.detail-c .tab-access .tab-access__share-row .btn:not(.ghost){
  background:linear-gradient(180deg, var(--app-accent), #4ba8ee) !important;
  border:1px solid var(--app-accent) !important;
  border-radius:var(--app-r-md) !important;
  color:#04111d !important;
  font-weight:700 !important;
  padding:8px 14px !important;
  transition:.15s;
}
.detail-c .tab-access .tab-access__owner-row .btn:not(.ghost):hover,
.detail-c .tab-access .tab-access__share-row .btn:not(.ghost):hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px -10px var(--app-accent-glow);
}

/* v5.10-APP-TAB-ACCESS — ghost button polish inside this tab */
.detail-c .tab-access .tab-access__share-row .btn.ghost{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid var(--app-border-1) !important;
  border-radius:var(--app-r-md) !important;
  color:var(--app-text) !important;
  padding:8px 14px !important;
  transition:.15s;
}
.detail-c .tab-access .tab-access__share-row .btn.ghost:hover{
  background:var(--app-accent-soft) !important;
  border-color:var(--app-accent) !important;
  color:var(--app-accent) !important;
}

/* v5.10-APP-TAB-ACCESS — responsive: stack rows on narrow widths */
@media(max-width:760px){
  .detail-c .tab-access .tab-access__owner-row,
  .detail-c .tab-access .tab-access__share-row{
    flex-wrap:wrap;
  }
  .detail-c .tab-access .tab-access__owner-row select,
  .detail-c .tab-access .tab-access__share-row select,
  .detail-c .tab-access .tab-access__share-row input{
    min-width:0;
    width:100%;
    flex:1 1 100%;
  }
  .detail-c .tab-access .tab-access__feats{
    gap:5px !important;
  }
  .detail-c .tab-access .tab-access__sec{
    padding:12px 14px;
  }
}

/* ================ v5.10-APP-TAB-DB / FTP / CONN / DOMAINS — unified credentials-card pattern ================ */
/* Shared "operator-console credentials card" look for the 4 connection-info tabs. */

/* v5.10-APP-TAB-DB */
/* v5.10-APP-TAB-FTP */
/* v5.10-APP-TAB-CONN */
/* v5.10-APP-TAB-DOMAINS */
.detail-c .cred-tab{
  padding:4px 2px;
  color:var(--app-text);
}

/* v5.10-APP-TAB-DB cred-shell */
.detail-c .cred-tab > .cred-shell,
.detail-c .cred-tab .card.cred-shell{
  background:linear-gradient(180deg, rgba(255,255,255,0.025), transparent 60%), var(--app-surface-0) !important;
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-lg) !important;
  box-shadow:var(--app-shadow-card) !important;
  padding:16px !important;
}

/* v5.10-APP-TAB-DB cred-head */
.detail-c .cred-tab .cred-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  flex-wrap:wrap;
  padding-bottom:10px;
  border-bottom:1px dashed rgba(255,255,255,0.06);
}
.detail-c .cred-tab .cred-head h3{
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--app-text);
}
.detail-c .cred-tab .cred-head .muted{
  color:var(--app-text-muted) !important;
  font-size:11.5px !important;
}

/* v5.10-APP-TAB-DB intro */
.detail-c .cred-tab .cred-intro,
.detail-c .cred-tab .cred-hint{
  color:var(--app-text-muted) !important;
  font-size:12px;
  line-height:1.55;
}

/* v5.10-APP-TAB-DB info banner */
.detail-c .cred-tab .cred-info-banner{
  background:linear-gradient(180deg, rgba(52,226,155,0.10), rgba(52,226,155,0.04)) !important;
  border:1px solid rgba(52,226,155,0.28) !important;
  border-radius:var(--app-r-md) !important;
  padding:12px 14px !important;
  font-size:12.5px;
  line-height:1.5;
  margin-bottom:14px !important;
  color:var(--app-text);
}
.detail-c .cred-tab .cred-info-banner code{
  background:rgba(255,255,255,0.06);
  padding:1px 6px;
  border-radius:var(--app-r-sm);
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--app-accent);
}
/* v5.10-APP-TAB-DOMAINS locked-banner variant */
.detail-c .cred-tab .cred-info-locked{
  background:linear-gradient(180deg, rgba(255,184,77,0.08), rgba(255,184,77,0.02)) !important;
  border:1px solid rgba(255,184,77,0.28) !important;
  color:var(--app-text) !important;
}

/* v5.10-APP-TAB-DB cred-card (per-DB block) */
.detail-c .cred-tab .cred-card{
  background:linear-gradient(180deg, rgba(94,192,255,0.04), transparent 50%), var(--app-surface-1) !important;
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-md) !important;
  padding:14px !important;
  margin-bottom:12px !important;
  box-shadow:none !important;
  transition:border-color .18s ease, transform .18s ease;
}
.detail-c .cred-tab .cred-card:hover{
  border-color:var(--app-border-1) !important;
  transform:translateY(-1px);
}

/* v5.10-APP-TAB-DB rows-grid */
.detail-c .cred-tab .cred-rows{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;
  font-size:13px;
}
.detail-c .cred-tab .cred-rows .cred-row{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  padding:8px 10px;
  border-radius:var(--app-r-sm);
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.04);
  transition:background .15s ease;
}
.detail-c .cred-tab .cred-rows .cred-row:hover{
  background:rgba(255,255,255,0.035);
}

/* v5.10-APP-TAB-DB cred-label */
/* v5.10-APP-TAB-FTP cred-label */
/* v5.10-APP-TAB-CONN cred-label */
/* v5.10-APP-TAB-DOMAINS cred-label */
.detail-c .cred-tab .cred-label{
  color:var(--app-text-muted) !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:2px !important;
}

/* v5.10-APP-TAB-DB cred-val */
/* v5.10-APP-TAB-FTP cred-val */
/* v5.10-APP-TAB-CONN cred-val */
/* v5.10-APP-TAB-DOMAINS cred-val */
.detail-c .cred-tab .cred-val{
  font-family:var(--mono);
  font-size:13px;
  font-weight:600;
  color:var(--app-text);
  word-break:break-all;
  min-width:0;
}
.detail-c .cred-tab .cred-val-wrap{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  min-width:0;
}

/* v5.10-APP-TAB-DB password masked */
.detail-c .cred-tab .cred-val-pw{
  letter-spacing:.18em;
}
/* v5.10-APP-TAB-DB secret-row tint */
.detail-c .cred-tab .cred-row-secret{
  background:linear-gradient(180deg, rgba(255,184,77,0.05), transparent 70%);
  border-color:rgba(255,184,77,0.14) !important;
}

/* v5.10-APP-TAB-DB cred-btn (ghost copy/show-hide icon button) */
/* v5.10-APP-TAB-FTP cred-btn */
/* v5.10-APP-TAB-CONN cred-btn */
/* v5.10-APP-TAB-DOMAINS cred-btn */
.detail-c .cred-tab .cred-btn{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-sm) !important;
  color:var(--app-text-muted) !important;
  transition:.15s ease;
  flex:none;
}
.detail-c .cred-tab .cred-btn:hover{
  background:var(--app-accent-soft) !important;
  border-color:var(--app-accent) !important;
  color:var(--app-text) !important;
  transform:translateY(-1px);
}
/* v5.10-APP-TAB-DOMAINS danger button */
.detail-c .cred-tab .cred-danger{
  color:var(--app-danger) !important;
}
.detail-c .cred-tab .cred-danger:hover{
  background:rgba(255,92,124,0.10) !important;
  border-color:var(--app-danger) !important;
  color:var(--app-danger) !important;
}

/* v5.10-APP-TAB-DB actions row */
.detail-c .cred-tab .cred-actions{
  margin-top:12px;
  padding-top:10px;
  border-top:1px dashed rgba(255,255,255,0.06);
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.detail-c .cred-tab .cred-action-btn{
  border-radius:var(--app-r-sm) !important;
  font-weight:600;
  transition:.18s ease;
}
.detail-c .cred-tab .cred-action-btn:hover{
  transform:translateY(-1px);
}

/* v5.10-APP-TAB-DB new-form */
/* v5.10-APP-TAB-DOMAINS inline form */
.detail-c .cred-tab .cred-newform{
  margin-top:14px;
  padding:12px 14px;
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-md);
  background:linear-gradient(180deg, rgba(94,192,255,0.04), transparent 60%);
  display:flex;
  gap:8px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.detail-c .cred-tab .cred-newform .cred-newform-field{
  flex:1;
  min-width:200px;
}
.detail-c .cred-tab .cred-newform .label{
  color:var(--app-text-muted);
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:6px;
}
.detail-c .cred-tab .cred-newform input{
  background:var(--app-surface-1) !important;
  border:1px solid var(--app-border-1) !important;
  border-radius:var(--app-r-sm) !important;
  color:var(--app-text) !important;
  padding:8px 12px;
  font-size:13px;
  width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.detail-c .cred-tab .cred-newform input:focus{
  outline:none;
  border-color:var(--app-accent) !important;
  box-shadow:0 0 0 3px var(--app-accent-soft);
}
.detail-c .cred-tab .cred-newform-inline input{
  background:var(--app-surface-1) !important;
  border:1px solid var(--app-border-1) !important;
  border-radius:var(--app-r-sm) !important;
  color:var(--app-text) !important;
  padding:8px 12px;
}

/* v5.10-APP-TAB-FTP keyval list rows */
/* v5.10-APP-TAB-CONN keyval list rows */
/* v5.10-APP-TAB-DOMAINS list rows */
.detail-c .cred-tab .cred-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.detail-c .cred-tab .cred-list-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px !important;
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-sm) !important;
  background:rgba(255,255,255,0.02) !important;
  transition:.15s ease;
}
.detail-c .cred-tab .cred-list-row:hover{
  border-color:var(--app-border-1) !important;
  background:rgba(255,255,255,0.035) !important;
}
.detail-c .cred-tab .cred-list-keyval .cred-list-row .cred-label{
  font-weight:700;
  font-size:11px !important;
  flex:0 0 auto;
  min-width:90px;
}

/* v5.10-APP-TAB-DOMAINS list icon */
.detail-c .cred-tab .cred-list-ico{
  font-size:14px;
  opacity:.85;
}

/* v5.10-APP-TAB-DOMAINS SSL pill */
.detail-c .cred-tab .cred-ssl-pill{
  background:rgba(52,226,155,0.14) !important;
  color:var(--app-success) !important;
  border-radius:999px;
  padding:3px 9px;
  font-size:11px;
  font-weight:700;
}

/* v5.10-APP-TAB-CONN primary-address hero card */
.detail-c .cred-tab .cred-primary-card{
  background:linear-gradient(135deg, rgba(94,192,255,0.16), rgba(160,107,255,0.10)) !important;
  border:1px solid var(--app-accent) !important;
  border-radius:var(--app-r-lg) !important;
  padding:16px 18px !important;
  margin-bottom:16px !important;
  box-shadow:0 8px 28px -18px var(--app-accent-glow) !important;
}
.detail-c .cred-tab .cred-primary-label{
  color:var(--app-text-muted) !important;
  font-size:10.5px !important;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.detail-c .cred-tab .cred-primary-val{
  font-family:var(--mono);
  font-size:20px;
  font-weight:700;
  letter-spacing:-.01em;
  color:#fff;
  word-break:break-all;
}

/* v5.10-APP-TAB-CONN section title */
.detail-c .cred-tab .cred-section{
  margin-top:14px;
}
.detail-c .cred-tab .cred-section-title{
  font-size:13px !important;
  font-weight:700;
  margin:0 0 8px 0 !important;
  color:var(--app-text);
  text-transform:uppercase;
  letter-spacing:.06em;
}
/* v5.10-APP-TAB-CONN link */
.detail-c .cred-tab .cred-link{
  color:var(--app-accent) !important;
  text-decoration:none;
  font-weight:600;
  font-size:12.5px;
}
.detail-c .cred-tab .cred-link:hover{
  text-decoration:underline;
}

/* v5.10-APP-TAB-DB empty */
/* v5.10-APP-TAB-FTP empty */
/* v5.10-APP-TAB-CONN empty */
/* v5.10-APP-TAB-DOMAINS empty */
.detail-c .cred-tab .cred-empty,
.detail-c .cred-tab .cred-empty-wrap{
  color:var(--app-text-muted) !important;
  font-size:12.5px;
}
.detail-c .cred-tab .cred-empty{
  padding:12px 0;
}

/* v5.10-APP-TAB-FTP status banners */
.detail-c .cred-tab .cred-status{
  border-radius:var(--app-r-md) !important;
  padding:12px 14px !important;
  font-size:12.5px;
  line-height:1.5;
  margin-top:8px;
}
.detail-c .cred-tab .cred-status-pending{
  background:linear-gradient(180deg, rgba(255,184,77,0.08), rgba(255,184,77,0.02)) !important;
  border:1px solid rgba(255,184,77,0.28) !important;
  color:var(--app-text) !important;
}
.detail-c .cred-tab .cred-status-approved{
  background:linear-gradient(180deg, rgba(52,226,155,0.08), rgba(52,226,155,0.02)) !important;
  border:1px solid rgba(52,226,155,0.28) !important;
  color:var(--app-text) !important;
}

/* v5.10-APP-TAB-DB / FTP / CONN / DOMAINS — responsive */
@media(max-width:780px){
  .detail-c .cred-tab .cred-rows{
    grid-template-columns:1fr !important;
  }
  .detail-c .cred-tab .cred-primary-val{
    font-size:16px !important;
  }
  .detail-c .cred-tab .cred-newform{
    flex-direction:column;
    align-items:stretch;
  }
}

/* ================ v5.10-APP-TAB-FILES ================ */
/* Files tab — 2-column file-manager layout (glass tree + glass preview/editor).
   All rules scoped under .detail-c .tab-files. */

/* v5.10-APP-TAB-FILES — tab root: flex 2-column owning available height */
.detail-c .tab-files{
  display:flex !important;
  flex-direction:row;
  gap:14px;
  flex:1 1 auto;
  min-height:0;
  height:100%;
  overflow:hidden;
}

/* v5.10-APP-TAB-FILES — left column: tree browser glass card */
.detail-c .tab-files .tab-files-tree{
  flex:0 0 360px;
  min-width:260px;
  max-width:42%;
  display:flex;
  flex-direction:column;
  min-height:0;
  background:var(--app-surface-0);
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-lg);
  box-shadow:var(--app-shadow-card);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  padding:14px;
  overflow:hidden;
}

/* v5.10-APP-TAB-FILES — right column: preview/editor glass card */
.detail-c .tab-files .tab-files-view{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  background:var(--app-surface-0);
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-lg);
  box-shadow:var(--app-shadow-card);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  overflow:hidden;
}

/* v5.10-APP-TAB-FILES — tree head: breadcrumbs + upload */
.detail-c .tab-files .tab-files-tree-head{
  flex:0 0 auto;
  padding-bottom:10px;
  border-bottom:1px solid var(--app-border-0);
  margin-bottom:10px !important;
}
.detail-c .tab-files .tab-files-crumbs{
  color:var(--app-text-muted);
}
.detail-c .tab-files .tab-files-crumbs a{
  color:var(--app-text-muted);
  text-decoration:none;
  padding:2px 6px;
  border-radius:var(--app-r-sm);
  transition:background .15s ease, color .15s ease;
}
.detail-c .tab-files .tab-files-crumbs a:hover{
  background:var(--app-accent-soft);
  color:var(--app-accent);
}
.detail-c .tab-files .tab-files-upload{
  flex:0 0 auto;
}

/* v5.10-APP-TAB-FILES — file list: independent scroll, fills column */
.detail-c .tab-files .tab-files-list{
  flex:1 1 auto;
  min-height:0;
  max-height:none !important;
  overflow:auto !important;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-right:4px;
}
.detail-c .tab-files .tab-files-list::-webkit-scrollbar{ width:8px; }
.detail-c .tab-files .tab-files-list::-webkit-scrollbar-thumb{
  background:var(--app-border-1);
  border-radius:4px;
}
.detail-c .tab-files .tab-files-list::-webkit-scrollbar-thumb:hover{
  background:var(--app-accent-soft);
}

/* v5.10-APP-TAB-FILES — rows: subtle glass row + hover highlight */
.detail-c .tab-files .tab-files-row{
  background:transparent !important;
  border:1px solid transparent !important;
  border-radius:var(--app-r-md) !important;
  padding:7px 9px !important;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
  display:flex;
  align-items:center;
  gap:8px;
}
.detail-c .tab-files .tab-files-row:hover{
  background:rgba(255,255,255,0.035) !important;
  border-color:var(--app-border-0) !important;
}
.detail-c .tab-files .tab-files-row.is-dir:hover{
  background:var(--app-accent-soft) !important;
  border-color:var(--app-accent) !important;
}

/* v5.10-APP-TAB-FILES — current selection */
.detail-c .tab-files .tab-files-row.is-current{
  background:var(--app-accent-soft) !important;
  border-color:var(--app-accent) !important;
  box-shadow:0 0 0 1px var(--app-accent-glow);
}
.detail-c .tab-files .tab-files-row.is-current .cname{
  color:var(--app-accent);
  font-weight:600;
}

/* v5.10-APP-TAB-FILES — up-row */
.detail-c .tab-files .tab-files-up{
  opacity:.85;
}
.detail-c .tab-files .tab-files-up:hover{
  opacity:1;
}

/* v5.10-APP-TAB-FILES — row name + size */
.detail-c .tab-files .tab-files-row .cname{
  color:var(--app-text);
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.detail-c .tab-files .tab-files-size{
  color:var(--app-text-muted) !important;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* v5.10-APP-TAB-FILES — row action buttons (icon-only, reveal on hover) */
.detail-c .tab-files .tab-files-act{
  border-radius:var(--app-r-sm) !important;
  background:transparent !important;
  border:1px solid transparent !important;
  opacity:0;
  transition:opacity .15s ease, background .15s ease, border-color .15s ease;
}
.detail-c .tab-files .tab-files-row:hover .tab-files-act,
.detail-c .tab-files .tab-files-row.is-current .tab-files-act{
  opacity:1;
}
.detail-c .tab-files .tab-files-act:hover{
  background:var(--app-surface-1) !important;
  border-color:var(--app-border-1) !important;
}
.detail-c .tab-files .tab-files-act-edit:hover{
  border-color:var(--app-accent) !important;
  color:var(--app-accent) !important;
}
.detail-c .tab-files .tab-files-act-del:hover{
  border-color:var(--app-danger) !important;
}

/* v5.10-APP-TAB-FILES — empty / loading */
.detail-c .tab-files .tab-files-empty{
  text-align:center;
  padding:30px 12px;
  color:var(--app-text-muted);
  font-size:13px;
}
.detail-c .tab-files .tab-files-loading{
  flex:1 1 auto;
}

/* v5.10-APP-TAB-FILES — view head: filename/path + meta + actions */
.detail-c .tab-files .tab-files-view-head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--app-border-0);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
.detail-c .tab-files .tab-files-view-ic{
  font-size:22px;
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--app-r-md);
  background:var(--app-accent-soft);
  border:1px solid var(--app-border-0);
  flex:0 0 auto;
}
.detail-c .tab-files .tab-files-view-meta{
  flex:1 1 auto;
  min-width:0;
}
.detail-c .tab-files .tab-files-view-name{
  font-family:var(--mono);
  font-size:13.5px;
  font-weight:600;
  color:var(--app-text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.detail-c .tab-files .tab-files-view-sub{
  font-size:11.5px;
  color:var(--app-text-muted) !important;
  margin-top:2px;
}
.detail-c .tab-files .tab-files-view-act{
  flex:0 0 auto;
}

/* v5.10-APP-TAB-FILES — view body: independent scroll, fills card */
.detail-c .tab-files .tab-files-view-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.detail-c .tab-files .tab-files-view-body::-webkit-scrollbar{ width:8px; }
.detail-c .tab-files .tab-files-view-body::-webkit-scrollbar-thumb{
  background:var(--app-border-1);
  border-radius:4px;
}

/* v5.10-APP-TAB-FILES — empty preview state */
.detail-c .tab-files .tab-files-view-empty{
  text-align:center;
  max-width:360px;
  padding:32px 16px;
  border:1px dashed var(--app-border-1);
  border-radius:var(--app-r-lg);
  background:rgba(255,255,255,0.015);
}
.detail-c .tab-files .tab-files-view-empty-ic{
  font-size:42px;
  opacity:.55;
  margin-bottom:10px;
  line-height:1;
}
.detail-c .tab-files .tab-files-view-empty-title{
  font-size:14px;
  font-weight:600;
  color:var(--app-text);
  margin-bottom:6px;
}
.detail-c .tab-files .tab-files-view-empty-sub{
  font-size:12.5px;
  color:var(--app-text-muted) !important;
  line-height:1.5;
}

/* v5.10-APP-TAB-FILES — responsive: stack at narrow widths */
@media(max-width:900px){
  .detail-c .tab-files{
    flex-direction:column;
  }
  .detail-c .tab-files .tab-files-tree{
    flex:0 0 auto;
    max-width:none;
    width:100%;
    max-height:50%;
  }
  .detail-c .tab-files .tab-files-view{
    flex:1 1 auto;
    min-height:240px;
  }
}

/* ================ v5.10-APP-CHROME ================ */
/* Global App-Shell Redesign — die Chrome (.shell + .gtop + .gside + .gmain) +
   alle Pages. Tokens werden hier auf :root + .shell dupliziert, damit
   sie ueberall verfuegbar sind (nicht nur unter .detail-c).
   Alle Selectoren in diesem Block tragen den Marker v5.10-APP-CHROME. */

/* v5.10-APP-CHROME — Tokens GLOBAL verfuegbar (Duplikat von v5.10-APP-BASE) */
:root,
.shell{
  --app-bg-0:#060810;
  --app-bg-1:#0a0d18;
  --app-surface-0:rgba(15,20,35,0.5);
  --app-surface-1:rgba(20,26,42,0.7);
  --app-border-0:rgba(255,255,255,0.07);
  --app-border-1:rgba(255,255,255,0.10);
  --app-accent:#5ec0ff;
  --app-accent-soft:rgba(94,192,255,0.12);
  --app-accent-glow:rgba(94,192,255,0.28);
  --app-success:#34e29b;
  --app-warn:#ffb84d;
  --app-danger:#ff5c7c;
  --app-text:#e8ecf5;
  --app-text-muted:#9aa3c8;
  --app-r-sm:8px;
  --app-r-md:12px;
  --app-r-lg:16px;
  --app-shadow-card:0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6);
  --app-blur:blur(14px) saturate(140%);
  --app-blur-strong:blur(22px) saturate(160%);
  --gtop-h:60px;
  --gside-w:252px;
  --gside-collapsed-w:64px;
}

/* v5.10-APP-CHROME — no-scroll invariant + dark aurora canvas */
html,
body{
  height:100vh;
  overflow:hidden;
  background:
    radial-gradient(1100px 600px at 100% -8%, rgba(94,192,255,0.07), transparent 60%),
    radial-gradient(900px 520px at -8% 0%, rgba(160,107,255,0.06), transparent 55%),
    radial-gradient(700px 700px at 50% 110%, rgba(52,226,155,0.04), transparent 60%),
    linear-gradient(180deg, var(--app-bg-1) 0%, var(--app-bg-0) 100%);
  background-attachment:fixed;
  color:var(--app-text);
}

/* v5.10-APP-CHROME — shell layout */
.shell{
  height:100vh;
  max-height:100vh;
  overflow:hidden;
  background:transparent;
  padding:10px;
  gap:10px;
  display:grid;
  grid-template-columns:var(--gside-w) 1fr;
  align-items:stretch;
  position:relative;
  isolation:isolate;
}
.shell.gside-collapsed{
  grid-template-columns:var(--gside-collapsed-w) 1fr;
}

/* v5.10-APP-CHROME — Sidebar als floating glass-kapsel */
.shell .gside.gside-glass{
  position:relative;
  height:calc(100vh - 20px);
  overflow:hidden;
  border:1px solid var(--app-border-1);
  border-radius:var(--app-r-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 35%),
    var(--app-surface-1);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
  padding:14px 10px 12px;
  display:flex;
  flex-direction:column;
  transition:padding .22s ease, width .22s ease;
}
.shell .gside.gside-glass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg, var(--app-accent-soft), transparent 30%);
  opacity:.7;
  pointer-events:none;
  z-index:0;
}
.shell .gside.gside-glass > *{position:relative;z-index:1}

/* v5.10-APP-CHROME — glow decoration in sidebar */
.shell .gside.gside-glass .gside-glow{
  position:absolute;
  inset:auto -40px -30px -40px;
  height:140px;
  background:radial-gradient(60% 100% at 50% 100%, var(--app-accent-glow), transparent 70%);
  filter:blur(28px);
  pointer-events:none;
  opacity:.55;
  z-index:0;
}

/* v5.10-APP-CHROME — sidebar inner scroll (nav area only) */
.shell .gside.gside-glass .gnav{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:var(--app-accent-soft) transparent;
  padding-right:2px;
  margin-right:-2px;
}
.shell .gside.gside-glass .gnav::-webkit-scrollbar{width:6px}
.shell .gside.gside-glass .gnav::-webkit-scrollbar-track{background:transparent}
.shell .gside.gside-glass .gnav::-webkit-scrollbar-thumb{
  background:var(--app-accent-soft);
  border-radius:6px;
}
.shell .gside.gside-glass .gnav::-webkit-scrollbar-thumb:hover{
  background:var(--app-accent-glow);
}

/* v5.10-APP-CHROME — brand block polish */
.shell .gside.gside-glass .gbrand{
  padding:4px 8px 14px;
  border-bottom:1px solid var(--app-border-0);
  margin-bottom:10px;
}
.shell .gside.gside-glass .gbrand .glogo{
  background:linear-gradient(135deg, var(--app-accent), #a06bff);
  box-shadow:0 8px 22px -6px var(--app-accent-glow);
  border-radius:12px;
}
.shell .gside.gside-glass .gbrand .gbtxt b{
  color:var(--app-text);
  letter-spacing:-.3px;
}
.shell .gside.gside-glass .gbrand .gbtxt b span{
  background:linear-gradient(135deg, var(--app-accent), #a06bff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.shell .gside.gside-glass .gbrand .gbtxt small{
  color:var(--app-text-muted);
}

/* v5.10-APP-CHROME — nav labels + nav items */
.shell .gside.gside-glass .navlabel{
  font-size:10px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--app-text-muted);
  opacity:.7;
  padding:14px 10px 6px;
  font-weight:700;
}
.shell .gside.gside-glass .gnav-i{
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 11px;
  border-radius:var(--app-r-md);
  color:var(--app-text-muted);
  font-weight:600;
  font-size:13px;
  border:1px solid transparent;
  transition:background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
  position:relative;
}
.shell .gside.gside-glass .gnav-i:hover{
  color:var(--app-text);
  background:var(--app-surface-0);
  border-color:var(--app-border-0);
}
.shell .gside.gside-glass .gnav-i.on{
  color:var(--app-text);
  background:linear-gradient(135deg, var(--app-accent-soft), transparent 70%), var(--app-surface-0);
  border-color:var(--app-accent);
  box-shadow:0 0 0 3px rgba(94,192,255,0.08), 0 8px 22px -12px var(--app-accent-glow);
}
.shell .gside.gside-glass .gnav-i.on::before{
  content:"";
  position:absolute;
  left:-1px;
  top:6px;
  bottom:6px;
  width:3px;
  border-radius:3px;
  background:var(--app-accent);
  box-shadow:0 0 12px var(--app-accent-glow);
}
.shell .gside.gside-glass .gnav-i .gi{
  font-size:15px;
  width:20px;
  text-align:center;
  flex:0 0 auto;
}
.shell .gside.gside-glass .gnav-i .gext{
  font-size:10.5px;
  opacity:.5;
}

/* v5.10-APP-CHROME — gmain area as transparent-over-canvas */
.shell .gmain{
  height:calc(100vh - 20px);
  max-height:calc(100vh - 20px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
  border-radius:var(--app-r-lg);
  background:transparent;
}

/* v5.10-APP-CHROME — Topbar als floating glass pill */
.shell .gmain > .gtop.gtop-glass{
  flex:0 0 auto;
  height:var(--gtop-h);
  margin:0 0 10px 0;
  padding:10px 16px;
  border:1px solid var(--app-border-1);
  border-radius:var(--app-r-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 35%),
    var(--app-surface-1);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
  z-index:35;
  overflow:visible;
}
.shell .gmain > .gtop.gtop-glass::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg, transparent 0%, var(--app-accent-soft) 50%, transparent 100%);
  opacity:.18;
  pointer-events:none;
  mix-blend-mode:screen;
}
.shell .gmain > .gtop.gtop-glass > *{position:relative;z-index:1}

/* v5.10-APP-CHROME — gtop-r as pill cluster */
.shell .gmain > .gtop.gtop-glass .gtop-r.gtop-r-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px;
  border-radius:999px;
  background:var(--app-surface-0);
  border:1px solid var(--app-border-0);
}

/* v5.10-APP-CHROME — gtop user-chip override */
.shell .gmain > .gtop.gtop-glass .user-chip{
  display:flex;
  align-items:center;
  gap:9px;
  padding:5px 12px 5px 5px;
  border:1px solid var(--app-border-0);
  border-radius:999px;
  background:var(--app-surface-1);
  cursor:pointer;
  transition:.16s;
}
.shell .gmain > .gtop.gtop-glass .user-chip:hover{
  border-color:var(--app-accent);
  box-shadow:0 0 0 3px var(--app-accent-soft);
}
.shell .gmain > .gtop.gtop-glass .user-chip .avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--app-accent), #a06bff);
  box-shadow:0 4px 14px -4px var(--app-accent-glow);
}

/* v5.10-APP-CHROME — hamburger button polish */
.shell .gmain > .gtop.gtop-glass .gside-hamburger{
  width:36px;
  height:36px;
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-md);
  background:var(--app-surface-0);
  color:var(--app-text-muted);
  transition:.16s;
}
.shell .gmain > .gtop.gtop-glass .gside-hamburger:hover{
  color:var(--app-text);
  background:var(--app-accent-soft);
  border-color:var(--app-accent);
}

/* v5.10-APP-CHROME — content area = einziger scroll-container */
.shell .gmain > .content{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:0;
  background:transparent;
  scrollbar-width:thin;
  scrollbar-color:var(--app-accent-soft) transparent;
}
.shell .gmain > .content::-webkit-scrollbar{width:8px;height:8px}
.shell .gmain > .content::-webkit-scrollbar-track{background:transparent}
.shell .gmain > .content::-webkit-scrollbar-thumb{
  background:var(--app-accent-soft);
  border-radius:8px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.shell .gmain > .content::-webkit-scrollbar-thumb:hover{
  background:var(--app-accent-glow);
  background-clip:padding-box;
}

/* v5.10-APP-CHROME — content padding when NOT detail-c */
.shell .gmain > .content:not(:has(> .detail-c)){
  padding:14px 18px 18px;
}

/* v5.10-APP-CHROME — toggle button repositioned for new shell padding */
.shell .gside-toggle{
  position:absolute;
  left:calc(var(--gside-w) - 2px);
  top:24px;
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid var(--app-border-1);
  background:var(--app-surface-1);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  color:var(--app-text-muted);
  z-index:60;
  box-shadow:0 6px 14px -4px rgba(0,0,0,.6);
  transition:.18s;
}
.shell .gside-toggle:hover{
  color:var(--app-text);
  border-color:var(--app-accent);
  box-shadow:0 0 0 3px var(--app-accent-soft), 0 6px 14px -4px rgba(0,0,0,.6);
  transform:scale(1.08);
}
.shell.gside-collapsed .gside-toggle{
  left:calc(var(--gside-collapsed-w) - 2px);
  transform:rotate(180deg);
}
.shell.gside-collapsed .gside-toggle:hover{
  transform:rotate(180deg) scale(1.08);
}

/* v5.10-APP-CHROME — collapsed sidebar polish */
.shell.gside-collapsed .gside.gside-glass{
  padding:14px 6px 12px;
}

/* v5.10-APP-CHROME — GLOBAL card glass */
.shell .gmain .card{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 50%),
    var(--app-surface-1);
  border:1px solid var(--app-border-1);
  border-radius:var(--app-r-lg);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.shell .gmain .card:hover{
  border-color:var(--app-border-1);
}

/* v5.10-APP-CHROME — GLOBAL button variants */
.shell .gmain .btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border:1px solid transparent;
  border-radius:var(--app-r-md);
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease, color .14s ease, filter .14s ease;
  color:#0a1224;
  background:linear-gradient(135deg, var(--app-accent), #7fb8ff);
  box-shadow:0 8px 22px -10px var(--app-accent-glow), 0 1px 0 rgba(255,255,255,0.18) inset;
  letter-spacing:.01em;
}
.shell .gmain .btn:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
  box-shadow:0 12px 28px -10px var(--app-accent-glow), 0 1px 0 rgba(255,255,255,0.25) inset;
}
.shell .gmain .btn:active{transform:translateY(0)}
.shell .gmain .btn.ghost{
  background:var(--app-surface-0);
  color:var(--app-text);
  border:1px solid var(--app-border-1);
  box-shadow:none;
}
.shell .gmain .btn.ghost:hover{
  background:var(--app-surface-1);
  border-color:var(--app-accent);
  color:var(--app-text);
  filter:none;
  box-shadow:0 0 0 3px var(--app-accent-soft);
}
.shell .gmain .btn.gm-danger{
  background:linear-gradient(135deg, var(--app-danger), #ff3d5e);
  color:#fff;
  box-shadow:0 8px 22px -10px rgba(255,92,124,0.55);
}

/* v5.10-APP-CHROME — GLOBAL inputs/selects/textareas */
.shell .gmain input,
.shell .gmain select,
.shell .gmain textarea{
  background:var(--app-surface-1);
  border:1px solid var(--app-border-1);
  border-radius:var(--app-r-md);
  color:var(--app-text);
  padding:10px 12px;
  font-size:13.5px;
  outline:none;
  transition:.14s;
}
.shell .gmain input::placeholder,
.shell .gmain textarea::placeholder{
  color:var(--app-text-muted);
  opacity:.7;
}
.shell .gmain input:focus,
.shell .gmain select:focus,
.shell .gmain textarea:focus{
  border-color:var(--app-accent);
  box-shadow:0 0 0 3px var(--app-accent-soft);
  background:var(--app-surface-1);
}
.shell .gmain input[type=checkbox]{
  width:18px;
  height:18px;
  accent-color:var(--app-accent);
}

/* v5.10-APP-CHROME — pill variants */
.shell .gmain .pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:700;
  padding:4px 11px;
  border-radius:999px;
  background:var(--app-accent-soft);
  color:var(--app-accent);
  border:1px solid transparent;
  letter-spacing:.02em;
}
.shell .gmain .pill.pill-success,
.shell .gmain .pill.run,
.shell .gmain .badge.run{
  background:rgba(52,226,155,0.14);
  color:var(--app-success);
}
.shell .gmain .pill.pill-warn{
  background:rgba(255,184,77,0.14);
  color:var(--app-warn);
}
.shell .gmain .pill.pill-danger{
  background:rgba(255,92,124,0.14);
  color:var(--app-danger);
}

/* v5.10-APP-CHROME — modal overlays (existing inline-styled ones + .modal-overlay class) */
.shell ~ .modal-overlay,
.shell .modal-overlay,
.modal-overlay{
  background:rgba(4,6,16,0.62) !important;
  -webkit-backdrop-filter:var(--app-blur-strong) !important;
  backdrop-filter:var(--app-blur-strong) !important;
  animation:appChromeModalFade .18s ease;
}
@keyframes appChromeModalFade{
  from{opacity:0}
  to{opacity:1}
}
@keyframes appChromeModalScale{
  from{opacity:0;transform:translateY(8px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* v5.10-APP-CHROME — gmodal (custom confirm/prompt) glass refresh */
.gmodal-ov{
  background:rgba(4,6,16,0.62) !important;
  -webkit-backdrop-filter:var(--app-blur-strong) !important;
  backdrop-filter:var(--app-blur-strong) !important;
}
.gmodal{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 35%),
    var(--app-surface-1) !important;
  border:1px solid var(--app-border-1) !important;
  border-radius:var(--app-r-lg) !important;
  -webkit-backdrop-filter:var(--app-blur) !important;
  backdrop-filter:var(--app-blur) !important;
  box-shadow:0 28px 80px rgba(0,0,0,.6), var(--app-shadow-card) !important;
  animation:appChromeModalScale .2s cubic-bezier(.2,.8,.2,1);
}
.gmodal-h{color:var(--app-text) !important}
.gmodal-b{color:var(--app-text-muted) !important}

/* v5.10-APP-CHROME — user dropdown (.udrop) glass refresh */
.shell .gmain .udrop{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 50%),
    var(--app-surface-1) !important;
  border:1px solid var(--app-border-1) !important;
  border-radius:var(--app-r-md) !important;
  -webkit-backdrop-filter:var(--app-blur) !important;
  backdrop-filter:var(--app-blur) !important;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.85), var(--app-shadow-card) !important;
  animation:appChromeModalScale .16s cubic-bezier(.2,.8,.2,1);
}
.shell .gmain .udrop .ud-item{
  color:var(--app-text) !important;
  transition:background .14s ease, color .14s ease;
}
.shell .gmain .udrop .ud-item:hover{
  background:var(--app-accent-soft) !important;
  color:var(--app-accent) !important;
}

/* v5.10-APP-CHROME — login page on aurora canvas */
.login-wrap{
  min-height:100vh;
  background:transparent;
}
.login-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 40%),
    var(--app-surface-1) !important;
  border:1px solid var(--app-border-1) !important;
  border-radius:var(--app-r-lg) !important;
  -webkit-backdrop-filter:var(--app-blur-strong) !important;
  backdrop-filter:var(--app-blur-strong) !important;
  box-shadow:0 40px 90px -40px rgba(0,0,0,0.9), 0 0 0 1px var(--app-border-0) inset !important;
}
.login-card .brand .name{
  background:linear-gradient(135deg, var(--app-accent), #a06bff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.login-card .field label{color:var(--app-text-muted)}
.login-card input{
  background:var(--app-surface-0) !important;
  border:1px solid var(--app-border-1) !important;
  color:var(--app-text) !important;
  border-radius:var(--app-r-md) !important;
}
.login-card input:focus{
  border-color:var(--app-accent) !important;
  box-shadow:0 0 0 3px var(--app-accent-soft) !important;
}
.login-card .btn{
  background:linear-gradient(135deg, var(--app-accent), #7fb8ff) !important;
  color:#0a1224 !important;
  border-radius:var(--app-r-md) !important;
  box-shadow:0 10px 26px -10px var(--app-accent-glow) !important;
}

/* v5.10-APP-CHROME — toastbox glass */
.toastbox{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 50%),
    var(--app-surface-1) !important;
  border:1px solid var(--app-border-1) !important;
  border-left:3px solid var(--app-accent) !important;
  border-radius:var(--app-r-md) !important;
  -webkit-backdrop-filter:var(--app-blur) !important;
  backdrop-filter:var(--app-blur) !important;
  box-shadow:0 18px 40px -18px rgba(0,0,0,0.9), var(--app-shadow-card) !important;
  color:var(--app-text) !important;
}
.toastbox.ok{border-left-color:var(--app-success) !important}
.toastbox.err{border-left-color:var(--app-danger) !important}

/* v5.10-APP-CHROME — responsive: shell collapses to single column below 880px */
@media(max-width:880px){
  .shell{
    grid-template-columns:1fr;
    padding:8px;
    gap:8px;
  }
  .shell .gside.gside-glass{
    position:fixed;
    left:8px;
    top:8px;
    bottom:8px;
    width:min(280px, calc(100vw - 16px));
    z-index:200;
    transform:translateX(calc(-100% - 16px));
    transition:transform .22s ease;
  }
  .shell.gside-mobile-open .gside.gside-glass{
    transform:translateX(0);
  }
  .shell .gside-toggle{display:none}
  .shell .gmain > .gtop.gtop-glass .gside-hamburger{display:inline-flex !important}
}
@media(min-width:881px){
  .shell .gmain > .gtop.gtop-glass .gside-hamburger{display:none}
}

/* v5.10-APP-CHROME — re-assert detail-c sizing under new shell padding */
.shell .gmain > .content > .detail-c{
  height:calc(100vh - var(--gtop-h, 60px) - 30px) !important;
  max-height:calc(100vh - var(--gtop-h, 60px) - 30px) !important;
}

/* v5.10-APP-CHROME — globalize design tokens so out-of-shell pages (login) can use them */
:root,
.shell,
.app-login-page{
  --app-bg-0:#060810;
  --app-bg-1:#0a0d18;
  --app-surface-0:rgba(15,20,35,0.5);
  --app-surface-1:rgba(20,26,42,0.7);
  --app-border-0:rgba(255,255,255,0.07);
  --app-border-1:rgba(255,255,255,0.10);
  --app-accent:#5ec0ff;
  --app-accent-soft:rgba(94,192,255,0.12);
  --app-accent-glow:rgba(94,192,255,0.28);
  --app-success:#34e29b;
  --app-warn:#ffb84d;
  --app-danger:#ff5c7c;
  --app-text:#e8ecf5;
  --app-text-muted:#9aa3c8;
  --app-r-sm:8px;
  --app-r-md:12px;
  --app-r-lg:16px;
  --app-shadow-card:0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6);
  --app-blur:blur(14px) saturate(140%);
}

/* ================ v5.10-APP-PAGE-LOGIN ================ */
/* Login canvas: centered glass card on aurora background with subtle entrance,
   prominent brand logo and pill-style error messaging. Scoped to .app-login-page. */

/* v5.10-APP-PAGE-LOGIN — outer canvas takes full viewport with layered aurora */
.app-login-page{
  position:relative;
  min-height:100vh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(94,192,255,0.10), transparent 60%),
    radial-gradient(820px 480px at 86% 88%, rgba(160,107,255,0.10), transparent 58%),
    linear-gradient(180deg, var(--app-bg-1) 0%, var(--app-bg-0) 100%) !important;
  overflow:hidden;
  isolation:isolate;
}

/* v5.10-APP-PAGE-LOGIN — animated aurora orbs + faint grid behind the card */
.app-login-page .app-login-aura{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.app-login-page .app-login-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:.55;
  will-change:transform;
}
.app-login-page .app-login-orb--a{
  width:420px;
  height:420px;
  left:-90px;
  top:-110px;
  background:radial-gradient(circle at 30% 30%, var(--app-accent), transparent 70%);
  animation:appLoginOrbA 18s ease-in-out infinite alternate;
}
.app-login-page .app-login-orb--b{
  width:500px;
  height:500px;
  right:-140px;
  bottom:-160px;
  background:radial-gradient(circle at 50% 50%, rgba(160,107,255,.65), transparent 70%);
  animation:appLoginOrbB 22s ease-in-out infinite alternate;
}
.app-login-page .app-login-grid{
  position:absolute;
  inset:-1px;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(closest-side at 50% 50%, #000 35%, transparent 78%);
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%, #000 35%, transparent 78%);
  opacity:.45;
}
@keyframes appLoginOrbA{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(40px,30px,0) scale(1.08)}
}
@keyframes appLoginOrbB{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-50px,-30px,0) scale(1.1)}
}

/* v5.10-APP-PAGE-LOGIN — stage centers the card and hosts entrance animation */
.app-login-page .app-login-stage{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:440px;
  animation:appLoginIn .55s cubic-bezier(.22,.94,.36,1) both;
}
@keyframes appLoginIn{
  0%{opacity:0;transform:translateY(14px) scale(.985)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* v5.10-APP-PAGE-LOGIN — card chrome, building on existing .login-card */
.app-login-page .login-card.app-login-card{
  position:relative;
  width:100%;
  max-width:420px;
  padding:38px 32px 30px !important;
  border:1px solid var(--app-border-1) !important;
  border-radius:20px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 45%),
    var(--app-surface-1) !important;
  -webkit-backdrop-filter:blur(20px) saturate(150%) !important;
  backdrop-filter:blur(20px) saturate(150%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 40px 90px -40px rgba(0,0,0,0.95),
    0 0 0 1px var(--app-border-0) inset !important;
  overflow:hidden;
}

/* v5.10-APP-PAGE-LOGIN — accent rim glow at the top of the card */
.app-login-page .app-login-card-glow{
  position:absolute;
  top:-1px;
  left:14%;
  right:14%;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--app-accent-glow), transparent);
  border-radius:2px;
  pointer-events:none;
  filter:blur(.4px);
}

/* v5.10-APP-PAGE-LOGIN — header block: brand + sub */
.app-login-page .app-login-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-bottom:22px;
}
.app-login-page .app-login-brand{
  justify-content:center;
  gap:12px;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--app-text);
}
.app-login-page .app-login-brand .name{
  background:linear-gradient(135deg, var(--app-accent), #a06bff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.app-login-page .app-login-brand .app-login-logo{
  width:54px;
  height:54px;
  border-radius:14px;
  background:var(--app-surface-0);
  border:1px solid var(--app-border-1);
  padding:6px;
  box-shadow:
    0 0 0 1px var(--app-accent-soft),
    0 10px 30px -10px var(--app-accent-glow);
  animation:appLoginLogoFloat 6s ease-in-out infinite alternate;
}
@keyframes appLoginLogoFloat{
  0%{transform:translateY(0)}
  100%{transform:translateY(-3px)}
}
.app-login-page .app-login-sub{
  text-align:center;
  color:var(--app-text-muted);
  font-size:13px;
  margin:0;
}

/* v5.10-APP-PAGE-LOGIN — form layout */
.app-login-page .app-login-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* v5.10-APP-PAGE-LOGIN — error as a soft red pill, shows only when populated */
.app-login-page .app-login-err{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  max-height:0;
  margin:0;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,92,124,0.10);
  border:1px solid rgba(255,92,124,0.32);
  color:var(--app-danger);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.01em;
  text-align:center;
  overflow:hidden;
  opacity:0;
  transition:max-height .2s ease, padding .2s ease, opacity .2s ease, margin .2s ease;
}
.app-login-page .app-login-err.app-login-err--show{
  max-height:38px;
  min-height:30px;
  padding:7px 14px;
  margin:0 0 4px;
  opacity:1;
}

/* v5.10-APP-PAGE-LOGIN — fields */
.app-login-page .app-login-field{
  margin:0;
}
.app-login-page .app-login-field label{
  display:block;
  font-size:11.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--app-text-muted);
  font-weight:700;
  margin-bottom:6px;
}
.app-login-page .app-login-field input{
  width:100%;
  padding:11px 14px !important;
  font-size:14px !important;
  color:var(--app-text) !important;
  background:var(--app-surface-0) !important;
  border:1px solid var(--app-border-1) !important;
  border-radius:var(--app-r-md) !important;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
  outline:none;
}
.app-login-page .app-login-field input:hover{
  border-color:rgba(255,255,255,0.18) !important;
}
.app-login-page .app-login-field input:focus{
  border-color:var(--app-accent) !important;
  box-shadow:0 0 0 3px var(--app-accent-soft) !important;
  background:rgba(15,20,35,0.65) !important;
}

/* v5.10-APP-PAGE-LOGIN — submit */
.app-login-page .app-login-submit{
  margin-top:8px !important;
  padding:12px 16px !important;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  border-radius:var(--app-r-md) !important;
  background:linear-gradient(135deg, var(--app-accent), #7fb8ff) !important;
  color:#0a1224 !important;
  border:1px solid rgba(94,192,255,0.55) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 12px 30px -10px var(--app-accent-glow) !important;
  transition:transform .14s ease, box-shadow .18s ease, filter .14s ease;
}
.app-login-page .app-login-submit:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 16px 36px -10px var(--app-accent-glow) !important;
  filter:brightness(1.04);
}
.app-login-page .app-login-submit:active:not(:disabled){
  transform:translateY(0);
}
.app-login-page .app-login-submit:disabled{
  opacity:.65;
  cursor:not-allowed;
}

/* v5.10-APP-PAGE-LOGIN — responsive: tighten the card on small screens */
@media(max-width:480px){
  .app-login-page{padding:18px 14px}
  .app-login-page .login-card.app-login-card{
    padding:30px 22px 24px !important;
    border-radius:18px !important;
  }
  .app-login-page .app-login-brand{font-size:20px}
  .app-login-page .app-login-brand .app-login-logo{width:48px;height:48px}
}

/* v5.10-APP-PAGE-LOGIN — reduced motion: drop float/orb animations */
@media (prefers-reduced-motion: reduce){
  .app-login-page .app-login-orb,
  .app-login-page .app-login-brand .app-login-logo,
  .app-login-page .app-login-stage{
    animation:none !important;
  }
}

/* ================ v5.10-APP-PAGE-STACKS ================ */
/* Stacks page — card-list mit subtle dividers, Glass-Cards mit App-Tokens.
   Alle Selectoren in diesem Block tragen den Marker v5.10-APP-PAGE-STACKS.
   Scoped unter .app-page-stacks; nutzt nur --app-* Tokens (global via
   v5.10-APP-CHROME duplicate auf :root). */

/* v5.10-APP-PAGE-STACKS — page wrapper als flex column */
.app-page-stacks{
  display:flex;
  flex-direction:column;
  gap:0;
  min-height:0;
}

/* v5.10-APP-PAGE-STACKS — page-head Action-Button accent treatment */
.app-page-stacks > .page-head .btn{
  background:linear-gradient(180deg, var(--app-accent-soft), transparent) !important;
  border:1px solid var(--app-border-1) !important;
  color:var(--app-text) !important;
  box-shadow:0 0 0 1px var(--app-accent-soft) inset, 0 8px 20px -12px var(--app-accent-glow) !important;
  border-radius:var(--app-r-md) !important;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.app-page-stacks > .page-head .btn:hover{
  border-color:var(--app-accent) !important;
  box-shadow:0 0 0 1px var(--app-accent) inset, 0 12px 28px -10px var(--app-accent-glow) !important;
  transform:translateY(-1px);
}

/* v5.10-APP-PAGE-STACKS — card-list container */
.app-page-stacks .aps-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:0;
}

/* v5.10-APP-PAGE-STACKS — stack card: glass surface */
.app-page-stacks .aps-card{
  background:linear-gradient(180deg, var(--app-surface-1), var(--app-surface-0)) !important;
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-lg) !important;
  padding:18px 18px 14px !important;
  box-shadow:var(--app-shadow-card) !important;
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  position:relative;
  overflow:hidden;
}
.app-page-stacks .aps-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(135deg, var(--app-accent-soft) 0%, transparent 35%);
  opacity:0;
  transition:opacity .2s ease;
}
.app-page-stacks .aps-card:hover{
  border-color:var(--app-border-1) !important;
  box-shadow:var(--app-shadow-card), 0 0 0 1px var(--app-accent-soft) !important;
}
.app-page-stacks .aps-card:hover::before{
  opacity:.6;
}

/* v5.10-APP-PAGE-STACKS — head row */
.app-page-stacks .aps-card .aps-head{
  position:relative;
  z-index:1;
  padding-bottom:12px !important;
  margin-bottom:12px !important;
  border-bottom:1px solid var(--app-border-0);
}

/* v5.10-APP-PAGE-STACKS — icon tile */
.app-page-stacks .aps-card .aps-icon{
  background:var(--app-surface-0);
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-sm);
  width:36px !important;
  height:36px !important;
  font-size:20px !important;
  flex:0 0 36px;
}
.app-page-stacks .aps-card .aps-icon img{
  width:24px !important;
  height:24px !important;
  border-radius:6px !important;
}

/* v5.10-APP-PAGE-STACKS — title block */
.app-page-stacks .aps-card .aps-title h3{
  color:var(--app-text);
  font-size:15.5px;
  font-weight:700;
  letter-spacing:-.01em;
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}
.app-page-stacks .aps-card .aps-title .aps-count{
  color:var(--app-text-muted) !important;
  font-family:var(--mono);
  font-size:11.5px !important;
  font-weight:500;
  padding:2px 8px;
  border-radius:999px;
  background:var(--app-surface-0);
  border:1px solid var(--app-border-0);
  letter-spacing:.02em;
}

/* v5.10-APP-PAGE-STACKS — head action buttons */
.app-page-stacks .aps-card .aps-head .btn.ghost{
  background:var(--app-surface-0) !important;
  border:1px solid var(--app-border-0) !important;
  color:var(--app-text-muted) !important;
  border-radius:var(--app-r-sm) !important;
  font-weight:600;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.app-page-stacks .aps-card .aps-head .btn.ghost:hover{
  color:var(--app-text) !important;
  border-color:var(--app-border-1) !important;
  background:var(--app-surface-1) !important;
}
.app-page-stacks .aps-card .aps-head .btn.ghost[style*="color:var(--danger)"]{
  color:var(--app-danger) !important;
}
.app-page-stacks .aps-card .aps-head .btn.ghost[style*="color:var(--danger)"]:hover{
  border-color:var(--app-danger) !important;
  background:rgba(255,92,124,.08) !important;
}

/* v5.10-APP-PAGE-STACKS — container list mit subtle dividers */
.app-page-stacks .aps-card .clist{
  position:relative;
  z-index:1;
  display:flex !important;
  flex-direction:column;
  gap:0 !important;
  border-radius:var(--app-r-md);
  overflow:hidden;
  background:transparent;
}

/* v5.10-APP-PAGE-STACKS — container rows with subtle dividers between */
.app-page-stacks .aps-card .clist > .crow{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--app-border-0) !important;
  border-radius:0 !important;
  padding:11px 10px !important;
  gap:12px !important;
  transition:background .14s ease, padding-left .14s ease;
}
.app-page-stacks .aps-card .clist > .crow:last-child{
  border-bottom:0 !important;
}
.app-page-stacks .aps-card .clist > .crow:hover{
  background:var(--app-surface-0) !important;
  padding-left:14px !important;
}

/* v5.10-APP-PAGE-STACKS — status dot */
.app-page-stacks .aps-card .clist > .crow .dot{
  width:9px;
  height:9px;
  box-shadow:none;
}
.app-page-stacks .aps-card .clist > .crow .dot.run{
  background:var(--app-success);
  box-shadow:0 0 10px var(--app-success), 0 0 0 3px rgba(52,226,155,.12);
}
.app-page-stacks .aps-card .clist > .crow .dot.stop{
  background:var(--app-text-muted);
  opacity:.5;
}

/* v5.10-APP-PAGE-STACKS — container row text */
.app-page-stacks .aps-card .clist > .crow .cname{
  color:var(--app-text) !important;
  font-weight:600;
  font-size:13.5px;
  letter-spacing:-.005em;
}
.app-page-stacks .aps-card .clist > .crow .cmeta{
  color:var(--app-text-muted) !important;
  font-family:var(--mono);
  font-size:11.5px !important;
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* v5.10-APP-PAGE-STACKS — "Keine Container." note */
.app-page-stacks .aps-card .clist > .muted{
  color:var(--app-text-muted) !important;
  padding:14px 10px !important;
  text-align:center;
  font-size:12.5px !important;
  font-style:italic;
}

/* v5.10-APP-PAGE-STACKS — global empty state (no stacks at all) */
.app-page-stacks .aps-empty{
  background:linear-gradient(180deg, var(--app-surface-1), var(--app-surface-0)) !important;
  border:1px dashed var(--app-border-1) !important;
  border-radius:var(--app-r-lg) !important;
  color:var(--app-text-muted) !important;
  padding:38px 24px !important;
  text-align:center;
  font-size:13.5px;
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
}

/* v5.10-APP-PAGE-STACKS — spinner area uses app tokens */
.app-page-stacks > .center{
  padding:48px 0;
}

/* v5.10-APP-PAGE-STACKS — responsive: tighten padding on small screens */
@media(max-width:680px){
  .app-page-stacks .aps-card{
    padding:14px !important;
  }
  .app-page-stacks .aps-card .aps-head{
    flex-wrap:wrap !important;
  }
  .app-page-stacks .aps-card .aps-head .btn.ghost{
    padding:5px 9px !important;
    font-size:12px !important;
  }
}

/* ================ v5.10-APP-PAGE-DASHBOARD ================ */
/* Dashboard / Landing — "Visitenkarte" Hero + Stat-Cards-Glow.
   Scoped unter .dash-page; nutzt nur --app-* Tokens (global via
   v5.10-APP-CHROME duplicate auf :root). Alle Selectoren tragen den
   Marker v5.10-APP-PAGE-DASHBOARD. */

/* v5.10-APP-PAGE-DASHBOARD — page wrapper, flex column, owns remaining space */
.dash-page{
  display:flex !important;
  flex-direction:column;
  gap:14px;
  min-height:0;
  animation:dashFadeIn .42s ease-out both;
}
/* opacity-only: kein transform -> .dash-page erzeugt KEINEN containing-block,
   sonst kleben position:fixed Modals (CPU/RAM/Disk-Verlauf) am dash-page statt am Viewport */
@keyframes dashFadeIn{
  from{opacity:0}
  to{opacity:1}
}

/* v5.10-APP-PAGE-DASHBOARD — Hero-Wrap als gross-pad container mit Aurora */
.dash-page .dash-hero-wrap{
  position:relative;
  border-radius:var(--app-r-lg);
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(135deg, rgba(94,192,255,0.10) 0%, rgba(160,107,255,0.06) 45%, transparent 75%),
    linear-gradient(180deg, var(--app-surface-1), var(--app-surface-0));
  border:1px solid var(--app-border-1);
  box-shadow:var(--app-shadow-card);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  padding:0;
}
/* v5.10-APP-PAGE-DASHBOARD — Aurora-Orbs hinter dem Hero */
.dash-page .dash-hero-wrap .dash-aurora{
  position:absolute;
  pointer-events:none;
  z-index:0;
  width:420px;
  height:420px;
  border-radius:50%;
  filter:blur(80px);
  opacity:.55;
  background:radial-gradient(circle, var(--app-accent) 0%, transparent 60%);
  top:-180px;
  right:-120px;
  animation:dashOrbA 14s ease-in-out infinite alternate;
}
.dash-page .dash-hero-wrap .dash-aurora.dash-aurora-b{
  width:340px;
  height:340px;
  top:auto;
  right:auto;
  bottom:-160px;
  left:-100px;
  background:radial-gradient(circle, rgba(160,107,255,0.55) 0%, transparent 60%);
  opacity:.45;
  animation:dashOrbB 16s ease-in-out infinite alternate;
}
@keyframes dashOrbA{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(-30px,20px) scale(1.05)}
}
@keyframes dashOrbB{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(28px,-22px) scale(1.08)}
}

/* v5.10-APP-PAGE-DASHBOARD — page-head innerhalb Hero-Wrap entglasen */
.dash-page .dash-hero-wrap > .page-head.dash-hero-head{
  position:relative;
  z-index:1;
  margin:0 !important;
  padding:26px 28px !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  display:flex !important;
  align-items:center !important;
  gap:18px;
}
.dash-page .dash-hero-wrap > .page-head.dash-hero-head .dash-hero-text{
  flex:1;
  min-width:0;
}
.dash-page .dash-hero-wrap > .page-head.dash-hero-head h1{
  font-size:28px !important;
  font-weight:800 !important;
  letter-spacing:-.025em !important;
  color:var(--app-text) !important;
  margin:0 !important;
  background:linear-gradient(180deg, #ffffff 0%, var(--app-text) 70%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.dash-page .dash-hero-wrap > .page-head.dash-hero-head p{
  font-size:13.5px !important;
  color:var(--app-text-muted) !important;
  margin:6px 0 0 !important;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.dash-page .dash-hero-wrap > .page-head.dash-hero-head p::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--app-success);
  box-shadow:0 0 10px var(--app-success);
  flex:0 0 7px;
  animation:dashPulse 2.2s ease-in-out infinite;
}
@keyframes dashPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.85)}
}

/* v5.10-APP-PAGE-DASHBOARD — Hero-CTA */
.dash-page .dash-hero-wrap > .page-head.dash-hero-head .dash-hero-cta{
  background:linear-gradient(180deg, var(--app-accent), #4aa6e0) !important;
  border:1px solid var(--app-accent) !important;
  color:#06121e !important;
  font-weight:700 !important;
  border-radius:var(--app-r-md) !important;
  padding:10px 18px !important;
  box-shadow:0 8px 24px -8px var(--app-accent-glow), 0 1px 0 rgba(255,255,255,0.2) inset !important;
  transition:transform .15s ease, box-shadow .15s ease;
}
.dash-page .dash-hero-wrap > .page-head.dash-hero-head .dash-hero-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 32px -10px var(--app-accent-glow), 0 1px 0 rgba(255,255,255,0.25) inset !important;
}

/* v5.10-APP-PAGE-DASHBOARD — Bento Grid mit App-Tokens */
.dash-page .bento.dash-bento{
  gap:14px !important;
}

/* v5.10-APP-PAGE-DASHBOARD — Stat-Hero-Cards Glow + glyph */
.dash-page .bento.dash-bento .card.stat.dash-stat{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, var(--app-surface-1), var(--app-surface-0)) !important;
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-lg) !important;
  padding:18px !important;
  box-shadow:var(--app-shadow-card) !important;
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dash-page .bento.dash-bento .card.stat.dash-stat::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(135deg, var(--dash-stat-accent, var(--app-accent-soft)) 0%, transparent 55%);
  opacity:.5;
  transition:opacity .2s ease;
}
.dash-page .bento.dash-bento .card.stat.dash-stat::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--dash-stat-rim, var(--app-accent)), transparent);
  opacity:.6;
}
.dash-page .bento.dash-bento .card.stat.dash-stat:hover{
  border-color:var(--app-border-1) !important;
  transform:translateY(-2px);
  box-shadow:var(--app-shadow-card), 0 14px 36px -16px var(--dash-stat-rim, var(--app-accent-glow)) !important;
}
.dash-page .bento.dash-bento .card.stat.dash-stat:hover::before{
  opacity:.85;
}

/* v5.10-APP-PAGE-DASHBOARD — Glyph oben rechts */
.dash-page .bento.dash-bento .card.stat.dash-stat .dash-stat-glyph{
  position:absolute;
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  border-radius:10px;
  background:var(--app-surface-0);
  border:1px solid var(--app-border-0);
  color:var(--dash-stat-rim, var(--app-accent));
  z-index:1;
  box-shadow:0 0 0 1px var(--dash-stat-accent, var(--app-accent-soft)) inset;
}

/* v5.10-APP-PAGE-DASHBOARD — Per-Stat Accent-Tokens */
.dash-page .bento.dash-bento .card.stat.dash-stat-cpu{
  --dash-stat-accent:rgba(94,192,255,0.16);
  --dash-stat-rim:#5ec0ff;
}
.dash-page .bento.dash-bento .card.stat.dash-stat-ram{
  --dash-stat-accent:rgba(52,226,155,0.14);
  --dash-stat-rim:#34e29b;
}
.dash-page .bento.dash-bento .card.stat.dash-stat-disk{
  --dash-stat-accent:rgba(255,184,77,0.14);
  --dash-stat-rim:#ffb84d;
}
.dash-page .bento.dash-bento .card.stat.dash-stat-up{
  --dash-stat-accent:rgba(160,107,255,0.16);
  --dash-stat-rim:#a06bff;
}

/* v5.10-APP-PAGE-DASHBOARD — Innenstruktur der Stat-Cards */
.dash-page .bento.dash-bento .card.stat.dash-stat > *{
  position:relative;
  z-index:1;
}
.dash-page .bento.dash-bento .card.stat.dash-stat .label{
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase;
  color:var(--app-text-muted) !important;
  margin:0 0 8px !important;
}
.dash-page .bento.dash-bento .card.stat.dash-stat .big{
  font-size:38px !important;
  font-weight:800 !important;
  letter-spacing:-.03em !important;
  line-height:1.05 !important;
  margin:0 !important;
}
.dash-page .bento.dash-bento .card.stat.dash-stat .sub{
  font-size:12px !important;
  color:var(--app-text-muted) !important;
  margin:6px 0 0 !important;
}
.dash-page .bento.dash-bento .card.stat.dash-stat .bar{
  margin-top:14px !important;
  height:6px !important;
  background:var(--app-surface-0) !important;
  border:1px solid var(--app-border-0) !important;
  border-radius:999px !important;
  overflow:hidden;
  position:relative;
}
.dash-page .bento.dash-bento .card.stat.dash-stat .bar i{
  display:block;
  height:100%;
  border-radius:999px;
  transition:width .6s cubic-bezier(.22,1,.36,1);
  box-shadow:0 0 12px var(--dash-stat-rim, var(--app-accent-glow));
}

/* v5.10-APP-PAGE-DASHBOARD — Section-Heading "Server" mit gradient bar */
.dash-page .bento.dash-bento > .col-12 > h2{
  font-size:18px !important;
  font-weight:700 !important;
  letter-spacing:-.015em !important;
  color:var(--app-text) !important;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding-left:14px;
  position:relative;
}
.dash-page .bento.dash-bento > .col-12 > h2::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:18px;
  border-radius:2px;
  background:linear-gradient(180deg, var(--app-accent), #4aa6e0);
  box-shadow:0 0 10px var(--app-accent-glow);
}

/* v5.10-APP-PAGE-DASHBOARD — Section-Action Button (Server hinzufuegen) polish */
.dash-page .bento.dash-bento > .col-12 > .btn.ghost{
  background:var(--app-surface-0) !important;
  border:1px solid var(--app-border-0) !important;
  color:var(--app-text-muted) !important;
  border-radius:var(--app-r-md) !important;
  font-weight:600 !important;
  transition:.16s;
}
.dash-page .bento.dash-bento > .col-12 > .btn.ghost:hover{
  color:var(--app-text) !important;
  border-color:var(--app-accent) !important;
  background:var(--app-accent-soft) !important;
}

/* v5.10-APP-PAGE-DASHBOARD — Nodecard glass treatment */
.dash-page .bento.dash-bento .card.nodecard{
  background:linear-gradient(180deg, var(--app-surface-1), var(--app-surface-0)) !important;
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-lg) !important;
  box-shadow:var(--app-shadow-card) !important;
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.dash-page .bento.dash-bento .card.nodecard:hover{
  border-color:var(--app-border-1) !important;
  box-shadow:var(--app-shadow-card), 0 0 0 1px var(--app-accent-soft) !important;
}

/* v5.10-APP-PAGE-DASHBOARD — End-User-Produktgruppen Header polish */
.dash-page .bento.dash-bento .card.col-12 > h3{
  font-size:15.5px !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
  color:var(--app-text) !important;
  padding-left:14px;
  position:relative;
}
.dash-page .bento.dash-bento .card.col-12 > h3::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:16px;
  border-radius:2px;
  background:linear-gradient(180deg, var(--app-accent), #4aa6e0);
  box-shadow:0 0 8px var(--app-accent-glow);
}

/* v5.10-APP-PAGE-DASHBOARD — End-User Produkt-Card polish */
.dash-page .bento.dash-bento .prodcard{
  background:linear-gradient(180deg, var(--app-surface-1), var(--app-surface-0)) !important;
  border:1px solid var(--app-border-0) !important;
  border-radius:var(--app-r-md) !important;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dash-page .bento.dash-bento .prodcard:hover{
  border-color:var(--app-accent) !important;
  transform:translateY(-2px);
  box-shadow:var(--app-shadow-card), 0 14px 32px -16px var(--app-accent-glow) !important;
}

/* v5.10-APP-PAGE-DASHBOARD — responsive: small screens drop hero padding */
@media(max-width:680px){
  .dash-page .dash-hero-wrap > .page-head.dash-hero-head{
    padding:20px 18px !important;
    flex-direction:column;
    align-items:flex-start !important;
  }
  .dash-page .dash-hero-wrap > .page-head.dash-hero-head h1{
    font-size:22px !important;
  }
  .dash-page .bento.dash-bento .card.stat.dash-stat .big{
    font-size:30px !important;
  }
  .dash-page .bento.dash-bento .card.stat.dash-stat .dash-stat-glyph{
    width:28px;
    height:28px;
    font-size:14px;
  }
}

/* v5.10-APP-PAGE-DASHBOARD — reduced motion: drop hero animations */
@media (prefers-reduced-motion: reduce){
  .dash-page,
  .dash-page .dash-hero-wrap .dash-aurora,
  .dash-page .dash-hero-wrap > .page-head.dash-hero-head p::before{
    animation:none !important;
  }
  .dash-page .bento.dash-bento .card.stat.dash-stat:hover{
    transform:none !important;
  }
  .dash-page .bento.dash-bento .prodcard:hover{
    transform:none !important;
  }
}

/* ================ v5.10-APP-PAGE-USERS ================ */
/* User-Management — userprofile-card-list mit Role-Pills, Avatar-Glow,
   Hover-Lift und Chevron-Reveal. Scoped unter .app-page-users.
   Nutzt nur --app-* Tokens (global via v5.10-APP-CHROME duplicate auf :root).
   Alle Selectoren in diesem Block tragen den Marker v5.10-APP-PAGE-USERS. */

/* v5.10-APP-PAGE-USERS — page root: vertical stack mit breathing space */
.app-page-users.up-mgmt{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:4px 2px 24px;
  color:var(--app-text);
}

/* v5.10-APP-PAGE-USERS — head row aligns title + create button */
.app-page-users .page-head.up-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin:6px 2px 4px;
}
.app-page-users .page-head.up-head h1{
  font-size:26px;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--app-text);
  background:linear-gradient(135deg, var(--app-text), var(--app-text-muted));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.app-page-users .page-head.up-head p{
  color:var(--app-text-muted);
  font-size:13px;
  margin-top:3px;
  letter-spacing:.01em;
}

/* v5.10-APP-PAGE-USERS — create button: prominent accent CTA */
.app-page-users .page-head.up-head .btn.up-create{
  padding:10px 18px;
  border-radius:999px;
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.01em;
  background:linear-gradient(135deg, var(--app-accent), #7fb8ff);
  color:#0a1224;
  border:1px solid transparent;
  box-shadow:
    0 12px 28px -12px var(--app-accent-glow),
    0 1px 0 rgba(255,255,255,0.25) inset;
}
.app-page-users .page-head.up-head .btn.up-create:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
  box-shadow:
    0 16px 34px -12px var(--app-accent-glow),
    0 1px 0 rgba(255,255,255,0.3) inset;
}

/* v5.10-APP-PAGE-USERS — outer glass card */
.app-page-users .card.up-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 40%),
    var(--app-surface-1);
  border:1px solid var(--app-border-1);
  border-radius:var(--app-r-lg);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
  padding:14px;
  position:relative;
  overflow:hidden;
}
.app-page-users .card.up-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--app-border-1), transparent);
  pointer-events:none;
}

/* v5.10-APP-PAGE-USERS — list container: card list rhythm */
.app-page-users .clist.up-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* v5.10-APP-PAGE-USERS — user row: glass profile card */
.app-page-users .crow.up-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 60%),
    var(--app-surface-0);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  position:relative;
  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
  overflow:hidden;
}
.app-page-users .crow.up-row::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:transparent;
  transition:background .18s ease, box-shadow .18s ease;
}
.app-page-users .crow.up-row:hover{
  border-color:var(--app-border-1);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 60%),
    var(--app-surface-1);
  transform:translateY(-1px);
  box-shadow:
    0 14px 32px -18px rgba(0,0,0,0.7),
    0 0 0 1px var(--app-border-0);
}

/* v5.10-APP-PAGE-USERS — admin row accent rail */
.app-page-users .crow.up-row.up-row--admin::before{
  background:var(--app-accent);
  box-shadow:0 0 12px var(--app-accent-glow);
}
.app-page-users .crow.up-row.up-row--admin:hover{
  border-color:var(--app-accent);
  box-shadow:
    0 14px 32px -18px rgba(0,0,0,0.7),
    0 0 0 1px var(--app-accent-soft);
}

/* v5.10-APP-PAGE-USERS — user row subtle accent on hover */
.app-page-users .crow.up-row.up-row--user:hover::before{
  background:var(--app-text-muted);
  opacity:.4;
}

/* v5.10-APP-PAGE-USERS — avatar bubble: bigger, glow, gradient */
.app-page-users .avatar.up-avatar{
  width:38px !important;
  height:38px !important;
  font-size:15px !important;
  border-radius:50%;
  background:linear-gradient(135deg, var(--app-accent), #a06bff);
  color:#fff;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:
    0 6px 16px -6px var(--app-accent-glow),
    0 1px 0 rgba(255,255,255,0.2) inset;
  border:1px solid var(--app-border-1);
  transition:transform .18s ease, box-shadow .18s ease;
}
.app-page-users .crow.up-row:hover .avatar.up-avatar{
  transform:scale(1.04);
  box-shadow:
    0 8px 20px -6px var(--app-accent-glow),
    0 1px 0 rgba(255,255,255,0.3) inset;
}
.app-page-users .crow.up-row.up-row--admin .avatar.up-avatar{
  background:linear-gradient(135deg, var(--app-accent), #4d9fff);
  box-shadow:
    0 6px 18px -6px var(--app-accent-glow),
    0 0 0 2px var(--app-accent-soft),
    0 1px 0 rgba(255,255,255,0.25) inset;
}

/* v5.10-APP-PAGE-USERS — body block with name + meta */
.app-page-users .up-body{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1;
}
.app-page-users .up-body .cname.up-name{
  font-weight:700;
  font-size:14.5px;
  color:var(--app-text);
  letter-spacing:-.01em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.app-page-users .up-body .cmeta.up-meta{
  color:var(--app-text-muted);
  font-size:12.5px;
  letter-spacing:.01em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* v5.10-APP-PAGE-USERS — role pill: capsule with token-driven color */
.app-page-users .pill.up-pill{
  margin-left:auto;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
  border:1px solid var(--app-border-1);
  background:var(--app-surface-1);
  color:var(--app-text-muted);
  transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.app-page-users .pill.up-pill.up-pill--admin{
  background:var(--app-accent-soft) !important;
  color:var(--app-accent) !important;
  border-color:var(--app-accent) !important;
  box-shadow:
    0 0 0 3px rgba(94,192,255,0.06),
    0 4px 14px -6px var(--app-accent-glow);
}
.app-page-users .pill.up-pill.up-pill--admin::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--app-accent);
  box-shadow:0 0 8px var(--app-accent-glow);
  flex-shrink:0;
}
.app-page-users .pill.up-pill.up-pill--user{
  background:var(--app-surface-1) !important;
  color:var(--app-text-muted) !important;
  border-color:var(--app-border-1) !important;
}
.app-page-users .pill.up-pill.up-pill--user::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--app-text-muted);
  opacity:.6;
  flex-shrink:0;
}

/* v5.10-APP-PAGE-USERS — chevron indicator on the right */
.app-page-users .up-chev{
  color:var(--app-text-muted);
  opacity:.5;
  font-size:20px;
  margin-left:6px;
  transition:transform .18s ease, opacity .18s ease, color .18s ease;
  flex-shrink:0;
  font-weight:300;
  line-height:1;
}
.app-page-users .crow.up-row:hover .up-chev{
  opacity:1;
  color:var(--app-accent);
  transform:translateX(3px);
}

/* v5.10-APP-PAGE-USERS — empty state */
.app-page-users .up-empty{
  text-align:center;
  padding:38px 24px;
  color:var(--app-text-muted);
  font-size:13.5px;
  background:var(--app-surface-0);
  border:1px dashed var(--app-border-1);
  border-radius:var(--app-r-md);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
}

/* v5.10-APP-PAGE-USERS — spinner area uses app tokens */
.app-page-users > .center{
  padding:48px 0;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* v5.10-APP-PAGE-USERS — responsive: tighten on narrow viewports */
@media(max-width:680px){
  .app-page-users .card.up-card{
    padding:10px;
  }
  .app-page-users .crow.up-row{
    padding:12px 12px;
    gap:11px;
  }
  .app-page-users .avatar.up-avatar{
    width:34px !important;
    height:34px !important;
    font-size:13.5px !important;
  }
  .app-page-users .pill.up-pill{
    padding:4px 9px;
    font-size:10px;
    letter-spacing:.1em;
  }
  .app-page-users .up-chev{
    display:none;
  }
  .app-page-users .page-head.up-head{
    flex-direction:column;
    align-items:stretch;
  }
  .app-page-users .page-head.up-head .btn.up-create{
    width:100%;
    justify-content:center;
  }
}

/* ================ v5.10-APP-PAGE-MCPERMS ================
   Bridge-Rechte page polish — scoped to .mcperms-page wrapper only.
   Layout, spacing, glass surfaces — keine JS / v-* / ID-Aenderungen. */

/* v5.10-APP-PAGE-MCPERMS — page root: comfy column spacing */
.mcperms-page{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:2px;
}

/* v5.10-APP-PAGE-MCPERMS — header reskinned as glass capsule */
.mcperms-page > .page-head.mcperms-head{
  margin:6px 4px 4px !important;
  padding:14px 18px !important;
  border:1px solid var(--app-border-1);
  border-radius:var(--app-r-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 60%),
    var(--app-surface-1);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
  display:flex !important;
  align-items:center !important;
  gap:14px;
}
.mcperms-page > .page-head.mcperms-head h1{
  font-size:20px !important;
  font-weight:700 !important;
  letter-spacing:-.01em;
  color:var(--app-text);
}
.mcperms-page > .page-head.mcperms-head p{
  font-size:12.5px !important;
  color:var(--app-text-muted) !important;
  margin-top:3px !important;
}
.mcperms-page > .page-head.mcperms-head .btn.ghost{
  background:var(--app-surface-0) !important;
  color:var(--app-text) !important;
  border:1px solid var(--app-border-1) !important;
  border-radius:var(--app-r-md) !important;
  padding:8px 14px !important;
  font-size:12.5px !important;
  transition:.16s;
}
.mcperms-page > .page-head.mcperms-head .btn.ghost:hover{
  border-color:var(--app-accent) !important;
  background:var(--app-accent-soft) !important;
}

/* v5.10-APP-PAGE-MCPERMS — HOME grid: 3 hero tiles */
.mcperms-page .mcperms-home-grid{
  padding:0 4px;
}
.mcperms-page .mcperms-home-grid .card.mcperms-tile{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 50%),
    var(--app-surface-1);
  border:1px solid var(--app-border-1);
  border-radius:var(--app-r-lg);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  position:relative;
  overflow:hidden;
}
.mcperms-page .mcperms-home-grid .card.mcperms-tile::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(420px 220px at 50% -20%, var(--app-accent-soft), transparent 60%);
  opacity:0;
  transition:opacity .22s ease;
}
.mcperms-page .mcperms-home-grid .card.mcperms-tile:hover{
  transform:translateY(-3px);
  border-color:var(--app-accent);
  box-shadow:0 18px 40px -22px var(--app-accent-glow), var(--app-shadow-card);
}
.mcperms-page .mcperms-home-grid .card.mcperms-tile:hover::before{ opacity:1; }
.mcperms-page .mcperms-home-grid .card.mcperms-tile .mcperms-tile-ico{
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.45));
}
.mcperms-page .mcperms-home-grid .card.mcperms-tile h3{
  color:var(--app-text);
  font-weight:700;
  letter-spacing:-.005em;
}
.mcperms-page .mcperms-home-grid .card.mcperms-tile .muted{
  color:var(--app-text-muted) !important;
}
.mcperms-page .mcperms-home-grid .card.mcperms-tile .pill.mcperms-tile-count{
  background:var(--app-accent-soft) !important;
  color:var(--app-accent) !important;
  border:1px solid rgba(94,192,255,0.22);
  border-radius:999px !important;
  font-weight:700;
  padding:4px 11px;
  letter-spacing:.02em;
}

/* v5.10-APP-PAGE-MCPERMS — split layout: list pane (left) + detail pane (right) */
.mcperms-page .mcperms-split{
  padding:0 2px;
}
.mcperms-page .mcperms-split .card.mcperms-list-pane,
.mcperms-page .mcperms-split .card.mcperms-detail-pane{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 55%),
    var(--app-surface-0);
  border:1px solid var(--app-border-1);
  border-radius:var(--app-r-lg);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
  transition:border-color .16s ease;
}

/* v5.10-APP-PAGE-MCPERMS — list pane: scoped scrollbar + search input polish */
.mcperms-page .mcperms-split .card.mcperms-list-pane{
  scrollbar-width:thin;
}
.mcperms-page .mcperms-split .card.mcperms-list-pane > div{
  scrollbar-width:thin;
}
.mcperms-page .mcperms-split .card.mcperms-list-pane > div::-webkit-scrollbar{ width:6px; }
.mcperms-page .mcperms-split .card.mcperms-list-pane > div::-webkit-scrollbar-thumb{
  background:var(--app-border-1);
  border-radius:3px;
}
.mcperms-page .mcperms-split .card.mcperms-list-pane > div::-webkit-scrollbar-thumb:hover{
  background:var(--app-accent-soft);
}
.mcperms-page .mcperms-split .card.mcperms-list-pane > input{
  background:var(--app-surface-1) !important;
  border:1px solid var(--app-border-1) !important;
  border-radius:var(--app-r-md) !important;
  color:var(--app-text) !important;
  padding:9px 13px !important;
  font-size:13px !important;
  transition:border-color .16s, box-shadow .16s;
}
.mcperms-page .mcperms-split .card.mcperms-list-pane > input::placeholder{
  color:var(--app-text-muted);
}
.mcperms-page .mcperms-split .card.mcperms-list-pane > input:focus{
  outline:none !important;
  border-color:var(--app-accent) !important;
  box-shadow:0 0 0 3px var(--app-accent-soft) !important;
}

/* v5.10-APP-PAGE-MCPERMS — list rows: soft hover, accent-tinted borders */
.mcperms-page .mcperms-split .card.mcperms-list-pane > div > div{
  border-radius:var(--app-r-md) !important;
  transition:background .14s ease, border-color .14s ease;
}
.mcperms-page .mcperms-split .card.mcperms-list-pane > div > div[style*="border:1px solid var(--border)"]{
  border-color:var(--app-border-0) !important;
}
.mcperms-page .mcperms-split .card.mcperms-list-pane > div > div:hover{
  border-color:var(--app-border-1) !important;
}

/* v5.10-APP-PAGE-MCPERMS — list pane "Neuer Rang" primary button */
.mcperms-page .mcperms-split-ranks .card.mcperms-list-pane > button.btn{
  background:linear-gradient(135deg, var(--app-accent), #4aa9ed) !important;
  color:#04121e !important;
  border:0 !important;
  border-radius:var(--app-r-md) !important;
  padding:9px 14px !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  box-shadow:0 8px 20px -10px var(--app-accent-glow);
  transition:transform .14s ease, box-shadow .14s ease;
}
.mcperms-page .mcperms-split-ranks .card.mcperms-list-pane > button.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px -10px var(--app-accent-glow);
}

/* v5.10-APP-PAGE-MCPERMS — detail pane: scoped scrollbar */
.mcperms-page .mcperms-split .card.mcperms-detail-pane{
  scrollbar-width:thin;
}
.mcperms-page .mcperms-split .card.mcperms-detail-pane::-webkit-scrollbar{ width:7px; }
.mcperms-page .mcperms-split .card.mcperms-detail-pane::-webkit-scrollbar-thumb{
  background:var(--app-border-1);
  border-radius:4px;
}
.mcperms-page .mcperms-split .card.mcperms-detail-pane::-webkit-scrollbar-thumb:hover{
  background:var(--app-accent-soft);
}

/* v5.10-APP-PAGE-MCPERMS — detail pane typography polish */
.mcperms-page .mcperms-split .card.mcperms-detail-pane h2{
  color:var(--app-text);
  letter-spacing:-.01em;
}
.mcperms-page .mcperms-split .card.mcperms-detail-pane h3{
  color:var(--app-text);
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.01em;
  display:flex;
  align-items:center;
  gap:8px;
}
.mcperms-page .mcperms-split .card.mcperms-detail-pane code{
  background:var(--app-bg-1);
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-sm);
  padding:1px 6px;
  font-size:11.5px;
  color:var(--app-accent);
}

/* v5.10-APP-PAGE-MCPERMS — empty-state placeholder */
.mcperms-page .mcperms-split .card.mcperms-detail-pane .mcperms-empty{
  color:var(--app-text-muted) !important;
  font-size:14px;
  letter-spacing:.02em;
  opacity:.85;
}

/* v5.10-APP-PAGE-MCPERMS — inputs inside detail pane */
.mcperms-page .mcperms-split .card.mcperms-detail-pane input,
.mcperms-page .mcperms-split .card.mcperms-detail-pane select{
  background:var(--app-surface-1) !important;
  border:1px solid var(--app-border-1) !important;
  border-radius:var(--app-r-md) !important;
  color:var(--app-text) !important;
  padding:9px 12px !important;
  font-size:13px !important;
  transition:border-color .16s, box-shadow .16s;
}
.mcperms-page .mcperms-split .card.mcperms-detail-pane input::placeholder{
  color:var(--app-text-muted);
}
.mcperms-page .mcperms-split .card.mcperms-detail-pane input:focus,
.mcperms-page .mcperms-split .card.mcperms-detail-pane select:focus{
  outline:none !important;
  border-color:var(--app-accent) !important;
  box-shadow:0 0 0 3px var(--app-accent-soft) !important;
}

/* v5.10-APP-PAGE-MCPERMS — permission row borders consistent with token system */
.mcperms-page .mcperms-split .card.mcperms-detail-pane div[style*="border:1px solid var(--border)"]{
  border-color:var(--app-border-0) !important;
  border-radius:var(--app-r-md) !important;
  background:var(--app-bg-1);
  transition:border-color .14s ease;
}
.mcperms-page .mcperms-split .card.mcperms-detail-pane div[style*="border:1px dashed var(--border)"]{
  border-color:var(--app-border-0) !important;
  border-radius:var(--app-r-md) !important;
}

/* v5.10-APP-PAGE-MCPERMS — info-tinted server-context pill polish */
.mcperms-page .mcperms-split .card.mcperms-detail-pane .pill[style*="rgba(56,123,255"]{
  background:var(--app-accent-soft) !important;
  color:var(--app-accent) !important;
  border:1px solid rgba(94,192,255,0.22);
}

/* v5.10-APP-PAGE-MCPERMS — auto-sync hint banner softer */
.mcperms-page .mcperms-split .card.mcperms-detail-pane > div > div[style*="rgba(56,123,255,.06)"]{
  background:var(--app-accent-soft) !important;
  border:1px solid rgba(94,192,255,0.22) !important;
  border-radius:var(--app-r-md) !important;
  color:var(--app-text-muted);
}

/* v5.10-APP-PAGE-MCPERMS — responsive: stack split panes under 980px */
@media(max-width:980px){
  .mcperms-page .mcperms-split{
    grid-template-columns:1fr !important;
  }
  .mcperms-page .mcperms-split .card.mcperms-list-pane,
  .mcperms-page .mcperms-split .card.mcperms-detail-pane{
    height:auto !important;
    max-height:60vh;
  }
}

/* v5.10-APP-PAGE-MCPERMS — reduced motion */
@media (prefers-reduced-motion: reduce){
  .mcperms-page .mcperms-home-grid .card.mcperms-tile,
  .mcperms-page .mcperms-split-ranks .card.mcperms-list-pane > button.btn{
    transition:none !important;
  }
  .mcperms-page .mcperms-home-grid .card.mcperms-tile:hover{
    transform:none !important;
  }
}

/* ================ v5.10-APP-PAGE-CONTAINERS ================ */
/* Container/Produkt-Liste — schoenes Karten-Grid mit Glas-Effekt, Status-Glow,
   Hover-Lift und farbigen Statusrand. Tokens stammen aus v5.10-APP-CHROME. */

/* v5.10-APP-PAGE-CONTAINERS — page wrapper */
.app-page-containers{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding-bottom:18px;
}

/* v5.10-APP-PAGE-CONTAINERS — page head (overrides default page-head spacing inside this page only) */
.app-page-containers > .page-head.app-pc-head{
  margin:6px 2px 4px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}
.app-page-containers > .page-head.app-pc-head h1{
  font-size:28px;
  font-weight:800;
  letter-spacing:-.03em;
  background:linear-gradient(135deg, var(--app-text) 0%, var(--app-accent) 110%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.app-page-containers > .page-head.app-pc-head p{
  color:var(--app-text-muted);
  font-size:13.5px;
  margin-top:4px;
}

/* v5.10-APP-PAGE-CONTAINERS — create button accent */
.app-page-containers .btn.app-pc-create{
  background:linear-gradient(135deg, var(--app-accent) 0%, var(--app-accent-soft) 140%);
  border:1px solid var(--app-accent);
  color:#0a1422;
  font-weight:700;
  letter-spacing:.01em;
  padding:10px 18px;
  border-radius:var(--app-r-md);
  box-shadow:0 8px 26px -10px var(--app-accent-glow), 0 1px 0 rgba(255,255,255,0.18) inset;
  transition:transform .14s ease, box-shadow .18s ease, filter .18s ease;
}
.app-page-containers .btn.app-pc-create:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
  box-shadow:0 14px 36px -10px var(--app-accent-glow), 0 1px 0 rgba(255,255,255,0.22) inset;
}
.app-page-containers .btn.app-pc-create:active{transform:translateY(0)}

/* v5.10-APP-PAGE-CONTAINERS — body wrapper */
.app-page-containers .app-pc-body{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* v5.10-APP-PAGE-CONTAINERS — stack-card (gruppen) als floating glass panel */
.app-page-containers .card.app-pc-stack{
  position:relative;
  border:1px solid var(--app-border-1);
  border-radius:var(--app-r-lg);
  padding:18px 20px 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 35%),
    var(--app-surface-0);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
  overflow:hidden;
  isolation:isolate;
  transition:border-color .18s ease, box-shadow .25s ease;
}
.app-page-containers .card.app-pc-stack::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg, var(--app-accent-soft), transparent 22%);
  opacity:.55;
  pointer-events:none;
  z-index:0;
}
.app-page-containers .card.app-pc-stack > *{position:relative;z-index:1}
.app-page-containers .card.app-pc-stack:hover{
  border-color:var(--app-accent-glow);
  box-shadow:var(--app-shadow-card), 0 22px 50px -28px rgba(0,0,0,0.55);
}

/* v5.10-APP-PAGE-CONTAINERS — stack head titel */
.app-page-containers .card.app-pc-stack > h3.app-pc-stackhead{
  font-size:15.5px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--app-text);
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--app-border-0);
}
.app-page-containers .card.app-pc-stack > h3.app-pc-stackhead .col-chev{
  color:var(--app-text-muted);
  transition:color .15s, transform .18s;
}
.app-page-containers .card.app-pc-stack > h3.app-pc-stackhead:hover .col-chev{
  color:var(--app-accent);
}
.app-page-containers .app-pc-stackcount{
  color:var(--app-text-muted) !important;
  background:var(--app-surface-1);
  padding:2px 9px;
  border-radius:999px;
  border:1px solid var(--app-border-0);
  margin-left:auto;
}

/* v5.10-APP-PAGE-CONTAINERS — Grid mit Containerkarten */
.app-page-containers .clist.app-pc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:14px;
  flex-direction:initial;
}

/* v5.10-APP-PAGE-CONTAINERS — Container-Karte */
.app-page-containers .crow.app-pc-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px 14px 18px;
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 40%),
    var(--app-surface-1);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),
             border-color .18s ease,
             box-shadow .22s ease,
             background-color .22s ease;
}
.app-page-containers .crow.app-pc-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--app-text-muted);
  opacity:.4;
  transition:background .2s ease, opacity .2s ease, width .2s ease;
}
.app-page-containers .crow.app-pc-card.is-run::before{
  background:var(--app-success);
  opacity:.85;
  box-shadow:0 0 16px var(--app-success);
}
.app-page-containers .crow.app-pc-card.is-stop::before{
  background:var(--app-text-muted);
  opacity:.55;
}
.app-page-containers .crow.app-pc-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at top right, var(--app-accent-soft), transparent 55%);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
  z-index:0;
}
.app-page-containers .crow.app-pc-card > *{position:relative;z-index:1}
.app-page-containers .crow.app-pc-card:hover{
  transform:translateY(-2px);
  border-color:var(--app-accent-glow);
  box-shadow:0 18px 36px -20px rgba(0,0,0,0.7),
             0 0 0 1px var(--app-accent-glow) inset;
}
.app-page-containers .crow.app-pc-card:hover::after{opacity:1}
.app-page-containers .crow.app-pc-card:hover::before{width:4px}
.app-page-containers .crow.app-pc-card:active{transform:translateY(0)}

/* v5.10-APP-PAGE-CONTAINERS — Status dot polish */
.app-page-containers .crow.app-pc-card > .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  flex-shrink:0;
  position:relative;
}
.app-page-containers .crow.app-pc-card > .dot.run{
  background:var(--app-success);
  box-shadow:0 0 0 3px rgba(52,226,155,0.16), 0 0 14px var(--app-success);
  animation:appPcPulse 2.6s ease-in-out infinite;
}
.app-page-containers .crow.app-pc-card > .dot.stop{
  background:var(--app-text-muted);
  box-shadow:0 0 0 3px rgba(154,163,200,0.14);
  opacity:.7;
}
@keyframes appPcPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(52,226,155,0.16), 0 0 14px var(--app-success)}
  50%{box-shadow:0 0 0 5px rgba(52,226,155,0.10), 0 0 22px var(--app-success)}
}

/* v5.10-APP-PAGE-CONTAINERS — info block */
.app-page-containers .crow.app-pc-card .app-pc-info{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.app-page-containers .crow.app-pc-card .app-pc-info .cname{
  font-weight:700;
  font-size:14px;
  color:var(--app-text);
  letter-spacing:-.005em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:color .18s ease;
}
.app-page-containers .crow.app-pc-card:hover .app-pc-info .cname{
  color:#fff;
}
.app-page-containers .crow.app-pc-card .app-pc-info .cmeta{
  color:var(--app-text-muted);
  font-size:11.5px;
  font-family:var(--mono);
  letter-spacing:-.01em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  opacity:.82;
}

/* v5.10-APP-PAGE-CONTAINERS — action button cluster */
.app-page-containers .crow.app-pc-card .app-pc-actions{
  display:flex;
  align-items:center;
  gap:4px;
  opacity:.7;
  transition:opacity .18s ease;
  margin-left:auto;
}
.app-page-containers .crow.app-pc-card:hover .app-pc-actions{opacity:1}
.app-page-containers .crow.app-pc-card .app-pc-actions .btn.ghost.app-pc-btn{
  background:var(--app-surface-0);
  border:1px solid var(--app-border-0);
  color:var(--app-text-muted);
  border-radius:var(--app-r-sm);
  padding:7px 10px !important;
  font-size:13px;
  line-height:1;
  min-width:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.app-page-containers .crow.app-pc-card .app-pc-actions .btn.ghost.app-pc-btn:hover{
  background:var(--app-accent-soft);
  border-color:var(--app-accent);
  color:var(--app-text);
  transform:translateY(-1px);
}
.app-page-containers .crow.app-pc-card .app-pc-actions .btn.ghost.app-pc-btn:active{transform:translateY(0)}

/* v5.10-APP-PAGE-CONTAINERS — empty state */
.app-page-containers .card.app-pc-empty{
  border:1px dashed var(--app-border-1);
  background:var(--app-surface-0);
  border-radius:var(--app-r-lg);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
}

/* v5.10-APP-PAGE-CONTAINERS — responsive */
@media(max-width:880px){
  .app-page-containers .clist.app-pc-grid{
    grid-template-columns:1fr;
  }
  .app-page-containers > .page-head.app-pc-head{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .app-page-containers .btn.app-pc-create{align-self:stretch;justify-content:center}
}
@media(max-width:560px){
  .app-page-containers .crow.app-pc-card{padding:12px 12px 12px 16px}
  .app-page-containers .crow.app-pc-card .app-pc-actions{
    gap:3px;
  }
  .app-page-containers .crow.app-pc-card .app-pc-actions .btn.ghost.app-pc-btn{
    padding:6px 8px !important;
    min-width:30px;
  }
}

/* v5.10-APP-PAGE-CONTAINERS — reduce motion */
@media(prefers-reduced-motion:reduce){
  .app-page-containers .crow.app-pc-card,
  .app-page-containers .crow.app-pc-card::before,
  .app-page-containers .crow.app-pc-card::after,
  .app-page-containers .crow.app-pc-card > .dot.run,
  .app-page-containers .btn.app-pc-create,
  .app-page-containers .card.app-pc-stack{
    transition:none !important;
    animation:none !important;
  }
  .app-page-containers .crow.app-pc-card:hover{transform:none !important}
}

/* ================ v5.10-APP-PAGE-AUDIT ================ */
/* Operator-Console Audit-Log:
   monospace ticker feel for IP / time / action,
   tighter row rhythm than other pages,
   subtle accent glow on hover.
   Scoped to .app-audit; relies on global --app-* tokens. */

/* v5.10-APP-PAGE-AUDIT — outer page wrap: vertical flow + breathing rhythm */
.app-audit{
  display:flex;
  flex-direction:column;
  gap:14px;
  color:var(--app-text);
  --app-audit-mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --app-audit-row-h:46px;
}

/* v5.10-APP-PAGE-AUDIT — page-head as glass capsule with terminal accent */
.app-audit .page-head.app-audit-head{
  margin:0 4px 4px !important;
  padding:14px 18px !important;
  border:1px solid var(--app-border-1);
  border-radius:var(--app-r-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 60%),
    var(--app-surface-1);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
  position:relative;
  overflow:hidden;
}

/* v5.10-APP-PAGE-AUDIT — left accent stripe on page-head */
.app-audit .page-head.app-audit-head::before{
  content:"";
  position:absolute;
  left:0; top:10%; bottom:10%;
  width:3px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg, var(--app-accent), transparent);
  opacity:.75;
}

/* v5.10-APP-PAGE-AUDIT — head h1 */
.app-audit .page-head.app-audit-head h1{
  font-size:20px !important;
  font-weight:700 !important;
  letter-spacing:-.01em;
  color:var(--app-text);
}

/* v5.10-APP-PAGE-AUDIT — head subtitle */
.app-audit .page-head.app-audit-head p{
  color:var(--app-text-muted);
  font-size:13px;
  margin-top:2px;
}

/* v5.10-APP-PAGE-AUDIT — filter bar as glass row */
.app-audit .app-audit-filter{
  margin:0 4px !important;
  padding:10px 12px !important;
  border:1px solid var(--app-border-0);
  border-radius:var(--app-r-md);
  background:var(--app-surface-0);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  align-items:center;
}

/* v5.10-APP-PAGE-AUDIT — inputs in filter bar */
.app-audit .app-audit-filter input,
.app-audit .app-audit-filter select{
  background:var(--app-bg-1) !important;
  border:1px solid var(--app-border-1) !important;
  color:var(--app-text) !important;
  border-radius:var(--app-r-sm) !important;
  padding:8px 12px !important;
  font-size:13px !important;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

/* v5.10-APP-PAGE-AUDIT — search input gets mono treatment (it's a console) */
.app-audit .app-audit-filter input.app-audit-q,
.app-audit .app-audit-filter input.app-audit-user{
  font-family:var(--app-audit-mono);
  letter-spacing:-.005em;
}

/* v5.10-APP-PAGE-AUDIT — focus state with accent ring */
.app-audit .app-audit-filter input:focus,
.app-audit .app-audit-filter select:focus{
  outline:none !important;
  border-color:var(--app-accent) !important;
  box-shadow:0 0 0 3px var(--app-accent-soft) !important;
  background:var(--app-bg-0) !important;
}

/* v5.10-APP-PAGE-AUDIT — filter primary go-button */
.app-audit .app-audit-filter .btn.app-audit-go{
  background:linear-gradient(135deg, var(--app-accent), #7fb8ff) !important;
  color:#08111e !important;
  border:1px solid var(--app-accent) !important;
  border-radius:var(--app-r-sm) !important;
  padding:8px 16px !important;
  font-weight:600;
  box-shadow:0 6px 18px -8px var(--app-accent-glow);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.app-audit .app-audit-filter .btn.app-audit-go:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px -10px var(--app-accent-glow);
  filter:brightness(1.05);
}
.app-audit .app-audit-filter .btn.app-audit-go:active{
  transform:translateY(0);
}

/* v5.10-APP-PAGE-AUDIT — filter ghost reset button */
.app-audit .app-audit-filter .btn.ghost.app-audit-reset{
  background:transparent !important;
  border:1px solid var(--app-border-1) !important;
  color:var(--app-text-muted) !important;
  border-radius:var(--app-r-sm) !important;
  padding:8px 14px !important;
  transition:color .14s ease, border-color .14s ease, background .14s ease;
}
.app-audit .app-audit-filter .btn.ghost.app-audit-reset:hover{
  color:var(--app-text) !important;
  border-color:var(--app-border-1) !important;
  background:var(--app-surface-0) !important;
}

/* v5.10-APP-PAGE-AUDIT — loading center */
.app-audit .center.app-audit-loading{
  padding:42px 0;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* v5.10-APP-PAGE-AUDIT — main table card */
.app-audit .card.app-audit-table{
  margin:0 4px !important;
  border:1px solid var(--app-border-1) !important;
  border-radius:var(--app-r-lg) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%),
    var(--app-surface-1) !important;
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card) !important;
  overflow:hidden !important;
}

/* v5.10-APP-PAGE-AUDIT — column header strip */
.app-audit .app-audit-table .app-audit-thead{
  background:
    linear-gradient(180deg, rgba(94,192,255,0.05), transparent 80%),
    var(--app-bg-1) !important;
  border-bottom:1px solid var(--app-border-1) !important;
  color:var(--app-text-muted) !important;
  font-family:var(--app-audit-mono) !important;
  font-size:11px !important;
  letter-spacing:.08em !important;
  padding:12px 18px !important;
  position:sticky;
  top:0;
  z-index:2;
}

/* v5.10-APP-PAGE-AUDIT — body scroll region */
.app-audit .app-audit-table .app-audit-tbody{
  background:transparent;
}

/* v5.10-APP-PAGE-AUDIT — scrollbar polish for body */
.app-audit .app-audit-table .app-audit-tbody::-webkit-scrollbar{
  width:10px;
}
.app-audit .app-audit-table .app-audit-tbody::-webkit-scrollbar-thumb{
  background:rgba(94,192,255,0.18);
  border-radius:10px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.app-audit .app-audit-table .app-audit-tbody::-webkit-scrollbar-thumb:hover{
  background:rgba(94,192,255,0.32);
  background-clip:padding-box;
}

/* v5.10-APP-PAGE-AUDIT — row base look + zebra fade */
.app-audit .app-audit-table .app-audit-row{
  border-bottom:1px solid var(--app-border-0) !important;
  padding:12px 18px !important;
  color:var(--app-text);
  transition:background-color .14s ease, box-shadow .14s ease;
  position:relative;
  font-family:var(--app-audit-mono);
  font-size:12.5px !important;
}

/* v5.10-APP-PAGE-AUDIT — subtle zebra */
.app-audit .app-audit-table .app-audit-row:nth-child(even){
  background:rgba(255,255,255,0.012);
}

/* v5.10-APP-PAGE-AUDIT — row hover: accent glow + tiny left rail */
.app-audit .app-audit-table .app-audit-row:hover{
  background:var(--app-accent-soft);
  box-shadow:inset 3px 0 0 var(--app-accent);
}

/* v5.10-APP-PAGE-AUDIT — last row drops the separator */
.app-audit .app-audit-table .app-audit-row:last-child{
  border-bottom:none !important;
}

/* v5.10-APP-PAGE-AUDIT — action cell: pill-ish label with accent text */
.app-audit .app-audit-table .app-audit-row .app-audit-action-cell{
  color:var(--app-accent) !important;
  font-family:var(--app-audit-mono) !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.02em;
  text-transform:lowercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-right:10px;
}

/* v5.10-APP-PAGE-AUDIT — user cell: lighter, monospaced */
.app-audit .app-audit-table .app-audit-row .app-audit-user-cell{
  color:var(--app-text) !important;
  font-family:var(--app-audit-mono);
  font-size:12.5px;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding-right:10px;
}

/* v5.10-APP-PAGE-AUDIT — target column */
.app-audit .app-audit-table .app-audit-row .app-audit-target{
  padding-right:14px;
}

/* v5.10-APP-PAGE-AUDIT — main target line (proportional, easier scanning) */
.app-audit .app-audit-table .app-audit-row .app-audit-target-main{
  color:var(--app-text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif;
  font-size:13px;
  font-weight:500;
}

/* v5.10-APP-PAGE-AUDIT — sub detail line */
.app-audit .app-audit-table .app-audit-row .app-audit-target-sub{
  color:var(--app-text-muted) !important;
  font-family:var(--app-audit-mono);
  font-size:11.5px !important;
  margin-top:2px;
  opacity:.85;
}

/* v5.10-APP-PAGE-AUDIT — IP/time meta column */
.app-audit .app-audit-table .app-audit-row .app-audit-meta{
  color:var(--app-text-muted) !important;
  font-family:var(--app-audit-mono);
  font-size:11px !important;
  line-height:1.4;
}

/* v5.10-APP-PAGE-AUDIT — IP line (slightly more visible) */
.app-audit .app-audit-table .app-audit-row .app-audit-meta .app-audit-ip{
  color:var(--app-text);
  font-weight:600;
  opacity:.85;
}

/* v5.10-APP-PAGE-AUDIT — time line (muted) */
.app-audit .app-audit-table .app-audit-row .app-audit-meta .app-audit-time{
  color:var(--app-text-muted);
  opacity:.75;
  margin-top:1px;
}

/* v5.10-APP-PAGE-AUDIT — empty state */
.app-audit .app-audit-table .app-audit-empty{
  color:var(--app-text-muted) !important;
  font-family:var(--app-audit-mono);
  font-size:13px !important;
  padding:48px 24px !important;
  letter-spacing:.02em;
  opacity:.7;
}

/* v5.10-APP-PAGE-AUDIT — pager strip */
.app-audit .app-audit-table .app-audit-pager{
  background:
    linear-gradient(0deg, rgba(0,0,0,0.18), transparent),
    var(--app-bg-1) !important;
  border-top:1px solid var(--app-border-1) !important;
  padding:12px 18px !important;
}

/* v5.10-APP-PAGE-AUDIT — pager ghost buttons */
.app-audit .app-audit-table .app-audit-pager .btn.ghost{
  background:transparent !important;
  border:1px solid var(--app-border-1) !important;
  color:var(--app-text) !important;
  border-radius:var(--app-r-sm) !important;
  padding:7px 14px !important;
  font-size:12.5px;
  font-family:var(--app-audit-mono);
  transition:background .14s ease, border-color .14s ease, color .14s ease, opacity .14s ease;
}
.app-audit .app-audit-table .app-audit-pager .btn.ghost:hover:not(:disabled){
  background:var(--app-accent-soft) !important;
  border-color:var(--app-accent) !important;
  color:var(--app-accent) !important;
}
.app-audit .app-audit-table .app-audit-pager .btn.ghost:disabled{
  opacity:.35;
  cursor:not-allowed;
}

/* v5.10-APP-PAGE-AUDIT — pager info label centered */
.app-audit .app-audit-table .app-audit-pager .app-audit-pg-info{
  flex:1;
  text-align:center;
  color:var(--app-text-muted) !important;
  font-family:var(--app-audit-mono);
  letter-spacing:.02em;
  font-size:12px !important;
}

/* v5.10-APP-PAGE-AUDIT — responsive: tighter columns below 980px */
@media (max-width:980px){
  .app-audit .app-audit-table .app-audit-thead,
  .app-audit .app-audit-table .app-audit-row{
    grid-template-columns:140px 110px 1fr 110px !important;
    padding:10px 12px !important;
  }
}

/* v5.10-APP-PAGE-AUDIT — responsive: stack filter bar below 720px */
@media (max-width:720px){
  .app-audit .app-audit-filter{
    flex-direction:column;
    align-items:stretch;
  }
  .app-audit .app-audit-filter input,
  .app-audit .app-audit-filter select,
  .app-audit .app-audit-filter .btn{
    width:100% !important;
  }
  .app-audit .app-audit-table .app-audit-thead,
  .app-audit .app-audit-table .app-audit-row{
    grid-template-columns:110px 90px 1fr 100px !important;
    padding:9px 10px !important;
    font-size:11.5px !important;
  }
  .app-audit .app-audit-table .app-audit-row .app-audit-target-main{
    font-size:12px;
  }
}

/* v5.10-APP-PAGE-AUDIT — reduced motion */
@media (prefers-reduced-motion: reduce){
  .app-audit .app-audit-table .app-audit-row,
  .app-audit .app-audit-filter input,
  .app-audit .app-audit-filter select,
  .app-audit .app-audit-filter .btn,
  .app-audit .app-audit-table .app-audit-pager .btn.ghost{
    transition:none !important;
  }
  .app-audit .app-audit-filter .btn.app-audit-go:hover{
    transform:none !important;
  }
}

/* ================ v5.10-APP-PAGE-REQUESTS ================ */
/* Service-Anfragen Page — Approve/Reject mit prominenten Aktionen.
   Alle Selectoren in diesem Block tragen den Marker v5.10-APP-PAGE-REQUESTS.
   Verwendet ausschliesslich --app-* Tokens aus dem v5.10-APP-BASE/CHROME Block. */

/* v5.10-APP-PAGE-REQUESTS — Tokens auch lokal als Alias (Fallback auf v5.10-APP-BASE) */
.apr-page{
  --apr-bg-0: var(--app-bg-0, #060810);
  --apr-bg-1: var(--app-bg-1, #0a0d18);
  --apr-surface-0: var(--app-surface-0, rgba(15,20,35,0.5));
  --apr-surface-1: var(--app-surface-1, rgba(20,26,42,0.7));
  --apr-border-0: var(--app-border-0, rgba(255,255,255,0.07));
  --apr-border-1: var(--app-border-1, rgba(255,255,255,0.10));
  --apr-accent: var(--app-accent, #5ec0ff);
  --apr-accent-soft: var(--app-accent-soft, rgba(94,192,255,0.12));
  --apr-accent-glow: var(--app-accent-glow, rgba(94,192,255,0.28));
  --apr-success: var(--app-success, #34e29b);
  --apr-warn: var(--app-warn, #ffb84d);
  --apr-danger: var(--app-danger, #ff5c7c);
  --apr-text: var(--app-text, #e8ecf5);
  --apr-text-muted: var(--app-text-muted, #9aa3c8);
  --apr-r-sm: var(--app-r-sm, 8px);
  --apr-r-md: var(--app-r-md, 12px);
  --apr-r-lg: var(--app-r-lg, 16px);
  --apr-shadow-card: var(--app-shadow-card, 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6));
  --apr-blur: var(--app-blur, blur(14px) saturate(140%));
}
.apr-modal-overlay{
  --apr-bg-0: var(--app-bg-0, #060810);
  --apr-bg-1: var(--app-bg-1, #0a0d18);
  --apr-surface-0: var(--app-surface-0, rgba(15,20,35,0.5));
  --apr-surface-1: var(--app-surface-1, rgba(20,26,42,0.7));
  --apr-border-0: var(--app-border-0, rgba(255,255,255,0.07));
  --apr-border-1: var(--app-border-1, rgba(255,255,255,0.10));
  --apr-accent: var(--app-accent, #5ec0ff);
  --apr-success: var(--app-success, #34e29b);
  --apr-danger: var(--app-danger, #ff5c7c);
  --apr-text: var(--app-text, #e8ecf5);
  --apr-text-muted: var(--app-text-muted, #9aa3c8);
  --apr-r-sm: var(--app-r-sm, 8px);
  --apr-r-md: var(--app-r-md, 12px);
  --apr-r-lg: var(--app-r-lg, 16px);
  --apr-shadow-card: var(--app-shadow-card, 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6));
  --apr-blur: var(--app-blur, blur(14px) saturate(140%));
}

/* v5.10-APP-PAGE-REQUESTS — page container baseline */
.apr-page{
  color:var(--apr-text);
  padding-bottom:18px;
}
.apr-page .page-head h1{
  background:linear-gradient(135deg, var(--apr-text) 0%, var(--apr-accent) 130%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.apr-page .page-head p{
  color:var(--apr-text-muted);
}

/* v5.10-APP-PAGE-REQUESTS — FTP request card (glass surface with accent rail) */
.apr-page .card.apr-ftp-card{
  background:linear-gradient(180deg, var(--apr-surface-1), var(--apr-surface-0));
  border:1px solid var(--apr-border-1);
  border-radius:var(--apr-r-lg);
  box-shadow:var(--apr-shadow-card);
  -webkit-backdrop-filter:var(--apr-blur);
  backdrop-filter:var(--apr-blur);
  position:relative;
  overflow:hidden;
}
.apr-page .card.apr-ftp-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(180deg, var(--apr-warn), var(--apr-accent));
  opacity:.85;
  pointer-events:none;
}
.apr-page .card.apr-ftp-card > h3{
  color:var(--apr-text);
  font-size:14px;
  letter-spacing:.2px;
  margin-bottom:10px;
}

/* v5.10-APP-PAGE-REQUESTS — filter bar pills */
.apr-page .apr-filterbar{
  padding:6px;
  background:var(--apr-surface-0);
  border:1px solid var(--apr-border-0);
  border-radius:999px;
  -webkit-backdrop-filter:var(--apr-blur);
  backdrop-filter:var(--apr-blur);
  width:fit-content;
  max-width:100%;
  gap:4px !important;
}
.apr-page .apr-filterbar .btn.apr-filter-btn{
  border-radius:999px !important;
  padding:8px 16px !important;
  background:transparent;
  border:1px solid transparent !important;
  color:var(--apr-text-muted);
  font-weight:600;
  font-size:13px;
  letter-spacing:.1px;
  transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.apr-page .apr-filterbar .btn.apr-filter-btn:hover{
  color:var(--apr-text);
  background:var(--apr-surface-1);
  border-color:var(--apr-border-0) !important;
}
.apr-page .apr-filterbar .btn.apr-filter-btn.apr-filter-on{
  color:#fff !important;
  background:var(--apr-surface-1);
  box-shadow:0 0 0 1px var(--apr-border-1) inset, 0 6px 18px -10px rgba(0,0,0,.6);
}
.apr-page .apr-filterbar .btn.apr-filter-btn.apr-filter-pending.apr-filter-on{
  background:linear-gradient(180deg, rgba(255,184,77,.18), rgba(255,184,77,.08));
  box-shadow:0 0 0 1px rgba(255,184,77,.45) inset, 0 8px 22px -10px rgba(255,184,77,.35);
}
.apr-page .apr-filterbar .btn.apr-filter-btn.apr-filter-approved.apr-filter-on{
  background:linear-gradient(180deg, rgba(52,226,155,.18), rgba(52,226,155,.08));
  box-shadow:0 0 0 1px rgba(52,226,155,.45) inset, 0 8px 22px -10px rgba(52,226,155,.35);
}
.apr-page .apr-filterbar .btn.apr-filter-btn.apr-filter-rejected.apr-filter-on{
  background:linear-gradient(180deg, rgba(255,92,124,.18), rgba(255,92,124,.08));
  box-shadow:0 0 0 1px rgba(255,92,124,.45) inset, 0 8px 22px -10px rgba(255,92,124,.35);
}
.apr-page .apr-filterbar .btn.apr-filter-btn.apr-filter-all.apr-filter-on{
  background:linear-gradient(180deg, var(--apr-accent-soft), rgba(94,192,255,.06));
  box-shadow:0 0 0 1px var(--apr-accent-glow) inset, 0 8px 22px -10px var(--apr-accent-glow);
}

/* v5.10-APP-PAGE-REQUESTS — main request list card */
.apr-page .card.apr-list-card{
  background:linear-gradient(180deg, var(--apr-surface-1), var(--apr-surface-0));
  border:1px solid var(--apr-border-1);
  border-radius:var(--apr-r-lg);
  box-shadow:var(--apr-shadow-card);
  -webkit-backdrop-filter:var(--apr-blur);
  backdrop-filter:var(--apr-blur);
  padding:6px;
}
.apr-page .card.apr-list-card > .clist{
  display:flex;
  flex-direction:column;
  gap:2px;
}

/* v5.10-APP-PAGE-REQUESTS — single request row */
.apr-page .crow.apr-req-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:var(--apr-r-md);
  border:1px solid transparent;
  background:transparent;
  transition:background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
  position:relative;
}
.apr-page .crow.apr-req-row + .crow.apr-req-row{
  border-top:1px solid var(--apr-border-0);
}
.apr-page .crow.apr-req-row:hover{
  background:var(--apr-surface-0);
  border-color:var(--apr-border-1);
  box-shadow:0 6px 20px -12px rgba(0,0,0,.55);
  border-top-color:var(--apr-border-1);
}
.apr-page .crow.apr-req-row .cname{
  color:var(--apr-text);
  font-weight:600;
  font-size:14px;
}
.apr-page .crow.apr-req-row .cmeta{
  color:var(--apr-text-muted);
  font-size:12.5px;
  margin-top:2px;
}
.apr-page .crow.apr-req-row .apr-chev{
  color:var(--apr-text-muted);
  opacity:.6;
  transition:opacity .15s ease, transform .15s ease;
}
.apr-page .crow.apr-req-row:hover .apr-chev{
  opacity:1;
  transform:translateX(2px);
}

/* v5.10-APP-PAGE-REQUESTS — status pill */
.apr-page .pill.apr-status-pill{
  font-weight:700;
  font-size:11px;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:999px;
  white-space:nowrap;
}

/* v5.10-APP-PAGE-REQUESTS — Approve / Reject prominent action buttons */
.apr-page .btn.apr-btn-approve{
  background:linear-gradient(180deg, var(--apr-success), color-mix(in srgb, var(--apr-success) 75%, #000));
  color:#06251a !important;
  border:1px solid color-mix(in srgb, var(--apr-success) 70%, #ffffff 0%) !important;
  font-weight:700;
  letter-spacing:.2px;
  box-shadow:0 0 0 1px rgba(52,226,155,.25) inset, 0 8px 22px -10px rgba(52,226,155,.55);
  transition:transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.apr-page .btn.apr-btn-approve:hover{
  transform:translateY(-1px);
  filter:brightness(1.07);
  box-shadow:0 0 0 1px rgba(52,226,155,.45) inset, 0 12px 26px -10px rgba(52,226,155,.7);
}
.apr-page .btn.apr-btn-approve:active{
  transform:translateY(0);
}
.apr-page .btn.ghost.apr-btn-reject{
  background:rgba(255,92,124,.08);
  color:var(--apr-danger) !important;
  border:1px solid rgba(255,92,124,.35) !important;
  font-weight:700;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.apr-page .btn.ghost.apr-btn-reject:hover{
  background:rgba(255,92,124,.18);
  border-color:rgba(255,92,124,.6) !important;
  color:#fff !important;
  transform:translateY(-1px);
}
.apr-page .btn.ghost.apr-btn-reject:active{
  transform:translateY(0);
}

/* v5.10-APP-PAGE-REQUESTS — empty state */
.apr-page .muted.apr-empty{
  display:block;
  padding:32px 14px;
  text-align:center;
  color:var(--apr-text-muted);
  font-size:13px;
}

/* v5.10-APP-PAGE-REQUESTS — Detail modal overlay + card */
.apr-modal-overlay{
  background:radial-gradient(80% 60% at 50% 0%, rgba(94,192,255,.10), transparent 60%), rgba(4,6,16,.62) !important;
}
.apr-modal-overlay .card.apr-modal-card{
  background:linear-gradient(180deg, var(--apr-surface-1), var(--apr-surface-0)) !important;
  border:1px solid var(--apr-border-1) !important;
  border-radius:var(--apr-r-lg) !important;
  box-shadow:var(--apr-shadow-card), 0 30px 60px -20px rgba(0,0,0,.7) !important;
  -webkit-backdrop-filter:var(--apr-blur);
  backdrop-filter:var(--apr-blur);
  padding:22px 22px 20px !important;
  color:var(--apr-text);
}
.apr-modal-overlay .apr-modal-head h3{
  font-size:18px;
  letter-spacing:-.01em;
  color:var(--apr-text);
}
.apr-modal-overlay .btn.ghost.apr-modal-close{
  background:transparent;
  border:1px solid var(--apr-border-0) !important;
  color:var(--apr-text-muted) !important;
  border-radius:999px !important;
  width:30px;
  height:30px;
  padding:0 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.apr-modal-overlay .btn.ghost.apr-modal-close:hover{
  background:var(--apr-surface-0);
  color:var(--apr-text) !important;
  border-color:var(--apr-border-1) !important;
}

/* v5.10-APP-PAGE-REQUESTS — modal property list */
.apr-modal-overlay .clist.apr-modal-list{
  background:var(--apr-surface-0);
  border:1px solid var(--apr-border-0);
  border-radius:var(--apr-r-md);
  padding:4px 8px;
}
.apr-modal-overlay .clist.apr-modal-list .crow{
  padding:9px 8px;
  border-radius:var(--apr-r-sm);
  display:flex;
  gap:12px;
  align-items:center;
}
.apr-modal-overlay .clist.apr-modal-list .crow + .crow{
  border-top:1px solid var(--apr-border-0);
}
.apr-modal-overlay .clist.apr-modal-list .cmeta{
  color:var(--apr-text-muted);
  font-size:12.5px;
}
.apr-modal-overlay .clist.apr-modal-list .cname{
  color:var(--apr-text);
  font-weight:600;
  text-align:right;
  font-size:13.5px;
}

/* v5.10-APP-PAGE-REQUESTS — modal env block */
.apr-modal-overlay .apr-env-block .label{
  font-size:11px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--apr-text-muted);
  font-weight:700;
}
.apr-modal-overlay .apr-env-box{
  background:var(--apr-bg-1) !important;
  border:1px solid var(--apr-border-0);
  color:var(--apr-text);
}

/* v5.10-APP-PAGE-REQUESTS — modal action buttons (large variant) */
.apr-modal-overlay .apr-modal-actions{
  padding-top:14px;
  margin-top:6px;
  border-top:1px solid var(--apr-border-0);
}
.apr-modal-overlay .btn.apr-btn-approve-lg{
  background:linear-gradient(180deg, var(--apr-success), color-mix(in srgb, var(--apr-success) 75%, #000)) !important;
  color:#06251a !important;
  border:1px solid color-mix(in srgb, var(--apr-success) 70%, #ffffff 0%) !important;
  font-weight:700;
  padding:9px 18px !important;
  border-radius:var(--apr-r-md) !important;
  box-shadow:0 0 0 1px rgba(52,226,155,.25) inset, 0 10px 26px -10px rgba(52,226,155,.55);
  transition:transform .12s ease, filter .15s ease, box-shadow .15s ease;
}
.apr-modal-overlay .btn.apr-btn-approve-lg:hover{
  transform:translateY(-1px);
  filter:brightness(1.07);
  box-shadow:0 0 0 1px rgba(52,226,155,.45) inset, 0 14px 30px -10px rgba(52,226,155,.7);
}
.apr-modal-overlay .btn.ghost.apr-btn-reject-lg{
  background:rgba(255,92,124,.08) !important;
  color:var(--apr-danger) !important;
  border:1px solid rgba(255,92,124,.45) !important;
  font-weight:700;
  padding:9px 18px !important;
  border-radius:var(--apr-r-md) !important;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.apr-modal-overlay .btn.ghost.apr-btn-reject-lg:hover{
  background:rgba(255,92,124,.18) !important;
  border-color:rgba(255,92,124,.6) !important;
  color:#fff !important;
  transform:translateY(-1px);
}

/* v5.10-APP-PAGE-REQUESTS — responsive */
@media (max-width: 720px){
  .apr-page .apr-filterbar{
    border-radius:var(--apr-r-md);
    width:100%;
    overflow-x:auto;
  }
  .apr-page .crow.apr-req-row{
    flex-wrap:wrap;
    gap:8px;
  }
  .apr-modal-overlay .clist.apr-modal-list .cname{
    text-align:left;
  }
}

/* v5.10-APP-PAGE-REQUESTS — reduced motion */
@media (prefers-reduced-motion: reduce){
  .apr-page .btn.apr-btn-approve,
  .apr-page .btn.ghost.apr-btn-reject,
  .apr-page .btn.apr-filter-btn,
  .apr-page .crow.apr-req-row,
  .apr-page .apr-chev,
  .apr-modal-overlay .btn.apr-btn-approve-lg,
  .apr-modal-overlay .btn.ghost.apr-btn-reject-lg{
    transition:none !important;
  }
  .apr-page .btn.apr-btn-approve:hover,
  .apr-page .btn.ghost.apr-btn-reject:hover,
  .apr-modal-overlay .btn.apr-btn-approve-lg:hover,
  .apr-modal-overlay .btn.ghost.apr-btn-reject-lg:hover,
  .apr-page .crow.apr-req-row:hover{
    transform:none !important;
  }
}



/* ================ v5.10-APP-PAGE-SETTINGS ================ */
/* Settings page: sidebar tabs (Konto/Sicherheit/Notif/SSO/API-Keys) + content pane.
   All selectors scoped under .settings-shell. Uses --app-* tokens from APP-CHROME. */

/* v5.10-APP-PAGE-SETTINGS — outer shell: provide local token re-assertion so
   tokens are guaranteed available even if a parent scope drops them. */
.settings-shell{
  --settings-side-w:248px;
  --settings-side-collapsed-w:64px;
  --settings-gap:18px;
  --settings-pad:20px;
  --settings-tab-radius:12px;
  --settings-accent:var(--app-accent, #5ec0ff);
  --settings-accent-soft:var(--app-accent-soft, rgba(94,192,255,0.12));
  --settings-accent-glow:var(--app-accent-glow, rgba(94,192,255,0.28));
  --settings-surface-0:var(--app-surface-0, rgba(15,20,35,0.5));
  --settings-surface-1:var(--app-surface-1, rgba(20,26,42,0.7));
  --settings-border-0:var(--app-border-0, rgba(255,255,255,0.07));
  --settings-border-1:var(--app-border-1, rgba(255,255,255,0.10));
  --settings-text:var(--app-text, #e8ecf5);
  --settings-text-muted:var(--app-text-muted, #9aa3c8);
  --settings-shadow:var(--app-shadow-card, 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6));
  --settings-blur:var(--app-blur, blur(14px) saturate(140%));
  --settings-r-sm:var(--app-r-sm, 8px);
  --settings-r-md:var(--app-r-md, 12px);
  --settings-r-lg:var(--app-r-lg, 16px);
  display:flex;
  flex-direction:column;
  gap:14px;
  color:var(--settings-text);
  min-height:0;
}

/* v5.10-APP-PAGE-SETTINGS — page-head reskin to match settings-app feel */
.settings-shell > .page-head{
  margin:0 4px 4px !important;
  padding:6px 4px 14px;
  border-bottom:1px solid var(--settings-border-0);
}
.settings-shell > .page-head h1{
  font-size:24px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--settings-text);
}
.settings-shell > .page-head p{
  color:var(--settings-text-muted);
  font-size:13px;
  margin-top:4px;
}

/* v5.10-APP-PAGE-SETTINGS — body: 2-col grid (sidebar | pane) */
.settings-shell .settings-body{
  display:grid;
  grid-template-columns:var(--settings-side-w) 1fr;
  gap:var(--settings-gap);
  align-items:start;
  min-height:0;
}

/* v5.10-APP-PAGE-SETTINGS — sidebar tabs become a vertical glass card.
   We OVERRIDE the inline style flex-direction via flex-direction:column. */
.settings-shell .settings-tabs{
  /* override inline display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap */
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  gap:4px !important;
  margin:0 !important;
  padding:14px 10px;
  position:sticky;
  top:0;
  border:1px solid var(--settings-border-1);
  border-radius:var(--settings-r-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 60%),
    var(--settings-surface-1);
  -webkit-backdrop-filter:var(--settings-blur);
  backdrop-filter:var(--settings-blur);
  box-shadow:var(--settings-shadow);
  align-self:start;
}

/* v5.10-APP-PAGE-SETTINGS — sidebar header accent strip */
.settings-shell .settings-tabs::before{
  content:"Bereiche";
  display:block;
  font-size:10px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--settings-text-muted);
  opacity:.75;
  font-weight:700;
  padding:2px 12px 10px;
  border-bottom:1px solid var(--settings-border-0);
  margin-bottom:6px;
}

/* v5.10-APP-PAGE-SETTINGS — each tab button as nav item.
   We re-style .btn.ghost INSIDE settings-tabs so it looks like a row,
   without touching the inline :style binding logic. */
.settings-shell .settings-tabs .btn.ghost.settings-tab{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  justify-content:flex-start;
  padding:10px 12px;
  border-radius:var(--settings-tab-radius);
  border:1px solid transparent;
  background:transparent;
  color:var(--settings-text-muted);
  font-weight:600;
  font-size:13.5px;
  cursor:pointer;
  transition:background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
  position:relative;
}
.settings-shell .settings-tabs .btn.ghost.settings-tab:hover{
  color:var(--settings-text);
  background:var(--settings-surface-0);
  border-color:var(--settings-border-0);
}
.settings-shell .settings-tabs .btn.ghost.settings-tab:active{
  transform:translateY(1px);
}

/* v5.10-APP-PAGE-SETTINGS — ACTIVE state.
   The Vue inline :style sets border-color:var(--primary) when active.
   We can detect the active state via that inline style — we add stronger
   selectors that win the cascade and use --settings-accent. */
.settings-shell .settings-tabs .btn.ghost.settings-tab[style*="border-color:var(--primary)"],
.settings-shell .settings-tabs .btn.ghost.settings-tab[style*="border-color: var(--primary)"]{
  color:var(--settings-text) !important;
  background:linear-gradient(135deg, var(--settings-accent-soft), transparent 70%), var(--settings-surface-0) !important;
  border:1px solid var(--settings-accent) !important;
  box-shadow:0 0 0 3px rgba(94,192,255,0.08), 0 8px 22px -12px var(--settings-accent-glow);
}
.settings-shell .settings-tabs .btn.ghost.settings-tab[style*="border-color:var(--primary)"]::before,
.settings-shell .settings-tabs .btn.ghost.settings-tab[style*="border-color: var(--primary)"]::before{
  content:"";
  position:absolute;
  left:-1px;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:3px;
  background:var(--settings-accent);
  box-shadow:0 0 12px var(--settings-accent-glow);
}

/* v5.10-APP-PAGE-SETTINGS — content pane: glass surface that hosts the bento grid */
.settings-shell .settings-pane{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}

/* v5.10-APP-PAGE-SETTINGS — bento grids inside pane get more breathing room
   and consistent card chrome. We only ADD styling — don't change col-* logic. */
.settings-shell .settings-pane .bento{
  gap:16px;
}

/* v5.10-APP-PAGE-SETTINGS — cards in settings get the glass treatment */
.settings-shell .settings-pane .bento > .card{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 50%),
    var(--settings-surface-1);
  border:1px solid var(--settings-border-1);
  border-radius:var(--settings-r-lg);
  padding:18px 20px;
  -webkit-backdrop-filter:var(--settings-blur);
  backdrop-filter:var(--settings-blur);
  box-shadow:var(--settings-shadow);
  transition:border-color .15s ease, transform .15s ease;
}
.settings-shell .settings-pane .bento > .card:hover{
  border-color:var(--settings-border-1);
}

/* v5.10-APP-PAGE-SETTINGS — card headings */
.settings-shell .settings-pane .bento > .card > h3{
  font-size:15px;
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--settings-text);
  margin:0 0 14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--settings-border-0);
}

/* v5.10-APP-PAGE-SETTINGS — clist rows inside settings cards: subtler chrome */
.settings-shell .settings-pane .bento > .card .clist{
  gap:6px;
}
.settings-shell .settings-pane .bento > .card .clist > .crow{
  padding:10px 12px;
  border:1px solid var(--settings-border-0);
  border-radius:var(--settings-r-md);
  background:rgba(255,255,255,0.015);
  transition:background .14s ease, border-color .14s ease;
}
.settings-shell .settings-pane .bento > .card .clist > .crow:hover{
  background:var(--settings-surface-0);
  border-color:var(--settings-border-1);
}
.settings-shell .settings-pane .bento > .card .clist > .crow .cmeta{
  color:var(--settings-text-muted);
  font-size:12.5px;
}
.settings-shell .settings-pane .bento > .card .clist > .crow .cname{
  font-weight:600;
  color:var(--settings-text);
}

/* v5.10-APP-PAGE-SETTINGS — form fields */
.settings-shell .settings-pane .bento > .card .field{
  margin-bottom:12px;
}
.settings-shell .settings-pane .bento > .card .field label{
  font-size:11.5px;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--settings-text-muted);
  font-weight:700;
  margin-bottom:6px;
  display:block;
}
.settings-shell .settings-pane .bento > .card .field input,
.settings-shell .settings-pane .bento > .card input[type="text"],
.settings-shell .settings-pane .bento > .card input[type="password"],
.settings-shell .settings-pane .bento > .card input:not([type="checkbox"]):not([type="radio"]){
  width:100%;
  padding:10px 12px;
  border:1px solid var(--settings-border-1);
  border-radius:var(--settings-r-md);
  background:var(--settings-surface-0);
  color:var(--settings-text);
  font-size:13.5px;
  outline:none;
  transition:border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.settings-shell .settings-pane .bento > .card input:focus{
  border-color:var(--settings-accent);
  box-shadow:0 0 0 3px rgba(94,192,255,0.10);
  background:var(--settings-surface-1);
}

/* v5.10-APP-PAGE-SETTINGS — primary buttons in settings */
.settings-shell .settings-pane .bento > .card .btn:not(.ghost){
  background:linear-gradient(135deg, var(--settings-accent), #a06bff);
  color:#fff;
  border:none;
  padding:10px 18px;
  border-radius:var(--settings-r-md);
  font-weight:700;
  font-size:13px;
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow:0 8px 22px -10px var(--settings-accent-glow);
  transition:transform .12s ease, box-shadow .14s ease, filter .14s ease;
}
.settings-shell .settings-pane .bento > .card .btn:not(.ghost):hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 12px 30px -10px var(--settings-accent-glow);
  filter:brightness(1.05);
}
.settings-shell .settings-pane .bento > .card .btn:not(.ghost):active:not(:disabled){
  transform:translateY(0);
}
.settings-shell .settings-pane .bento > .card .btn:not(.ghost):disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* v5.10-APP-PAGE-SETTINGS — ghost buttons in settings */
.settings-shell .settings-pane .bento > .card .btn.ghost{
  background:var(--settings-surface-0);
  border:1px solid var(--settings-border-1);
  color:var(--settings-text);
  padding:9px 14px;
  border-radius:var(--settings-r-md);
  font-weight:600;
  font-size:12.5px;
  transition:background .14s ease, border-color .14s ease, color .14s ease;
}
.settings-shell .settings-pane .bento > .card .btn.ghost:hover{
  background:var(--settings-surface-1);
  border-color:var(--settings-accent);
}

/* v5.10-APP-PAGE-SETTINGS — pills inside settings */
.settings-shell .settings-pane .bento > .card .pill{
  background:var(--settings-accent-soft);
  color:var(--settings-accent);
  border:1px solid rgba(94,192,255,0.25);
  padding:3px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.3px;
}

/* v5.10-APP-PAGE-SETTINGS — dot indicators */
.settings-shell .settings-pane .bento > .card .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
  flex:none;
}
.settings-shell .settings-pane .bento > .card .dot.run{
  background:var(--app-success, #34e29b);
  box-shadow:0 0 8px rgba(52,226,155,0.5);
}

/* v5.10-APP-PAGE-SETTINGS — friend cards subtler */
.settings-shell .settings-pane .bento > .card[v-if] + .card,
.settings-shell .settings-pane .bento > .card > div[style*="grid-template-columns:repeat(auto-fill"]{
  gap:10px !important;
}
.settings-shell .settings-pane .bento > .card > div[style*="grid-template-columns:repeat(auto-fill"] > div{
  background:var(--settings-surface-0) !important;
  border:1px solid var(--settings-border-1) !important;
  border-radius:var(--settings-r-md) !important;
  transition:border-color .14s ease, transform .14s ease;
}
.settings-shell .settings-pane .bento > .card > div[style*="grid-template-columns:repeat(auto-fill"] > div:hover{
  border-color:var(--settings-accent) !important;
  transform:translateY(-1px);
}

/* v5.10-APP-PAGE-SETTINGS — OAuth provider sub-cards keep their nested look */
.settings-shell .settings-pane .bento > .card .card{
  background:var(--settings-surface-0) !important;
  border:1px solid var(--settings-border-1) !important;
  border-radius:var(--settings-r-md);
  padding:14px;
  box-shadow:none;
}

/* v5.10-APP-PAGE-SETTINGS — checkboxes (notif toggles) */
.settings-shell .settings-pane .bento > .card label.crow{
  border:1px solid var(--settings-border-0);
  background:rgba(255,255,255,0.015);
  border-radius:var(--settings-r-md);
  padding:10px 12px;
}
.settings-shell .settings-pane .bento > .card label.crow:hover{
  background:var(--settings-surface-0);
  border-color:var(--settings-border-1);
}
.settings-shell .settings-pane .bento > .card input[type="checkbox"]{
  accent-color:var(--settings-accent);
  cursor:pointer;
}

/* v5.10-APP-PAGE-SETTINGS — muted text consistency */
.settings-shell .settings-pane .muted,
.settings-shell .settings-pane .bento > .card .muted{
  color:var(--settings-text-muted);
}

/* v5.10-APP-PAGE-SETTINGS — spinner center placement */
.settings-shell .settings-pane > .center{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:240px;
  padding:40px 16px;
  border:1px solid var(--settings-border-0);
  border-radius:var(--settings-r-lg);
  background:var(--settings-surface-1);
}

/* v5.10-APP-PAGE-SETTINGS — responsive: collapse sidebar to horizontal scroller */
@media (max-width: 880px){
  .settings-shell .settings-body{
    grid-template-columns:1fr;
    gap:12px;
  }
  .settings-shell .settings-tabs{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    overflow-x:auto;
    overflow-y:hidden;
    gap:6px !important;
    padding:8px 10px;
    position:relative;
    top:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--settings-accent-soft) transparent;
  }
  .settings-shell .settings-tabs::before{
    display:none;
  }
  .settings-shell .settings-tabs .btn.ghost.settings-tab{
    width:auto;
    flex:0 0 auto;
    white-space:nowrap;
    padding:8px 14px;
    font-size:12.5px;
  }
  .settings-shell .settings-tabs .btn.ghost.settings-tab[style*="border-color:var(--primary)"]::before,
  .settings-shell .settings-tabs .btn.ghost.settings-tab[style*="border-color: var(--primary)"]::before{
    left:8px;
    right:8px;
    top:auto;
    bottom:-1px;
    width:auto;
    height:3px;
  }
}

/* ================ v5.10-AGGR-DESIGN ================
   NodePanel v5.10 aggressive redesign tokens.
   Provides:
     - .game-icon wrapper (40x40 round glass thumbnail) with per-game gradient logos via [data-game]
     - .ctr-card pattern (thumbnail + name + stats) for container grid-cards
     - .ctr-status[data-state="running"|"stopped"|"starting"] dot with pulse
     - .gradient-text, .glass-pill-action, .hover-lift helpers
   All colors via --app-* tokens. No external images — every "logo" is a CSS gradient stylization.
   These are pure definitions; templates remain untouched. Other agents can use these classes.
   ===================================================== */

/* v5.10-AGGR-DESIGN — game-icon wrapper (40x40 glass round) */
.game-icon{
  width:40px;
  height:40px;
  flex:0 0 auto;
  border-radius:var(--app-r-md, 12px);
  background:var(--app-surface-1, rgba(20,26,42,0.7));
  border:1px solid var(--app-border-1, rgba(255,255,255,0.10));
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  backdrop-filter:blur(10px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 6px 18px -8px rgba(0,0,0,0.55);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  isolation:isolate;
  font-size:18px;
  font-weight:800;
  color:var(--app-text, #e8ecf5);
  letter-spacing:-.02em;
  text-transform:uppercase;
  user-select:none;
}

/* v5.10-AGGR-DESIGN — game-icon size variants */
.game-icon.sm{ width:28px; height:28px; border-radius:var(--app-r-sm, 8px); font-size:13px; }
.game-icon.lg{ width:56px; height:56px; border-radius:14px; font-size:22px; }
.game-icon.xl{ width:72px; height:72px; border-radius:16px; font-size:26px; }

/* v5.10-AGGR-DESIGN — base glow ring on hover for any game-icon */
.game-icon::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:0 0 0 0 var(--app-accent-soft, rgba(94,192,255,0.12));
  transition:box-shadow .22s ease;
  z-index:2;
}
.game-icon:hover::after{
  box-shadow:0 0 0 3px var(--app-accent-soft, rgba(94,192,255,0.12));
}

/* v5.10-AGGR-DESIGN — game-icon: Minecraft Java (grass-block green diagonal) */
.game-icon[data-game="minecraft"],
.game-icon[data-game="minecraft-java"],
.game-icon[data-game="paper"],
.game-icon[data-game="spigot"],
.game-icon[data-game="forge"],
.game-icon[data-game="fabric"],
.game-icon[data-game="vanilla"]{
  background:
    linear-gradient(180deg, transparent 0 38%, rgba(0,0,0,0.18) 38% 42%, transparent 42%),
    linear-gradient(135deg, #6cbf3a 0%, #4f9627 50%, #7a4a26 50%, #6b3e1d 100%);
  border-color:rgba(108,191,58,0.45);
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,0.5);
}
.game-icon[data-game="minecraft"]::before,
.game-icon[data-game="minecraft-java"]::before,
.game-icon[data-game="paper"]::before,
.game-icon[data-game="spigot"]::before,
.game-icon[data-game="forge"]::before,
.game-icon[data-game="fabric"]::before,
.game-icon[data-game="vanilla"]::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.18) 0 14%, transparent 14%),
    radial-gradient(circle at 70% 28%, rgba(255,255,255,0.12) 0 10%, transparent 10%);
  pointer-events:none;
  z-index:1;
}

/* v5.10-AGGR-DESIGN — game-icon: Minecraft Bedrock (purple-blue) */
.game-icon[data-game="bedrock"],
.game-icon[data-game="minecraft-bedrock"],
.game-icon[data-game="mcbe"]{
  background:linear-gradient(135deg, #8b5cf6 0%, #6d28d9 50%, #4c1d95 100%);
  border-color:rgba(139,92,246,0.45);
  color:#fff;
}
.game-icon[data-game="bedrock"]::before,
.game-icon[data-game="minecraft-bedrock"]::before,
.game-icon[data-game="mcbe"]::before{
  content:"B";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:18px;
  color:rgba(255,255,255,0.95);
  text-shadow:0 1px 3px rgba(0,0,0,0.55);
  z-index:1;
}

/* v5.10-AGGR-DESIGN — game-icon: FiveM (orange-red GTA stripe) */
.game-icon[data-game="fivem"],
.game-icon[data-game="five-m"],
.game-icon[data-game="gta"],
.game-icon[data-game="gtav"]{
  background:
    linear-gradient(110deg, transparent 0 38%, rgba(0,0,0,0.22) 38% 46%, transparent 46%),
    linear-gradient(135deg, #ff8a3d 0%, #f56b1a 55%, #c43e0a 100%);
  border-color:rgba(245,107,26,0.55);
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,0.55);
}
.game-icon[data-game="fivem"]::before,
.game-icon[data-game="five-m"]::before,
.game-icon[data-game="gta"]::before,
.game-icon[data-game="gtav"]::before{
  content:"5";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-style:italic;
  font-size:20px;
  color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,0.6);
  z-index:1;
}

/* v5.10-AGGR-DESIGN — game-icon: RedM */
.game-icon[data-game="redm"],
.game-icon[data-game="red-m"]{
  background:linear-gradient(135deg, #c0392b 0%, #922520 50%, #5c130f 100%);
  border-color:rgba(192,57,43,0.5);
  color:#fff;
}

/* v5.10-AGGR-DESIGN — game-icon: TeamSpeak (deep blue with chevron) */
.game-icon[data-game="teamspeak"],
.game-icon[data-game="ts3"],
.game-icon[data-game="ts5"]{
  background:linear-gradient(135deg, #1ea4f5 0%, #1675c0 50%, #0d4d8c 100%);
  border-color:rgba(30,164,245,0.45);
  color:#fff;
}
.game-icon[data-game="teamspeak"]::before,
.game-icon[data-game="ts3"]::before,
.game-icon[data-game="ts5"]::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:18px; height:18px;
  transform:translate(-50%,-50%);
  border:2.5px solid rgba(255,255,255,0.95);
  border-radius:50%;
  border-top-color:transparent;
  border-right-color:transparent;
  z-index:1;
}

/* v5.10-AGGR-DESIGN — game-icon: Discord */
.game-icon[data-game="discord"]{
  background:linear-gradient(135deg, #7289da 0%, #5865f2 50%, #404eed 100%);
  border-color:rgba(88,101,242,0.45);
  color:#fff;
}
.game-icon[data-game="discord"]::before{
  content:"D";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:19px;
  color:#fff;
  z-index:1;
}

/* v5.10-AGGR-DESIGN — game-icon: Mumble */
.game-icon[data-game="mumble"]{
  background:linear-gradient(135deg, #cf3e3e 0%, #962323 50%, #5c1212 100%);
  border-color:rgba(207,62,62,0.45);
  color:#fff;
}

/* v5.10-AGGR-DESIGN — game-icon: Debian (red swirl) */
.game-icon[data-game="debian"]{
  background:
    radial-gradient(circle at 70% 65%, rgba(255,255,255,0.18) 0 12%, transparent 12%),
    linear-gradient(135deg, #d32f5a 0%, #a01b3f 55%, #5e0d22 100%);
  border-color:rgba(211,47,90,0.45);
  color:#fff;
}

/* v5.10-AGGR-DESIGN — game-icon: Ubuntu */
.game-icon[data-game="ubuntu"]{
  background:linear-gradient(135deg, #e95420 0%, #b1380d 50%, #6e2308 100%);
  border-color:rgba(233,84,32,0.45);
  color:#fff;
}

/* v5.10-AGGR-DESIGN — game-icon: Alpine */
.game-icon[data-game="alpine"]{
  background:linear-gradient(135deg, #0d597f 0%, #093f59 50%, #062a3d 100%);
  border-color:rgba(13,89,127,0.5);
  color:#fff;
}

/* v5.10-AGGR-DESIGN — game-icon: Arch */
.game-icon[data-game="arch"],
.game-icon[data-game="archlinux"]{
  background:linear-gradient(135deg, #1793d1 0%, #0f6a99 50%, #084768 100%);
  border-color:rgba(23,147,209,0.5);
  color:#fff;
}

/* v5.10-AGGR-DESIGN — game-icon: Windows (blue tiles) */
.game-icon[data-game="windows"],
.game-icon[data-game="win"],
.game-icon[data-game="winsrv"]{
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(0,0,0,0.25) 49.5% 50.5%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(0,0,0,0.25) 49.5% 50.5%, transparent 50.5%),
    linear-gradient(135deg, #2596ec 0%, #1973b6 50%, #0e4a7b 100%);
  border-color:rgba(37,150,236,0.5);
  color:#fff;
}

/* v5.10-AGGR-DESIGN — game-icon: nginx (mint green) */
.game-icon[data-game="nginx"]{
  background:linear-gradient(135deg, #4bbf52 0%, #2c8b32 50%, #16551b 100%);
  border-color:rgba(75,191,82,0.5);
  color:#fff;
}
.game-icon[data-game="nginx"]::before{
  content:"N";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:18px;
  font-style:italic;
  color:#fff;
  z-index:1;
}

/* v5.10-AGGR-DESIGN — game-icon: Apache */
.game-icon[data-game="apache"],
.game-icon[data-game="httpd"]{
  background:linear-gradient(135deg, #d22128 0%, #8c1419 50%, #4d0a0e 100%);
  border-color:rgba(210,33,40,0.5);
  color:#fff;
}

/* v5.10-AGGR-DESIGN — game-icon: Node.js (green hex) */
.game-icon[data-game="nodejs"],
.game-icon[data-game="node"]{
  background:linear-gradient(135deg, #67a04f 0%, #3c763d 50%, #1f4622 100%);
  border-color:rgba(103,160,79,0.5);
  color:#fff;
  clip-path:none;
}
.game-icon[data-game="nodejs"]::before,
.game-icon[data-game="node"]::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:22px; height:24px;
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,0.18);
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  z-index:1;
}

/* v5.10-AGGR-DESIGN — game-icon: Python */
.game-icon[data-game="python"],
.game-icon[data-game="py"]{
  background:linear-gradient(135deg, #ffd848 0%, #3776ab 50%, #1c4a73 100%);
  border-color:rgba(55,118,171,0.55);
  color:#fff;
}

/* v5.10-AGGR-DESIGN — game-icon: MySQL / MariaDB */
.game-icon[data-game="mysql"],
.game-icon[data-game="mariadb"]{
  background:linear-gradient(135deg, #00758f 0%, #f29111 100%);
  border-color:rgba(0,117,143,0.5);
  color:#fff;
}

/* v5.10-AGGR-DESIGN — game-icon: PostgreSQL */
.game-icon[data-game="postgres"],
.game-icon[data-game="postgresql"],
.game-icon[data-game="pg"]{
  background:linear-gradient(135deg, #336791 0%, #1e4163 50%, #0e2538 100%);
  border-color:rgba(51,103,145,0.55);
  color:#fff;
}

/* v5.10-AGGR-DESIGN — game-icon: Redis */
.game-icon[data-game="redis"]{
  background:linear-gradient(135deg, #dc382c 0%, #a91d13 50%, #560b06 100%);
  border-color:rgba(220,56,44,0.55);
  color:#fff;
}

/* v5.10-AGGR-DESIGN — game-icon: MongoDB */
.game-icon[data-game="mongo"],
.game-icon[data-game="mongodb"]{
  background:linear-gradient(135deg, #4faa41 0%, #2e7029 50%, #1b4117 100%);
  border-color:rgba(79,170,65,0.5);
  color:#fff;
}

/* v5.10-AGGR-DESIGN — game-icon: Docker (blue whale) */
.game-icon[data-game="docker"]{
  background:linear-gradient(135deg, #2496ed 0%, #1671b5 50%, #0e4a7a 100%);
  border-color:rgba(36,150,237,0.55);
  color:#fff;
}

/* v5.10-AGGR-DESIGN — game-icon: Steam-family (CS, Rust, Valheim, ARK, etc.) generic */
.game-icon[data-game="steam"],
.game-icon[data-game="cs"],
.game-icon[data-game="csgo"],
.game-icon[data-game="cs2"]{
  background:linear-gradient(135deg, #1b2838 0%, #2a475e 50%, #66c0f4 100%);
  border-color:rgba(102,192,244,0.45);
  color:#fff;
}
.game-icon[data-game="rust"]{
  background:linear-gradient(135deg, #cd412b 0%, #8c2415 50%, #4c100a 100%);
  border-color:rgba(205,65,43,0.5);
  color:#fff;
}
.game-icon[data-game="valheim"]{
  background:linear-gradient(135deg, #8ab17d 0%, #4f6f4a 50%, #2a3a26 100%);
  border-color:rgba(138,177,125,0.5);
  color:#fff;
}
.game-icon[data-game="ark"]{
  background:linear-gradient(135deg, #2eb389 0%, #1b6e54 50%, #0d3a2c 100%);
  border-color:rgba(46,179,137,0.5);
  color:#fff;
}
.game-icon[data-game="palworld"]{
  background:linear-gradient(135deg, #4cc6e7 0%, #3084a3 50%, #134a60 100%);
  border-color:rgba(76,198,231,0.5);
  color:#fff;
}
.game-icon[data-game="terraria"]{
  background:linear-gradient(135deg, #9bd06f 0%, #4f7d2b 50%, #2a4214 100%);
  border-color:rgba(155,208,111,0.5);
  color:#fff;
}
.game-icon[data-game="factorio"]{
  background:linear-gradient(135deg, #fd9c3d 0%, #b96815 50%, #6b3b07 100%);
  border-color:rgba(253,156,61,0.5);
  color:#fff;
}
.game-icon[data-game="satisfactory"]{
  background:linear-gradient(135deg, #ec8b2d 0%, #a45612 50%, #5a2f08 100%);
  border-color:rgba(236,139,45,0.5);
  color:#fff;
}
.game-icon[data-game="garrysmod"],
.game-icon[data-game="gmod"]{
  background:linear-gradient(135deg, #4a6f8a 0%, #2d465a 50%, #16242f 100%);
  border-color:rgba(74,111,138,0.5);
  color:#fff;
}

/* v5.10-AGGR-DESIGN — game-icon: VPS / generic compute (slate gradient) */
.game-icon[data-game="vps"],
.game-icon[data-game="compute"],
.game-icon[data-game="server"],
.game-icon[data-game="generic"]{
  background:linear-gradient(135deg, #5c6f99 0%, #3b4869 50%, #1f273d 100%);
  border-color:rgba(92,111,153,0.5);
  color:#fff;
}

/* v5.10-AGGR-DESIGN — game-icon: Web / static hosting (teal accent) */
.game-icon[data-game="web"],
.game-icon[data-game="static"],
.game-icon[data-game="html"]{
  background:linear-gradient(135deg, #34e29b 0%, #1f9d6b 50%, #0e5239 100%);
  border-color:rgba(52,226,155,0.5);
  color:#03130c;
}

/* v5.10-AGGR-DESIGN — game-icon: fallback (uses --app-accent gradient) */
.game-icon[data-game="unknown"],
.game-icon:not([data-game]){
  background:linear-gradient(135deg, var(--app-accent, #5ec0ff) 0%, #4aa9ed 60%, #2e6a98 100%);
  border-color:var(--app-border-1, rgba(255,255,255,0.10));
  color:#04121e;
}

/* ====== v5.10-AGGR-DESIGN — Container-Card Pattern ====== */

/* v5.10-AGGR-DESIGN — container card root (replaces row-style) */
.ctr-card{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:auto auto;
  grid-template-areas:
    "thumb name  badge"
    "thumb meta  stats";
  gap:4px 14px;
  padding:14px 16px;
  border:1px solid var(--app-border-0, rgba(255,255,255,0.07));
  border-radius:var(--app-r-lg, 16px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 50%),
    var(--app-surface-1, rgba(20,26,42,0.7));
  -webkit-backdrop-filter:var(--app-blur, blur(14px) saturate(140%));
  backdrop-filter:var(--app-blur, blur(14px) saturate(140%));
  box-shadow:var(--app-shadow-card, 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6));
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .22s ease;
  align-items:center;
  isolation:isolate;
  overflow:hidden;
}

/* v5.10-AGGR-DESIGN — gradient sheen on hover (subtle accent bloom from top-right) */
.ctr-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:radial-gradient(600px 220px at 100% -10%, var(--app-accent-soft, rgba(94,192,255,0.12)), transparent 60%);
  opacity:0;
  transition:opacity .22s ease;
  pointer-events:none;
  z-index:0;
}
.ctr-card:hover{
  border-color:var(--app-border-1, rgba(255,255,255,0.10));
  transform:translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 18px 40px -18px rgba(0,0,0,0.7),
    0 0 0 1px var(--app-accent-soft, rgba(94,192,255,0.12));
}
.ctr-card:hover::before{ opacity:1; }
.ctr-card > *{ position:relative; z-index:1; }

/* v5.10-AGGR-DESIGN — card slots */
.ctr-card .ctr-thumb{
  grid-area:thumb;
  width:48px;
  height:48px;
  border-radius:var(--app-r-md, 12px);
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
/* allow .game-icon inside ctr-thumb to inherit size */
.ctr-card .ctr-thumb .game-icon{ width:100%; height:100%; }

.ctr-card .ctr-name{
  grid-area:name;
  font-weight:700;
  font-size:14.5px;
  letter-spacing:-.01em;
  color:var(--app-text, #e8ecf5);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

.ctr-card .ctr-meta{
  grid-area:meta;
  font-size:11.5px;
  color:var(--app-text-muted, #9aa3c8);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

.ctr-card .ctr-badge{
  grid-area:badge;
  align-self:start;
  justify-self:end;
}

.ctr-card .ctr-stats{
  grid-area:stats;
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono, ui-monospace, monospace);
  font-size:11px;
  color:var(--app-text-muted, #9aa3c8);
  white-space:nowrap;
}
.ctr-card .ctr-stats > span{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.ctr-card .ctr-stats b{
  color:var(--app-text, #e8ecf5);
  font-weight:600;
}

/* v5.10-AGGR-DESIGN — card grid container (consumer can wrap cards) */
.ctr-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:14px;
}
@media(max-width:700px){
  .ctr-grid{ grid-template-columns:1fr; }
  .ctr-card{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "thumb name"
      "thumb meta"
      "badge stats";
    gap:4px 12px;
  }
  .ctr-card .ctr-badge{ justify-self:start; }
  .ctr-card .ctr-stats{ justify-self:start; }
}

/* ====== v5.10-AGGR-DESIGN — Status Dot with Pulse ====== */
.ctr-status{
  display:inline-block;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--app-text-muted, #9aa3c8);
  flex:0 0 auto;
  position:relative;
  vertical-align:middle;
}
.ctr-status[data-state="running"],
.ctr-status[data-state="on"],
.ctr-status[data-state="up"]{
  background:var(--app-success, #34e29b);
  box-shadow:0 0 0 0 rgba(52,226,155,0.55);
  animation:ctrStatusPulse 1.8s ease-out infinite;
}
.ctr-status[data-state="starting"],
.ctr-status[data-state="restarting"],
.ctr-status[data-state="pending"]{
  background:var(--app-warn, #ffb84d);
  box-shadow:0 0 0 0 rgba(255,184,77,0.55);
  animation:ctrStatusPulse 1.2s ease-out infinite;
}
.ctr-status[data-state="stopped"],
.ctr-status[data-state="off"],
.ctr-status[data-state="exited"],
.ctr-status[data-state="down"]{
  background:var(--app-danger, #ff5c7c);
}
.ctr-status[data-state="error"],
.ctr-status[data-state="failed"],
.ctr-status[data-state="crashed"]{
  background:var(--app-danger, #ff5c7c);
  box-shadow:0 0 0 0 rgba(255,92,124,0.55);
  animation:ctrStatusPulse 0.9s ease-out infinite;
}
@keyframes ctrStatusPulse{
  0%   { box-shadow:0 0 0 0 currentColor; }
  70%  { box-shadow:0 0 0 7px transparent; }
  100% { box-shadow:0 0 0 0 transparent; }
}

/* v5.10-AGGR-DESIGN — status badge (text variant for header chips) */
.ctr-status-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px 3px 8px;
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  border-radius:999px;
  border:1px solid var(--app-border-1, rgba(255,255,255,0.10));
  background:var(--app-surface-0, rgba(15,20,35,0.5));
  color:var(--app-text-muted, #9aa3c8);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  line-height:1.2;
}
.ctr-status-badge[data-state="running"],
.ctr-status-badge[data-state="on"],
.ctr-status-badge[data-state="up"]{
  background:rgba(52,226,155,0.12);
  border-color:rgba(52,226,155,0.35);
  color:var(--app-success, #34e29b);
}
.ctr-status-badge[data-state="starting"],
.ctr-status-badge[data-state="restarting"],
.ctr-status-badge[data-state="pending"]{
  background:rgba(255,184,77,0.12);
  border-color:rgba(255,184,77,0.35);
  color:var(--app-warn, #ffb84d);
}
.ctr-status-badge[data-state="stopped"],
.ctr-status-badge[data-state="off"],
.ctr-status-badge[data-state="exited"],
.ctr-status-badge[data-state="down"]{
  background:rgba(255,92,124,0.10);
  border-color:rgba(255,92,124,0.30);
  color:var(--app-danger, #ff5c7c);
}
.ctr-status-badge[data-state="error"],
.ctr-status-badge[data-state="failed"],
.ctr-status-badge[data-state="crashed"]{
  background:rgba(255,92,124,0.15);
  border-color:rgba(255,92,124,0.45);
  color:var(--app-danger, #ff5c7c);
}

/* ====== v5.10-AGGR-DESIGN — Helper Utility Classes ====== */

/* v5.10-AGGR-DESIGN — gradient-text: Linear-style colored heading */
.gradient-text{
  background:linear-gradient(135deg, var(--app-accent, #5ec0ff) 0%, #a06bff 50%, #ff6dc5 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  font-weight:800;
  letter-spacing:-.02em;
}
.gradient-text.cool{
  background:linear-gradient(135deg, var(--app-accent, #5ec0ff) 0%, #4aa9ed 50%, #2e6a98 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.gradient-text.warm{
  background:linear-gradient(135deg, var(--app-warn, #ffb84d) 0%, #ff8a3d 60%, #ff5c7c 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.gradient-text.success{
  background:linear-gradient(135deg, var(--app-success, #34e29b) 0%, #1f9d6b 60%, #0e5239 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

/* v5.10-AGGR-DESIGN — glass-pill-action: subtle pill-shape action button */
.glass-pill-action{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  border-radius:999px;
  border:1px solid var(--app-border-1, rgba(255,255,255,0.10));
  background:var(--app-surface-0, rgba(15,20,35,0.5));
  color:var(--app-text, #e8ecf5);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  cursor:pointer;
  transition:.16s;
  text-decoration:none;
  font-family:inherit;
  user-select:none;
}
.glass-pill-action:hover{
  border-color:var(--app-accent, #5ec0ff);
  background:var(--app-accent-soft, rgba(94,192,255,0.12));
  color:var(--app-text, #e8ecf5);
}
.glass-pill-action:active{ transform:translateY(1px); }
.glass-pill-action[disabled],
.glass-pill-action.is-disabled{
  opacity:.5;
  pointer-events:none;
}
.glass-pill-action.primary{
  background:linear-gradient(135deg, var(--app-accent, #5ec0ff), #4aa9ed);
  border-color:transparent;
  color:#04121e;
  box-shadow:0 6px 16px -8px var(--app-accent-glow, rgba(94,192,255,0.28));
}
.glass-pill-action.primary:hover{
  filter:brightness(1.08);
  background:linear-gradient(135deg, var(--app-accent, #5ec0ff), #4aa9ed);
  color:#04121e;
}
.glass-pill-action.danger{
  border-color:rgba(255,92,124,0.35);
  color:var(--app-danger, #ff5c7c);
}
.glass-pill-action.danger:hover{
  background:rgba(255,92,124,0.12);
  border-color:var(--app-danger, #ff5c7c);
  color:var(--app-danger, #ff5c7c);
}
.glass-pill-action.success{
  border-color:rgba(52,226,155,0.35);
  color:var(--app-success, #34e29b);
}
.glass-pill-action.success:hover{
  background:rgba(52,226,155,0.12);
  border-color:var(--app-success, #34e29b);
}

/* v5.10-AGGR-DESIGN — hover-lift: subtle card lift on hover (Vercel-style) */
.hover-lift{
  transition:transform .2s ease, box-shadow .22s ease, border-color .18s ease;
  will-change:transform;
}
.hover-lift:hover{
  transform:translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 18px 40px -16px rgba(0,0,0,0.7),
    0 0 0 1px var(--app-accent-soft, rgba(94,192,255,0.12));
}
.hover-lift:active{
  transform:translateY(-1px);
}

/* v5.10-AGGR-DESIGN — respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .ctr-card,
  .ctr-card::before,
  .hover-lift,
  .game-icon,
  .game-icon::after,
  .ctr-status,
  .ctr-status-badge,
  .glass-pill-action{
    transition:none !important;
    animation:none !important;
  }
  .ctr-status[data-state="running"],
  .ctr-status[data-state="starting"],
  .ctr-status[data-state="error"]{
    box-shadow:none !important;
  }
}

/* ================ v5.10-AGGR-SHELL ================
   Sidebar reduziert auf nur Dashboard + Settings (3-Item-Pattern).
   Externe Dienste (Cloud, Webmail) als kleiner Footer-Block.
   Topbar bekommt prominente Admin-Toggle-Pill und Brand-Mini.
   Layout-Restruktur: kein vertikales Reihen-Menü mehr, sondern Pill-Stack.
   ================================================ */

/* v5.10-AGGR-SHELL — Sidebar Container neu strukturiert: Brand + Primary-Nav + Footer-Block */
.aggr-shell{
  display:flex !important;
  flex-direction:column !important;
  gap:18px;
  padding:18px 14px 14px !important;
  background:linear-gradient(180deg, var(--app-bg-1) 0%, var(--app-bg-0) 100%) !important;
  border-right:1px solid var(--app-border-0) !important;
  position:relative;
}

/* v5.10-AGGR-SHELL — Brand-Block: kleiner und ruhiger */
.aggr-brand{
  padding:6px 8px 14px !important;
  border-bottom:1px solid var(--app-border-0);
  margin-bottom:4px;
}

/* v5.10-AGGR-SHELL — Primary-Nav: nur 2 Items, als grosse Pills */
.gnav.aggr-nav-primary{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  padding:0 !important;
  margin:0 !important;
  flex:0 0 auto;
}
/* Hide navlabel headers when in aggr mode (only Dashboard + Settings visible) */
.aggr-nav-primary .navlabel{
  display:none !important;
}

/* v5.10-AGGR-SHELL — Nav-Pill: card-style item, 44px Höhe, hover-lift */
.gnav-i.aggr-nav-pill{
  display:flex !important;
  align-items:center;
  gap:12px;
  padding:11px 14px !important;
  border-radius:var(--app-r-md);
  background:var(--app-surface-0);
  border:1px solid var(--app-border-0);
  color:var(--app-text-muted);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:0.01em;
  text-decoration:none;
  transition:background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
  position:relative;
  overflow:hidden;
}
.gnav-i.aggr-nav-pill::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:transparent;
  border-radius:0 2px 2px 0;
  transition:background 0.18s ease;
}
.gnav-i.aggr-nav-pill:hover{
  background:var(--app-surface-1);
  border-color:var(--app-border-1);
  color:var(--app-text);
  transform:translateX(2px);
}
.gnav-i.aggr-nav-pill.on{
  background:var(--app-accent-soft);
  border-color:var(--app-accent-glow);
  color:var(--app-text);
  box-shadow:0 0 0 1px var(--app-accent-glow) inset, 0 8px 22px -14px var(--app-accent-glow);
}
.gnav-i.aggr-nav-pill.on::before{
  background:var(--app-accent);
}
.gnav-i.aggr-nav-pill .gi{
  font-size:17px;
  width:24px;
  text-align:center;
  filter:drop-shadow(0 0 6px var(--app-accent-glow));
}
.gnav-i.aggr-nav-pill.on .gi{
  filter:drop-shadow(0 0 10px var(--app-accent-glow));
}

/* v5.10-AGGR-SHELL — Sidebar Footer-Block: externe Links unten, kleiner Stil */
.aggr-sidebar-foot{
  margin-top:auto;
  padding-top:14px;
  border-top:1px dashed var(--app-border-0);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.aggr-foot-label{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--app-text-muted);
  opacity:0.7;
  padding:0 4px 6px;
}
.aggr-foot-nav{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.gnav-i.aggr-foot-link{
  display:flex !important;
  align-items:center;
  gap:10px;
  padding:7px 10px !important;
  border-radius:var(--app-r-sm);
  background:transparent;
  border:1px solid transparent;
  color:var(--app-text-muted);
  font-size:12.5px;
  font-weight:500;
  text-decoration:none;
  transition:background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.gnav-i.aggr-foot-link:hover{
  background:var(--app-surface-0);
  border-color:var(--app-border-0);
  color:var(--app-text);
}
.gnav-i.aggr-foot-link .gi{
  font-size:14px;
  width:18px;
  text-align:center;
  opacity:0.85;
}
.gnav-i.aggr-foot-link .gext{
  margin-left:auto;
  font-size:10px;
  opacity:0.5;
}

/* v5.10-AGGR-SHELL — Collapsed sidebar: footer block hidden */
.gside-collapsed .aggr-sidebar-foot{
  display:none !important;
}
.gside-collapsed .gnav-i.aggr-nav-pill{
  justify-content:center;
  padding:11px 8px !important;
}
.gside-collapsed .gnav-i.aggr-nav-pill .gt{
  display:none;
}

/* v5.11-SIDEBAR — Sektions-Header in der Primär-Navigation (Pterodactyl/Expanse-Stil) */
.aggr-nav-label{
  font-size:10px;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--app-text-muted);
  opacity:0.62;
  font-weight:700;
  padding:14px 6px 5px;
  user-select:none;
}
.aggr-nav-primary > .aggr-nav-label:first-child{padding-top:2px}

/* v5.11-SIDEBAR — Server-Tab-Buttons (button-Reset, volle Breite, links) */
button.gnav-i.aggr-srvctx-tab{
  width:100%;
  text-align:left;
  font-family:inherit;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  margin:0;
}
.aggr-srvctx-tab.on.aggr-srvctx-danger{
  border-color:var(--danger);
  color:var(--danger);
  background:rgba(239,68,68,0.10);
  box-shadow:0 0 0 1px rgba(239,68,68,0.4) inset;
}
.aggr-srvctx-tab.on.aggr-srvctx-danger::before{background:var(--danger)}
.aggr-srvctx-tab.aggr-srvctx-danger:hover{color:var(--danger)}

/* v5.11-SIDEBAR — Server-Kontext-Header (aktueller Server-Name als Abschnitts-Titel) */
.aggr-srvctx-head{
  display:flex;
  align-items:center;
  gap:9px;
  margin:16px 0 4px;
  padding:9px 11px;
  border-radius:var(--app-r-md);
  background:linear-gradient(135deg, var(--app-accent-soft), transparent 75%), var(--app-surface-0);
  border:1px solid var(--app-border-1);
  border-left:3px solid var(--app-accent);
}
.aggr-srvctx-dot{
  width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--app-text-muted);
  box-shadow:0 0 0 2px rgba(255,255,255,0.04);
}
.aggr-srvctx-dot.on{
  background:var(--app-success, #34e29b);
  box-shadow:0 0 8px var(--app-success, #34e29b);
}
.aggr-srvctx-dot.off{background:var(--app-text-muted)}
.aggr-srvctx-name{
  font-size:13.5px;font-weight:700;color:var(--app-text);
  letter-spacing:-0.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.aggr-srvctx-label{padding-top:11px}

/* v5.11-SIDEBAR — Server-Wechsel-Block im Footer */
.aggr-srvswitch{
  display:flex;flex-direction:column;gap:6px;
  padding-bottom:12px;margin-bottom:10px;
  border-bottom:1px dashed var(--app-border-0);
}
.aggr-srvswitch-select{
  width:100%;
  padding:8px 10px;
  border-radius:var(--app-r-sm);
  background:var(--app-surface-0);
  border:1px solid var(--app-border-1);
  color:var(--app-text);
  font-size:12.5px;font-weight:600;
  font-family:inherit;
  cursor:pointer;
}
.aggr-srvswitch-select:focus{outline:none;border-color:var(--app-accent)}
.aggr-srvswitch-back{
  font-size:12px;color:var(--app-text-muted);
  text-decoration:none;padding:3px 4px;
  transition:color 0.15s ease;
}
.aggr-srvswitch-back:hover{color:var(--app-accent)}

/* v5.11-SIDEBAR — collapsed: Sektions-Header + Server-Name-Text ausblenden, Tabs zentrieren */
.gside-collapsed .aggr-nav-label{display:none}
.gside-collapsed .aggr-srvctx-head{justify-content:center;padding:9px 6px;border-left-width:0}
.gside-collapsed .aggr-srvctx-tab .gt{display:none}
.gside-collapsed button.gnav-i.aggr-srvctx-tab{justify-content:center;text-align:center;padding:11px 8px}

/* v5.10-AGGR-SHELL — Topbar grid-restructure */
.gtop.aggr-topbar{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  padding:10px 18px !important;
  gap:14px;
  border-bottom:1px solid var(--app-border-0);
  backdrop-filter:var(--app-blur);
  -webkit-backdrop-filter:var(--app-blur);
  background:var(--app-surface-0) !important;
}
.aggr-top-left{
  display:flex !important;
  align-items:center;
  gap:14px;
}
.aggr-brand-mini{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  background:var(--app-surface-0);
  border:1px solid var(--app-border-0);
}
.aggr-brand-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--app-accent);
  box-shadow:0 0 8px var(--app-accent-glow), 0 0 0 2px var(--app-accent-soft);
}
.aggr-brand-name{
  font-size:12.5px;
  font-weight:600;
  color:var(--app-text);
  letter-spacing:0.02em;
}
.aggr-top-right{
  display:flex !important;
  align-items:center;
  gap:10px;
}

/* v5.10-AGGR-SHELL — Admin-Toggle-Pill: prominenter Switch im Topbar-Right */
.aggr-admin-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px 7px 11px;
  border-radius:999px;
  border:1px solid var(--app-border-1);
  background:var(--app-surface-0);
  color:var(--app-text-muted);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.02em;
  cursor:pointer;
  transition:background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  position:relative;
}
.aggr-admin-pill:hover{
  background:var(--app-surface-1);
  border-color:var(--app-accent-glow);
  color:var(--app-text);
}
.aggr-admin-pill.on{
  background:linear-gradient(135deg, var(--app-accent-soft) 0%, var(--app-surface-1) 100%);
  border-color:var(--app-accent);
  color:var(--app-text);
  box-shadow:0 0 0 1px var(--app-accent) inset, 0 6px 18px -10px var(--app-accent-glow);
}
.aggr-admin-pill.off{
  opacity:0.85;
}
.aggr-admin-pill-icon{
  font-size:14px;
  filter:drop-shadow(0 0 6px var(--app-accent-glow));
}
.aggr-admin-pill.on .aggr-admin-pill-icon{
  filter:drop-shadow(0 0 10px var(--app-accent-glow));
}
.aggr-admin-pill-label{
  font-weight:600;
}
.aggr-admin-pill-state{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:0.08em;
  background:var(--app-border-0);
  color:var(--app-text-muted);
  margin-left:2px;
}
.aggr-admin-pill.on .aggr-admin-pill-state{
  background:var(--app-accent);
  color:var(--app-bg-0);
}

/* v5.10-AGGR-SHELL — Sec. View-Toggle gets softer accent so admin-pill stays primary */
.aggr-view-toggle{
  font-size:12px !important;
  font-weight:500 !important;
  opacity:0.85;
}
.aggr-view-toggle:hover{
  opacity:1;
}

/* v5.10-AGGR-SHELL — Responsive: brand-mini hidden on narrow */
@media (max-width: 880px){
  .aggr-brand-mini{ display:none; }
  .aggr-admin-pill-label{ display:none; }
}
@media (max-width: 640px){
  .aggr-admin-pill{ padding:6px 9px; }
  .aggr-admin-pill-state{ margin-left:0; }
}

/* v5.10-AGGR-SHELL — Reduced motion: kill transitions on shell pieces */
@media (prefers-reduced-motion: reduce){
  .gnav-i.aggr-nav-pill,
  .gnav-i.aggr-foot-link,
  .aggr-admin-pill{
    transition:none !important;
  }
  .gnav-i.aggr-nav-pill:hover{
    transform:none !important;
  }
}

/* ================================================================
   v5.10-AGGR-SETTINGS — iOS-style Settings page
   ----------------------------------------------------------------
   Replaces the flat tab-row with a grid of section-cards
   (icon + title + subtitle + chevron). The active card stays
   highlighted while the bento-pane below shows its content.
   Mobile: 1-column stack. Desktop: 2-column grid.
   ================================================================ */

/* v5.10-AGGR-SETTINGS — Outer shell rhythm */
.aggr-settings-ios.settings-shell{
  padding-top:6px;
}
.aggr-settings-ios .aggr-settings-head{
  margin-bottom:18px;
}
.aggr-settings-ios .aggr-settings-head h1{
  letter-spacing:-0.01em;
}

/* SETTINGS-FIX 2026-06-18 — Body = echtes 2-Spalten-Layout: linke Sub-Nav | Inhalt.
   Vorher grid-template-columns:1fr (gestapelt) -> Tabs lagen mitten auf der Seite und
   ueberlappten den Content (zusammen mit position:sticky + Pane-translateY-Animation).
   Jetzt sauberer Dokument-Flow, kein Overlap. align-items:start verhindert Stretch-Overlap. */
.aggr-settings-ios .aggr-settings-body{
  display:grid;
  grid-template-columns:248px minmax(0,1fr);
  align-items:start;
  gap:22px;
  min-height:0;
}

/* SETTINGS-FIX 2026-06-18 — Tab-Container wird zur vertikalen LINKEN Sub-Navigation
   (Liste, eine Spalte) statt 2-Spalten-Kachelblock in der Seitenmitte.
   Sticky links, eigene Spalte -> liegt nie ueber dem Inhalt. */
.aggr-settings-ios .aggr-settings-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:10px !important;
  margin:0 !important;
  flex-wrap:initial !important;
  align-content:start;
  position:sticky;
  top:0;
  align-self:start;
}
/* SETTINGS-FIX 2026-06-18 — "BEREICHE"-Label ueber der linken Sub-Nav (rein dekorativ) */
.aggr-settings-ios .aggr-settings-grid::before{
  content:"BEREICHE";
  display:block;
  font-size:10px;
  letter-spacing:1.4px;
  font-weight:700;
  color:var(--app-text-muted, #9aa3c8);
  opacity:.7;
  padding:2px 4px 4px;
}
@media (max-width: 880px){
  /* Schmal: Sub-Nav wandert nach oben, wird horizontaler Scroller — kein Overlap. */
  .aggr-settings-ios .aggr-settings-body{
    grid-template-columns:1fr;
    gap:14px;
  }
  .aggr-settings-ios .aggr-settings-grid{
    grid-template-columns:1fr !important;
    position:relative;
    top:auto;
    gap:8px !important;
  }
}

/* v5.10-AGGR-SETTINGS — Section card (replaces tab button look) */
.aggr-settings-ios .aggr-settings-card{
  position:relative;
  display:grid !important;
  grid-template-columns:46px 1fr 18px;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:78px;
  padding:14px 18px !important;
  text-align:left !important;
  border-radius:18px !important;
  border:1px solid var(--app-border-1) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 55%),
    var(--app-surface-0) !important;
  color:var(--app-text) !important;
  font-weight:500 !important;
  font-size:14px !important;
  letter-spacing:0 !important;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset;
  overflow:hidden;
}
.aggr-settings-ios .aggr-settings-card:hover{
  transform:translateY(-2px);
  border-color:var(--app-border-1) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 60%),
    var(--app-surface-1) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 10px 26px rgba(0,0,0,0.32);
}
.aggr-settings-ios .aggr-settings-card:focus-visible{
  outline:none;
  border-color:var(--app-accent) !important;
  box-shadow:
    0 0 0 3px var(--app-accent-soft),
    0 10px 26px rgba(0,0,0,0.32);
}
.aggr-settings-ios .aggr-settings-card.is-active{
  border-color:var(--app-accent) !important;
  background:
    linear-gradient(180deg, var(--app-accent-soft), transparent 55%),
    var(--app-surface-1) !important;
  color:var(--app-text) !important;
  box-shadow:
    0 0 0 1px var(--app-accent-soft),
    0 12px 28px rgba(0,0,0,0.36);
}
.aggr-settings-ios .aggr-settings-card.is-active::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(180deg, var(--app-accent), var(--app-accent-glow));
  border-radius:18px 0 0 18px;
}

/* v5.10-AGGR-SETTINGS — Icon tile inside the card */
.aggr-settings-ios .aggr-settings-card-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:14px;
  font-size:22px;
  line-height:1;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
    var(--app-surface-1);
  border:1px solid var(--app-border-1);
  color:var(--app-text);
  flex:none;
  box-shadow:0 1px 0 rgba(255,255,255,0.05) inset;
}
.aggr-settings-ios .aggr-settings-card.is-active .aggr-settings-card-icon{
  background:
    linear-gradient(180deg, var(--app-accent-soft), rgba(255,255,255,0.02)),
    var(--app-surface-1);
  border-color:var(--app-accent);
  color:var(--app-accent);
  box-shadow:
    0 0 0 1px var(--app-accent-soft) inset,
    0 0 14px var(--app-accent-glow);
}
.aggr-settings-ios .aggr-settings-card-icon[data-ico="security"],
.aggr-settings-ios .aggr-settings-card-icon[data-ico="sso"]{
  font-size:20px;
}

/* v5.10-AGGR-SETTINGS — Text stack inside the card */
.aggr-settings-ios .aggr-settings-card-body{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  text-align:left;
}
.aggr-settings-ios .aggr-settings-card-title{
  font-size:14.5px;
  font-weight:600;
  line-height:1.2;
  color:var(--app-text);
  letter-spacing:-0.005em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.aggr-settings-ios .aggr-settings-card-sub{
  font-size:12px;
  font-weight:400;
  line-height:1.35;
  color:var(--app-text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* v5.10-AGGR-SETTINGS — Chevron on the right */
.aggr-settings-ios .aggr-settings-card-chev{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:300;
  color:var(--app-text-muted);
  line-height:1;
  opacity:.6;
  transition:transform .18s ease, color .18s ease, opacity .18s ease;
}
.aggr-settings-ios .aggr-settings-card:hover .aggr-settings-card-chev{
  transform:translateX(2px);
  opacity:1;
  color:var(--app-text);
}
.aggr-settings-ios .aggr-settings-card.is-active .aggr-settings-card-chev{
  transform:rotate(90deg);
  color:var(--app-accent);
  opacity:1;
}

/* SETTINGS-FIX 2026-06-18 — Inhalts-Pane sitzt sauber in der RECHTEN Spalte.
   translateY aus der Fade-Animation ENTFERNT (verursachte beim Wechsel kurzes
   Ueberlappen); jetzt nur Opacity-Fade. min-width:0 verhindert Grid-Overflow. */
.aggr-settings-ios .aggr-settings-pane{
  position:relative;
  padding:0;
  min-width:0;
  animation:aggrSettingsFadeIn .22s ease;
}
@keyframes aggrSettingsFadeIn{
  from{ opacity:0; }
  to  { opacity:1; }
}

/* v5.10-AGGR-SETTINGS — Inner bento grids span full width inside the pane */
.aggr-settings-ios .aggr-settings-pane .bento{
  grid-template-columns:repeat(12, 1fr);
  gap:16px;
}
@media (max-width: 760px){
  .aggr-settings-ios .aggr-settings-pane .bento{
    grid-template-columns:1fr;
  }
  .aggr-settings-ios .aggr-settings-pane .bento > .card[class*="col-"]{
    grid-column:1 / -1 !important;
  }
}

/* v5.10-AGGR-SETTINGS — Override the prior inline ":style" so the active
   card's text stays readable (the inline style sets color:#fff which is fine,
   but we want our token-based hierarchy to win for non-text bits). */
.aggr-settings-ios .aggr-settings-card[style*="border-color:var(--primary)"]{
  border-color:var(--app-accent) !important;
}

/* v5.10-AGGR-SETTINGS — Reduced motion */
@media (prefers-reduced-motion: reduce){
  .aggr-settings-ios .aggr-settings-card,
  .aggr-settings-ios .aggr-settings-card-chev,
  .aggr-settings-ios .aggr-settings-pane{
    transition:none !important;
    animation:none !important;
  }
  .aggr-settings-ios .aggr-settings-card:hover{
    transform:none !important;
  }
  .aggr-settings-ios .aggr-settings-card.is-active .aggr-settings-card-chev{
    transform:none !important;
  }
}

/* ============================================================ */
/* v5.10-AGGR-CONTAINERS — RESTRUCTURED Card-Grid (HTN-Panel)    */
/* Row-Layout → Asymmetric Grid-Cards mit Game-Thumbnail,        */
/* Status-Dot, Mini-Stats Pills und Hover-Lift.                  */
/* ============================================================ */

/* v5.10-AGGR-CONTAINERS — body container */
.app-page-containers .ctr-grid-body{
  display:flex;
  flex-direction:column;
  gap:28px;
  padding:0;
}

/* v5.10-AGGR-CONTAINERS — group section (stack header + grid) */
.app-page-containers .ctr-group{
  display:flex;
  flex-direction:column;
  gap:14px;
  background:transparent;
  border:0;
  padding:0;
  box-shadow:none;
}

/* v5.10-AGGR-CONTAINERS — group header (collapsible) */
.app-page-containers .ctr-group-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 4px 8px;
  cursor:pointer;
  user-select:none;
  border-bottom:1px solid var(--app-border-0, rgba(255,255,255,0.07));
}
.app-page-containers .ctr-group-chev{
  color:var(--app-text-muted, #9aa3c8);
  font-size:13px;
  width:14px;
  display:inline-block;
}
.app-page-containers .ctr-group-icon-img{
  width:22px;
  height:22px;
  border-radius:6px;
  object-fit:cover;
}
.app-page-containers .ctr-group-icon-emoji{
  font-size:16px;
  line-height:1;
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.app-page-containers .ctr-group-title{
  margin:0;
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--app-text, #e8ecf5);
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.app-page-containers .ctr-group-count{
  font-size:11.5px;
  font-weight:600;
  font-family:var(--mono, ui-monospace, monospace);
  color:var(--app-text-muted, #9aa3c8);
  background:var(--app-surface-0, rgba(15,20,35,0.5));
  border:1px solid var(--app-border-0, rgba(255,255,255,0.07));
  padding:3px 9px;
  border-radius:999px;
}

/* v5.10-AGGR-CONTAINERS — the grid (auto-fill cards) */
.app-page-containers .ctr-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:16px;
}

/* v5.10-AGGR-CONTAINERS — CARD root (override old grid-area layout) */
.app-page-containers .ctr-card-grid > .ctr-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  grid-template-areas:none;
  grid-template-columns:none;
  grid-template-rows:none;
  align-items:stretch;
  padding:16px;
  min-height:170px;
  border:1px solid var(--app-border-0, rgba(255,255,255,0.07));
  border-radius:var(--app-r-lg, 16px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 55%),
    var(--app-surface-1, rgba(20,26,42,0.7));
  -webkit-backdrop-filter:var(--app-blur, blur(14px) saturate(140%));
  backdrop-filter:var(--app-blur, blur(14px) saturate(140%));
  box-shadow:var(--app-shadow-card, 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6));
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .22s ease;
  isolation:isolate;
  overflow:hidden;
  position:relative;
}

/* v5.10-AGGR-CONTAINERS — subtle accent bloom (top-right) */
.app-page-containers .ctr-card-grid > .ctr-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:radial-gradient(640px 240px at 100% -10%, var(--app-accent-soft, rgba(94,192,255,0.12)), transparent 60%);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
  z-index:0;
}
.app-page-containers .ctr-card-grid > .ctr-card > *{ position:relative; z-index:1; }

/* v5.10-AGGR-CONTAINERS — hover lift + accent glow */
.app-page-containers .ctr-card-grid > .ctr-card:hover{
  border-color:var(--app-border-1, rgba(255,255,255,0.10));
  transform:translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 22px 48px -22px rgba(0,0,0,0.78),
    0 0 0 1px var(--app-accent-soft, rgba(94,192,255,0.18));
}
.app-page-containers .ctr-card-grid > .ctr-card:hover::before{ opacity:1; }

/* v5.10-AGGR-CONTAINERS — TOP: icon-thumbnail + status dot */
.app-page-containers .ctr-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.app-page-containers .ctr-card-icon{
  width:52px;
  height:52px;
  border-radius:var(--app-r-md, 12px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, var(--app-surface-0), var(--app-surface-1));
  border:1px solid var(--app-border-0, rgba(255,255,255,0.07));
  flex:0 0 auto;
  position:relative;
  overflow:hidden;
}
.app-page-containers .ctr-card-icon-glyph{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  line-height:1;
  font-weight:700;
  color:var(--app-text, #e8ecf5);
}
.app-page-containers .ctr-card-icon-glyph::before{
  content:"📦";
}

/* v5.10-AGGR-CONTAINERS — per-game thumbnail icon mapping (emoji-glyph + tinted bg) */
.app-page-containers .ctr-card-icon[data-game="minecraft"]{ background:linear-gradient(135deg, rgba(95,170,80,0.22), rgba(50,120,40,0.10)); border-color:rgba(95,170,80,0.32); }
.app-page-containers .ctr-card-icon[data-game="minecraft"] .ctr-card-icon-glyph::before{ content:"🟩"; }
.app-page-containers .ctr-card-icon[data-game="minecraft-proxy"]{ background:linear-gradient(135deg, rgba(140,110,200,0.22), rgba(60,40,110,0.10)); border-color:rgba(140,110,200,0.32); }
.app-page-containers .ctr-card-icon[data-game="minecraft-proxy"] .ctr-card-icon-glyph::before{ content:"🔀"; }
.app-page-containers .ctr-card-icon[data-game="bedrock"]{ background:linear-gradient(135deg, rgba(180,140,90,0.22), rgba(110,80,40,0.10)); border-color:rgba(180,140,90,0.32); }
.app-page-containers .ctr-card-icon[data-game="bedrock"] .ctr-card-icon-glyph::before{ content:"🟫"; }
.app-page-containers .ctr-card-icon[data-game="fivem"]{ background:linear-gradient(135deg, rgba(255,140,60,0.22), rgba(180,80,30,0.10)); border-color:rgba(255,140,60,0.32); }
.app-page-containers .ctr-card-icon[data-game="fivem"] .ctr-card-icon-glyph::before{ content:"🚓"; }
.app-page-containers .ctr-card-icon[data-game="teamspeak"]{ background:linear-gradient(135deg, rgba(70,150,235,0.22), rgba(30,80,140,0.10)); border-color:rgba(70,150,235,0.32); }
.app-page-containers .ctr-card-icon[data-game="teamspeak"] .ctr-card-icon-glyph::before{ content:"🎙"; }
.app-page-containers .ctr-card-icon[data-game="debian"]{ background:linear-gradient(135deg, rgba(180,30,90,0.22), rgba(110,20,60,0.10)); border-color:rgba(180,30,90,0.32); }
.app-page-containers .ctr-card-icon[data-game="debian"] .ctr-card-icon-glyph::before{ content:"🌀"; }
.app-page-containers .ctr-card-icon[data-game="windows"]{ background:linear-gradient(135deg, rgba(60,140,220,0.22), rgba(30,80,140,0.10)); border-color:rgba(60,140,220,0.32); }
.app-page-containers .ctr-card-icon[data-game="windows"] .ctr-card-icon-glyph::before{ content:"🪟"; }
.app-page-containers .ctr-card-icon[data-game="nginx"]{ background:linear-gradient(135deg, rgba(90,200,140,0.22), rgba(40,120,80,0.10)); border-color:rgba(90,200,140,0.32); }
.app-page-containers .ctr-card-icon[data-game="nginx"] .ctr-card-icon-glyph::before{ content:"🌐"; }
.app-page-containers .ctr-card-icon[data-game="postgres"]{ background:linear-gradient(135deg, rgba(70,120,180,0.22), rgba(30,60,110,0.10)); border-color:rgba(70,120,180,0.32); }
.app-page-containers .ctr-card-icon[data-game="postgres"] .ctr-card-icon-glyph::before{ content:"🐘"; }
.app-page-containers .ctr-card-icon[data-game="mariadb"]{ background:linear-gradient(135deg, rgba(110,150,210,0.22), rgba(50,80,140,0.10)); border-color:rgba(110,150,210,0.32); }
.app-page-containers .ctr-card-icon[data-game="mariadb"] .ctr-card-icon-glyph::before{ content:"🐬"; }
.app-page-containers .ctr-card-icon[data-game="redis"]{ background:linear-gradient(135deg, rgba(220,80,70,0.22), rgba(150,40,30,0.10)); border-color:rgba(220,80,70,0.32); }
.app-page-containers .ctr-card-icon[data-game="redis"] .ctr-card-icon-glyph::before{ content:"🟥"; }
.app-page-containers .ctr-card-icon[data-game="mongo"]{ background:linear-gradient(135deg, rgba(80,180,110,0.22), rgba(40,110,60,0.10)); border-color:rgba(80,180,110,0.32); }
.app-page-containers .ctr-card-icon[data-game="mongo"] .ctr-card-icon-glyph::before{ content:"🍃"; }
.app-page-containers .ctr-card-icon[data-game="jellyfin"]{ background:linear-gradient(135deg, rgba(120,90,200,0.22), rgba(70,40,140,0.10)); border-color:rgba(120,90,200,0.32); }
.app-page-containers .ctr-card-icon[data-game="jellyfin"] .ctr-card-icon-glyph::before{ content:"🎬"; }
.app-page-containers .ctr-card-icon[data-game="claude"]{ background:linear-gradient(135deg, rgba(240,160,90,0.22), rgba(180,100,40,0.10)); border-color:rgba(240,160,90,0.32); }
.app-page-containers .ctr-card-icon[data-game="claude"] .ctr-card-icon-glyph::before{ content:"🧠"; }
.app-page-containers .ctr-card-icon[data-game="rust"]{ background:linear-gradient(135deg, rgba(190,110,70,0.22), rgba(120,60,30,0.10)); border-color:rgba(190,110,70,0.32); }
.app-page-containers .ctr-card-icon[data-game="rust"] .ctr-card-icon-glyph::before{ content:"🔧"; }
.app-page-containers .ctr-card-icon[data-game="valheim"]{ background:linear-gradient(135deg, rgba(140,110,80,0.22), rgba(90,60,40,0.10)); border-color:rgba(140,110,80,0.32); }
.app-page-containers .ctr-card-icon[data-game="valheim"] .ctr-card-icon-glyph::before{ content:"🪓"; }
.app-page-containers .ctr-card-icon[data-game="palworld"]{ background:linear-gradient(135deg, rgba(180,140,200,0.22), rgba(110,80,140,0.10)); border-color:rgba(180,140,200,0.32); }
.app-page-containers .ctr-card-icon[data-game="palworld"] .ctr-card-icon-glyph::before{ content:"🐱"; }
.app-page-containers .ctr-card-icon[data-game="ark"]{ background:linear-gradient(135deg, rgba(150,90,60,0.22), rgba(90,50,30,0.10)); border-color:rgba(150,90,60,0.32); }
.app-page-containers .ctr-card-icon[data-game="ark"] .ctr-card-icon-glyph::before{ content:"🦖"; }
.app-page-containers .ctr-card-icon[data-game="factorio"]{ background:linear-gradient(135deg, rgba(200,150,70,0.22), rgba(130,90,30,0.10)); border-color:rgba(200,150,70,0.32); }
.app-page-containers .ctr-card-icon[data-game="factorio"] .ctr-card-icon-glyph::before{ content:"⚙"; }
.app-page-containers .ctr-card-icon[data-game="terraria"]{ background:linear-gradient(135deg, rgba(110,180,90,0.22), rgba(60,120,40,0.10)); border-color:rgba(110,180,90,0.32); }
.app-page-containers .ctr-card-icon[data-game="terraria"] .ctr-card-icon-glyph::before{ content:"🌳"; }
.app-page-containers .ctr-card-icon[data-game="generic"]{ background:linear-gradient(135deg, rgba(154,163,200,0.18), rgba(80,90,130,0.08)); border-color:rgba(154,163,200,0.22); }
.app-page-containers .ctr-card-icon[data-game="generic"] .ctr-card-icon-glyph::before{ content:"📦"; }

/* v5.10-AGGR-CONTAINERS — STATUS dot (top-right) */
.app-page-containers .ctr-card .ctr-status{
  width:10px;
  height:10px;
  border-radius:50%;
  flex:0 0 auto;
  margin-top:6px;
  position:relative;
  box-shadow:0 0 0 3px var(--app-surface-1, rgba(20,26,42,0.7));
}
.app-page-containers .ctr-card .ctr-status[data-state="running"]{
  background:var(--app-success, #34e29b);
  box-shadow:0 0 0 3px rgba(52,226,155,0.10), 0 0 12px 2px rgba(52,226,155,0.45);
}
.app-page-containers .ctr-card .ctr-status[data-state="stopped"]{
  background:var(--app-text-muted, #9aa3c8);
  opacity:0.55;
}
.app-page-containers .ctr-card .ctr-status[data-state="crash"]{
  background:var(--app-danger, #ff5c7c);
  box-shadow:0 0 0 3px rgba(255,92,124,0.12), 0 0 12px 2px rgba(255,92,124,0.5);
}

/* v5.10-AGGR-CONTAINERS — BODY: name big, subtitle small (visual hierarchy) */
.app-page-containers .ctr-card-body{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.app-page-containers .ctr-card-name{
  font-weight:700;
  font-size:15.5px;
  letter-spacing:-.015em;
  color:var(--app-text, #e8ecf5);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.25;
}
.app-page-containers .ctr-card-subtitle{
  font-size:12px;
  color:var(--app-text-muted, #9aa3c8);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:500;
}

/* v5.10-AGGR-CONTAINERS — STATS: 3 mini pill-badges */
.app-page-containers .ctr-card-stats{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:auto;
}
.app-page-containers .ctr-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 9px;
  font-size:10.5px;
  font-weight:600;
  font-family:var(--mono, ui-monospace, monospace);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--app-text-muted, #9aa3c8);
  background:var(--app-surface-0, rgba(15,20,35,0.5));
  border:1px solid var(--app-border-0, rgba(255,255,255,0.07));
  border-radius:999px;
  line-height:1.4;
}
.app-page-containers .ctr-pill-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  display:inline-block;
  background:currentColor;
  opacity:.7;
}
.app-page-containers .ctr-pill-cpu{ color:var(--app-accent, #5ec0ff); border-color:var(--app-accent-soft, rgba(94,192,255,0.18)); }
.app-page-containers .ctr-pill-ram{ color:var(--app-warn, #ffb84d); border-color:rgba(255,184,77,0.18); }
.app-page-containers .ctr-pill-players{ color:var(--app-success, #34e29b); border-color:rgba(52,226,155,0.18); }

/* v5.10-AGGR-CONTAINERS — FOOT: badge + quick-actions (only visible on hover) */
.app-page-containers .ctr-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
  padding-top:8px;
  border-top:1px dashed var(--app-border-0, rgba(255,255,255,0.07));
}
.app-page-containers .ctr-card-badge{
  display:inline-flex;
  align-items:center;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid transparent;
}
.app-page-containers .ctr-card-badge.on{
  color:var(--app-success, #34e29b);
  background:rgba(52,226,155,0.10);
  border-color:rgba(52,226,155,0.22);
}
.app-page-containers .ctr-card-badge.off{
  color:var(--app-text-muted, #9aa3c8);
  background:rgba(154,163,200,0.08);
  border-color:rgba(154,163,200,0.18);
}

/* v5.10-AGGR-CONTAINERS — quick-actions hidden, fade-in on hover */
.app-page-containers .ctr-card-quick{
  display:inline-flex;
  align-items:center;
  gap:4px;
  opacity:0;
  transform:translateX(4px);
  transition:opacity .18s ease, transform .18s ease;
}
.app-page-containers .ctr-card-grid > .ctr-card:hover .ctr-card-quick{
  opacity:1;
  transform:translateX(0);
}
.app-page-containers .ctr-card-grid > .ctr-card:focus-within .ctr-card-quick{
  opacity:1;
  transform:translateX(0);
}
.app-page-containers .ctr-quick-btn{
  appearance:none;
  border:1px solid var(--app-border-0, rgba(255,255,255,0.07));
  background:var(--app-surface-0, rgba(15,20,35,0.5));
  color:var(--app-text-muted, #9aa3c8);
  width:26px;
  height:26px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11.5px;
  cursor:pointer;
  padding:0;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.app-page-containers .ctr-quick-btn:hover{
  background:var(--app-accent-soft, rgba(94,192,255,0.12));
  color:var(--app-accent, #5ec0ff);
  border-color:var(--app-accent-soft, rgba(94,192,255,0.18));
  transform:translateY(-1px);
}
.app-page-containers .ctr-quick-btn:active{ transform:translateY(0); }

/* v5.10-AGGR-CONTAINERS — empty state */
.app-page-containers .ctr-empty{
  border-radius:var(--app-r-lg, 16px);
  border:1px dashed var(--app-border-1, rgba(255,255,255,0.10));
  background:var(--app-surface-0, rgba(15,20,35,0.5));
}

/* v5.10-AGGR-CONTAINERS — Responsive: tighter on narrow */
@media (max-width:560px){
  .app-page-containers .ctr-card-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .app-page-containers .ctr-card-grid > .ctr-card{
    min-height:auto;
    padding:14px;
  }
  .app-page-containers .ctr-card-quick{
    opacity:1;
    transform:none;
  }
}

/* v5.10-AGGR-CONTAINERS — Reduced-motion: kill lift + transitions */
@media (prefers-reduced-motion: reduce){
  .app-page-containers .ctr-card-grid > .ctr-card,
  .app-page-containers .ctr-card-grid > .ctr-card::before,
  .app-page-containers .ctr-card-quick,
  .app-page-containers .ctr-quick-btn{
    transition:none !important;
  }
  .app-page-containers .ctr-card-grid > .ctr-card:hover{
    transform:none !important;
  }
}

/* ================================================================
   v5.10-AGGR-DETAIL — Container-Detail Page (page==='c') Refinement
   ----------------------------------------------------------------
   HTN-Panel / Pterodactyl style hero refresh:
     - .aggr-hero      Big game-icon (xl 80x80) + gradient title + status + actions
     - .aggr-stats-row 5 big stat-cards in a row (Status/CPU/RAM/Disk/Net)
     - .aggr-srv-addr  Prominent server-address card + player-list
     - .aggr-tab-pills Horizontal pill nav (replaces vertical sidebar)
     - .aggr-srv-shell Full-width tab-content area
   All scoped under .detail-c.aggr-detail to avoid leaks.
   ================================================================ */

/* v5.10-AGGR-DETAIL — Sticky-top container: more breathing room, glass surface */
.detail-c.aggr-detail .detail-sticky-top.aggr-detail-sticky{
  padding:18px 0 14px;
  gap:14px;
}

/* v5.10-AGGR-DETAIL — HERO root */
.detail-c.aggr-detail .page-head.aggr-hero{
  margin:0 4px;
  padding:18px 22px;
  border-radius:var(--app-r-lg, 16px);
  background:
    radial-gradient(circle at 0% 0%, var(--app-accent-soft, rgba(94,192,255,0.10)) 0%, transparent 55%),
    linear-gradient(180deg, var(--app-surface-1, rgba(20,26,42,0.72)) 0%, var(--app-surface-0, rgba(15,20,35,0.5)) 100%);
  border:1px solid var(--app-border-1, rgba(255,255,255,0.10));
  -webkit-backdrop-filter:var(--app-blur, blur(14px) saturate(140%));
  backdrop-filter:var(--app-blur, blur(14px) saturate(140%));
  box-shadow:var(--app-shadow-card, 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6));
  position:relative;
  overflow:hidden;
  align-items:center !important;
}

/* v5.10-AGGR-DETAIL — accent bloom in top-right */
.detail-c.aggr-detail .page-head.aggr-hero::before{
  content:"";
  position:absolute;
  top:-30%;
  right:-10%;
  width:280px;
  height:280px;
  background:radial-gradient(circle, var(--app-accent-glow, rgba(94,192,255,0.20)) 0%, transparent 65%);
  pointer-events:none;
  z-index:0;
}

.detail-c.aggr-detail .aggr-hero-left,
.detail-c.aggr-detail .aggr-hero-actions{
  position:relative;
  z-index:1;
}

/* v5.10-AGGR-DETAIL — back chevron: glass pill */
.detail-c.aggr-detail .aggr-hero-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  flex:0 0 auto;
  border-radius:10px;
  color:var(--app-text-muted, var(--muted));
  text-decoration:none;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--app-border-0, rgba(255,255,255,0.07));
  font-size:18px;
  font-weight:600;
  transition:background .16s ease, color .16s ease, transform .16s ease;
}
.detail-c.aggr-detail .aggr-hero-back:hover{
  background:var(--app-accent-soft, rgba(94,192,255,0.12));
  color:var(--app-accent, #5ec0ff);
  transform:translateX(-2px);
}

/* v5.10-AGGR-DETAIL — Hero thumbnail (xl) ring + pulse */
.detail-c.aggr-detail .aggr-hero-thumb{
  width:80px !important;
  height:80px !important;
  border-radius:18px !important;
  font-size:28px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 16px 40px -12px rgba(0,0,0,0.55),
    0 0 0 1px var(--app-border-1, rgba(255,255,255,0.10));
}

/* v5.10-AGGR-DETAIL — Identity column: gradient title + subtitle */
.detail-c.aggr-detail .aggr-hero-ident{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.detail-c.aggr-detail .aggr-hero-title{
  font-size:30px !important;
  font-weight:800 !important;
  letter-spacing:-.035em !important;
  line-height:1.05 !important;
  margin:0 !important;
}
.detail-c.aggr-detail .aggr-hero-dot{
  width:10px;
  height:10px;
  flex:0 0 auto;
}
.detail-c.aggr-detail .aggr-hero-switch{
  background:transparent;
  border:0;
  padding:2px 26px 2px 2px;
  font-size:30px;
  font-weight:800;
  letter-spacing:-.035em;
  color:var(--app-text, #e8ecf5);
  -webkit-text-fill-color:var(--app-text, #e8ecf5);  /* solide Farbe — Gradient-clip:text macht select-Text unsichtbar */
  cursor:pointer;
  max-width:100%;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
}
.detail-c.aggr-detail .aggr-hero-switch option{ color:#1a1f33; background:#fff; -webkit-text-fill-color:#1a1f33; font-size:14px; font-weight:600; }

/* v5.10-FIX-VSHOW — Tab-Panels (.tab-files/.tab-backups/.tab-mods …) hatten display:flex/grid !important,
   was Vues v-show (display:none) überschrieb → ALLE Tabs gleichzeitig sichtbar (immer Datei-Manager).
   Erzwingt Verstecken sobald v-show display:none gesetzt hat → nur der aktive Tab zeigt. */
.detail-c .srv-main > [style*="display: none"],
.detail-c .srv-main > [style*="display:none"]{ display:none !important; }
.detail-c.aggr-detail .aggr-hero-switch:focus{
  outline:none;
  text-decoration:underline;
  text-decoration-color:var(--app-accent, #5ec0ff);
}

/* v5.10-AGGR-DETAIL — Subtitle row: image + state pill + health */
.detail-c.aggr-detail .aggr-hero-sub{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}
.detail-c.aggr-detail .aggr-hero-image{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--app-text-muted, var(--muted));
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:420px;
  letter-spacing:-.01em;
}
.detail-c.aggr-detail .aggr-hero-statebadge{
  margin-left:0 !important;
  padding:3px 10px !important;
  font-size:11px !important;
  font-weight:700 !important;
  border-radius:999px !important;
  letter-spacing:.02em;
}
.detail-c.aggr-detail .aggr-hero-health{
  font-size:11.5px;
  font-style:italic;
}

/* v5.10-AGGR-DETAIL — Hero actions: bigger primary, smaller secondaries */
.detail-c.aggr-detail .aggr-hero-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.detail-c.aggr-detail .aggr-act{
  padding:10px 16px;
  font-size:13.5px;
  font-weight:700;
  border-radius:10px;
  letter-spacing:.01em;
  transition:transform .12s ease, box-shadow .14s ease, background .14s ease;
}
.detail-c.aggr-detail .aggr-act:hover{
  transform:translateY(-1px);
}
.detail-c.aggr-detail .aggr-act-primary{
  padding:12px 22px;
  font-size:14px;
  background:linear-gradient(135deg, var(--app-success, #34e29b) 0%, var(--app-accent, #5ec0ff) 100%);
  border:0;
  color:#06121a;
  box-shadow:0 8px 22px -10px var(--app-accent-glow, rgba(94,192,255,0.40));
}
.detail-c.aggr-detail .aggr-act-primary:hover{
  box-shadow:0 12px 28px -10px var(--app-accent-glow, rgba(94,192,255,0.55));
}
.detail-c.aggr-detail .aggr-act-danger{
  padding:10px 14px;
}

/* v5.10-AGGR-DETAIL — Live-Stats-Row (replaces the old single horizontal divider row) */
.detail-c.aggr-detail .aggr-stats-row{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px !important;
  padding:0 !important;
  margin:0 4px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.detail-c.aggr-detail .aggr-stat-card{
  background:var(--app-surface-1, var(--surface));
  border:1px solid var(--app-border-1, var(--border));
  border-radius:var(--app-r-md, 12px);
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  position:relative;
  overflow:hidden;
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  backdrop-filter:blur(10px) saturate(140%);
  box-shadow:var(--app-shadow-card, 0 8px 22px -16px rgba(0,0,0,0.5));
  transition:transform .16s ease, border-color .16s ease;
}
.detail-c.aggr-detail .aggr-stat-card:hover{
  border-color:var(--app-border-1, var(--border2));
  transform:translateY(-1px);
}
.detail-c.aggr-detail .aggr-stat-ico{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--app-text-muted, var(--muted));
}
.detail-c.aggr-detail .aggr-stat-tag{
  font-size:9px;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  margin-left:4px;
}
.detail-c.aggr-detail .aggr-stat-refresh{
  margin-left:auto;
  padding:0 6px;
  font-size:11px;
  line-height:1.4;
  border:0;
  color:var(--app-text-muted, var(--muted));
}
.detail-c.aggr-detail .aggr-stat-val{
  font-size:22px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.1;
  color:var(--app-text, var(--text));
  word-break:break-word;
}
.detail-c.aggr-detail .aggr-stat-sub{
  font-size:11px;
  color:var(--app-text-muted, var(--muted));
}
/* animated progress bar (Sparkline-like) */
.detail-c.aggr-detail .aggr-stat-bar{
  height:5px;
  background:rgba(255,255,255,0.05);
  border-radius:4px;
  overflow:hidden;
  margin-top:auto;
  position:relative;
}
.detail-c.aggr-detail .aggr-stat-bar > i{
  display:block;
  height:100%;
  background:var(--app-accent, var(--primary));
  border-radius:4px;
  transition:width .35s cubic-bezier(.22,.94,.42,1);
  box-shadow:0 0 8px var(--app-accent-glow, rgba(94,192,255,0.30));
}
.detail-c.aggr-detail .aggr-stat-net-rows{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:2px;
}
.detail-c.aggr-detail .aggr-stat-net-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:6px;
  font-size:13px;
}
.detail-c.aggr-detail .aggr-stat-net-row b{
  font-weight:700;
  color:var(--app-text, var(--text));
}

/* v5.10-AGGR-DETAIL — Server-Address card: prominent gradient surface for game-servers */
.detail-c.aggr-detail .aggr-srv-addr{
  margin:0 4px !important;
  padding:16px 20px !important;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:0;
  background:
    linear-gradient(135deg, rgba(127,168,255,0.10) 0%, var(--app-surface-1, rgba(20,26,42,0.7)) 60%) !important;
  border:1px solid rgba(127,168,255,0.22) !important;
  border-radius:var(--app-r-md, 12px) !important;
  position:relative;
  overflow:hidden;
}
/* mittig geteilt: vertikaler Trenner + symmetrische Innenabstände */
.detail-c.aggr-detail .aggr-srv-addr-left{ padding-right:22px; }
.detail-c.aggr-detail .aggr-srv-addr-right{
  padding-left:22px;
  border-left:1px solid rgba(127,168,255,0.18);
}
.detail-c.aggr-detail .aggr-srv-addr::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 100% 0%, rgba(127,168,255,0.14) 0%, transparent 50%);
}
.detail-c.aggr-detail .aggr-srv-addr-left,
.detail-c.aggr-detail .aggr-srv-addr-right{
  position:relative;
  z-index:1;
  min-width:0;
}
.detail-c.aggr-detail .aggr-srv-addr-label{
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--app-text-muted, var(--muted));
  margin-bottom:6px;
}
.detail-c.aggr-detail .aggr-srv-addr-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.detail-c.aggr-detail .aggr-srv-addr-val{
  font-size:20px;
  font-weight:800;
  font-family:var(--mono);
  color:#7fa8ff;
  letter-spacing:-.01em;
  word-break:break-all;
}
.detail-c.aggr-detail .aggr-srv-addr-copy{
  padding:6px 12px !important;
  font-size:11.5px !important;
  border-radius:8px !important;
}
/* klickbarer Adress-Text (ersetzt den Kopieren-Button) */
.detail-c.aggr-detail .aggr-srv-addr-val-copy{
  cursor:pointer;
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  padding:3px 6px;
  margin:-3px -6px;
  border-radius:8px;
  transition:background .12s ease, color .12s ease;
  outline:none;
}
.detail-c.aggr-detail .aggr-srv-addr-val-copy:hover,
.detail-c.aggr-detail .aggr-srv-addr-val-copy:focus-visible{
  background:rgba(127,168,255,0.12);
  color:#a9c4ff;
}
.detail-c.aggr-detail .aggr-srv-addr-copyhint{
  font-size:10.5px;
  font-weight:600;
  font-family:var(--app-font, inherit);
  color:var(--app-text-muted, var(--muted));
  opacity:.7;
  letter-spacing:0;
  white-space:nowrap;
}
.detail-c.aggr-detail .aggr-srv-addr-val-copy:hover .aggr-srv-addr-copyhint{ opacity:1; }
.detail-c.aggr-detail .aggr-srv-addr-actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.detail-c.aggr-detail .aggr-srv-addr-avatar{
  width:18px;
  height:18px;
  border-radius:4px;
  image-rendering:pixelated;
  flex-shrink:0;
  background:rgba(255,255,255,.06);
}
.detail-c.aggr-detail .aggr-srv-addr-more{
  margin-left:0 !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  padding:4px 12px !important;
  background:rgba(127,168,255,.20) !important;
  color:#bcd0ff !important;
  border:1px solid rgba(127,168,255,.30) !important;
  border-radius:999px !important;
  cursor:pointer;
  display:inline-flex !important;
  align-items:center !important;
}
.detail-c.aggr-detail .aggr-srv-addr-more:hover{ background:rgba(127,168,255,.32) !important; }
.detail-c.aggr-detail .aggr-srv-addr-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  padding:1px 7px;
  border-radius:999px;
  background:var(--app-accent-soft, rgba(94,192,255,0.18));
  color:var(--app-accent, #9bbcff);
  font-size:11px;
  font-weight:800;
  font-family:var(--mono);
  margin-left:4px;
}
.detail-c.aggr-detail .aggr-srv-addr-players{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:4px;
}
.detail-c.aggr-detail .aggr-srv-addr-player{
  margin-left:0 !important;
  font-size:12px !important;
  padding:4px 10px !important;
  background:rgba(56,123,255,.16) !important;
  color:#9bbcff !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  border-radius:999px !important;
}
.detail-c.aggr-detail .aggr-srv-addr-kick,
.detail-c.aggr-detail .aggr-srv-addr-ban{
  padding:0 5px !important;
  font-size:10px !important;
  line-height:1 !important;
}
.detail-c.aggr-detail .aggr-srv-addr-ban{
  color:var(--app-danger, var(--danger)) !important;
}
.detail-c.aggr-detail .aggr-srv-addr-empty{
  font-size:12px;
  margin-top:4px;
}

/* v5.10-AGGR-DETAIL — Shell switch: stack tab-pills above srv-main (was 2-col grid) */
.detail-c.aggr-detail > .bento.aggr-detail-bento > .srv-shell.aggr-srv-shell{
  display:flex !important;
  flex-direction:column !important;
  grid-template-columns:none !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  gap:14px !important;
  align-items:stretch !important;
}

/* v5.10-AGGR-DETAIL — Horizontal pill tab-nav (replaces vertical sidebar) */
.detail-c.aggr-detail .srv-nav.aggr-tab-pills{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  position:sticky !important;
  top:0 !important;
  align-self:stretch !important;
  height:auto !important;
  max-height:none !important;
  overflow-y:visible !important;
  padding:8px 10px !important;
  background:var(--app-surface-0, rgba(15,20,35,0.5));
  border:1px solid var(--app-border-0, rgba(255,255,255,0.07));
  border-radius:var(--app-r-md, 12px);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
  z-index:4;
}
.detail-c.aggr-detail .srv-nav.aggr-tab-pills .btn{
  width:auto !important;
  flex:0 0 auto;
  padding:8px 14px !important;
  font-size:12.5px !important;
  border-radius:999px !important;
  border:1px solid transparent !important;
  background:transparent !important;
  color:var(--app-text-muted, var(--muted)) !important;
  font-weight:600 !important;
  white-space:nowrap;
  transition:background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}
.detail-c.aggr-detail .srv-nav.aggr-tab-pills .btn:hover{
  background:rgba(255,255,255,0.04) !important;
  color:var(--app-text, var(--text)) !important;
}
.detail-c.aggr-detail .srv-nav.aggr-tab-pills .btn[style*="primary"]{
  background:rgba(99,102,241,.18) !important;
  border-color:var(--primary) !important;
  color:#fff !important;
  box-shadow:0 0 12px rgba(99,102,241,.35) !important;
}
.detail-c.aggr-detail .srv-nav.aggr-tab-pills .btn[style*="danger"]{
  background:rgba(255,90,114,.10) !important;
  border-color:var(--app-danger, var(--danger)) !important;
}
.detail-c.aggr-detail .srv-nav.aggr-tab-pills .tab-divider{
  width:1px;height:26px;background:var(--border);margin:5px 3px;align-self:center;display:inline-block;
}

/* v5.10-AGGR-DETAIL — srv-main full-width below tab-pills */
.detail-c.aggr-detail .srv-main{
  align-self:stretch !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  overflow-y:auto;
  overflow-x:hidden;
  min-height:0;
  padding:0 6px 0 0;
}

/* v5.10-AGGR-DETAIL — dash-grid: invert layout — stats COMPLETE ON TOP, console below */
.detail-c.aggr-detail .dash-grid{
  display:flex !important;
  flex-direction:column !important;
  grid-template-columns:none !important;
  gap:14px !important;
  height:auto !important;
  min-height:0 !important;
}
.detail-c.aggr-detail .dash-stats-col{
  overflow:visible !important;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}
.detail-c.aggr-detail .dash-stats-col .dash-stat-cards{
  grid-column:1 / -1;
  grid-template-columns:1fr 1fr;
}
.detail-c.aggr-detail .dash-console-col{
  min-height:0 !important;
  flex:1 1 auto !important;
}
.detail-c.aggr-detail .dash-console-col > .card{
  flex:1 1 auto !important;
  min-height:0 !important;
  display:flex;
  flex-direction:column;
}
.detail-c.aggr-detail .dash-console-col #gamelogbox{
  flex:1 1 auto !important;
  height:auto !important;
  min-height:200px !important;
  max-height:none !important;
  overflow-y:auto !important;
}

/* v5.10-AGGR-DETAIL — Responsive: collapse hero on narrow screens */
@media (max-width: 880px){
  .detail-c.aggr-detail .page-head.aggr-hero{
    flex-direction:column !important;
    align-items:flex-start !important;
    padding:14px 16px;
  }
  .detail-c.aggr-detail .aggr-hero-actions{
    width:100%;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  .detail-c.aggr-detail .aggr-hero-thumb{
    width:64px !important;
    height:64px !important;
    font-size:22px !important;
  }
  .detail-c.aggr-detail .aggr-hero-title{
    font-size:24px !important;
  }
  .detail-c.aggr-detail .aggr-hero-switch{
    font-size:24px;
  }
  .detail-c.aggr-detail .aggr-stats-row{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  .detail-c.aggr-detail .aggr-srv-addr{
    grid-template-columns:1fr !important;
  }
  .detail-c.aggr-detail .aggr-srv-addr-left{ padding-right:0 !important; padding-bottom:14px; }
  .detail-c.aggr-detail .aggr-srv-addr-right{
    padding-left:0 !important;
    border-left:none !important;
    border-top:1px solid rgba(127,168,255,0.18);
    padding-top:14px;
  }
}
@media (max-width: 560px){
  .detail-c.aggr-detail .aggr-stats-row{
    grid-template-columns:1fr !important;
  }
}

/* v5.10-AGGR-DETAIL — Reduced motion: kill animations + lift */
@media (prefers-reduced-motion: reduce){
  .detail-c.aggr-detail .aggr-stat-card,
  .detail-c.aggr-detail .aggr-act,
  .detail-c.aggr-detail .aggr-hero-back,
  .detail-c.aggr-detail .srv-nav.aggr-tab-pills .btn{
    transition:none !important;
  }
  .detail-c.aggr-detail .aggr-stat-card:hover,
  .detail-c.aggr-detail .aggr-act:hover,
  .detail-c.aggr-detail .aggr-hero-back:hover{
    transform:none !important;
  }
  .detail-c.aggr-detail .aggr-stat-bar > i{
    transition:none !important;
  }
}

/* ================================================================
   v5.10-AGGR-DASHBOARD — Linear/Notion-style Dashboard restructure
   ----------------------------------------------------------------
   - Big hero with gradient title + multi-button action row
   - 4-stat grid with sparkline-bar below value
   - 2x2 quick-access cards (Bridge-Rechte/Übersicht/Backup/Anfragen)
   - Recent-active container rows with game-icon thumbnail
   - End-user product cards with game thumbnail + status badge
   ================================================================ */

/* v5.10-AGGR-DASHBOARD — Hero */
.dash-page .aggr-dash-hero{
  position:relative;
  overflow:hidden;
  border-radius:var(--app-r-lg);
  border:1px solid var(--app-border-1);
  background:
    radial-gradient(120% 220% at 0% 0%, var(--app-accent-soft) 0%, transparent 55%),
    linear-gradient(135deg, var(--app-surface-1) 0%, var(--app-surface-0) 100%);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
  margin-bottom:22px;
  isolation:isolate;
}
.dash-page .aggr-dash-hero-aurora{
  position:absolute;
  inset:-30% -10% auto auto;
  width:560px;
  height:560px;
  background:radial-gradient(circle, var(--app-accent-glow) 0%, transparent 65%);
  filter:blur(60px);
  opacity:.55;
  pointer-events:none;
  z-index:0;
  animation:aggrDashAurora 22s ease-in-out infinite alternate;
}
.dash-page .aggr-dash-hero-aurora-b{
  inset:auto auto -40% -20%;
  width:480px;
  height:480px;
  background:radial-gradient(circle, rgba(167,139,250,.32) 0%, transparent 65%);
  animation-duration:30s;
  animation-direction:alternate-reverse;
}
@keyframes aggrDashAurora{
  0%{ transform:translate(0,0) scale(1); opacity:.5; }
  100%{ transform:translate(-30px,20px) scale(1.08); opacity:.7; }
}
.dash-page .aggr-dash-hero-grain{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:42px 42px;
  pointer-events:none;
  z-index:1;
  mask-image:radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 80%);
}
.dash-page .aggr-dash-hero-inner{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:34px 32px;
  flex-wrap:wrap;
}
.dash-page .aggr-dash-hero-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  flex:1 1 360px;
}
.dash-page .aggr-dash-hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--app-text-muted);
  text-transform:uppercase;
}
.dash-page .aggr-dash-hero-eyebrow::before{
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--app-accent);
  box-shadow:0 0 12px var(--app-accent-glow);
}
.dash-page .aggr-dash-hero-title{
  margin:2px 0 4px;
  font-size:36px;
  line-height:1.05;
  font-weight:800;
  letter-spacing:-.022em;
  background:linear-gradient(98deg, var(--app-text) 0%, var(--app-accent) 60%, #a78bfa 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.dash-page .aggr-dash-hero-sub{
  margin:0;
  font-size:14px;
  color:var(--app-text-muted);
  max-width:62ch;
  line-height:1.45;
}
.dash-page .aggr-dash-hero-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  align-items:center;
}
.dash-page .aggr-dash-hero-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 16px;
  border-radius:var(--app-r-md);
  font-size:13.5px;
  font-weight:600;
  border:1px solid var(--app-border-1);
  background:var(--app-surface-0);
  color:var(--app-text);
  cursor:pointer;
  text-decoration:none;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.dash-page .aggr-dash-hero-cta:hover{
  transform:translateY(-1px);
  border-color:var(--app-accent);
}
.dash-page .aggr-dash-hero-cta-primary{
  border-color:transparent;
  background:linear-gradient(96deg, var(--app-accent) 0%, #a78bfa 100%);
  color:#0a0d18;
  box-shadow:0 8px 20px -10px var(--app-accent-glow);
}
.dash-page .aggr-dash-hero-cta-primary:hover{
  filter:brightness(1.08);
}
.dash-page .aggr-dash-hero-cta-ghost{
  background:transparent;
}
.dash-page .aggr-dash-hero-cta-glyph{
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  font-size:13px;
  opacity:.9;
}

/* v5.10-AGGR-DASHBOARD — Section heads */
.dash-page .aggr-dash-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:8px 2px 12px;
}
.dash-page .aggr-dash-section-title{
  margin:0;
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--app-text);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.dash-page .aggr-dash-section-hint{
  font-size:12px;
  color:var(--app-text-muted);
  font-weight:500;
}
.dash-page .aggr-dash-section-link{
  font-size:12.5px;
  color:var(--app-accent);
  text-decoration:none;
  font-weight:600;
}
.dash-page .aggr-dash-section-link:hover{ text-decoration:underline; }
.dash-page .aggr-dash-section-btn{
  padding:6px 12px;
  border-radius:var(--app-r-sm);
  border:1px solid var(--app-border-1);
  background:var(--app-surface-0);
  color:var(--app-text);
  font-size:12.5px;
  cursor:pointer;
  transition:border-color .14s ease, background .14s ease;
}
.dash-page .aggr-dash-section-btn:hover{
  border-color:var(--app-accent);
  background:var(--app-accent-soft);
}

/* v5.10-AGGR-DASHBOARD — Stats Grid (4 cards) */
.dash-page .aggr-dash-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:24px;
}
.dash-page .aggr-dash-statcard{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px 18px 16px;
  border-radius:var(--app-r-md);
  border:1px solid var(--app-border-1);
  background:var(--app-surface-0);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  box-shadow:var(--app-shadow-card);
  cursor:pointer;
  overflow:hidden;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
  isolation:isolate;
}
.dash-page .aggr-dash-statcard::before{
  content:'';
  position:absolute;
  inset:auto -20% -50% auto;
  width:220px;
  height:220px;
  background:radial-gradient(circle, var(--app-accent-soft) 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
  opacity:.6;
}
.dash-page .aggr-dash-statcard-cpu::before{ background:radial-gradient(circle, rgba(255,180,67,.22) 0%, transparent 70%); }
.dash-page .aggr-dash-statcard-ram::before{ background:radial-gradient(circle, rgba(94,192,255,.22) 0%, transparent 70%); }
.dash-page .aggr-dash-statcard-disk::before{ background:radial-gradient(circle, rgba(52,226,155,.22) 0%, transparent 70%); }
.dash-page .aggr-dash-statcard-up::before{ background:radial-gradient(circle, rgba(167,139,250,.22) 0%, transparent 70%); }
.dash-page .aggr-dash-statcard:hover{
  transform:translateY(-2px);
  border-color:var(--app-accent);
}
.dash-page .aggr-dash-statcard > *{ position:relative; z-index:1; }
.dash-page .aggr-dash-statcard-head{
  display:flex;
  align-items:center;
  gap:9px;
}
.dash-page .aggr-dash-statcard-glyph{
  display:inline-grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:var(--app-r-sm);
  background:var(--app-accent-soft);
  font-size:15px;
}
.dash-page .aggr-dash-statcard-label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--app-text-muted);
  text-transform:uppercase;
}
.dash-page .aggr-dash-statcard-value{
  font-size:34px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--app-text);
}
.dash-page .aggr-dash-statcard-value-text{
  font-size:22px;
  font-weight:700;
}
.dash-page .aggr-dash-statcard-unit{
  font-size:18px;
  font-weight:600;
  opacity:.6;
  margin-left:2px;
}
.dash-page .aggr-dash-statcard-spark{
  height:6px;
  border-radius:99px;
  background:var(--app-border-0);
  overflow:hidden;
  position:relative;
}
.dash-page .aggr-dash-statcard-spark-fill{
  height:100%;
  border-radius:99px;
  background:var(--app-accent);
  transition:width .5s cubic-bezier(.22,1,.36,1);
  box-shadow:0 0 12px var(--app-accent-glow);
}
.dash-page .aggr-dash-statcard-spark-fill-fluid{
  width:100%;
  background:linear-gradient(90deg, transparent 0%, var(--app-accent) 50%, transparent 100%);
  background-size:200% 100%;
  animation:aggrDashSparkSlide 2.4s ease-in-out infinite;
}
@keyframes aggrDashSparkSlide{
  0%{ background-position:200% 0; }
  100%{ background-position:-100% 0; }
}
.dash-page .aggr-dash-statcard-foot{
  font-size:11.5px;
  color:var(--app-text-muted);
  margin-top:-2px;
}

/* v5.10-AGGR-DASHBOARD — Quick-Access 2x2 */
.dash-page .aggr-dash-quick{ margin-bottom:24px; }
.dash-page .aggr-dash-quick-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.dash-page .aggr-dash-quick-card{
  position:relative;
  display:grid;
  grid-template-columns:48px 1fr auto;
  grid-template-rows:auto auto;
  grid-template-areas:
    "icon title arrow"
    "icon sub   arrow";
  column-gap:14px;
  row-gap:2px;
  padding:18px 18px;
  border-radius:var(--app-r-md);
  border:1px solid var(--app-border-1);
  background:var(--app-surface-0);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  cursor:pointer;
  text-align:left;
  color:var(--app-text);
  font:inherit;
  overflow:hidden;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
  box-shadow:var(--app-shadow-card);
}
.dash-page .aggr-dash-quick-card:hover{
  transform:translateY(-2px);
  border-color:var(--app-accent);
  background:var(--app-surface-1);
}
.dash-page .aggr-dash-quick-glyph{
  grid-area:icon;
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:var(--app-r-md);
  background:var(--app-accent-soft);
  font-size:22px;
  color:var(--app-accent);
}
.dash-page .aggr-dash-quick-card-perm .aggr-dash-quick-glyph{ background:rgba(255,180,67,.16); color:var(--app-warn); }
.dash-page .aggr-dash-quick-card-srv  .aggr-dash-quick-glyph{ background:rgba(94,192,255,.16); color:var(--app-accent); }
.dash-page .aggr-dash-quick-card-bk   .aggr-dash-quick-glyph{ background:rgba(52,226,155,.16); color:var(--app-success); }
.dash-page .aggr-dash-quick-card-req  .aggr-dash-quick-glyph{ background:rgba(167,139,250,.16); color:#a78bfa; }
.dash-page .aggr-dash-quick-title{
  grid-area:title;
  font-size:14.5px;
  font-weight:700;
  letter-spacing:-.005em;
  color:var(--app-text);
}
.dash-page .aggr-dash-quick-sub{
  grid-area:sub;
  font-size:12.5px;
  color:var(--app-text-muted);
  line-height:1.35;
}
.dash-page .aggr-dash-quick-arrow{
  grid-area:arrow;
  align-self:center;
  font-size:18px;
  color:var(--app-text-muted);
  opacity:.7;
  transition:transform .16s ease, color .16s ease;
}
.dash-page .aggr-dash-quick-card:hover .aggr-dash-quick-arrow{
  color:var(--app-accent);
  transform:translateX(3px);
}

/* v5.10-AGGR-DASHBOARD — Recent Containers */
.dash-page .aggr-dash-recent{ margin-bottom:24px; }
.dash-page .aggr-dash-recent-list{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:8px;
  border-radius:var(--app-r-md);
  border:1px solid var(--app-border-1);
  background:var(--app-surface-0);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
}
.dash-page .aggr-dash-recent-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:var(--app-r-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:background .14s ease, border-color .14s ease, transform .14s ease;
}
.dash-page .aggr-dash-recent-row:hover{
  background:var(--app-surface-1);
  border-color:var(--app-border-1);
  transform:translateX(2px);
}
.dash-page .aggr-dash-recent-icon{
  display:inline-grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:var(--app-r-sm);
  background:var(--app-surface-1);
  border:1px solid var(--app-border-0);
  font-size:18px;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
}
.dash-page .aggr-dash-recent-icon img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:5px;
}
.dash-page .aggr-dash-recent-icon-fallback{
  position:relative;
  z-index:0;
}
.dash-page .aggr-dash-recent-icon-game{ background:rgba(52,226,155,.10); }
.dash-page .aggr-dash-recent-icon-voice{ background:rgba(94,192,255,.10); }
.dash-page .aggr-dash-recent-icon-database{ background:rgba(167,139,250,.10); }
.dash-page .aggr-dash-recent-icon-web{ background:rgba(255,180,67,.10); }
.dash-page .aggr-dash-recent-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.dash-page .aggr-dash-recent-name{
  font-size:13.5px;
  font-weight:600;
  color:var(--app-text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dash-page .aggr-dash-recent-sub{
  font-size:11.5px;
  color:var(--app-text-muted);
}
.dash-page .aggr-dash-recent-stat{
  font-size:12px;
  color:var(--app-text-muted);
  font-variant-numeric:tabular-nums;
  min-width:78px;
  text-align:right;
}
.dash-page .aggr-dash-recent-badge{
  font-size:11px;
  font-weight:600;
  padding:3px 8px;
  border-radius:99px;
  letter-spacing:.02em;
}
.dash-page .aggr-dash-recent-badge-on{
  background:rgba(52,226,155,.16);
  color:var(--app-success);
  border:1px solid rgba(52,226,155,.32);
}
.dash-page .aggr-dash-recent-badge-off{
  background:rgba(255,92,124,.12);
  color:var(--app-danger);
  border:1px solid rgba(255,92,124,.28);
}
.dash-page .aggr-dash-recent-go{
  color:var(--app-text-muted);
  font-size:16px;
  opacity:.6;
}
.dash-page .aggr-dash-recent-row:hover .aggr-dash-recent-go{
  color:var(--app-accent);
  opacity:1;
}
.dash-page .aggr-dash-recent-empty{
  text-align:center;
  padding:24px 12px;
  color:var(--app-text-muted);
  font-size:13px;
}

/* v5.10-AGGR-DASHBOARD — Server-Nodes wrapper */
.dash-page .aggr-dash-nodes{ margin-bottom:24px; }
.dash-page .aggr-dash-nodes-bento{ margin-top:0; gap:14px; }

/* v5.10-AGGR-DASHBOARD — End-user Product Cards */
.dash-page .aggr-dash-user-empty{
  text-align:center;
  padding:48px 20px;
  border-radius:var(--app-r-md);
  border:1px dashed var(--app-border-1);
  background:var(--app-surface-0);
  color:var(--app-text-muted);
}
.dash-page .aggr-dash-user-empty-glyph{
  font-size:46px;
  opacity:.45;
  margin-bottom:10px;
}
.dash-page .aggr-dash-user-empty-title{
  font-size:15px;
  color:var(--app-text);
  margin-bottom:6px;
  font-weight:600;
}
.dash-page .aggr-dash-user-empty-sub{
  font-size:13px;
  margin-bottom:16px;
}
.dash-page .aggr-dash-user-group{ margin-bottom:22px; }
.dash-page .aggr-dash-prod-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
}
.dash-page .aggr-dash-prod-card{
  display:flex;
  flex-direction:column;
  border-radius:var(--app-r-md);
  border:1px solid var(--app-border-1);
  background:var(--app-surface-0);
  -webkit-backdrop-filter:var(--app-blur);
  backdrop-filter:var(--app-blur);
  overflow:hidden;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease;
  box-shadow:var(--app-shadow-card);
}
.dash-page .aggr-dash-prod-card:hover{
  transform:translateY(-3px);
  border-color:var(--app-accent);
}
.dash-page .aggr-dash-prod-thumb{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:16/9;
  background:
    radial-gradient(120% 120% at 50% 0%, var(--app-accent-soft) 0%, transparent 70%),
    var(--app-surface-1);
  border-bottom:1px solid var(--app-border-0);
  overflow:hidden;
}
.dash-page .aggr-dash-prod-thumb img{
  width:64px;
  height:64px;
  object-fit:contain;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.45));
}
.dash-page .aggr-dash-prod-thumb-fallback{
  position:absolute;
  font-size:46px;
  opacity:.55;
}
.dash-page .aggr-dash-prod-thumb img + .aggr-dash-prod-thumb-fallback{ display:none; }
.dash-page .aggr-dash-prod-thumb-game{ background:radial-gradient(120% 120% at 50% 0%, rgba(52,226,155,.18) 0%, transparent 70%), var(--app-surface-1); }
.dash-page .aggr-dash-prod-thumb-voice{ background:radial-gradient(120% 120% at 50% 0%, rgba(94,192,255,.18) 0%, transparent 70%), var(--app-surface-1); }
.dash-page .aggr-dash-prod-thumb-database{ background:radial-gradient(120% 120% at 50% 0%, rgba(167,139,250,.18) 0%, transparent 70%), var(--app-surface-1); }
.dash-page .aggr-dash-prod-thumb-web{ background:radial-gradient(120% 120% at 50% 0%, rgba(255,180,67,.18) 0%, transparent 70%), var(--app-surface-1); }
.dash-page .aggr-dash-prod-badge{
  position:absolute;
  left:10px;
  bottom:10px;
  font-size:11px;
  font-weight:600;
  padding:4px 9px;
  border-radius:99px;
  letter-spacing:.02em;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.dash-page .aggr-dash-prod-body{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px 14px 12px;
}
.dash-page .aggr-dash-prod-name{
  font-size:14.5px;
  font-weight:700;
  letter-spacing:-.005em;
  color:var(--app-text);
}
.dash-page .aggr-dash-prod-sub{
  font-size:12px;
  color:var(--app-text-muted);
  margin-top:-4px;
}
.dash-page .aggr-dash-prod-metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  padding:6px 0;
  border-top:1px solid var(--app-border-0);
  border-bottom:1px solid var(--app-border-0);
}
.dash-page .aggr-dash-prod-metrics .pm{
  display:flex;
  flex-direction:column;
  gap:1px;
  font-size:10.5px;
}
.dash-page .aggr-dash-prod-metrics .pml{
  color:var(--app-text-muted);
  font-size:9.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.dash-page .aggr-dash-prod-metrics b{
  font-size:12px;
  color:var(--app-text);
  font-variant-numeric:tabular-nums;
}
.dash-page .aggr-dash-prod-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:4px;
}
.dash-page .aggr-dash-prod-act-primary{
  padding:7px 14px;
  font-size:12.5px;
  font-weight:600;
}
.dash-page .aggr-dash-prod-act-mini{
  padding:6px 9px;
  font-size:12px;
  min-width:32px;
}
.dash-page .aggr-dash-prod-act-manage{
  padding:6px 12px;
  font-size:12.5px;
  font-weight:600;
  color:var(--app-accent);
}

/* v5.10-AGGR-DASHBOARD — Responsive */
@media (max-width: 1100px){
  .dash-page .aggr-dash-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px){
  .dash-page .aggr-dash-hero-inner{ padding:24px 20px; }
  .dash-page .aggr-dash-hero-title{ font-size:28px; }
  .dash-page .aggr-dash-quick-grid{ grid-template-columns:1fr; }
  .dash-page .aggr-dash-stats{ grid-template-columns:1fr; }
  .dash-page .aggr-dash-recent-stat{ display:none; }
}

/* v5.10-AGGR-DASHBOARD — Reduced motion */
@media (prefers-reduced-motion: reduce){
  .dash-page .aggr-dash-hero-aurora,
  .dash-page .aggr-dash-statcard-spark-fill-fluid{
    animation:none !important;
  }
  .dash-page .aggr-dash-statcard:hover,
  .dash-page .aggr-dash-quick-card:hover,
  .dash-page .aggr-dash-hero-cta:hover,
  .dash-page .aggr-dash-recent-row:hover,
  .dash-page .aggr-dash-prod-card:hover{
    transform:none !important;
  }
}

/* v5.10-AGGR-MODALS — Modal-Pattern: Admin-Sub-Pages (mcperms / audit / requests / users)
   Dashboard-Quick-Cards triggern Page-Switch + Smooth-Scroll. Sub-Pages bekommen Back-Bar
   die wie ein Modal-Header aussieht. Slide-in-Anim auf Page-Switch. */
.aggr-modal-backbar{
  display:flex;align-items:center;gap:14px;
  margin:0 0 18px;padding:10px 14px;
  border:1px solid var(--border);border-radius:14px;
  background:linear-gradient(135deg,rgba(77,159,255,.06),rgba(160,107,255,.06));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  position:sticky;top:14px;z-index:30;
  animation:aggr-modal-slidein .26s cubic-bezier(.22,1,.36,1);
}
.aggr-modal-back{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px 7px 11px;
  border:1px solid var(--border);border-radius:10px;
  background:rgba(255,255,255,.04);color:var(--text);
  font-weight:600;font-size:13.5px;cursor:pointer;
  transition:.16s ease;
}
.aggr-modal-back:hover{
  background:var(--grad-soft);
  border-color:var(--border2);
  transform:translateX(-2px);
  box-shadow:0 8px 22px -10px rgba(90,110,255,.5);
}
.aggr-modal-back-arrow{
  font-size:16px;line-height:1;color:var(--primary);
  transition:transform .16s ease;
}
.aggr-modal-back:hover .aggr-modal-back-arrow{transform:translateX(-3px)}
.aggr-modal-crumb{
  flex:1;color:var(--muted);font-weight:600;font-size:13px;
  letter-spacing:.02em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.aggr-modal-crumb::before{
  content:'';width:4px;height:4px;border-radius:50%;
  background:var(--primary);box-shadow:0 0 8px var(--primary);
}

/* Slide-in animation for modal-style page entry */
@keyframes aggr-modal-slidein{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Quick-Access cards for audit + users use distinct accent colors */
.dash-page .aggr-dash-quick-card.aggr-dash-quick-card-aud{
  --aggr-card-accent:rgba(255,180,67,.18);
}
.dash-page .aggr-dash-quick-card.aggr-dash-quick-card-aud .aggr-dash-quick-glyph{
  background:linear-gradient(135deg,rgba(255,180,67,.18),rgba(255,90,114,.12));
  color:var(--warn);
}
.dash-page .aggr-dash-quick-card.aggr-dash-quick-card-usr{
  --aggr-card-accent:rgba(124,139,255,.18);
}
.dash-page .aggr-dash-quick-card.aggr-dash-quick-card-usr .aggr-dash-quick-glyph{
  background:linear-gradient(135deg,rgba(124,139,255,.22),rgba(77,159,255,.14));
  color:var(--primary);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .aggr-modal-backbar{animation:none}
  .aggr-modal-back:hover{transform:none}
  .aggr-modal-back:hover .aggr-modal-back-arrow{transform:none}
}

/* v5.10-FIX-CONSOLE — Konsole als FESTE scrollbare Box (wuchs vorher unbegrenzt mit Log-Inhalt -> Nav-Sidebar 5400px hoch).
   Deckelt die Konsole, damit Seite + Tab-Leiste normal hoch bleiben und alle Tabs sichtbar/wählbar sind. */
.detail-c #gamelogbox,
.detail-c #logbox,
.detail-c .dash-console-col #gamelogbox,
.detail-c .dash-console-col #logbox{
  height:40vh !important;
  min-height:240px !important;
  max-height:42vh !important;
  overflow-y:auto !important;
  flex:0 0 auto !important;
}
/* Konsolen-Spalte selbst nicht endlos wachsen lassen */
.detail-c .dash-console-col{
  flex:0 0 auto !important;
  min-height:0 !important;
  max-height:48vh !important;
  overflow:hidden !important;
}
/* Tab-Nav HORIZONTAL oben (Pills) statt leerer vertikaler Sidebar — srv-shell wird Flex-Spalte: Nav oben, Content darunter */
.detail-c .srv-shell{
  display:flex !important;
  flex-direction:column !important;
  grid-template-columns:none !important;
  gap:10px !important;
  align-items:stretch !important;
}
.detail-c .srv-nav{
  flex-direction:row !important;
  flex-wrap:wrap !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  align-self:stretch !important;
  position:static !important;
  overflow:visible !important;
  gap:6px !important;
  flex:0 0 auto !important;
  justify-content:flex-start !important;
}
.detail-c .srv-nav .btn{
  width:auto !important;
  flex:0 0 auto !important;
  justify-content:center !important;
}
.detail-c .srv-main{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
}


/* v5.10-FIX-DASHDEDUP — Netzwerk/Speicher/Status-Karten aus Dashboard-Tab entfernt, Konsole voll breit */
.detail-c .dash-grid{ grid-template-columns:1fr !important; }

/* ============================================================
   v5.10-RESPONSIVE-POLISH — durchgängige Anpassung Handy/Tablet/iPad
   ============================================================ */
/* kein horizontales Scrollen, alles passt in den Viewport */
.shell .gmain > .content{ max-width:100%; }
.shell .gmain > .content *{ max-width:100%; }

/* Tablet / kleines Laptop (≤960px) */
@media (max-width: 960px){
  .gmain > .gtop{ flex-wrap:wrap !important; row-gap:8px !important; padding:10px 14px !important; }
  .dash-page .aggr-dash-stats{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .detail-c.aggr-detail .page-head.aggr-hero{ flex-wrap:wrap !important; gap:12px !important; }
  .detail-c.aggr-detail .aggr-hero-actions{ width:100%; justify-content:flex-start !important; flex-wrap:wrap; }
  .aggr-dash-prod-grid, .ctr-card-grid{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important; }
}

/* Handy (≤600px) */
@media (max-width: 600px){
  .shell .gmain > .content{ padding:10px 10px 28px !important; }
  .dash-page .aggr-dash-stats{ grid-template-columns:1fr !important; }
  .aggr-dash-prod-grid, .ctr-card-grid, .gamegrid, .modgrid{ grid-template-columns:1fr !important; }
  /* Create-Picker etwas kompakter aber lesbar */
  #app .gamegrid, .cc-cards{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) !important; }
  /* Detail-Hero: Thumbnail + Titel klein, Name umbricht */
  .detail-c.aggr-detail .aggr-hero-thumb.xl{ width:52px !important; height:52px !important; }
  .detail-c.aggr-detail .aggr-hero-switch{ font-size:20px !important; }
  /* Modal-Karten füllen den Screen */
  .gmodal-ov .card{ width:96vw !important; }
  /* Grid-Doppelspalten in Modals -> einspaltig (Name/Version, RAM/CPU/Disk) */
  .field > div[style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  /* Tab-Pills scrollbar statt umbrechen-Chaos */
  .detail-c .srv-nav{ overflow-x:auto !important; flex-wrap:nowrap !important; -webkit-overflow-scrolling:touch; }
  .detail-c .srv-nav .btn{ flex:0 0 auto !important; white-space:nowrap; }
  /* Topbar: User-Vorschau-Select + Admin-Label sparsamer */
  .aggr-top-select{ max-width:120px; }
}

/* sehr kleine Handys (≤400px) */
@media (max-width: 400px){
  .detail-c.aggr-detail .aggr-stat-card{ padding:10px !important; }
  .aggr-admin-pill-label{ display:none; }
}

/* v5.10-RESPONSIVE-SHELL — Shell auf Mobile einspaltig (Content voll), Sidebar als Off-Canvas-Overlay.
   Überschreibt die spätere .shell{display:grid;...}-Regel die die alte 880px-Query aushebelte. */
@media (max-width: 960px){
  .shell{ display:block !important; grid-template-columns:1fr !important; height:auto !important; min-height:100vh !important; overflow:visible !important; }
  .shell .gmain{ width:100% !important; height:100vh !important; }
  .shell .gside{ position:fixed !important; left:0 !important; top:0 !important; bottom:0 !important; width:252px !important; max-width:84vw !important; z-index:120 !important; transform:translateX(-105%) !important; transition:transform .22s ease !important; box-shadow:0 0 40px rgba(0,0,0,.6); }
  .shell.gside-mobile-open .gside{ transform:translateX(0) !important; }
  .shell.gside-collapsed .gside{ width:252px !important; }  /* auf Mobile nie collapsed-schmal */
  .gside-toggle{ display:none !important; }  /* Collapse-Pfeil auf Mobile aus, Hamburger reicht */
}

/* v5.10-PRICE — Geschätzte Kosten im Create-Dialog */
.cc-price-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 16px;border-radius:12px;background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(16,185,129,.12));border:1px solid rgba(99,102,241,.28)}
.cc-price-lbl{font-size:12.5px;font-weight:600;letter-spacing:.2px;opacity:.85}
.cc-price-val{font-size:21px;font-weight:800;color:var(--text,#fff);line-height:1}
.cc-price-val small{font-size:12px;font-weight:600;opacity:.7;margin-left:2px}

/* v5.10-VPS-CONSOLE — Terminal (Linux) + Remote-Desktop (Windows) */
/* xterm.js-Container: feste Größe, xterm rendert intern (Canvas + Farben) */
.vps-term-box{background:#0a0e14;border-radius:10px;border:1px solid var(--border);height:58vh;max-height:62vh;overflow:hidden;margin:0;padding:8px 6px 8px 10px;position:relative}
.vps-term-box .xterm{height:100%;padding:0}
.vps-term-box .xterm-viewport{overflow-y:auto!important;border-radius:8px}
.vps-term-box .xterm-viewport::-webkit-scrollbar{width:8px}
.vps-term-box .xterm-viewport::-webkit-scrollbar-thumb{background:var(--border2,#2a3350);border-radius:4px}
.vps-term-status.st-open{color:#34d399;border-color:rgba(52,211,153,.4)!important}
.vps-term-status.st-error,.vps-term-status.st-failed{color:var(--danger);border-color:rgba(239,68,68,.4)!important}
.vps-rdp-box{background:#000;border-radius:10px;border:1px solid var(--border);width:100%;height:62vh;max-height:66vh;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
/* Konsole-Tab (Guacamole VNC) füllt den ganzen Bereich; Canvas wird per JS skaliert (zentriert) */
.detail-c .tab-screen{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.detail-c .tab-screen .vps-screen-box{ flex:1 1 auto; min-height:300px; max-height:none; }
.vps-screen-box{width:100%;border:1px solid var(--border);border-radius:10px;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;outline:none}
.vps-screen-box canvas{display:block}
.vps-rdp-status.st-on{color:#34d399;border-color:rgba(52,211,153,.4)!important}
@media(max-width:600px){.detail-c .tab-screen .vps-screen-box{min-height:240px}}
.vps-rdp-box canvas{max-width:100%;max-height:100%;display:block}
.vps-rdp-box:empty::after{content:'Nicht verbunden — „▶ Verbinden" klicken.';color:#667085;font-size:13px}
@media(max-width:600px){.vps-term-box{height:52vh;font-size:12px}.vps-rdp-box{height:54vh}}

/* v5.10-MODS-SCROLL-FIX — Mods-Grid darf NICHT mehr eigener Scroll-Container sein.
   Vorher: .detail-c .tab-mods .modgrid{max-height:52vh;overflow:auto} → verschachtelter Scroll im ohnehin scrollenden .srv-main ("haut nicht hin").
   Jetzt: Grid fließt voll, nur .srv-main scrollt = eine saubere Scroll-Ebene über die ganze Mods-Liste. */
.detail-c .tab-mods .modgrid,
.detail-c .tab-mods .tm-results-section .modgrid{
  max-height:none !important;
  overflow:visible !important;
  padding-right:2px !important;
}
/* Sicherstellen, dass der Mods-Tab selbst nicht clippt und die Seite die volle Höhe scrollen kann */
.detail-c .tab-mods{ overflow:visible !important; min-height:0 !important; }
.detail-c .tab-mods .tm-results-section{ overflow:visible !important; }

/* ============================================================
   v5.10-CONSOLE-FLEX (FINAL) — Konsole VARIABEL: füllt per Flex exakt den
   verbleibenden Fensterplatz (wächst/schrumpft mit dem Fenster), KEIN fixes px.
   Flex-Kette: .srv-main → .srv-tab-game → .tab-dash → .dash-grid → .dash-console-col → .card → #gamelogbox.
   .srv-tab-game (Klasse am Game-Tab-Wrapper) wird nur sichtbar via display:flex (ohne !important),
   damit v-show:none der anderen Tabs NICHT übersteuert wird.
   ============================================================ */
/* Der Wrapper .detail-sticky-top enthält Hero+Stats+Adresse+srv-shell und war flex:0 0 auto
   (content-groß 1266px) → Kette gebrochen. Jetzt bounded Flex-Column, füllt .detail-c. */
.detail-c .detail-sticky-top{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; min-height:0 !important; overflow:hidden !important; }
.detail-c .detail-sticky-top > .srv-shell{ flex:1 1 auto !important; min-height:0 !important; }
.detail-c .srv-main{ display:flex !important; flex-direction:column !important; }
.detail-c .srv-tab-game{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.detail-c .srv-tab-game .tab-dash{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; min-height:0 !important; height:auto !important; }
.detail-c .srv-tab-game .dash-grid{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; min-height:0 !important; height:auto !important; overflow:visible !important; }
.detail-c .srv-tab-game .dash-console-col{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; min-height:0 !important; max-height:none !important; }
.detail-c .srv-tab-game .dash-console-col > .card{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; min-height:0 !important; }
.detail-c #gamelogbox,
.detail-c .srv-tab-game #gamelogbox,
.detail-c .dash-console-col #gamelogbox{
  flex:1 1 auto !important;
  height:auto !important;
  min-height:120px !important;
  max-height:none !important;
  overflow-y:auto !important;
}

/* ============================================================
   v5.10-DETAIL-COMPACT — kleine/niedrige Fenster: UI komprimieren, damit die
   Konsole IMMER etwas Nützliches zeigt (statt zu verschwinden).
   Höhen-Media-Queries: flachere Stat-Karten + Adresse + nutzbare Konsolen-Min-Höhe.
   ============================================================ */
@media (max-height: 880px){
  .detail-c.aggr-detail .detail-sticky-top{ gap:8px !important; }
  .detail-c.aggr-detail .aggr-stat-card{ padding:8px 13px !important; gap:3px !important; }
  .detail-c.aggr-detail .aggr-stat-val{ font-size:18px !important; line-height:1.12 !important; }
  .detail-c.aggr-detail .aggr-srv-addr{ padding:9px 14px !important; gap:10px !important; }
  .detail-c #gamelogbox, .detail-c .srv-tab-game #gamelogbox{ min-height:200px !important; }
}
@media (max-height: 740px){
  .detail-c.aggr-detail .detail-sticky-top{ gap:6px !important; }
  .detail-c.aggr-detail .aggr-stat-card{ padding:6px 11px !important; gap:2px !important; }
  .detail-c.aggr-detail .aggr-stat-ico{ font-size:10.5px !important; }
  .detail-c.aggr-detail .aggr-stat-val{ font-size:16px !important; }
  .detail-c.aggr-detail .aggr-srv-addr{ padding:7px 12px !important; gap:8px !important; }
  .detail-c.aggr-detail .aggr-srv-addr-left{ gap:6px !important; }
  .detail-c #gamelogbox, .detail-c .srv-tab-game #gamelogbox{ min-height:185px !important; }
}

/* ============================================================
   v5.10-SMALLWIN-FIT — sehr niedrige Fenster: Konsole etwas kleiner, damit ALLES
   ohne Scroll/Leerraum reinpasst (statt zu clippen). Bleibt nutzbar (~9-10 Zeilen).
   Die hohe Spezifität (.detail-c.aggr-detail .dash-console-col #gamelogbox) ist nötig,
   sonst gewinnt die min-height:200px-Regel.
   ============================================================ */
@media (max-height: 700px){
  .detail-c.aggr-detail .detail-sticky-top{ gap:5px !important; }
  .detail-c.aggr-detail .aggr-stat-card{ padding:5px 10px !important; }
  .detail-c.aggr-detail .aggr-srv-addr{ padding:6px 12px !important; }
  .detail-c.aggr-detail .dash-console-col #gamelogbox,
  .detail-c .srv-tab-game #gamelogbox{ min-height:150px !important; }
}
@media (max-height: 600px){
  .detail-c.aggr-detail .dash-console-col #gamelogbox,
  .detail-c .srv-tab-game #gamelogbox{ min-height:120px !important; }
}

/* v6.14 Dashboard Breakdown-Karten (Netzwerk + Disk pro Container) */
.aggr-dash-breakdown{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:8px 0 22px; }
@media (max-width:980px){ .aggr-dash-breakdown{ grid-template-columns:1fr; } }
.aggr-bd-card{ background:var(--card,#0e1424); border:1px solid var(--border,#1d2740); border-radius:16px; padding:16px 18px; }
.aggr-bd-card .aggr-dash-section-head{ margin-bottom:12px; }
.aggr-bd-list{ display:flex; flex-direction:column; gap:9px; }
.aggr-bd-row{ display:grid; grid-template-columns:130px 1fr auto; align-items:center; gap:10px; font-size:12.5px; }
.aggr-bd-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text,#e6ecff); font-weight:600; }
.aggr-bd-bar{ height:8px; border-radius:6px; background:rgba(255,255,255,.06); overflow:hidden; }
.aggr-bd-bar-fill{ display:block; height:100%; border-radius:6px; transition:width .4s ease; }
.aggr-bd-bar-fill-net{ background:linear-gradient(90deg,#3b82f6,#22d3ee); }
.aggr-bd-bar-fill-disk{ background:linear-gradient(90deg,#a855f7,#ec4899); }
.aggr-bd-val{ text-align:right; white-space:nowrap; color:var(--text,#e6ecff); }
.aggr-bd-val b{ font-weight:700; }
.aggr-bd-sub{ color:var(--muted,#8b98b8); font-size:10.5px; margin-left:4px; }

/* v6.14 📦 Modpack-Tab (Split: Server live | Client-Modpack) */
.tab-modpack{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.mp-split{ display:grid; grid-template-columns:300px 1fr; gap:18px; align-items:start; }
@media (max-width:900px){ .mp-split{ grid-template-columns:1fr; } }
.mp-side{ background:var(--card,#0e1424); border:1px solid var(--border,#1d2740); border-radius:14px; padding:16px 18px; }
.mp-server{ position:sticky; top:0; }
.mp-fullwidth{ width:100%; position:static; }
.mp-flow{ margin-top:16px; padding:12px 14px; background:rgba(255,255,255,.03); border:1px dashed var(--border,#1d2740); border-radius:10px; font-size:12px; line-height:1.6; }
.mp-cat{ border:1px solid var(--border,#1d2740); border-radius:12px; padding:12px 14px; margin-bottom:12px; background:rgba(255,255,255,.015); }
.mp-cat-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.mp-cat-title{ font-weight:600; font-size:13.5px; color:var(--text,#e6ecff); }
.mp-up{ padding:4px 10px; font-size:12px; }
.mp-cat-list{ display:flex; flex-direction:column; gap:6px; }
.mp-file{ display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,.025); font-size:12.5px; }
.mp-file:hover{ background:rgba(255,255,255,.05); }
.mp-file-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text,#e6ecff); font-family:var(--mono); }
.mp-file-size{ font-size:11.5px; white-space:nowrap; }
.mp-file-del{ padding:3px 8px; color:var(--danger,#ef4444); }
.mp-empty{ font-size:12px; padding:6px 2px; }

/* v6.14 Mod-Updates im Modpack-Tab */
.mp-updates{ margin-top:16px; padding:12px 14px; background:rgba(255,255,255,.03); border:1px solid var(--border,#1d2740); border-radius:10px; }
.mp-upd-list{ display:flex; flex-direction:column; gap:4px; margin-top:8px; max-height:220px; overflow:auto; }
.mp-upd-row{ display:flex; align-items:center; gap:8px; font-size:11px; padding:3px 6px; border-radius:6px; background:rgba(255,255,255,.02); }
.mp-upd-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--mono); }
.mp-upd-ver{ color:#34d399; white-space:nowrap; font-weight:600; }

/* PERF v-perf1: Tab im Hintergrund (document.hidden, JS setzt body.np-bg-paused) → alle
   Dauer-Animationen pausieren. Spart Compositor-/GPU-Last bei nicht sichtbarem Tab.
   Reine Pause, kein Verhaltens-/Layout-Wechsel; bei Rueckkehr laufen sie sofort weiter. */
body.np-bg-paused *,
body.np-bg-paused *::before,
body.np-bg-paused *::after{
  animation-play-state:paused !important;
}
/* PERF v-perf1: respektiere reduzierte Bewegung — grosse dauerhaft animierte Blur-Orbs anhalten. */
@media (prefers-reduced-motion: reduce){
  .dash-page .dash-hero-wrap .dash-aurora,
  .dash-page .aggr-dash-hero-aurora{
    animation:none !important;
  }
}