/* Toolbox component library. Colours/spacing come from tokens.css (var(--*)). */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--tx);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(var(--grid) 1px,transparent 1px);background-size:32px 32px;transition:background .2s,color .2s}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--s4);border-radius:6px}::-webkit-scrollbar-track{background:transparent}
a{color:inherit;text-decoration:none}.mono{font-family:var(--mono)}.hidden{display:none!important}

.app{display:flex;height:100vh}
/* ===== Sidebar ===== */
.side{width:248px;background:var(--side);border-right:1px solid var(--bd);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}
.brand{display:flex;align-items:center;gap:11px;padding:18px 18px 14px}
.logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--ac),var(--ac2));display:grid;place-items:center;color:#fff;font-size:20px;box-shadow:0 4px 14px rgba(124,108,240,.35)}
.brand .nm{font-weight:700;font-size:15px;letter-spacing:-.2px}.brand .sub{font-size:11px;color:var(--faint);font-weight:500}
.nav{flex:1;overflow-y:auto;padding:6px 12px 18px}
.nav .grp{font-size:10.5px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--faint);padding:14px 10px 5px}
.nav a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--r-sm);color:var(--dim);font-weight:500;font-size:13.5px;position:relative;transition:.12s;cursor:pointer}
.nav a i{font-size:18px;width:18px;text-align:center}
.nav a:hover{background:var(--s2);color:var(--tx)}
.nav a.on{background:var(--ac-soft);color:var(--tx)}
.nav a.on i{color:var(--ac)}
.nav a.on::before{content:"";position:absolute;left:-12px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--ac)}
.nav a .tag{margin-left:auto;font-size:10px;font-weight:600;background:var(--s3);color:var(--dim);padding:1px 7px;border-radius:20px}
.nav a.on .tag{background:var(--ac);color:#fff}
.side-foot{border-top:1px solid var(--bd);padding:11px 14px;display:flex;align-items:center;gap:10px}
.av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--ac2));display:grid;place-items:center;font-weight:600;font-size:12px;color:#fff}
.side-foot .who{font-size:12.5px;font-weight:600;line-height:1.2}.side-foot .role{font-size:11px;color:var(--faint)}

.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.top{display:flex;align-items:center;gap:14px;padding:13px 24px;border-bottom:1px solid var(--bd);background:var(--topbar);backdrop-filter:blur(8px)}
.top .hamb{display:none}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim)}
.crumb i{font-size:14px;color:var(--faint)}.crumb b{color:var(--tx);font-weight:600}
.cmdk{margin-left:8px;display:flex;align-items:center;gap:9px;background:var(--s2);border:1px solid var(--bd);border-radius:9px;padding:7px 12px;width:300px;color:var(--faint);font-size:13px;cursor:text}
.cmdk i{font-size:15px}.cmdk .kbd{margin-left:auto;display:flex;gap:3px}
.kbd span{font-family:var(--mono);font-size:10.5px;background:var(--s4);border:1px solid var(--bd2);border-radius:5px;padding:1px 6px;color:var(--dim)}
.top-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.ic-btn{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--dim);border:1px solid transparent;cursor:pointer;font-size:18px}
.ic-btn:hover{background:var(--s2);color:var(--tx);border-color:var(--bd)}
.dot-badge{position:relative}.dot-badge::after{content:"";position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--ac);border:2px solid var(--s1)}
.content{flex:1;overflow:hidden;display:flex;min-height:0}
.view{flex:1;overflow-y:auto;padding:24px 28px 56px;min-width:0}
.view.flush{padding:0;overflow:hidden;display:flex}

.btn{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:9px;border:1px solid var(--bd2);background:var(--s2);color:var(--tx);cursor:pointer;transition:.12s}
.btn:hover{background:var(--s3);border-color:var(--bd3)}.btn i{font-size:16px}
.btn.pri{background:linear-gradient(135deg,var(--ac),#6a5be0);border-color:transparent;color:#fff;box-shadow:0 3px 12px rgba(124,108,240,.3)}
.btn.pri:hover{filter:brightness(1.08)}.btn.gho{background:transparent;border-color:var(--bd)}.btn.gho:hover{background:var(--s2)}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:7px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px}
.pill .d{width:6px;height:6px;border-radius:50%}
.pill.ok{background:var(--ok-s);color:var(--ok)}.pill.ok .d{background:var(--ok)}
.pill.warn{background:var(--warn-s);color:var(--warn)}.pill.warn .d{background:var(--warn)}
.pill.dgr{background:var(--dgr-s);color:var(--dgr)}.pill.dgr .d{background:var(--dgr)}
.pill.mut{background:var(--s3);color:var(--dim)}.pill.mut .d{background:var(--faint)}
.track{height:6px;border-radius:6px;background:var(--s3);overflow:hidden}
.fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--ac2),var(--ac))}
.fill.ok{background:linear-gradient(90deg,var(--ok),var(--ok))}.fill.warn{background:linear-gradient(90deg,var(--warn),var(--warn))}.fill.dgr{background:var(--dgr)}

.card{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r-lg);overflow:hidden}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--bd)}
.card-h h3{font-size:14px;font-weight:600}
.card-h .ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:17px;background:var(--ac-soft);color:var(--ac)}
.card-h .more{margin-left:auto;color:var(--faint);font-size:13px;font-weight:600;cursor:pointer}
.card-b{padding:16px 18px}
.page-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:20px}
.page-head h1{font-size:23px;font-weight:700;letter-spacing:-.5px}.page-head p{color:var(--dim);font-size:13.5px;margin-top:3px}
.page-head .acts{margin-left:auto;display:flex;gap:9px}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.kpi{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r-lg);padding:15px 17px}
.kpi .lab{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);font-weight:500}.kpi .lab i{font-size:15px;color:var(--ac)}
.kpi .val{font-size:27px;font-weight:700;letter-spacing:-.6px;margin-top:9px;display:flex;align-items:baseline;gap:8px}
.kpi .val small{font-size:13px;font-weight:600;color:var(--ok)}.kpi .spark{margin-top:6px}
.svc-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:16px}
.svc-tile{display:flex;align-items:center;gap:13px;padding:14px 16px;background:var(--s1);border:1px solid var(--bd);border-radius:var(--r-lg);text-decoration:none;color:inherit;transition:.14s}
.svc-tile:hover{border-color:var(--bd3);background:var(--s2);transform:translateY(-1px)}
.svc-tile.off{opacity:.5;cursor:not-allowed;pointer-events:none}
.svc-tile .svc-ico{width:42px;height:42px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;font-size:22px}
.svc-tile .svc-body{flex:1;min-width:0}
.svc-tile .svc-name{font-size:14px;font-weight:600;color:var(--tx)}
.svc-tile .svc-meta{font-size:12px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svc-tile .svc-go{color:var(--faint);font-size:17px;flex-shrink:0;transition:.14s}
.svc-tile:hover .svc-go{color:var(--ac)}
.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.node{display:flex;flex-direction:column;gap:9px;padding:13px 0;border-bottom:1px solid var(--bd)}.node:last-child{border-bottom:0;padding-bottom:0}.node:first-child{padding-top:2px}
.node .nh{display:flex;align-items:center;gap:10px;font-size:13px}.node .nh b{font-weight:600}.node .nh .ip{font-family:var(--mono);font-size:11.5px;color:var(--faint)}.node .nh .pill{margin-left:auto}
.bars{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.bar .bl{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-bottom:5px}.bar .bl b{color:var(--tx);font-family:var(--mono);font-weight:500}
.svc{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.svc-i{display:flex;align-items:center;gap:10px;padding:11px 12px;background:var(--s2);border:1px solid var(--bd);border-radius:var(--r)}
.svc-i i{font-size:18px;color:var(--dim)}.svc-i .t{font-size:12.5px;font-weight:600}.svc-i .s{font-size:11px;color:var(--faint)}
.svc-i .d{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--ok)}.svc-i .d.dn{background:var(--dgr)}
.lrow{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--bd)}.lrow:last-child{border-bottom:0}
.lrow .fav{width:30px;height:30px;border-radius:8px;background:var(--s3);display:grid;place-items:center;font-size:15px;color:var(--ac2)}
.lrow .nm{font-weight:600;font-size:13px}.lrow .meta{font-size:11.5px;color:var(--faint);font-family:var(--mono)}.lrow .rt{margin-left:auto;display:flex;align-items:center;gap:10px}
.gm{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--bd)}.gm:last-child{border-bottom:0}
.gm .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:18px;background:var(--s3)}.gm .pc{margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:600}.gm .pc small{color:var(--faint);font-weight:400}

/* ===== Workbench ===== */
.explorer{width:230px;border-right:1px solid var(--bd);background:var(--s1);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}
.exp-h{padding:12px 13px;border-bottom:1px solid var(--bd)}
.exp-srch{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:7px 10px;color:var(--faint);font-size:12.5px}
.tree{flex:1;overflow-y:auto;padding:8px 8px 18px}
.tree .grp{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);padding:12px 8px 5px;display:flex;align-items:center;gap:6px}.tree .grp .c{margin-left:auto;font-weight:500}
.tnode{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;color:var(--dim);font-size:12.5px;cursor:pointer;font-weight:500}
.tnode i{font-size:15px;color:var(--faint)}.tnode:hover{background:var(--s2);color:var(--tx)}
.tnode.on{background:var(--ac-soft);color:var(--tx)}.tnode.on i{color:var(--ac)}
.tnode .st{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--ok)}
.detail{flex:1;overflow-y:auto;min-width:0}
.dh{display:flex;align-items:center;gap:13px;padding:18px 22px 14px}.dh h1{font-size:20px;font-weight:700;letter-spacing:-.4px;display:flex;align-items:center;gap:11px}.dh .acts{margin-left:auto;display:flex;gap:8px}
.statstrip{display:flex;flex-wrap:wrap;background:var(--s1);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.statstrip .cell{padding:11px 22px;border-right:1px solid var(--bd)}.statstrip .cell .k{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);font-weight:600}
.statstrip .cell .v{font-size:13px;font-weight:600;margin-top:4px}.statstrip .cell .v .mono{font-size:12px;font-weight:500}
.tabs{display:flex;gap:2px;padding:0 16px;border-bottom:1px solid var(--bd)}
.tabs button{font-family:inherit;background:none;border:0;color:var(--dim);font-size:13px;font-weight:600;padding:13px 14px;cursor:pointer;position:relative}.tabs button:hover{color:var(--tx)}.tabs button.on{color:var(--tx)}
.tabs button.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--ac)}
.tabs button .c{font-size:10.5px;background:var(--s3);color:var(--dim);padding:0 7px;border-radius:20px;margin-left:6px}
.dbody{padding:18px 22px 40px}
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px}.toolbar .srch{flex:1;max-width:260px;display:flex;align-items:center;gap:8px;background:var(--s2);border:1px solid var(--bd);border-radius:9px;padding:7px 11px;color:var(--faint);font-size:12.5px}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{text-align:left;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);font-weight:600;padding:0 13px 10px}
table.tbl td{padding:12px 13px;border-top:1px solid var(--bd)}table.tbl tr:hover td{background:var(--s2)}
table.tbl .u{font-family:var(--mono);font-weight:500}.tbl .path{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.inspector{width:280px;border-left:1px solid var(--bd);background:var(--s1);overflow-y:auto;padding:18px 18px 40px;flex-shrink:0}
.insp-h{display:flex;align-items:center;gap:10px;margin-bottom:16px}.insp-h .ico{width:36px;height:36px;border-radius:10px;background:var(--ac-soft);color:var(--ac);display:grid;place-items:center;font-size:19px}.insp-h .t{font-weight:600;font-size:14px}.insp-h .s{font-size:11.5px;color:var(--faint)}
.fact{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--bd);font-size:12.5px}.fact .k{color:var(--dim)}.fact .v{font-weight:500}.fact .v.mono{font-family:var(--mono);font-size:11.5px}
.insp-sec{font-size:10.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--faint);margin:18px 0 8px}
.usebar{margin-bottom:12px}.usebar .ul{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dim);margin-bottom:5px}.usebar .ul b{color:var(--tx);font-family:var(--mono)}
.qa{display:flex;flex-direction:column;gap:7px}.qa .btn{justify-content:flex-start;width:100%}

/* infra/games/vpn */
.secgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.peer{display:flex;align-items:center;gap:13px;padding:13px 16px;border:1px solid var(--bd);border-radius:var(--r);background:var(--s1);margin-bottom:10px}
.peer .qr{width:42px;height:42px;border-radius:8px;background:var(--s3);display:grid;place-items:center;font-size:20px;color:var(--ac)}
.peer .nm{font-weight:600;font-size:13.5px}.peer .ip{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.bignum{font-size:30px;font-weight:700;letter-spacing:-1px}

.ov{position:fixed;inset:0;background:rgba(4,6,11,.55);backdrop-filter:blur(4px);display:none;z-index:50}.ov.show{display:flex}
.palette-wrap{align-items:flex-start;justify-content:center;padding-top:13vh}
.palette{width:560px;background:var(--s1);border:1px solid var(--bd2);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.palette .ph{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--bd)}.palette .ph i{font-size:20px;color:var(--faint)}.palette .ph input{flex:1;background:none;border:0;outline:none;color:var(--tx);font-family:inherit;font-size:15px}
.palette .pgrp{font-size:10.5px;letter-spacing:.7px;text-transform:uppercase;color:var(--faint);font-weight:600;padding:12px 18px 4px}
.palette .pi{display:flex;align-items:center;gap:12px;padding:9px 18px;font-size:13.5px;cursor:pointer}.palette .pi i{font-size:18px;color:var(--ac)}.palette .pi:hover,.palette .pi.on{background:var(--ac-soft)}.palette .pi .hint{margin-left:auto;font-size:11px;color:var(--faint)}
.palette .pf{padding:9px 18px;border-top:1px solid var(--bd);display:flex;gap:16px;font-size:11px;color:var(--faint)}
.sheet-wrap{justify-content:flex-end}.sheet{width:440px;height:100%;background:var(--s1);border-left:1px solid var(--bd2);overflow-y:auto}
.sheet-h{display:flex;align-items:center;gap:11px;padding:18px 20px;border-bottom:1px solid var(--bd)}.sheet-h .ico{width:30px;height:30px;border-radius:8px;background:var(--ac-soft);color:var(--ac);display:grid;place-items:center;font-size:17px}
.fld label{font-size:12px;font-weight:600;color:var(--dim);display:block;margin-bottom:7px}
.inp{display:flex;align-items:center;gap:8px;background:var(--s2);border:1px solid var(--bd2);border-radius:9px;padding:9px 12px}.inp input{flex:1;background:none;border:0;outline:none;color:var(--tx);font-size:13px;font-family:var(--mono)}

@media(max-width:1200px){.inspector{display:none}}
@media(max-width:860px){
  .top .hamb{display:grid}
  .side{position:fixed;left:0;top:0;bottom:0;z-index:60;transform:translateX(-100%);transition:transform .2s ease;box-shadow:8px 0 40px rgba(0,0,0,.45)}
  .side.open{transform:none}
  .cmdk{display:none}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid2,.grid3{grid-template-columns:1fr}
  .explorer{width:200px}
}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55;display:none}
.scrim.show{display:block}

/* ===== Dashboard widgets (rendered by api.php) ===== */
/* Universal: dw-pill, dw-dot, dw-track, dw-fill, dw-row, dw-bar */
.dw-pill{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:20px;line-height:1;letter-spacing:.2px;white-space:nowrap}
.dw-pill .dw-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.dw-pill.dw-ok{background:var(--ok-s);color:var(--ok)}.dw-pill.dw-ok .dw-dot{background:var(--ok)}
.dw-pill.dw-warn{background:var(--warn-s);color:var(--warn)}.dw-pill.dw-warn .dw-dot{background:var(--warn)}
.dw-pill.dw-dgr{background:var(--dgr-s);color:var(--dgr)}.dw-pill.dw-dgr .dw-dot{background:var(--dgr)}
.dw-pill.dw-mut{background:var(--s3);color:var(--dim)}.dw-pill.dw-mut .dw-dot{background:var(--faint)}
.dw-ok{color:var(--ok)}.dw-warn{color:var(--warn)}.dw-dgr{color:var(--dgr)}.dw-mut{color:var(--dim)}

.dw-track{height:6px;border-radius:6px;background:var(--s3);overflow:hidden}
.dw-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--ac2),var(--ac));transition:width .35s}
.dw-fill.ok{background:linear-gradient(90deg,var(--ok),var(--ok))}
.dw-fill.warn{background:linear-gradient(90deg,var(--warn),var(--warn))}
.dw-fill.dgr{background:linear-gradient(90deg,var(--dgr),var(--dgr))}
.dw-pulse{animation:dw-pulse-anim 1.6s ease-in-out infinite}
@keyframes dw-pulse-anim{0%,100%{opacity:1}50%{opacity:.55}}

.dw-section{margin-top:14px;font-size:10px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.9px;border-bottom:1px solid var(--bd);padding-bottom:6px;margin-bottom:10px}

.dw-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--bd);font-size:12.5px}
.dw-row:last-child{border-bottom:0}
.dw-row-k{color:var(--dim)}.dw-row-v{font-weight:500}.dw-row-v.mono{font-family:var(--mono)}

.dw-bar-row{margin-bottom:10px}
.dw-bar-top{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--dim);margin-bottom:5px}
.dw-bar-top .mono{font-family:var(--mono);color:var(--tx);font-weight:500}

/* Network stats row (3 columns) */
.dw-net{display:flex;gap:10px}
.dw-stat{flex:1;display:flex;flex-direction:column;gap:2px;padding:9px 12px;background:var(--s2);border:1px solid var(--bd);border-radius:9px}
.dw-stat-k{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.dw-stat-v{font-size:14px;font-weight:600;font-family:var(--mono)}

/* Service status chips */
.dw-svc{flex:1;min-width:140px;display:flex;flex-direction:column;gap:6px;padding:10px 14px;background:var(--s2);border:1px solid var(--bd);border-radius:9px;border-left:2px solid var(--bd2)}
.dw-svc-ok{border-left-color:var(--ok)}
.dw-svc-dgr{border-left-color:var(--dgr)}
.dw-svc-name{font-size:12.5px;font-weight:600;color:var(--tx)}

/* Proxmox node card */
.dw-node{padding:14px 16px;background:var(--s2);border:1px solid var(--bd);border-radius:11px;margin-bottom:12px}
.dw-node:last-child{margin-bottom:0}
.dw-node-down{opacity:.6}
.dw-node-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.dw-node-name{font-size:13.5px;font-weight:700;color:var(--tx)}
.dw-node-badges{display:flex;gap:6px;flex-wrap:wrap}
.dw-empty{padding:20px;text-align:center;color:var(--faint);font-size:12.5px}
.dw-workloads{display:flex;flex-wrap:wrap;gap:6px}
.dw-workload{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tx);background:var(--s3);border:1px solid var(--bd);border-radius:6px;padding:3px 9px}
.dw-workload i{color:var(--ok);font-size:12px}

/* rclone widget rows */
.dw-rclone{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--bd);font-size:13px}
.dw-rclone:last-child{border-bottom:0}
.dw-rclone-busy{flex-direction:column;align-items:stretch;gap:5px}
.dw-rclone-off{opacity:.65}
.dw-rclone-r{display:flex;align-items:center;gap:8px}
.dw-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);font-weight:500;margin-bottom:4px}
.dw-btn{background:transparent;border:1px solid var(--bd2);border-radius:6px;color:var(--dim);padding:4px 9px;font-size:11.5px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-family:inherit;transition:.13s}
.dw-btn:hover{background:var(--s3);color:var(--tx);border-color:var(--bd3)}

/* Game server card */
.dw-game{padding:13px 16px;background:var(--s2);border:1px solid var(--bd);border-radius:11px;margin-bottom:10px}
.dw-game:last-child{margin-bottom:0}
.dw-game.dw-clickable{cursor:pointer;transition:.14s}
.dw-game.dw-clickable:hover{border-color:var(--ac-bd);background:var(--s3)}
.dw-game-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.dw-game-info{display:flex;flex-direction:column;gap:3px}
.dw-game-name{font-size:13.5px;font-weight:600;color:var(--tx)}
.dw-game-specs{font-size:11.5px;color:var(--faint)}
.dw-game-bars{margin-top:10px;display:flex;gap:10px}
.dw-game-bar{flex:1}
.dw-game-map{margin-top:6px;font-size:11.5px;color:var(--faint)}
.dw-game-map b{color:var(--ac);font-weight:500}
.dw-connect{margin-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--ac2);background:rgba(77,163,255,.1);border:1px solid rgba(77,163,255,.25);padding:5px 10px;border-radius:6px;display:inline-block;cursor:pointer;transition:.13s}
.dw-connect:hover{background:rgba(77,163,255,.15)}

/* ===== Datacenter card layout (Proxmox section in index.php) ===== */
.dc-body{display:flex;flex-direction:column;gap:18px}
.dc-zone{display:flex;flex-direction:column;gap:10px}
.dc-zone-label{font-size:10.5px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.9px;display:flex;align-items:center;gap:7px;padding-bottom:6px;border-bottom:1px solid var(--bd)}
.dc-zone-label i{font-size:13px;color:var(--ac)}
.dc-split-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dc-inner-card{background:var(--s2);border:1px solid var(--bd);border-radius:11px;padding:13px 14px;display:flex;flex-direction:column}
.dc-inner-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:12.5px}
.dc-inner-title{font-weight:600;color:var(--tx)}
.dc-charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.dc-chart-card{background:var(--s2);border:1px solid var(--bd);border-radius:11px;padding:13px 14px}
.dc-chart-label{font-size:11.5px;font-weight:600;color:var(--dim);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.dc-chart-label i{color:var(--ac);font-size:12px}
.proxmox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
@media(max-width:760px){.dc-split-grid{grid-template-columns:1fr}}

/* ===== Scratchpad widget ===== */
.sp-write-area{display:flex;flex-direction:column;gap:8px;padding:10px 11px;background:var(--s2);border:1px solid var(--bd);border-radius:10px;margin-bottom:12px}
.sp-editor{width:100%;background:transparent;border:0;outline:none;color:var(--tx);font-family:var(--mono);font-size:12.5px;resize:vertical;min-height:54px;line-height:1.55}
.sp-editor::placeholder{color:var(--faint)}
.sp-write-footer{display:flex;align-items:center;gap:11px}
.sp-colors{display:flex;gap:6px;flex:1}
.sp-color-dot{width:18px;height:18px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:.13s;opacity:.65}
.sp-color-dot:hover{opacity:.95;transform:scale(1.1)}
.sp-color-dot.active{opacity:1;border-color:var(--bd3)}
.sp-post-btn{display:inline-flex;align-items:center;gap:6px;background:var(--ac);color:#fff;border:0;border-radius:7px;padding:6px 13px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:.13s}
.sp-post-btn:hover{filter:brightness(1.08)}
.sp-feed{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow-y:auto}
.sp-block{display:flex;background:var(--s2);border:1px solid var(--bd);border-radius:9px;overflow:hidden;transition:.14s}
.sp-block:hover{border-color:var(--bd3)}
.sp-block-accent{width:3px;flex-shrink:0;align-self:stretch}
.sp-block-content{flex:1;min-width:0;padding:8px 11px}
.sp-block-head{display:flex;align-items:center;gap:6px;font-size:11px;margin-bottom:4px}
.sp-block-who{font-weight:600;font-size:11.5px}
.sp-block-when{color:var(--faint);font-family:var(--mono);font-size:10.5px}
.sp-block-actions{margin-left:auto;display:flex;gap:3px;opacity:0;transition:.15s}
.sp-block:hover .sp-block-actions{opacity:1}
.sp-act-btn{background:transparent;border:0;color:var(--faint);cursor:pointer;padding:2px 5px;border-radius:4px;font-size:10.5px}
.sp-act-btn:hover{color:var(--tx);background:var(--s3)}
.sp-del-btn:hover{color:var(--dgr)}
.sp-pre{font-family:var(--mono);font-size:11.5px;background:var(--bg);border:1px solid var(--bd);padding:7px 9px;border-radius:6px;white-space:pre-wrap;word-break:break-all;margin:0;line-height:1.5}
.sp-prose{font-size:12.5px;line-height:1.55;word-break:break-word}

/* ===== Game-server console modal (Pterodactyl WS terminal) ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(4,6,11,.6);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:200}
.modal-overlay.active{display:flex}
.console-window{width:780px;max-width:95vw;height:560px;max-height:88vh;background:var(--s1);border:1px solid var(--bd2);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.console-header{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--bd);font-size:13.5px;font-weight:600;color:var(--tx);background:var(--s2)}
.console-header > span{display:flex;align-items:center;gap:9px}
.console-output{flex:1;min-height:0;overflow-y:auto;padding:14px 18px;font-family:var(--mono);font-size:12px;color:var(--tx);background:var(--bg);line-height:1.55;white-space:pre-wrap;word-break:break-all}
.console-output > div{padding:1px 0}
.console-input-row{display:flex;gap:0;border-top:1px solid var(--bd);background:var(--s2)}
.console-input-row input{flex:1;background:transparent;border:0;outline:none;color:var(--tx);font-family:var(--mono);font-size:12.5px;padding:11px 18px}
.console-input-row button{background:var(--ac);border:0;color:#fff;font-weight:600;font-size:13px;padding:0 22px;cursor:pointer;font-family:inherit}
.console-input-row button:hover{filter:brightness(1.08)}

/* ── Game-server admin (admin_gameservers.php) ── */
.gs-empty{padding:26px 16px;text-align:center;color:var(--faint);font-size:13px}
.gs-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 18px;border-bottom:1px solid var(--bd);flex-wrap:wrap}
.gs-row:last-child{border-bottom:0}
.gs-row-main{display:flex;align-items:center;gap:13px;min-width:0;flex:1}
.gs-row-info{min-width:0}
.gs-row-name{font-size:13.5px;font-weight:600;color:var(--tx);display:flex;align-items:center}
.gs-row-sub{font-size:11.5px;color:var(--faint);margin-top:2px}
.gs-row-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gs-toggle{position:relative;display:inline-flex;cursor:pointer;flex-shrink:0}
.gs-toggle input{position:absolute;opacity:0;width:0;height:0}
.gs-toggle span{width:38px;height:22px;border-radius:20px;background:var(--s3);border:1px solid var(--bd2);position:relative;transition:.18s;display:block}
.gs-toggle span::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--faint);transition:.18s}
.gs-toggle input:checked + span{background:var(--ac-soft);border-color:var(--ac-bd)}
.gs-toggle input:checked + span::after{background:var(--ac);transform:translateX(16px)}
.gs-table{width:100%;border-collapse:collapse;font-size:13px}
.gs-table th{text-align:left;padding:10px 18px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--faint);border-bottom:1px solid var(--bd)}
.gs-table td{padding:11px 18px;border-bottom:1px solid var(--bd);vertical-align:middle}
.gs-table tr:last-child td{border-bottom:0}

/* Shared form fields — element-qualified so the .inp wrapper used elsewhere is untouched */
input.inp,select.inp,textarea.inp{width:100%;background:var(--s2);border:1px solid var(--bd2);border-radius:9px;padding:9px 12px;color:var(--tx);font-size:13px;font-family:inherit;outline:none;transition:border-color .12s}
input.inp:focus,select.inp:focus,textarea.inp:focus{border-color:var(--ac-bd)}
.fld{display:block;margin-bottom:13px}
.fld>span{display:block;font-size:12px;font-weight:600;color:var(--dim);margin-bottom:7px}
.fld-row{display:flex;align-items:center;gap:9px}
.fld-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--ac)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:13px}

/* ── Games: compact dashboard list ── */
.gc-item{display:flex;align-items:center;gap:11px;padding:9px 4px;border-bottom:1px solid var(--bd);text-decoration:none;color:inherit;transition:.12s}
.gc-item:last-child{border-bottom:0}
.gc-item:hover{background:var(--s2);border-radius:8px;padding-left:8px;padding-right:8px}
.gc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--faint)}
.gc-dot.gc-ok{background:var(--ok);box-shadow:0 0 7px var(--ok)}
.gc-dot.gc-warn{background:var(--warn)}.gc-dot.gc-dgr{background:var(--dgr)}.gc-dot.gc-mut{background:var(--faint)}
.gc-name{flex:1;min-width:0;font-size:13px;font-weight:500;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-players{font-family:var(--mono);font-size:13px;color:var(--tx)}.gc-players b{color:var(--ac);font-weight:700}.gc-max{color:var(--faint);font-weight:500}
.gc-stat{font-size:11.5px;font-weight:600}.gc-stat.gc-ok{color:var(--ok)}.gc-stat.gc-warn{color:var(--warn)}.gc-stat.gc-dgr{color:var(--dgr)}.gc-stat.gc-mut{color:var(--faint)}

/* ── Games: full page grid ── */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.games-grid .dw-game{margin-bottom:0}
.dw-game-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.dw-btn-pri{background:var(--ac-soft);border-color:var(--ac-bd);color:var(--ac);font-weight:600}
.dw-btn-pri:hover{background:var(--ac);color:#fff;border-color:transparent}

/* ── Clean dashboard layout ── */
.dash-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;align-items:start}
.dash-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.dash-grid > .dash-side:only-child{grid-column:1/-1}
@media(max-width:980px){.dash-grid{grid-template-columns:1fr}}
.card-h .more{display:inline-flex;align-items:center;gap:4px}
.card-h .more i{font-size:15px}

/* Proxmox compact summary card */
.pmx-top{display:flex;gap:10px;margin-bottom:14px}
.pmx-stat{flex:1;background:var(--s2);border:1px solid var(--bd);border-radius:10px;padding:10px 12px}
.pmx-k{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.pmx-v{font-size:20px;font-weight:700;margin-top:3px;letter-spacing:-.5px}
.pmx-v .pmx-sub{font-size:13px;font-weight:600;color:var(--faint)}

/* ── Scratchpad polish ── */
.scratchpad-card{display:flex;flex-direction:column}
.sp-write-area{transition:border-color .14s,box-shadow .14s}
.sp-write-area:focus-within{border-color:var(--ac-bd);box-shadow:0 0 0 3px var(--ac-soft)}
.sp-write-actions{display:flex;align-items:center;gap:10px}
.sp-hint{font-size:.7rem;color:var(--faint);font-family:var(--mono)}
.sp-block-accent{box-shadow:none}

/* ── ImageHost gallery + FileShare list ── */
.ih-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:16px}
.ih-stat{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r-lg);padding:14px 16px}
.ih-stat-k{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.ih-stat-v{font-size:24px;font-weight:700;margin-top:4px;letter-spacing:-.5px}
.ih-stat-sub{font-size:11px;color:var(--faint);margin-top:5px}
.ih-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.ih-search{display:flex;align-items:center;gap:7px;background:var(--s2);border:1px solid var(--bd2);border-radius:9px;padding:7px 11px;min-width:200px}
.ih-search i{color:var(--faint);font-size:15px}
.ih-search input{background:none;border:0;outline:none;color:var(--tx);font-size:13px;font-family:inherit;width:100%}
.seg{background:var(--s2);border:1px solid var(--bd2);color:var(--dim);font-size:12.5px;font-weight:600;padding:6px 13px;cursor:pointer;font-family:inherit}
.ih-scope{display:inline-flex;border-radius:8px;overflow:hidden;border:1px solid var(--bd2)}
.ih-scope .seg{border:0;border-radius:0}
.ih-scope .seg.on{background:var(--ac-soft);color:var(--ac)}
.ih-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.ih-tile{background:var(--s1);border:1px solid var(--bd);border-radius:11px;overflow:hidden;position:relative;transition:.14s}
.ih-tile:hover{border-color:var(--bd3);transform:translateY(-2px)}
.ih-thumb{aspect-ratio:4/3;background:var(--s3);cursor:pointer;display:block;overflow:hidden}
.ih-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ih-meta{padding:9px 11px}
.ih-name{font-size:12.5px;font-weight:500;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ih-sub{font-size:11px;color:var(--faint);margin-top:2px}
.ih-actions{position:absolute;top:7px;right:7px;display:flex;gap:5px;opacity:0;transition:.14s}
.ih-tile:hover .ih-actions{opacity:1}
.ih-act{width:28px;height:28px;display:grid;place-items:center;border-radius:7px;background:rgba(10,12,18,.7);border:1px solid var(--bd2);color:#fff;cursor:pointer;backdrop-filter:blur(4px);font-size:14px;text-decoration:none}
.ih-act:hover{background:var(--ac)}
.ih-act.ih-del:hover{background:var(--dgr)}
.ih-drop{position:fixed;inset:0;background:rgba(4,6,11,.78);backdrop-filter:blur(5px);z-index:120;display:none;align-items:center;justify-content:center}
.ih-drop.show{display:flex}
.ih-drop-box{border:2px dashed var(--ac);border-radius:18px;padding:60px 90px;text-align:center;color:var(--tx);font-size:16px;font-weight:600;background:var(--ac-soft)}
.ih-drop-box i{font-size:46px;color:var(--ac);display:block;margin-bottom:14px}
.ih-lightbox{position:fixed;inset:0;background:rgba(4,6,11,.9);backdrop-filter:blur(8px);z-index:140;display:none;flex-direction:column;align-items:center;justify-content:center;padding:40px}
.ih-lightbox.show{display:flex}
.ih-lightbox img{max-width:90vw;max-height:78vh;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.ih-lb-close{position:absolute;top:20px;right:24px;width:40px;height:40px;border-radius:10px;background:var(--s2);border:1px solid var(--bd2);color:var(--tx);font-size:20px;cursor:pointer;display:grid;place-items:center}
.ih-lb-bar{display:flex;align-items:center;gap:8px;margin-top:18px;background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:10px 14px;max-width:92vw}
.ih-lb-name{font-size:13px;color:var(--tx);font-weight:600;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ih-uptoast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--s1);border:1px solid var(--bd2);border-radius:11px;padding:11px 18px;font-size:13px;font-weight:600;color:var(--tx);box-shadow:0 12px 40px rgba(0,0,0,.4);z-index:150;opacity:0;pointer-events:none;transition:.2s;display:flex;align-items:center;gap:9px}
.ih-uptoast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── FileShare list ── */
.fs-list{display:flex;flex-direction:column;gap:8px}
.fs-row{display:flex;align-items:center;gap:13px;background:var(--s1);border:1px solid var(--bd);border-radius:11px;padding:12px 15px;transition:.14s}
.fs-row:hover{border-color:var(--bd3)}
.fs-ico{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;font-size:18px;flex-shrink:0;background:var(--s3)}
.fs-info{flex:1;min-width:0}
.fs-name{font-size:13px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-sub{font-size:11.5px;color:var(--faint);margin-top:2px;display:flex;gap:10px;flex-wrap:wrap}
.fs-acts{display:flex;gap:6px;flex-shrink:0}
.fs-expired{opacity:.5}

/* ========================================================================== 
   2026 experience layer — accessibility, responsive shell, dashboard polish
   ========================================================================== */
:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
button,input,textarea,select{font:inherit}
button{color:inherit}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;top:10px;left:50%;z-index:1000;transform:translate(-50%,-150%);padding:10px 16px;border-radius:10px;background:var(--tx);color:var(--bg);font-weight:700;box-shadow:var(--shadow-md);transition:transform .16s ease}
.skip-link:focus{transform:translate(-50%,0)}
body.overlay-open,body.nav-open{overflow:hidden}

/* Shared shell */
.side{width:260px;box-shadow:inset -1px 0 0 var(--bd)}
.brand{transition:background .15s ease;border-radius:12px;margin:8px 10px 2px;padding:12px 10px}
.brand:hover{background:var(--s2)}
.logo{width:38px;height:38px;border-radius:11px;box-shadow:0 8px 24px rgba(124,108,240,.27)}
.brand .nm{font-size:15.5px;font-weight:800}.brand .sub{margin-top:1px;letter-spacing:.01em}
.nav{padding:5px 12px 18px}
.nav .grp{padding:17px 10px 6px;color:var(--faint)}
.nav a{min-height:39px;padding:9px 10px;border-radius:9px;transition:background .14s ease,color .14s ease,transform .14s ease}
.nav a:hover{transform:translateX(2px)}
.nav a.on{box-shadow:inset 0 0 0 1px rgba(139,124,246,.08)}
.nav a.on::before{left:-12px;top:7px;bottom:7px;width:3px;box-shadow:0 0 14px var(--ac)}
.side-foot{margin:8px 10px 10px;padding:10px;border:1px solid var(--bd);border-radius:12px;background:var(--s1);transition:background .15s ease,border-color .15s ease}
.side-foot:hover{background:var(--s2);border-color:var(--bd2)}
.side-user{flex:1;min-width:0}
.side-profile-icon{color:var(--faint);font-size:16px}

.top{min-height:64px;padding:11px 24px;position:relative;z-index:20;border-bottom-color:var(--bd);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2)}
.cmdk{appearance:none;text-align:left;font-family:inherit;line-height:1.35;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.cmdk:hover{border-color:var(--bd2);background:var(--s3)}
.ic-btn{appearance:none;background:transparent;padding:0;transition:background .14s ease,color .14s ease,border-color .14s ease,transform .14s ease}
.ic-btn:hover{transform:translateY(-1px)}
.btn{min-height:36px;box-shadow:0 1px 1px rgba(0,0,0,.05)}
.btn.pri{background:linear-gradient(135deg,var(--ac),#6657dc);box-shadow:0 7px 20px rgba(124,108,240,.24)}
.btn.pri:hover{transform:translateY(-1px);box-shadow:0 10px 25px rgba(124,108,240,.29)}
.view{padding:28px 32px 64px;scrollbar-gutter:stable}
.card{box-shadow:var(--shadow-sm);transition:border-color .16s ease,box-shadow .16s ease}
.card:hover{border-color:var(--bd2)}
.card-h{min-height:62px;padding:13px 17px}
.card-h .ico{width:34px;height:34px;border-radius:10px}
.card-h h3{font-size:13.5px}
.card-subtitle{display:block;font-size:11px;color:var(--faint);margin-top:1px}
.card-action{margin-left:auto;width:32px;height:32px}

/* Command palette */
.ov{background:rgba(3,5,10,.64);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.palette-wrap{padding:12vh 18px 30px}
.palette{width:min(620px,100%);max-height:min(680px,76vh);display:flex;flex-direction:column;border-radius:18px;box-shadow:var(--shadow-md);animation:palette-in .16s ease-out}
@keyframes palette-in{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
.palette .ph{flex:0 0 auto;padding:17px 18px;background:var(--s1)}
.palette .ph input{min-width:0}
.palette-results{overflow-y:auto;padding:7px 0 4px}
.palette .pgrp{padding:11px 18px 5px}
.palette .pi{appearance:none;width:100%;border:0;background:transparent;text-align:left;color:var(--tx);display:flex;align-items:center;gap:12px;padding:10px 18px;font-size:13.5px;cursor:pointer}
.palette .pi i{width:20px;font-size:18px;color:var(--ac)}
.palette .pi:hover,.palette .pi.on{background:var(--ac-soft)}
.palette .pi.on{box-shadow:inset 3px 0 0 var(--ac)}
.palette .pi .hint{margin-left:auto;font-size:11px;color:var(--faint)}
.palette-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:42px 20px;color:var(--faint);text-align:center}
.palette-empty i{font-size:26px}
.palette .pf{flex:0 0 auto;background:var(--s1)}

/* Dashboard */
.dashboard-view{max-width:1580px;margin:0 auto;width:100%}
.dashboard-hero{position:relative;display:flex;align-items:flex-end;gap:28px;margin-bottom:22px;padding:26px 28px;border:1px solid var(--bd);border-radius:20px;background:
  radial-gradient(circle at 10% 10%,rgba(139,124,246,.16),transparent 34%),
  radial-gradient(circle at 92% 20%,rgba(74,168,255,.11),transparent 28%),
  var(--s1);box-shadow:var(--shadow-sm);overflow:hidden}
.dashboard-hero::after{content:"";position:absolute;right:-72px;bottom:-110px;width:260px;height:260px;border-radius:50%;border:1px solid rgba(139,124,246,.11);box-shadow:0 0 0 34px rgba(139,124,246,.035),0 0 0 68px rgba(139,124,246,.025);pointer-events:none}
.hero-copy{position:relative;z-index:1;min-width:0}
.eyebrow{display:flex;align-items:center;gap:7px;color:var(--dim);font-size:11.5px;font-weight:650;text-transform:uppercase;letter-spacing:.075em;margin-bottom:9px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-s),0 0 14px rgba(61,220,151,.55)}
.hero-copy h1{font-size:clamp(25px,2.2vw,34px);line-height:1.15;letter-spacing:-.035em;font-weight:800;max-width:750px}
.hero-copy p{color:var(--dim);font-size:13.5px;max-width:670px;margin-top:8px}
.hero-actions{position:relative;z-index:1;margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.updated-state{display:flex;align-items:center;gap:7px;color:var(--faint);font-size:11.5px;margin-right:5px;white-space:nowrap}
.updated-state i{font-size:14px}

.kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:30px}
.kpi{position:relative;display:block;min-width:0;padding:17px 18px 16px;background:linear-gradient(180deg,var(--s1),color-mix(in srgb,var(--s1) 91%,var(--ac) 9%));border:1px solid var(--bd);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.kpi::after{content:"";position:absolute;inset:auto -28px -48px auto;width:105px;height:105px;border-radius:50%;background:var(--ac-soft);filter:blur(2px);opacity:.55;pointer-events:none}
.kpi:hover:not([aria-disabled="true"]){transform:translateY(-2px);border-color:var(--ac-bd);box-shadow:0 15px 38px rgba(0,0,0,.16)}
.kpi[aria-disabled="true"]{cursor:default}
.kpi-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.kpi-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--ac-soft);color:var(--ac);font-size:17px}
.kpi-arrow{font-size:16px;color:var(--faint);opacity:.45;transition:opacity .15s ease,transform .15s ease}
.kpi:hover .kpi-arrow{opacity:1;transform:translate(2px,-2px);color:var(--ac)}
.kpi .val{position:relative;z-index:1;font-size:30px;line-height:1.05;margin-top:17px;letter-spacing:-.04em}
.kpi .lab{position:relative;z-index:1;font-size:12.5px;font-weight:650;color:var(--tx);margin-top:5px}
.kpi .lab i{display:none}
.kpi-note{position:relative;z-index:1;font-size:10.5px;color:var(--faint);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.dashboard-section{margin-top:25px}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px;padding:0 2px}
.section-heading.compact{align-items:center}
.section-heading h2{font-size:15px;font-weight:750;letter-spacing:-.015em}
.section-heading p{font-size:11.5px;color:var(--faint);margin-top:2px}
.section-count{flex-shrink:0;font-size:10.5px;font-weight:650;color:var(--dim);background:var(--s2);border:1px solid var(--bd);padding:4px 9px;border-radius:20px}
.section-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:650;color:var(--dim)}
.section-link:hover{color:var(--ac)}

.svc-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:0}
.svc-tile{min-width:0;padding:15px;border-radius:15px;box-shadow:var(--shadow-sm)}
.svc-tile:hover{border-color:var(--ac-bd);background:var(--s1);transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.14)}
.svc-tile .svc-ico{width:43px;height:43px;border-radius:12px;background:color-mix(in srgb,var(--service-color) 14%,transparent);color:var(--service-color)}
.svc-name-row{display:flex;align-items:center;gap:8px;min-width:0}
.svc-tile .svc-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.service-state{display:inline-flex;align-items:center;gap:4px;margin-left:auto;color:var(--faint);font-size:9.5px;font-weight:650;white-space:nowrap}
.service-state span{width:5px;height:5px;border-radius:50%;background:var(--faint)}
.service-state.healthy{color:var(--ok)}.service-state.healthy span{background:var(--ok)}

.quicklinks-list{display:flex;flex-wrap:wrap;gap:9px}
.quicklink{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:7px 11px 7px 8px;background:var(--s1);border:1px solid var(--bd);border-radius:12px;box-shadow:var(--shadow-sm);font-size:12.5px;font-weight:600;transition:transform .14s ease,border-color .14s ease,background .14s ease}
.quicklink:hover{transform:translateY(-1px);border-color:var(--bd3);background:var(--s2)}
.quicklink-icon{width:28px;height:28px;border-radius:8px;background:var(--s2);display:grid;place-items:center}
.quicklink-go{font-size:13px;color:var(--faint);opacity:.6}
.workspace-section{margin-top:30px}
.dash-grid{grid-template-columns:minmax(0,1.55fr) minmax(300px,.9fr);gap:14px}
.scratchpad-body{display:flex;flex-direction:column}

/* Fine-grained responsive behaviour */
@media(max-width:1180px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px){
  .dashboard-hero{align-items:flex-start;flex-direction:column}
  .hero-actions{margin-left:0;justify-content:flex-start}
  .updated-state{width:100%;margin-bottom:2px}
  .dash-grid{grid-template-columns:1fr}
}
@media(max-width:860px){
  .side{width:min(290px,86vw)}
  .top{padding:10px 16px;gap:10px}
  .crumb{display:none}
  .top-r{gap:5px}
  .view{padding:20px 18px 50px}
  .dashboard-hero{padding:22px}
  .palette-wrap{padding-top:8vh}
}
@media(max-width:620px){
  .top-action span{display:none}
  .top-action{width:36px;padding:0;justify-content:center}
  .dashboard-hero{padding:20px;border-radius:17px}
  .hero-copy h1{font-size:25px}
  .hero-actions{width:100%}
  .hero-actions .btn{flex:1;justify-content:center}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:14px}
  .kpi .val{font-size:26px;margin-top:13px}
  .kpi-note{display:none}
  .svc-tiles{grid-template-columns:1fr}
  .section-heading p{display:none}
  .quicklinks-list{display:grid;grid-template-columns:1fr 1fr}
  .quicklink{min-width:0}
  .quicklink>span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .palette .pf{display:none}
}
@media(max-width:420px){
  .view{padding-left:13px;padding-right:13px}
  .kpis{grid-template-columns:1fr}
  .kpi-note{display:block}
  .quicklinks-list{grid-template-columns:1fr}
  .updated-state{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media(max-width:420px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi-note{display:none}
}
@media(max-width:340px){
  .kpis{grid-template-columns:1fr}
  .kpi-note{display:block}
}

/* ========================================================================== */
/* TOOLBOX AURORA — 2026 visual overhaul                                      */
/* ========================================================================== */
html{background:var(--bg)}
body{
  font-family:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:
    radial-gradient(circle at 7% -8%,rgba(var(--ac-rgb),.18),transparent 30rem),
    radial-gradient(circle at 92% 2%,rgba(var(--ac2-rgb),.13),transparent 28rem),
    linear-gradient(180deg,var(--bg-elevated) 0,var(--bg) 42rem);
  background-attachment:fixed;
  letter-spacing:-.008em;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.46;
  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:48px 48px;
  -webkit-mask-image:linear-gradient(to bottom,black,transparent 76%);mask-image:linear-gradient(to bottom,black,transparent 76%);
}
button,input,select,textarea{font:inherit}
::selection{background:rgba(var(--ac-rgb),.32);color:var(--tx)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--s4) 82%,transparent);border:2px solid transparent;background-clip:padding-box;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:var(--faint);border:2px solid transparent;background-clip:padding-box}

.app{height:100dvh;gap:12px;padding:12px;overflow:hidden}
.side{
  width:272px;height:calc(100dvh - 24px);border:1px solid var(--bd2);border-radius:22px;
  background:var(--side);box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter:blur(24px) saturate(1.18);-webkit-backdrop-filter:blur(24px) saturate(1.18);
  isolation:isolate;position:relative;
}
.side::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at 10% 0,rgba(var(--ac-rgb),.15),transparent 18rem),radial-gradient(circle at 90% 100%,rgba(var(--ac2-rgb),.08),transparent 16rem);
}
.brand{min-height:76px;padding:16px 16px 13px;gap:12px;border-bottom:1px solid var(--bd)}
.logo{
  width:42px;height:42px;border-radius:13px;font-size:22px;
  background:linear-gradient(145deg,var(--ac),color-mix(in srgb,var(--ac2) 82%,white 5%));
  box-shadow:0 10px 24px rgba(var(--ac-rgb),.3),inset 0 1px 0 rgba(255,255,255,.3);
}
.logo i{filter:drop-shadow(0 1px 2px rgba(0,0,0,.22))}
.brand-copy{min-width:0;flex:1}
.brand .nm{font-size:16px;font-weight:800;letter-spacing:-.035em}
.brand .sub{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:10.5px;white-space:nowrap;color:var(--faint)}
.brand-status{width:6px;height:6px;border-radius:99px;background:var(--ok);box-shadow:0 0 0 3px var(--ok-s),0 0 10px rgba(66,221,162,.45)}
.brand-arrow{font-size:16px;color:var(--faint);opacity:.5;transition:.18s}
.brand:hover .brand-arrow{opacity:1;transform:translateX(2px);color:var(--ac)}
.nav{padding:7px 10px 18px;scrollbar-gutter:stable;overscroll-behavior:contain}
.nav .grp{padding:16px 12px 6px;font-size:9.5px;font-weight:800;letter-spacing:.13em;color:var(--faint)}
.nav a{
  min-height:40px;margin:2px 0;padding:9px 11px;border:1px solid transparent;border-radius:11px;
  gap:11px;font-size:13px;font-weight:620;transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s;
}
.nav a i{width:20px;font-size:18px;transition:transform .15s,color .15s}
.nav a:hover{background:rgba(255,255,255,.045);border-color:var(--bd);transform:translateX(2px)}
.nav a:hover i{transform:scale(1.05);color:var(--tx)}
.nav a.on{
  color:#fff;border-color:rgba(var(--ac-rgb),.28);
  background:linear-gradient(105deg,rgba(var(--ac-rgb),.27),rgba(var(--ac2-rgb),.085));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 24px rgba(var(--ac-rgb),.1);
}
:root[data-theme="light"] .nav a.on{color:var(--tx)}
.nav a.on i{color:color-mix(in srgb,var(--ac) 70%,white 30%)}
.nav a.on::before{left:-11px;top:9px;bottom:9px;width:3px;border-radius:4px;background:linear-gradient(var(--ac),var(--ac2));box-shadow:0 0 12px rgba(var(--ac-rgb),.75)}
.nav a.on::after{content:"";margin-left:auto;width:5px;height:5px;border-radius:50%;background:var(--ac);box-shadow:0 0 10px rgba(var(--ac-rgb),.8)}
.nav a .tag{margin-left:auto;background:rgba(255,255,255,.055);border:1px solid var(--bd);padding:2px 7px}
.side-foot{
  margin:0 10px 10px;padding:10px;border:1px solid var(--bd);border-radius:13px;background:rgba(255,255,255,.035);
  transition:background .15s,border-color .15s,transform .15s;
}
.side-foot:hover{background:var(--s2);border-color:var(--bd2);transform:translateY(-1px)}
.av{width:36px;height:36px;border-radius:11px;font-weight:800;box-shadow:0 7px 18px rgba(var(--ac-rgb),.22)}
.side-foot .who{font-size:12.5px;font-weight:750}.side-foot .role{margin-top:2px;font-size:10.5px}
.side-profile-icon{margin-left:auto;color:var(--faint);font-size:15px}

.main{border-radius:22px;min-width:0}
.top{
  min-height:64px;margin:0;padding:9px 12px 9px 16px;border:1px solid var(--bd2);border-radius:18px;
  background:var(--topbar);box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(22px) saturate(1.22);-webkit-backdrop-filter:blur(22px) saturate(1.22);z-index:30;
}
.top-context{min-width:145px;display:flex;flex-direction:column;gap:1px}
.top-kicker{font-size:9px;text-transform:uppercase;letter-spacing:.14em;font-weight:800;color:var(--faint)}
.crumb{font-size:13px;line-height:1.25}.crumb i{font-size:15px;color:var(--ac)}.crumb b{font-weight:750}
.cmdk{
  width:min(390px,34vw);min-height:42px;margin-left:10px;padding:8px 10px 8px 13px;border-radius:12px;
  background:rgba(255,255,255,.035);border-color:var(--bd);box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.cmdk:hover{background:var(--s2);border-color:var(--ac-bd);box-shadow:0 0 0 3px rgba(var(--ac-rgb),.07)}
.cmdk>span:not(.kbd){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.kbd span{background:rgba(255,255,255,.055);border-color:var(--bd);border-bottom-color:var(--bd3);box-shadow:0 1px 1px rgba(0,0,0,.15);font-size:9.5px}
.top-r{gap:6px}
.ic-btn{width:40px;height:40px;border-radius:11px;border-color:var(--bd);background:rgba(255,255,255,.025)}
.ic-btn:hover{background:var(--s2);border-color:var(--bd2);box-shadow:0 8px 20px rgba(0,0,0,.11)}
.top .btn{min-height:40px;border-radius:11px}
.content{margin-top:12px;border-radius:20px;min-height:0}
.view{padding:30px 34px 72px}
.view.flush{
  margin:0;padding:0;border:1px solid var(--bd2);border-radius:20px;background:var(--glass);
  box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.035);overflow:hidden;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}

.btn{
  min-height:39px;padding:8px 14px;border-radius:11px;border-color:var(--bd2);background:rgba(255,255,255,.04);
  font-size:12.5px;font-weight:720;letter-spacing:-.01em;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s,filter .15s;
}
.btn:hover{transform:translateY(-1px);background:var(--s3);box-shadow:0 8px 20px rgba(0,0,0,.13)}
.btn.pri{
  background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 68%,var(--ac2) 32%));
  box-shadow:0 10px 26px rgba(var(--ac-rgb),.28),inset 0 1px 0 rgba(255,255,255,.24);
}
.btn.pri:hover{filter:brightness(1.07);box-shadow:0 14px 32px rgba(var(--ac-rgb),.34)}
.btn.gho{background:rgba(255,255,255,.018)}
.btn.sm{min-height:32px;padding:6px 10px;border-radius:9px;font-size:11.5px}

.card{
  position:relative;border-color:var(--bd);border-radius:19px;background:linear-gradient(180deg,color-mix(in srgb,var(--s1) 95%,white 1%),var(--s1));
  box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.035);overflow:hidden;
}
.card::before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.11),transparent);pointer-events:none}
.card:hover{border-color:var(--bd2);box-shadow:0 20px 48px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.045)}
.card-h{min-height:66px;padding:14px 18px}.card-h .ico{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,var(--ac-soft),var(--ac-soft-2));border:1px solid rgba(var(--ac-rgb),.14)}
.card-h h3{font-size:13.5px;font-weight:760}.card-subtitle{margin-top:2px}
.card-b{padding:18px}

/* Dashboard becomes a polished operations cockpit. */
.dashboard-view{max-width:1660px}
.dashboard-hero{
  min-height:245px;align-items:stretch;margin-bottom:18px;padding:34px 36px;border-radius:25px;border-color:rgba(var(--ac-rgb),.22);
  background:
    linear-gradient(112deg,rgba(var(--ac-rgb),.16),transparent 45%),
    radial-gradient(circle at 87% 12%,rgba(var(--ac2-rgb),.22),transparent 24rem),
    radial-gradient(circle at 76% 90%,rgba(var(--ac-rgb),.17),transparent 20rem),
    var(--glass-strong);
  box-shadow:var(--shadow-glow),inset 0 1px 0 rgba(255,255,255,.08);isolation:isolate;
}
.dashboard-hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:28px 28px;opacity:.34;-webkit-mask-image:linear-gradient(100deg,transparent 15%,black);mask-image:linear-gradient(100deg,transparent 15%,black)}
.dashboard-hero::after{right:-55px;bottom:-120px;width:330px;height:330px;border-color:rgba(var(--ac2-rgb),.15);box-shadow:0 0 0 42px rgba(var(--ac2-rgb),.035),0 0 0 84px rgba(var(--ac-rgb),.025)}
.hero-copy{display:flex;flex-direction:column;justify-content:center;max-width:820px}
.eyebrow{margin-bottom:13px;font-size:10.5px;letter-spacing:.13em;font-weight:800}
.hero-copy h1{font-size:clamp(32px,3.3vw,50px);line-height:1.03;letter-spacing:-.055em;max-width:880px;text-wrap:balance}
.hero-copy p{font-size:14px;line-height:1.7;max-width:650px;margin-top:15px}
.hero-panel{
  position:relative;z-index:2;align-self:center;margin-left:auto;width:min(350px,34%);padding:17px;border:1px solid var(--bd2);border-radius:18px;
  background:rgba(7,10,18,.36);box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 18px 50px rgba(0,0,0,.17);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
:root[data-theme="light"] .hero-panel{background:rgba(255,255,255,.56)}
.hero-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px;padding-bottom:13px;border-bottom:1px solid var(--bd)}
.hero-ready{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:760}.hero-ready .live-dot{width:7px;height:7px}
.hero-panel .updated-state{margin:0;font-size:10.5px}
.hero-actions{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:9px}.hero-actions .btn{justify-content:center;min-width:0}.hero-actions .btn:only-child{grid-column:1/-1}
.kpis{gap:13px;margin-bottom:30px}
.kpi{
  min-height:174px;padding:18px 19px;border-radius:18px;background:linear-gradient(155deg,var(--s1),color-mix(in srgb,var(--s1) 86%,var(--kpi-color,var(--ac)) 14%));
  border-color:var(--bd);box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.035);
}
.kpi:nth-child(1){--kpi-color:#8b7cff}.kpi:nth-child(2){--kpi-color:#37c9f5}.kpi:nth-child(3){--kpi-color:#f27ec8}.kpi:nth-child(4){--kpi-color:#42dda2}
.kpi::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--kpi-color),transparent);opacity:.62}
.kpi::after{width:125px;height:125px;right:-39px;bottom:-60px;background:color-mix(in srgb,var(--kpi-color) 18%,transparent);filter:blur(1px)}
.kpi:hover:not([aria-disabled="true"]){transform:translateY(-4px);border-color:color-mix(in srgb,var(--kpi-color) 45%,var(--bd));box-shadow:0 22px 50px rgba(0,0,0,.18),0 0 30px color-mix(in srgb,var(--kpi-color) 10%,transparent)}
.kpi-icon{width:39px;height:39px;border-radius:12px;color:var(--kpi-color);background:color-mix(in srgb,var(--kpi-color) 14%,transparent);border:1px solid color-mix(in srgb,var(--kpi-color) 20%,transparent)}
.kpi .val{font-size:34px;margin-top:20px}.kpi .lab{font-size:12.5px}.kpi-note{font-size:10.5px}
.dashboard-section{margin-top:30px}.section-heading{margin-bottom:14px}.section-heading h2{font-size:16px;font-weight:800}.section-heading p{font-size:11.5px;margin-top:4px}
.section-count{padding:5px 10px;background:var(--glass);border-color:var(--bd2)}
.svc-tiles{gap:13px}.svc-tile{min-height:90px;padding:16px 17px;border-radius:17px;background:var(--s1);box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.03)}
.svc-tile::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,color-mix(in srgb,var(--service-color) 8%,transparent),transparent 42%);opacity:0;transition:.18s}
.svc-tile{position:relative;overflow:hidden}.svc-tile:hover::before{opacity:1}.svc-tile:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(0,0,0,.17)}
.svc-tile .svc-ico{width:48px;height:48px;border-radius:14px;font-size:23px;border:1px solid color-mix(in srgb,var(--service-color) 18%,transparent)}
.svc-name-row{position:relative}.svc-tile .svc-name{font-size:13.5px;font-weight:760}.svc-tile .svc-meta{font-size:11.5px;margin-top:4px}.service-state{font-size:9px}
.quicklinks-list{gap:10px}.quicklink{min-height:47px;padding:8px 13px 8px 8px;border-radius:14px;background:var(--s1)}.quicklink-icon{width:32px;height:32px;border-radius:10px}
.dash-grid{gap:16px}.scratchpad-card{min-height:390px}

/* Hosting workbench: refined three-pane application layout. */
.explorer{width:258px;background:linear-gradient(180deg,var(--glass-strong),var(--glass));border-right-color:var(--bd2)}
.exp-h{padding:14px;border-bottom-color:var(--bd)}
.exp-srch{min-height:40px;padding:8px 11px;border-radius:11px;background:rgba(255,255,255,.032);border-color:var(--bd2);transition:.15s}
.exp-srch:focus-within{border-color:var(--ac-bd);box-shadow:var(--ring);background:var(--s2)}
.tree{padding:9px 9px 22px;scrollbar-gutter:stable}.tree .grp{padding:16px 9px 6px;font-size:9px;letter-spacing:.12em}
.tnode{min-height:38px;margin:2px 0;padding:8px 10px;border:1px solid transparent;border-radius:10px;font-size:12px;transition:.14s}
.tnode:hover{background:rgba(255,255,255,.045);border-color:var(--bd);transform:translateX(2px)}
.tnode.on{background:linear-gradient(105deg,rgba(var(--ac-rgb),.2),rgba(var(--ac2-rgb),.075));border-color:rgba(var(--ac-rgb),.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.detail{background:linear-gradient(180deg,rgba(255,255,255,.012),transparent);scrollbar-gutter:stable}
.dh{min-height:77px;padding:20px 24px 15px}.dh h1{font-size:22px;font-weight:800;letter-spacing:-.035em}
.statstrip{background:rgba(255,255,255,.018)}.statstrip .cell{min-width:120px;padding:13px 22px}.statstrip .cell .k{font-size:9px;letter-spacing:.11em}.statstrip .cell .v{font-size:12.5px}
.tabs{padding:0 18px;background:rgba(255,255,255,.008)}.tabs button{padding:15px 14px;font-size:12px}.tabs button.on::after{height:3px;background:linear-gradient(90deg,var(--ac),var(--ac2));box-shadow:0 -2px 10px rgba(var(--ac-rgb),.4)}
.dbody{padding:22px 24px 48px}.toolbar{margin-bottom:16px}.toolbar .srch{min-height:38px;border-radius:11px}
table.tbl{border-collapse:separate;border-spacing:0 6px}table.tbl th{padding:0 13px 7px;font-size:9px}table.tbl td{padding:12px 13px;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);background:rgba(255,255,255,.018)}
table.tbl td:first-child{border-left:1px solid var(--bd);border-radius:10px 0 0 10px}table.tbl td:last-child{border-right:1px solid var(--bd);border-radius:0 10px 10px 0}table.tbl tr:hover td{background:var(--s2);border-color:var(--bd2)}
.inspector{width:300px;padding:22px 20px 42px;background:linear-gradient(180deg,var(--glass-strong),var(--glass));border-left-color:var(--bd2)}
.insp-h .ico{width:42px;height:42px;border-radius:13px}.insp-h .t{font-size:13.5px;font-weight:760}.fact{padding:10px 0}.insp-sec{font-size:9.5px;letter-spacing:.12em}

/* Inputs, sheets and secure credential controls. */
.fld label,.fld>span{font-size:11.5px;font-weight:720;color:var(--dim)}
.inp,input.inp,select.inp,textarea.inp{min-height:43px;border-radius:11px;background:rgba(255,255,255,.035);border-color:var(--bd2);transition:border-color .15s,box-shadow .15s,background .15s}
.inp:focus-within,input.inp:focus,select.inp:focus,textarea.inp:focus{border-color:var(--ac-bd);box-shadow:var(--ring);background:var(--s2)}
.inp input{font-size:12.5px}.inp select{color:var(--tx)}
.sheet{width:min(500px,100vw);background:var(--glass-strong);border-left-color:var(--bd2);box-shadow:-28px 0 80px rgba(0,0,0,.28);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.sheet-h{position:sticky;top:0;z-index:3;padding:18px 21px;background:var(--topbar);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.sheet-h .ico{width:38px;height:38px;border-radius:12px}
.ov{background:rgba(2,4,10,.68);backdrop-filter:blur(10px) saturate(.9);-webkit-backdrop-filter:blur(10px) saturate(.9)}
#reveal .card{width:min(540px,92vw)!important;border-color:rgba(var(--ac-rgb),.25);box-shadow:var(--shadow-md),0 0 80px rgba(var(--ac-rgb),.12)}
.credential-intro{display:flex;align-items:flex-start;gap:11px;margin-bottom:16px;padding:12px 13px;border:1px solid var(--warn-s);border-radius:12px;background:var(--warn-s);color:var(--dim);line-height:1.55}
.credential-intro i{margin-top:1px;color:var(--warn);font-size:19px}.credential-intro strong{color:var(--tx)}
.credential-card{overflow:hidden;border:1px solid var(--bd2);border-radius:14px;background:rgba(255,255,255,.025)}
.credential-row{display:grid;grid-template-columns:105px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 12px;border-bottom:1px solid var(--bd)}
.credential-row:last-child{border-bottom:0}.credential-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.credential-value{min-width:0;width:100%;height:34px;padding:0;background:transparent;border:0;outline:0;color:var(--tx);font-size:12.5px;font-family:var(--mono)}
.credential-actions{display:flex;gap:5px}.secret-action,.copy-action,.regen-action{appearance:none;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--bd);border-radius:9px;background:rgba(255,255,255,.035);color:var(--dim);cursor:pointer;transition:.14s}
.secret-action:hover,.copy-action:hover,.regen-action:hover{color:var(--tx);background:var(--s3);border-color:var(--bd2);transform:translateY(-1px)}
.secret-action[aria-pressed="true"]{color:var(--ac);border-color:var(--ac-bd);background:var(--ac-soft)}
.secret-control{display:flex;align-items:center;gap:6px;min-height:43px;padding:5px 6px 5px 12px;border:1px solid var(--bd2);border-radius:11px;background:rgba(255,255,255,.035);transition:.15s}
.secret-control:focus-within{border-color:var(--ac-bd);box-shadow:var(--ring);background:var(--s2)}
.secret-control input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--tx);font-size:12.5px;font-family:var(--mono)}
.secret-meta{display:flex;align-items:center;gap:7px;margin-top:7px;color:var(--faint);font-size:10.5px}.secret-meta i{color:var(--ok)}

.palette{border-color:rgba(var(--ac-rgb),.2);background:var(--glass-strong);box-shadow:var(--shadow-md),0 0 100px rgba(var(--ac-rgb),.12);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.palette .ph{background:rgba(255,255,255,.018)}.palette .pi{min-height:44px}.palette .pi:hover,.palette .pi.on{background:linear-gradient(90deg,var(--ac-soft),transparent)}

@media(max-width:1240px){
  .side{width:250px}.hero-panel{width:36%}.svc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1020px){
  .dashboard-hero{min-height:0;flex-direction:column}.hero-panel{width:100%;margin:0}.hero-panel-head{margin-bottom:12px}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .app{display:block;padding:0}.side{width:min(310px,88vw);height:100dvh;border-radius:0 20px 20px 0;border-left:0;top:0}.main{height:100dvh;border-radius:0;padding:10px}.top{min-height:58px;padding:8px 10px}.top-context{min-width:0}.top-kicker{display:none}.content{margin-top:10px}.view.flush{border-radius:17px}.view{padding:22px 18px 52px}.explorer{width:220px}
}
@media(max-width:680px){
  .dashboard-hero{padding:25px 23px;border-radius:21px}.hero-copy h1{font-size:31px}.hero-copy p{font-size:12.5px}.hero-panel{padding:14px}.hero-panel-head{align-items:flex-start;flex-direction:column}.hero-actions{grid-template-columns:1fr}.kpis{gap:10px}.kpi{min-height:154px;padding:15px}.kpi .val{font-size:29px;margin-top:15px}.svc-tiles{grid-template-columns:1fr}.credential-row{grid-template-columns:1fr auto;gap:5px}.credential-label{grid-column:1/-1}.top-r .top-action{display:none}
}
@media(max-width:540px){
  .main{padding:8px}.top{border-radius:15px}.view{padding:18px 12px 48px}.view.flush{border-radius:15px}.dashboard-hero{padding:22px 18px}.hero-copy h1{font-size:28px}.kpis{grid-template-columns:1fr 1fr}.kpi{min-height:145px}.kpi-note{display:none}.kpi .val{font-size:27px}.explorer{width:45%;min-width:155px}.dh{padding:17px}.dh h1{font-size:18px}.dbody{padding:16px}.statstrip .cell{padding:11px 15px}.sheet{width:100vw}.credential-row{padding:10px}
}
@media(max-width:380px){.kpis{grid-template-columns:1fr}.kpi-note{display:block}.explorer{width:100%;position:absolute;z-index:5;inset:0 auto 0 0}.view.flush{position:relative}}
.sftp-security-card{display:flex;align-items:flex-start;gap:13px;margin-bottom:16px;padding:15px;border:1px solid rgba(var(--ac-rgb),.2);border-radius:14px;background:linear-gradient(120deg,var(--ac-soft),rgba(var(--ac2-rgb),.045));max-width:760px}
.sftp-security-icon{width:39px;height:39px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px;background:rgba(var(--ac-rgb),.16);color:var(--ac);font-size:19px;border:1px solid rgba(var(--ac-rgb),.18)}
.sftp-security-card strong{display:block;font-size:12.5px;font-weight:800;margin-bottom:4px}.sftp-security-card p{font-size:11.5px;line-height:1.6;color:var(--dim);max-width:650px}
.credential-intro.is-stored{border-color:rgba(66,221,162,.2);background:var(--ok-s)}
.credential-intro.is-stored i{color:var(--ok)}
.sftp-security-card.has-secret{border-color:rgba(66,221,162,.2);background:linear-gradient(120deg,var(--ok-s),rgba(var(--ac2-rgb),.04))}
.sftp-security-card.has-secret .sftp-security-icon{background:var(--ok-s);border-color:rgba(66,221,162,.18);color:var(--ok)}