:root{
  --focus:0 0 0 2px var(--base),0 0 0 4px rgba(77,124,255,.85);
  --base:#01030c;--bg:var(--base);--surf:#050d1e;--s1:#070f22;--s2:#091328;--s3:#0d1a34;--s4:#111f3f;
  --hover:#0f1c38;--blue:#4d7cff;--blu:#7fa0ff;--bld:#2a58d9;
  --cyan:#00d4ff;--green:#00e894;--grd:#00b870;
  --amber:#f5a623;--red:#ff4060;--rdd:#cc2040;--violet:#9b72ef;--pink:#ff6eb4;
  --ba:rgba(77,124,255,.12);--ca:rgba(0,212,255,.1);
  --ga:rgba(0,232,148,.1);--aa:rgba(245,166,35,.1);
  --ra:rgba(255,64,96,.1);--va:rgba(155,114,239,.11);
  --t1:#ffffff;--t2:#cbd5e1;--t3:#94a3b8;--t4:#64748b;--t5:#334155;
  --bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.12);--bd3:rgba(255,255,255,.2);
  --sw:272px;--tbh:66px;--cr:16px;
  --tf:.2s cubic-bezier(0.16, 1, 0.3, 1);--tfs:.3s cubic-bezier(0.16, 1, 0.3, 1);--tfb:.4s cubic-bezier(0.34,1.56,.64,1);
  --accent:#4d7cff;--glow:rgba(77,124,255,.3);
  --fd:'Syne',sans-serif;--fb:'Outfit',sans-serif;--fm:'JetBrains Mono',monospace;
}
.theme-darker{--base:#000308;--surf:#020a10;--s1:#030d16;--s2:#040f1c}
.theme-midnight{--base:#000000;--surf:#010204;--s1:#020407;--s2:#020508}
@media (prefers-contrast: more){
  :root{--bd2:rgba(255,255,255,.2);--bd3:rgba(255,255,255,.32);--t2:#c5d0e0;--t3:#6a87a8}
  .card,.sidebar,.topbar,.table-wrap{border-color:rgba(255,255,255,.14)!important}
}
.compact .card{padding:12px 14px}.compact .kpi{padding:10px 12px}
.compact .kpi-val{font-size:20px}.compact .sr{padding:8px 0}
.compact .log-row{padding:6px 12px}
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{animation:none!important;transition:none!important}
.reduce-motion .srv-skel-av,.reduce-motion .srv-skel-line{opacity:.55!important}

/* Staff vs member dashboard (set data-vyrex-role on #app: owner | coowner | staff | member) */
#app[data-vyrex-role="member"] .staff-only{display:none!important}
#app:not([data-vyrex-role="owner"]) .owner-only{display:none!important}
/* Host / ledger controls — platform owner session only (not staff/co-owner) */
#app:not([data-vyrex-role="owner"]) .owner-platform-only{display:none!important}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;color-scheme:dark}
body{font-family:var(--fb);background-color:var(--base);background-image:radial-gradient(circle at 15% 20%, rgba(77,124,255,.12), transparent 40%), radial-gradient(circle at 85% 40%, rgba(155,114,239,.12), transparent 40%), radial-gradient(circle at 50% 80%, rgba(0,232,148,.05), transparent 40%), linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);background-size: 100% 100%, 100% 100%, 100% 100%, 30px 30px, 30px 30px;color:var(--t1);min-height:100%;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;text-rendering:optimizeLegibility;background-attachment:fixed;animation:dashBgShift 25s linear infinite alternate;}
@keyframes dashBgShift { 0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0 0, 0 0; } 100% { background-position: 0% 0%, 0% 0%, 0% 0%, 0 30px, 0 30px; } }
.skip-link{position:fixed;left:12px;top:-100px;z-index:10000;padding:10px 16px;background:var(--blue);color:#fff;font-weight:700;font-size:13px;border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.5);transition:top .2s var(--tfb)}
.skip-link:focus{top:12px;outline:none;box-shadow:var(--focus),0 8px 32px rgba(0,0,0,.5)}
a:focus-visible,button:focus-visible,.sb-item:focus-visible,.ftab:focus-visible,.dock-item:focus-visible,.pal-item:focus-visible,.tb-icon:focus-visible,.tb-profile:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid rgba(77,124,255,.85);outline-offset:2px;box-shadow:var(--focus);border-radius:4px}
.tb-search:focus-within{box-shadow:var(--focus)}
a{color:inherit;text-decoration:none}
button{font-family:var(--fb);cursor:pointer;border:none;background:none}
button,input,select,textarea{touch-action:manipulation}
input,select,textarea{font-family:var(--fb)}
code{font-family:var(--fm)}
canvas{display:block}
::selection{background:rgba(77,124,255,.3);color:var(--t1)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.2)}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.1) transparent}

/* Dashboard / guild shell — offline strip (marketing pages use site.css) */
.offline-banner{
  position:fixed;top:0;left:0;right:0;z-index:9998;text-align:center;padding:11px 18px;font-size:13px;font-weight:500;
  background:rgba(245,166,35,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(245,166,35,.35);color:#f5d4a0;box-shadow:0 4px 24px rgba(0,0,0,.25)
}
.offline-banner.hidden{display:none!important}

/* Shared control styling (dashboard forms, drawer fields) */
.input,textarea.input,select.input{
  width:100%;max-width:100%;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.1);border-radius:12px;
  padding:10px 14px;color:var(--t1);font-size:13px;font-family:var(--fb);outline:none;transition:border-color var(--tf),box-shadow var(--tf),background var(--tf);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.12)
}
.input:focus,textarea.input:focus,select.input:focus{
  border-color:rgba(77,124,255,.55);box-shadow:0 0 0 3px rgba(77,124,255,.18),inset 0 2px 6px rgba(0,0,0,.15);background:rgba(0,0,0,.32)
}
.input::placeholder,textarea.input::placeholder{color:var(--t4)}

.app{display:flex;min-height:100vh}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:80;backdrop-filter:blur(8px)}
.overlay.show{display:block;animation:fadeIn .2s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideInDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.78)}}
@keyframes modalIn{0%{opacity:0;transform:scale(.94)}60%{opacity:1;transform:scale(1.012)}100%{opacity:1;transform:scale(1)}}
@keyframes palIn{0%{opacity:0;transform:translateX(-50%) scale(.92)}50%{opacity:1;transform:translateX(-50%) scale(1.02)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes softFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 rgba(77,124,255,0)}50%{box-shadow:0 0 22px rgba(77,124,255,.22)}}
@keyframes sectionIn{from{opacity:0;transform:translateY(8px) scale(.996)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes dockIn{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes shimmer{0%{background-position:-220% 0}100%{background-position:220% 0}}
@keyframes staggerUp{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:translateY(0)}}
.stagger-1{animation:staggerUp .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.05s}
.stagger-2{animation:staggerUp .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.1s}
.stagger-3{animation:staggerUp .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.15s}
.stagger-4{animation:staggerUp .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.2s}
.stagger-5{animation:staggerUp .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.25s}

#navProgress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--violet));z-index:9999;border-radius:0 1px 1px 0;transition:width .25s ease-out,opacity .3s;opacity:0;pointer-events:none}
#navProgress.running{opacity:1}

/* SIDEBAR */
.sidebar{width:var(--sw);min-height:100vh;background:rgba(5,10,24,.4);backdrop-filter:blur(32px) saturate(180%);-webkit-backdrop-filter:blur(32px) saturate(180%);border-right:1px solid rgba(255,255,255,.08);position:fixed;inset:0 auto 0 0;z-index:100;display:flex;flex-direction:column;transition:transform var(--tfs);box-shadow:inset -1px 0 0 rgba(255,255,255,0.04), 4px 0 60px rgba(0,0,0,.6)}
.sb-inner{display:flex;flex-direction:column;height:100%;overflow:hidden}
.sb-top{display:flex;align-items:center;justify-content:space-between;padding:16px 14px 12px;border-bottom:1px solid var(--bd);flex-shrink:0}
.sb-brand{display:flex;align-items:center;gap:10px}
.sb-hex{width:36px;height:36px;background:linear-gradient(135deg,var(--blue),var(--violet));border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:11px;font-weight:900;color:#fff;letter-spacing:.04em;box-shadow:0 4px 20px rgba(77,124,255,.45),0 0 0 1px rgba(77,124,255,.2);flex-shrink:0;position:relative;overflow:hidden;animation:floatHex 4s ease-in-out infinite}
@keyframes floatHex{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-3px) rotate(2deg)}}
.sb-hex::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 55%)}
.sb-brand-name{font-family:var(--fd);font-size:15px;font-weight:900;letter-spacing:.16em;color:var(--t1)}
.sb-brand-ver{font-family:var(--fm);font-size:9px;color:var(--t4);letter-spacing:.07em;margin-top:1px}
.sb-close{display:none;color:var(--t3);font-size:14px;padding:5px 7px;border-radius:7px;transition:all var(--tf)}.sb-close:hover{color:var(--t1);background:var(--hover)}
.sb-status{display:flex;align-items:center;gap:8px;margin:8px 10px 4px;padding:8px 10px;border-radius:9px;border:1px solid rgba(0,232,148,.15);background:rgba(0,232,148,.05);transition:all .5s;flex-shrink:0}
.sb-status.warn{border-color:rgba(245,166,35,.2);background:rgba(245,166,35,.06)}
.sb-status.crit{border-color:rgba(255,64,96,.2);background:rgba(255,64,96,.06)}
.sb-led{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2.2s ease-in-out infinite;flex-shrink:0}
.sb-led.warn{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.sb-led.crit{background:var(--red);box-shadow:0 0 8px var(--red)}
.sb-status-title{font-size:11px;font-weight:700;color:var(--green);line-height:1.2;transition:color .4s}
.sb-status.warn .sb-status-title{color:var(--amber)}.sb-status.crit .sb-status-title{color:var(--red)}
.sb-status-sub{font-family:var(--fm);font-size:9px;color:var(--t3);margin-top:1px}
.sb-search-btn{display:flex;align-items:center;gap:8px;margin:6px 10px;padding:9px 12px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.08);border-radius:10px;color:var(--t3);font-size:12px;transition:all var(--tf);width:calc(100% - 20px);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.sb-search-btn:hover{border-color:rgba(255,255,255,.14);color:var(--t2);background:rgba(255,255,255,.06);transform:translateY(-1px)}
.sb-search-btn span{flex:1;text-align:left}.sb-search-btn kbd{font-family:var(--fm);font-size:9px;background:var(--s3);border:1px solid var(--bd);border-radius:4px;padding:1px 5px;color:var(--t4)}
.sb-nav{flex:1;overflow-y:auto;padding:3px 8px 8px;scrollbar-width:none}
.sb-nav::-webkit-scrollbar{display:none}
.sb-group{font-family:var(--fm);font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--t5);padding:13px 8px 5px;user-select:none}
.sb-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--t3);transition:all var(--tf);margin-bottom:2px;cursor:pointer;position:relative;text-decoration:none}
.sb-item:hover{background:rgba(255,255,255,0.06);color:var(--t1);transform:translateX(3px)}.sb-item.active{background:linear-gradient(90deg, rgba(77,124,255,0.15), transparent);color:var(--blue);font-weight:600}
.sb-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:24px;background:var(--accent);border-radius:0 4px 4px 0;box-shadow:0 0 12px var(--accent)}
.sb-ico{width:15px;height:15px;flex-shrink:0;opacity:.6;transition:opacity var(--tf)}
.sb-item.active .sb-ico,.sb-item:hover .sb-ico{opacity:1}
.sb-item.sb-adm{color:rgba(255,64,96,.55)}.sb-item.sb-adm:hover{color:var(--red);background:rgba(255,64,96,.07)}
.sb-item.sb-adm.active{background:rgba(255,64,96,.09);color:var(--red)}.sb-item.sb-adm.active::before{background:var(--red);box-shadow:0 0 12px var(--red)}
.sb-pill,.sb-count{margin-left:auto;font-family:var(--fm);font-size:9px;font-weight:700;padding:2px 7px;border-radius:99px;letter-spacing:.04em;flex-shrink:0}
.pill-live{background:rgba(0,232,148,.13);color:var(--green);border:1px solid rgba(0,232,148,.22)}
.pill-run{background:rgba(0,212,255,.1);color:var(--cyan);border:1px solid rgba(0,212,255,.2)}
.pill-warn{background:rgba(255,64,96,.1);color:var(--red);border:1px solid rgba(255,64,96,.2)}
.pill-root{background:rgba(255,64,96,.1);color:var(--red);border:1px solid rgba(255,64,96,.22)}
.pill-pro{background:var(--va);color:var(--violet);border:1px solid rgba(155,114,239,.22)}
.sb-count{background:var(--s3);color:var(--t3);border:1px solid var(--bd)}
.sb-footer{padding:10px 10px 12px;border-top:1px solid var(--bd);flex-shrink:0}
.sb-user{display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px;cursor:pointer;transition:background var(--tf);margin-bottom:8px}
.sb-user:hover{background:var(--hover)}
.sb-user-av{width:32px;height:32px;background:linear-gradient(135deg,var(--blue),var(--violet));border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:11px;font-weight:800;color:#fff;flex-shrink:0}
.sb-user-meta{flex:1;min-width:0}
.sb-user-name{font-size:12px;font-weight:700;color:var(--t1)}
.sb-user-role{font-size:10px;color:var(--t4)}
.sb-online{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 6px var(--green);flex-shrink:0}
.sb-uptime-row{margin-bottom:6px}
.sb-uptime-lbl{display:flex;justify-content:space-between;font-size:10px;font-family:var(--fm);color:var(--t4);margin-bottom:4px}
.sb-mini-bar{height:3px;background:var(--s3);border-radius:99px;overflow:hidden}
.sb-mini-fill{height:100%;border-radius:99px;transition:width 1s ease}
.sb-clock{font-family:var(--fm);font-size:10px;color:var(--t4);text-align:center}

/* TOPBAR */
.main{flex:1;margin-left:var(--sw);display:flex;flex-direction:column;min-height:100vh}
.topbar{height:var(--tbh);background:rgba(5,10,24,.4);backdrop-filter:blur(32px) saturate(180%);-webkit-backdrop-filter:blur(32px) saturate(180%);border-bottom:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;padding:0 20px;gap:12px;position:sticky;top:0;z-index:50;flex-shrink:0;box-shadow:inset 0 -1px 0 rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,.4)}
#app[data-view="dashboard"] .topbar{box-shadow:inset 0 -1px 0 rgba(77,124,255,.18)}
#app[data-view="analytics"] .topbar{box-shadow:inset 0 -1px 0 rgba(0,212,255,.2)}
#app[data-view="servers"] .topbar{box-shadow:inset 0 -1px 0 rgba(0,232,148,.18)}
#app[data-view="settings"] .topbar{box-shadow:inset 0 -1px 0 rgba(155,114,239,.22)}
.tb-l{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tb-hamburger{display:none;flex-direction:column;gap:4px;padding:6px;border-radius:7px;transition:all var(--tf)}
.tb-hamburger:hover{background:var(--hover)}
.tb-hamburger span{width:18px;height:2px;background:var(--t2);border-radius:2px;transition:all var(--tf);display:block}
.tb-page-title{font-family:var(--fd);font-size:14px;font-weight:800;color:var(--t1);letter-spacing:.02em}
.tb-crumb{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--t4);font-family:var(--fm)}
.tb-crumb-r{cursor:pointer;transition:color var(--tf)}.tb-crumb-r:hover{color:var(--blue)}
.tb-crumb-sep{opacity:.4}
.tb-m{flex:1;max-width:480px;margin:0 16px}
.tb-m.tb-mid{max-width:min(560px,46vw);display:flex;align-items:center;gap:10px}
.tb-m.tb-mid .tb-search{flex:1;min-width:0}
.tb-guild-wrap{flex-shrink:0}
.tb-guild-select{
  appearance:none;background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.06);border-radius:10px;
  color:var(--t1);font-size:13px;padding:9px 12px;max-width:min(200px,28vw);cursor:pointer;
  font-family:var(--fb);box-shadow:inset 0 2px 4px rgba(0,0,0,0.1);transition:all var(--tf)
}
.server-view-select{min-width:130px;max-width:min(240px,36vw)}
.tb-guild-select:hover{border-color:rgba(255,255,255,0.15);background:rgba(0,0,0,0.4)}
.tb-guild-select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(77,124,255,.2), inset 0 2px 4px rgba(0,0,0,0.1)}
.tb-invite{flex-shrink:0;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.changelog-list{padding:4px 8px 12px}
.cl-row{padding:14px 0;border-bottom:1px solid var(--bd)}
.cl-row:last-child{border-bottom:none}
.cl-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.cl-ver{font-family:var(--fd);font-weight:800;font-size:13px;color:var(--blue)}
.cl-date{font-family:var(--fm);font-size:10px;color:var(--t4)}
.cl-txt{font-size:13px;color:var(--t3);margin:0;line-height:1.5;max-width:720px}
.tb-search{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.06);border-radius:12px;color:var(--t3);font-size:13px;cursor:pointer;transition:all var(--tf);box-shadow:inset 0 2px 4px rgba(0,0,0,0.1)}
.tb-search:hover{border-color:rgba(255,255,255,0.15);background:rgba(0,0,0,0.4);color:var(--t2)}
.tb-search-ph{flex:1;text-align:left}.tb-search kbd{font-family:var(--fm);font-size:9px;background:var(--s3);border:1px solid var(--bd);border-radius:4px;padding:1px 5px;color:var(--t4)}
.tb-r{display:flex;align-items:center;gap:6px;margin-left:auto}
.tb-shard{display:flex;align-items:center;gap:6px;font-family:var(--fm);font-size:11px;color:var(--t3)}
.tb-shard-dot{width:6px;height:6px;background:var(--green);border-radius:50%;box-shadow:0 0 6px var(--green);animation:pulse 2s ease-in-out infinite}
.tb-sep{width:1px;height:18px;background:var(--bd2);flex-shrink:0}
.tb-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--t3);transition:all var(--tf);position:relative}
.tb-icon:hover{background:var(--hover);color:var(--t1)}
.tb-icon:active,.btn:active,.btn-xs:active,.drw-tab:active{transform:translateY(1px) scale(.99)}
.tb-ndot{position:absolute;top:4px;right:4px;min-width:16px;height:16px;background:var(--red);border-radius:99px;font-family:var(--fm);font-size:9px;font-weight:700;color:#fff;display:none;align-items:center;justify-content:center;padding:0 3px;box-shadow:0 0 8px rgba(255,64,96,.5)}
.tb-ndot.show{display:flex}
.tb-profile{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:9px;transition:all var(--tf);cursor:pointer}
.tb-profile:hover{background:var(--hover)}
.tb-pav{width:28px;height:28px;background:linear-gradient(135deg,var(--blue),var(--violet));border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:10px;font-weight:800;color:#fff;flex-shrink:0}
.tb-pname{font-size:12px;font-weight:700;color:var(--t1);display:block}
.tb-prole{font-size:10px;color:var(--t4);display:block}

/* NOTIFICATIONS */
.notif-panel{position:absolute;top:calc(var(--tbh) + 6px);right:60px;width:360px;background:rgba(9, 19, 40, 0.65);border:1px solid rgba(255,255,255,.08);border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 24px 80px rgba(0,0,0,.7);z-index:200;overflow:hidden;animation:slideInDown .2s ease-out;backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px)}
.np-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--bd)}
.np-title{font-family:var(--fd);font-size:13px;font-weight:700;color:var(--t1)}
.np-unread{font-family:var(--fm);font-size:10px;color:var(--blue);margin-left:6px;background:var(--ba);padding:2px 7px;border-radius:99px}
.np-clear{font-size:11px;color:var(--t3);transition:color var(--tf)}.np-clear:hover{color:var(--blue)}
.np-list{max-height:340px;overflow-y:auto}
.np-item{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;transition:background var(--tf);border-bottom:1px solid var(--bd)}
.np-item:last-child{border-bottom:none}
.np-item:hover{background:var(--hover)}
.np-new{background:rgba(77,124,255,.04)}
.np-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px}
.np-body{flex:1;min-width:0}
.np-msg{font-size:12px;color:var(--t2);line-height:1.4}
.np-age{font-family:var(--fm);font-size:10px;color:var(--t4);margin-top:3px}
.np-x{color:var(--t4);font-size:11px;padding:2px 4px;border-radius:4px;transition:all var(--tf);flex-shrink:0}.np-x:hover{color:var(--t1);background:var(--hover)}
.np-footer{display:block;width:100%;text-align:center;padding:10px;font-size:12px;color:var(--blue);border-top:1px solid var(--bd);transition:background var(--tf)}.np-footer:hover{background:var(--hover)}

/* PROFILE DROPDOWN */
.prof-drop{position:absolute;top:calc(var(--tbh) + 6px);right:14px;width:268px;background:rgba(9,19,40,.65);border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 64px rgba(0,0,0,.55);z-index:200;overflow:hidden;animation:slideInDown .2s ease-out;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}
.pd-user{display:flex;align-items:center;gap:12px;padding:14px}
.pd-av{width:40px;height:40px;background:linear-gradient(135deg,var(--blue),var(--violet));border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:14px;font-weight:900;color:#fff;flex-shrink:0}
.pd-name{font-weight:700;font-size:13px;color:var(--t1)}
.pd-email{font-size:11px;color:var(--t3);margin-top:1px}
.pd-tier{font-size:10px;color:var(--violet);margin-top:3px}
.pd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.pd-stat{text-align:center;padding:10px 4px}
.pd-sv{font-family:var(--fd);font-size:14px;font-weight:800;color:var(--t1)}
.pd-sl{font-family:var(--fm);font-size:9px;color:var(--t4);margin-top:2px}
.pd-hr{border:none;border-top:1px solid var(--bd);margin:0}
.pd-item{display:flex;align-items:center;width:100%;padding:9px 14px;font-size:13px;color:var(--t2);transition:all var(--tf);text-align:left;gap:8px}.pd-item:hover{background:var(--hover);color:var(--t1)}
.pd-out{color:var(--red)!important}.pd-out:hover{background:rgba(255,64,96,.07)!important}

/* CONTENT */
#app[data-view="dashboard"]{--view-tint:rgba(77,124,255,.06)}
#app[data-view="servers"]{--view-tint:rgba(0,212,255,.07)}
#app[data-view="commands"]{--view-tint:rgba(155,114,239,.07)}
#app[data-view="modules"]{--view-tint:rgba(0,232,148,.06)}
#app[data-view="automation"]{--view-tint:rgba(245,166,35,.06)}
#app[data-view="analytics"]{--view-tint:rgba(0,232,148,.08)}
#app[data-view="logs"]{--view-tint:rgba(255,64,96,.05)}
#app[data-view="billing"]{--view-tint:rgba(155,114,239,.06)}
#app[data-view="settings"]{--view-tint:rgba(88,112,148,.08)}
#app[data-view="support"]{--view-tint:rgba(77,124,255,.05)}
#app[data-view="integrations"]{--view-tint:rgba(0,212,255,.05)}
#app[data-view="changelog"]{--view-tint:rgba(94,112,148,.07)}
#app[data-view="admin"]{--view-tint:rgba(255,64,96,.06)}
#app[data-view="owner"]{--view-tint:rgba(245,166,35,.08)}
.content{flex:1;overflow-y:auto;padding:20px 24px 48px;background-image:linear-gradient(180deg,var(--view-tint,transparent) 0%,transparent min(38vh,380px));background-repeat:no-repeat}
.content > .sec{max-width:1440px;margin:0 auto}

/* SECTIONS */
.sec{display:none;animation:secEnter .2s ease-out}
.sec.active{display:block}
@keyframes secEnter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.sec-leave{opacity:0;transform:translateY(-4px);transition:all .18s ease-in;pointer-events:none}
.sec-enter{animation:sectionIn .26s ease both}
.sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.sec-title{font-family:var(--fd);font-size:clamp(20px,2.1vw,24px);font-weight:900;color:var(--t1);letter-spacing:.01em}
.admin-title{color:var(--red)}
.team-sec-title{font-family:var(--fd);font-size:22px;font-weight:900;color:var(--violet);letter-spacing:.01em}
.sec-sub{font-size:12px;color:var(--t3);margin-top:3px}
.sec-hr{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* CARDS */
.card{background:rgba(12, 18, 36, 0.45);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:22px 24px;margin-bottom:16px;position:relative;overflow:hidden;transition:transform var(--tfb),border-color var(--tfb),box-shadow var(--tfb);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 32px rgba(0,0,0,.3);animation:staggerUp .6s cubic-bezier(0.2,0.8,0.2,1) both}
.card:nth-child(1){animation-delay:0.05s}
.card:nth-child(2){animation-delay:0.1s}
.card:nth-child(3){animation-delay:0.15s}
.card:nth-child(4){animation-delay:0.2s}
.card:nth-child(5){animation-delay:0.25s}
.card:hover{
  border-color:rgba(77,124,255,.45);
  transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 16px 48px rgba(0,0,0,.5),0 0 20px rgba(77,124,255,.2);
}

/* Reactive Cursor Glow Base */
.card::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px circle at var(--mouse-x, -500px) var(--mouse-y, -500px), rgba(255,255,255,0.08), transparent 40%);z-index:1;transition:opacity 0.5s;opacity:0}
.card:hover::after{opacity:1}
.card::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);opacity:0.5;z-index:2}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.card-title{font-family:var(--fd);font-size:13px;font-weight:700;color:var(--t1)}
.card-action{font-size:11px;color:var(--blue);transition:color var(--tf)}.card-action:hover{color:var(--blu)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:12px;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.25s cubic-bezier(0.2,0.8,0.2,1);border:1px solid transparent;font-family:var(--fb);position:relative;overflow:hidden;white-space:nowrap;min-height:38px;box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.btn-primary{
  background:linear-gradient(135deg,var(--blue),#9b72ef,var(--cyan),var(--blue));
  background-size:300% 300%;
  animation:gradientFlow 4s ease infinite;
  color:#fff;
  border-color:rgba(255,255,255,0.2);
  box-shadow:0 8px 24px rgba(77,124,255,0.4),inset 0 1px 0 rgba(255,255,255,0.3);
  text-shadow:0 1px 2px rgba(0,0,0,0.2);
  position:relative;
  overflow:hidden;
}
@keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.btn-primary::before{
  content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);
  transform:skewX(-20deg);transition:0.5s;
}
.btn-primary:hover::before{left:150%;transition:0.7s ease-in-out;}
.btn-primary:hover{box-shadow:0 12px 40px rgba(77,124,255,0.7),inset 0 1px 0 rgba(255,255,255,0.5);transform:translateY(-2px) scale(1.03);filter:brightness(1.15)}
.btn-primary:active{transform:scale(0.96)}
.btn{will-change:transform}
.btn-ghost{background:transparent;color:var(--t2);border-color:rgba(255,255,255,0.06)}.btn-ghost:hover{border-color:rgba(255,255,255,0.15);color:var(--t1);background:rgba(255,255,255,0.05);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}.btn-ghost:active{transform:scale(0.97)}
.btn-glass{background:rgba(255,255,255,.06);color:var(--t2);border-color:var(--bd2);backdrop-filter:blur(8px)}.btn-glass:hover{background:rgba(255,255,255,.1);color:var(--t1)}.btn-glass:active{transform:scale(0.97)}
.btn-danger{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 4px 16px rgba(255,64,96,.3)}.btn-danger:hover{background:var(--rdd);transform:translateY(-1px)}.btn-danger:active{transform:scale(0.97)}
.btn-danger-ghost{background:transparent;color:var(--red);border-color:rgba(255,64,96,.25)}.btn-danger-ghost:hover{background:rgba(255,64,96,.08);border-color:rgba(255,64,96,.45);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.btn-xs{padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--fb);transition:all var(--tf);border:1px solid transparent;white-space:nowrap;display:inline-flex;align-items:center;min-height:32px;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.bg-xs{background:rgba(255,255,255,0.06);color:var(--t1);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,0.05)}.bg-xs:hover{background:rgba(255,255,255,0.12);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 4px 12px rgba(0,0,0,.25)}
.bw-xs{background:rgba(245,166,35,.1);color:var(--amber);border-color:rgba(245,166,35,.25)}.bw-xs:hover{background:rgba(245,166,35,.18)}
.bgg-xs{background:rgba(0,232,148,.1);color:var(--green);border-color:rgba(0,232,148,.25)}.bgg-xs:hover{background:rgba(0,232,148,.18)}
.br-xs{background:rgba(255,64,96,.1);color:var(--red);border-color:rgba(255,64,96,.25)}.br-xs:hover{background:rgba(255,64,96,.18)}
.ripple-el{position:absolute;border-radius:50%;background:rgba(255,255,255,.18);transform:scale(0);animation:ripple .6s linear;pointer-events:none}
@keyframes ripple{to{transform:scale(1);opacity:0}}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;font-family:var(--fm);font-size:10px;font-weight:700;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05);position:relative;overflow:hidden;transition:all 0.3s cubic-bezier(0.2,0.8,0.2,1)}
.badge::before{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);animation:badgeSweep 4s infinite}
@keyframes badgeSweep{0%{left:-100%}20%,100%{left:200%}}
.badge-green,.bg{background:rgba(0,232,148,0.15);color:var(--green);border:1px solid rgba(0,232,148,.3);text-shadow:0 0 8px rgba(0,232,148,0.4)}
.badge-blue,.bb{background:rgba(77,124,255,0.15);color:#fff;border:1px solid rgba(77,124,255,.4);text-shadow:0 0 8px rgba(77,124,255,0.6)}
.badge-violet,.bv{background:rgba(155,114,239,0.15);color:#fff;border:1px solid rgba(155,114,239,.4);text-shadow:0 0 8px rgba(155,114,239,0.6)}
.badge-muted,.bm{background:rgba(255,255,255,0.05);color:var(--t2);border:1px solid rgba(255,255,255,0.1)}
.badge-amber,.ba{background:rgba(245,166,35,0.15);color:var(--amber);border:1px solid rgba(245,166,35,.3);text-shadow:0 0 8px rgba(245,166,35,0.4)}
.badge-red,.br{background:rgba(255,64,96,0.15);color:#fff;border:1px solid rgba(255,64,96,.4);text-shadow:0 0 8px rgba(255,64,96,0.6)}
.badge-beta,.bb-beta{background:rgba(0,212,255,0.15);color:#fff;border:1px solid rgba(0,212,255,.4);text-shadow:0 0 8px rgba(0,212,255,0.6)}
mark{background:rgba(245,166,35,.28);color:var(--amber);border-radius:2px;padding:0 2px}

/* TOGGLES */
.toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-track{width:36px;height:20px;background:var(--s4);border-radius:99px;cursor:pointer;transition:background .25s, box-shadow .2s, border-color .2s;display:block;border:1px solid var(--bd2);position:relative;flex-shrink:0}
.toggle input:checked + .toggle-track{background:var(--accent);border-color:var(--accent)}
.toggle input:focus-visible + .toggle-track{outline:2px solid rgba(77,124,255,.85);outline-offset:2px}
.toggle-track::after{content:'';position:absolute;left:3px;top:3px;width:12px;height:12px;background:#fff;border-radius:50%;transition:transform .22s var(--tfb);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.toggle input:checked + .toggle-track::after{transform:translateX(16px)}
.toggle-track{box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.toggle input:checked + .toggle-track{box-shadow:0 0 12px rgba(77,124,255,.32)}

/* DASH HERO */
.dash-hero{position:relative;background:linear-gradient(135deg,rgba(10,18,40,.6) 0%,rgba(15,25,50,.5) 100%);border:1px solid rgba(77,124,255,0.3);border-radius:20px;overflow:hidden;margin-bottom:16px;min-height:220px;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:0 16px 48px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1), inset 0 0 40px rgba(77,124,255,0.15);animation:floatDashHero 6s ease-in-out infinite}
@keyframes floatDashHero { 0%, 100% { transform: translateY(0); box-shadow:0 16px 48px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1), inset 0 0 40px rgba(77,124,255,0.15);} 50% { transform: translateY(-6px); box-shadow:0 24px 64px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15), inset 0 0 60px rgba(77,124,255,0.25);} }
.dash-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 20% 50%,rgba(77,124,255,.35),transparent 70%),radial-gradient(ellipse 50% 40% at 80% 30%,rgba(155,114,239,.3),transparent 60%);mix-blend-mode:screen;pointer-events:none}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:.45;pointer-events:none}
.dh-content{position:relative;z-index:1;padding:28px 32px}
.dh-eyebrow{font-family:var(--fm);font-size:10px;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.dh-greeting{font-family:var(--fd);font-size:28px;font-weight:900;color:var(--t1);margin-bottom:8px;letter-spacing:-.01em}
.dh-sub{font-size:13px;color:var(--t2);max-width:560px;line-height:1.6;margin-bottom:16px}
.dh-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;font-family:var(--fm);font-size:10px;font-weight:700;border:1px solid}
.chip-green{background:rgba(0,232,148,.08);color:var(--green);border-color:rgba(0,232,148,.2)}
.chip-blue{background:rgba(77,124,255,.1);color:var(--blue);border-color:rgba(77,124,255,.22)}
.chip-neutral{background:var(--s2);color:var(--t3);border-color:var(--bd)}
.chip-violet{background:var(--va);color:var(--violet);border-color:rgba(155,114,239,.22)}
.chip-amber{background:var(--aa);color:var(--amber);border-color:rgba(245,166,35,.2)}
.chip-dot{width:5px;height:5px;background:currentColor;border-radius:50%;animation:pulse 2s infinite}
.dh-actions{display:flex;gap:8px;flex-wrap:wrap}

/* BIG STATS */
.dash-bigstats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.bstat{background:rgba(9, 19, 40, 0.4);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.05);border-radius:var(--cr);padding:16px 18px;display:flex;align-items:center;gap:14px;transition:all var(--tf);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.bstat::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--bs-color,var(--blue));opacity:.45}
.bstat:hover{border-color:rgba(77,124,255,.3);transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,.05)}
.bstat-icon{font-size:24px;flex-shrink:0}
.bstat-label{font-size:11px;color:var(--t3);margin-bottom:2px}
.bstat-val{font-family:var(--fd);font-size:22px;font-weight:800;color:var(--t1);line-height:1;margin-bottom:3px}
.bstat-trend{font-family:var(--fm);font-size:9px;font-weight:700}
.bstat-trend.up{color:var(--green)}.bstat-trend.down{color:var(--red)}

/* ALERTS */
.al{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;border:1px solid;margin-bottom:8px;font-size:13px;animation:slideInDown .3s ease-out}
.al-critical{background:rgba(255,64,96,.07);border-color:rgba(255,64,96,.25)}
.al-warning{background:rgba(245,166,35,.06);border-color:rgba(245,166,35,.22)}
.al-ic{font-size:15px;flex-shrink:0;color:var(--amber)}
.al-critical .al-ic{color:var(--red)}
.al-body{flex:1;line-height:1.5}
.al-timer{font-family:var(--fm);font-size:11px;color:var(--t3)}
.al-age{font-family:var(--fm);font-size:10px;color:var(--t4);white-space:nowrap;flex-shrink:0}
.al-x{color:var(--t4);font-size:12px;padding:3px 5px;border-radius:5px;transition:all var(--tf);flex-shrink:0}.al-x:hover{color:var(--t1);background:var(--hover)}
.al-link{background:none;border:none;color:var(--blue);cursor:pointer;font-size:13px;font-family:var(--fb);text-decoration:underline;padding:0}

/* KPI GRID */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--surf);border:1px solid var(--bd);border-radius:var(--cr);padding:18px 20px;position:relative;overflow:hidden;transition:transform var(--tfb),box-shadow var(--tfb);animation:fadeIn .5s ease-out both;box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 4px 16px rgba(0,0,0,.15)}
.kpi:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 24px rgba(0,0,0,.25);border-color:rgba(77,124,255,.3)}
.kpi:hover{border-color:var(--ka,var(--bd2));box-shadow:0 0 20px rgba(0,0,0,.3)}
.kpi::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--ka,var(--blue));opacity:.6}
.kpi-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.kpi-ic{font-size:18px}
.kpi-tr{font-family:var(--fm);font-size:10px;font-weight:700;padding:2px 6px;border-radius:99px}
.kpi-tr.up{color:var(--green);background:var(--ga)}.kpi-tr.dn{color:var(--red);background:var(--ra)}.kpi-tr.nt{color:var(--t3);background:var(--s3)}
.kpi-val{font-family:var(--fd);font-size:24px;font-weight:900;color:var(--t1);margin-bottom:2px;line-height:1;transition:all .3s}
.kpi-lbl{font-size:11px;color:var(--t3);margin-bottom:8px}
.kpi-bar{height:3px;background:var(--s3);border-radius:99px;overflow:hidden;margin-bottom:6px}
.kpi-fill{height:100%;background:var(--ka,var(--blue));border-radius:99px;transition:width 1.2s cubic-bezier(.4,0,.2,1),background .4s}
.kpi-sub{font-family:var(--fm);font-size:9px;color:var(--t4)}
.kpi-sp{width:100%;display:block;margin-top:8px}
@keyframes ticking{0%,100%{opacity:1}50%{opacity:.5}}
.ticking{animation:ticking .4s ease}

/* LOWER DASH */
.dash-lower{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.qa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.qa-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px;background:var(--s2);border:1px solid var(--bd);border-radius:10px;font-size:11px;font-weight:600;color:var(--t2);transition:all var(--tf);cursor:pointer;text-align:center}
.qa-btn:hover{border-color:var(--bd2);color:var(--t1);background:var(--hover);transform:translateY(-1px)}
.live-ind{display:flex;align-items:center;gap:6px;font-family:var(--fm);font-size:10px;font-weight:700;color:var(--green)}
.live-dot{width:6px;height:6px;background:var(--green);border-radius:50%;box-shadow:0 0 6px var(--green);animation:pulse 1.5s ease-in-out infinite}
.act-list{display:flex;flex-direction:column;gap:0}
.act-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--bd)}
.act-row:last-child{border-bottom:none}
.act-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:5px}
.act-msg{font-size:12px;color:var(--t2);line-height:1.4}
.act-age{font-family:var(--fm);font-size:10px;color:var(--t4);margin-top:2px}

/* HEALTH GRID */
.health-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.health-row{display:flex;align-items:center;gap:10px}
.health-label{display:flex;justify-content:space-between;align-items:center;min-width:280px;font-size:12px;color:var(--t2)}
.health-pct{font-family:var(--fm);font-size:11px;font-weight:700;flex-shrink:0}
.health-bar{flex:1;height:4px;background:var(--s3);border-radius:99px;overflow:hidden}
.health-fill{height:100%;border-radius:99px;transition:width 1.2s ease}

/* SHARD GRID */
.shard-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;margin-top:14px}
.shard{padding:5px 4px;border-radius:6px;font-family:var(--fm);font-size:9px;font-weight:700;text-align:center;cursor:pointer;transition:all var(--tf);border:1px solid;user-select:none}
.shard-ok{background:rgba(0,232,148,.08);color:var(--green);border-color:rgba(0,232,148,.2)}.shard-ok:hover{background:rgba(0,232,148,.16)}
.shard-warn{background:rgba(245,166,35,.1);color:var(--amber);border-color:rgba(245,166,35,.3);animation:pulse 2s ease-in-out infinite}

/* FILTER BAR */
.filter-bar{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.filter-tabs{display:flex;gap:2px;flex-wrap:wrap}
.ftab{padding:8px 14px;border-radius:10px;font-size:13px;font-weight:600;color:var(--t3);transition:all var(--tf);cursor:pointer;border:1px solid transparent;background:rgba(0,0,0,0.2)}
.ftab:hover{color:var(--t1);background:rgba(255,255,255,0.06);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05)}
.ftab.active{background:rgba(77,124,255,.15);color:var(--blue);border-color:rgba(77,124,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05)}
.ftab{position:relative;overflow:hidden}
.ftab::after{content:'';position:absolute;left:10px;right:10px;bottom:2px;height:2px;border-radius:99px;background:var(--accent);opacity:0;transform:scaleX(.4);transition:all var(--tf)}
.ftab.active::after{opacity:.95;transform:scaleX(1)}
.ftab-warn{color:var(--amber)}.ftab-warn.active{color:var(--amber);background:var(--aa);border-color:rgba(245,166,35,.2)}
.ftab-count{font-family:var(--fm);font-size:9px;margin-left:4px;opacity:.6}
.search-box{display:flex;align-items:center;gap:7px;padding:6px 11px;background:var(--s2);border:1px solid var(--bd);border-radius:8px;flex:1;max-width:280px;transition:border-color var(--tf)}
.search-box:focus-within{border-color:var(--bd2)}
.search-box input{flex:1;background:none;border:none;outline:none;color:var(--t1);font-size:12px}.search-box input::placeholder{color:var(--t4)}

/* TABLE */
.table-wrap{overflow-x:auto;border-radius:16px;border:1px solid rgba(255,255,255,.06);margin-bottom:12px;background:rgba(9,19,40,.4);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 32px rgba(0,0,0,.25)}
.table-wrap.srv-table-wrap{max-height:min(70vh,720px);overflow:auto;-webkit-overflow-scrolling:touch}
.data-table{width:100%;border-collapse:collapse}
.data-table thead th{position:sticky;top:0;z-index:2;box-shadow:0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(8px);background:rgba(5,13,30,.8)}
.data-table th{padding:12px 14px;text-align:left;font-family:var(--fm);font-size:10px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid rgba(255,255,255,.05);white-space:nowrap}
.data-table td{padding:12px 14px;font-size:12px;color:var(--t2);border-bottom:1px solid rgba(255,255,255,.02);vertical-align:middle;transition:all var(--tf)}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr{transition:all var(--tf)}.data-table tbody tr:hover{background:rgba(255,255,255,.03)}.data-table tbody tr:hover td{color:var(--t1)}
.sortable{cursor:pointer;user-select:none;transition:color var(--tf)}.sortable:hover{color:var(--blue)}
.sortable:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;color:var(--blue)}
.sort-ico{opacity:.4;margin-left:3px}
.mono{font-family:var(--fm);font-size:11px}
.muted{color:var(--t3);font-size:12px}
.srv-page-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.srv-page-controls .tb-guild-select{max-width:none;min-width:90px}
.srv-page-controls .btn-xs[disabled]{opacity:.45;cursor:not-allowed}
.srv-cell{display:flex;align-items:center;gap:10px}
.srv-av{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:10px;font-weight:800;color:#fff;flex-shrink:0}
.srv-nm{font-size:13px;font-weight:600;color:var(--t1)}
.srv-id{font-family:var(--fm);font-size:10px;color:var(--t4)}
.srv-cb-col{width:36px;padding-left:14px!important}
.srv-row{transition:background var(--tf)}
.srv-sel{background:rgba(77,124,255,.07)!important;outline:1px solid rgba(77,124,255,.25);outline-offset:-1px}
.srv-bulk{background:rgba(77,124,255,.04)!important}
@keyframes srvSkel{0%,100%{opacity:.42}50%{opacity:.88}}
.srv-skel-row td{padding:12px 14px!important;border-bottom:1px solid var(--bd)}
.srv-skel-row-inner{display:flex;align-items:center;gap:12px}
.srv-skel-av{width:36px;height:36px;border-radius:10px;background:var(--s3);flex-shrink:0;animation:srvSkel 1.15s ease-in-out infinite}
.srv-skel-lines{flex:1;min-width:0}
.srv-skel-line{height:9px;border-radius:6px;background:var(--s3);margin-bottom:7px;animation:srvSkel 1.15s ease-in-out infinite}
.srv-skel-line:last-child{margin-bottom:0}
.srv-skel-line.w35{width:35%}.srv-skel-line.w45{width:45%}.srv-skel-line.w55{width:55%}.srv-skel-line.w75{width:75%}.srv-skel-line.w80{width:80%}
.srv-row:hover .srv-av{animation:softFloat .9s ease-in-out}
.srv-cards-grid{display:none;flex-direction:column;gap:10px;margin-bottom:12px}
.srv-card{background:var(--surf);border:1px solid var(--bd);border-radius:16px;padding:16px 18px;transition:transform var(--tfb),border-color var(--tf),box-shadow var(--tfb);box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 4px 16px rgba(0,0,0,.15)}
.srv-card:hover{transform:translateY(-2px);border-color:rgba(77,124,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 24px rgba(0,0,0,.25)}
.srv-card:active{border-color:var(--bd2)}
.srv-card-sel{border-color:rgba(77,124,255,.45)!important;background:rgba(77,124,255,.06)!important}
.srv-card-bulk{border-color:rgba(77,124,255,.25)!important}
.srv-card-top{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.srv-card-cb{flex-shrink:0;padding-top:4px}
.srv-card-meta{flex:1;min-width:0}
.srv-card-sub{font-size:11px;margin-top:4px;line-height:1.35}
.srv-card-mid{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;cursor:pointer}
.srv-card-act{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.srv-card-skel{pointer-events:none}
.srv-card-skel .srv-skel-line{margin-bottom:6px}
.srv-mobile-grid{display:grid;grid-template-columns:1fr;gap:10px}
.srv-mcard{background:linear-gradient(165deg,var(--surf),var(--s1));border:1px solid var(--bd);border-radius:16px;padding:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 8px 22px rgba(0,0,0,.22);transition:transform var(--tfb),border-color var(--tf),box-shadow var(--tfb);cursor:pointer}
.srv-mcard:hover{border-color:rgba(77,124,255,.3);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 28px rgba(0,0,0,.35)}
.srv-mcard-sel{border-color:rgba(77,124,255,.45);box-shadow:0 0 0 1px rgba(77,124,255,.25),0 12px 28px rgba(0,0,0,.28)}
.srv-mcard-bulk{background:linear-gradient(165deg,rgba(77,124,255,.12),var(--s1))}
.srv-mhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.srv-mcb{padding:4px;display:flex;align-items:center}
.srv-mmeta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.srv-mactions{display:flex;gap:6px;flex-wrap:wrap}
.hs{font-family:var(--fm);font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px;white-space:nowrap}
.hs-g{color:var(--green);background:var(--ga)}.hs-c{color:var(--cyan);background:var(--ca)}.hs-w{color:var(--amber);background:var(--aa)}.hs-r{color:var(--red);background:var(--ra)}
.td-act{display:flex;gap:5px;align-items:center}
.table-foot{display:flex;align-items:center;justify-content:space-between;padding:8px 0;flex-wrap:wrap;gap:8px}
.table-info{font-family:var(--fm);font-size:11px;color:var(--t4)}
.pagination{display:flex;gap:3px}
.pg-btn{padding:4px 8px;border-radius:6px;font-family:var(--fm);font-size:11px;color:var(--t3);background:var(--s2);border:1px solid var(--bd);cursor:pointer;transition:all var(--tf)}.pg-btn:hover{color:var(--t1);border-color:var(--bd2)}.pg-btn.active{background:var(--ba);color:var(--blue);border-color:rgba(77,124,255,.25)}.pg-btn.disabled{opacity:.4;cursor:default}
.pg-ellipsis{padding:4px 6px;font-family:var(--fm);font-size:11px;color:var(--t4)}
#sdpPanel{max-height:0;overflow:hidden;transition:max-height .35s var(--tfs),opacity .25s;opacity:0;margin-bottom:0}
#sdpPanel.active{max-height:300px;opacity:1;margin-bottom:14px}
.sdp-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.sdp-title{display:flex;align-items:center;gap:12px}
.sdp-cls{color:var(--t3);font-size:13px;padding:4px 7px;border-radius:6px;transition:all var(--tf)}.sdp-cls:hover{color:var(--t1);background:var(--hover)}
.sdp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.sdp-k{background:rgba(0,0,0,0.25);border-radius:12px;padding:12px 14px;border:1px solid rgba(255,255,255,0.06);box-shadow:inset 0 2px 4px rgba(0,0,0,0.1)}
.sdp-kv{font-family:var(--fd);font-size:15px;font-weight:700;color:var(--t1)}
.sdp-kl{font-size:10px;color:var(--t3);margin-top:2px}

/* COMMANDS */
.cmd-categories{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:14px}
.cmd-cat{background:rgba(9,19,40,.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:14px;cursor:pointer;transition:transform var(--tf),border-color var(--tf),box-shadow var(--tf);display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.cmd-cat:hover{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}.cmd-cat.active{border-color:rgba(77,124,255,.4);background:rgba(77,124,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(77,124,255,.15)}
.cc-ic{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.cc-name{font-size:12px;font-weight:700;color:var(--t1)}.cc-count{font-family:var(--fm);font-size:9px;color:var(--t4);margin-top:2px}
.cmd-nm{font-family:var(--fm);font-size:12px;color:var(--blue);background:var(--ba);padding:2px 7px;border-radius:5px}
.cmd-row{transition:background var(--tf)}.cmd-row:hover{background:var(--hover)}

/* MODULES */
.modules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:14px}
.mod-card{background:var(--surf);border:1px solid var(--bd);border-radius:var(--cr);padding:20px 22px;transition:all var(--tf);box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 4px 16px rgba(0,0,0,.15)}
.mod-card:hover{border-color:rgba(77,124,255,.3);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 24px rgba(0,0,0,.25)}
.mod-off{opacity:.5}.mod-off:hover{opacity:.7}
.mod-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mod-ic{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px}
.mod-nm{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:4px}
.mod-ds{font-size:11px;color:var(--t3);line-height:1.45;margin-bottom:9px}
.mod-tags{display:flex;gap:5px;margin-bottom:10px}
.mod-foot{display:flex;align-items:center;justify-content:space-between}
.mod-sv{font-family:var(--fm);font-size:10px;color:var(--t4)}

/* WORKFLOWS */
.wf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.wf-card{background:var(--surf);border:1px solid var(--bd);border-radius:var(--cr);padding:20px 22px;transition:all var(--tf);box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 4px 16px rgba(0,0,0,.15)}.wf-card:hover{border-color:rgba(77,124,255,.3);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 24px rgba(0,0,0,.25)}
.wf-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.wf-nm{font-size:14px;font-weight:700;color:var(--t1);margin-bottom:3px}
.wf-tr{font-size:11px;color:var(--t3);font-family:var(--fm)}
.wf-ds{font-size:12px;color:var(--t2);line-height:1.5;margin-bottom:12px}
.wf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.wf-s{text-align:center;padding:8px;background:var(--s2);border-radius:7px;border:1px solid var(--bd)}
.wf-sv{font-family:var(--fd);font-size:14px;font-weight:700;color:var(--t1)}
.wf-sl{font-size:10px;color:var(--t3);margin-top:2px}
.wf-live{width:6px;height:6px;background:var(--green);border-radius:50%;box-shadow:0 0 8px var(--green);animation:pulse 1.5s ease-in-out infinite;flex-shrink:0}
.wf-prog{height:2px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden;margin-bottom:10px}
.wf-prog-fill{height:100%;width:55%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:99px;animation:wfScan 2.5s ease-in-out infinite alternate}
@keyframes wfScan{from{margin-left:0}to{margin-left:42%}}
.wf-foot{display:flex;gap:6px}

/* ANALYTICS */
.analytics-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:16px}
.an-kpi{background:var(--surf);border:1px solid var(--bd);border-radius:var(--cr);padding:18px 20px;position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 4px 16px rgba(0,0,0,.15);transition:transform var(--tf),box-shadow var(--tf)}
.an-kpi:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 24px rgba(0,0,0,.25)}
.an-kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.an-kpi-blue::before{background:var(--blue)}.an-kpi-cyan::before{background:var(--cyan)}
.an-kpi-green::before{background:var(--green)}.an-kpi-amber::before{background:var(--amber)}
.an-kpi-violet::before{background:var(--violet)}.an-kpi-red::before{background:var(--red)}
.an-kpi-val{font-family:var(--fd);font-size:20px;font-weight:800;color:var(--t1);margin-bottom:2px}
.an-kpi-lbl{font-size:11px;color:var(--t3);margin-bottom:4px}
.an-kpi-trend{font-family:var(--fm);font-size:10px;font-weight:700}
.an-kpi-trend.up{color:var(--green)}.an-kpi-trend.down{color:var(--red)}
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.chart-wrapper{position:relative;padding:4px 0 0}
.chart-tooltip{position:absolute;background:rgba(6,13,28,.95);border:1px solid var(--bd2);border-radius:8px;padding:8px 11px;font-size:12px;color:var(--t1);pointer-events:none;z-index:10;backdrop-filter:blur(8px);white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.6)}
.chart-legend{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--t3)}
.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.range-sel{display:flex;gap:2px;background:var(--s2);border-radius:8px;padding:3px;border:1px solid var(--bd)}
.range-btn{padding:4px 11px;border-radius:6px;font-family:var(--fm);font-size:11px;font-weight:700;color:var(--t3);cursor:pointer;transition:all var(--tf)}
.range-btn:hover{color:var(--t1)}.range-btn.active{background:var(--s4);color:var(--t1);box-shadow:0 2px 6px rgba(0,0,0,.4)}
.top-commands{display:flex;flex-direction:column;gap:8px}
.tc-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--bd)}.tc-row:last-child{border-bottom:none}
.tc-rank{font-family:var(--fm);font-size:10px;font-weight:700;color:var(--t4);width:16px;text-align:center;flex-shrink:0}
.tc-name{font-family:var(--fm);font-size:11px;color:var(--blue);background:var(--ba);padding:2px 6px;border-radius:4px;flex-shrink:0}
.tc-bar-wrap{flex:1;height:4px;background:var(--s3);border-radius:99px;overflow:hidden}
.tc-bar{height:100%;border-radius:99px}
.tc-val{font-family:var(--fm);font-size:11px;color:var(--t3);flex-shrink:0;min-width:48px;text-align:right}
.regions-grid{display:flex;flex-direction:column;gap:9px}
.region-row{display:flex;align-items:center;gap:10px}
.region-name{font-size:12px;color:var(--t2);min-width:90px}
.region-bar-wrap{flex:1;height:6px;background:var(--s3);border-radius:99px;overflow:hidden}
.region-bar{height:100%;border-radius:99px;transition:width 1.2s ease}
.region-pct{font-family:var(--fm);font-size:11px;color:var(--t3);min-width:100px;text-align:right}

/* LOGS */
.log-wrap{background:rgba(9,19,40,.4);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden;margin-bottom:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 32px rgba(0,0,0,.25)}
.log-list{max-height:500px;overflow-y:auto}
.log-row{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.03);transition:all var(--tf);font-size:12px}
.log-row:last-child{border-bottom:none}.log-row:hover{background:rgba(255,255,255,.03)}
.log-ts{font-family:var(--fm);font-size:10px;color:var(--t4);white-space:nowrap;flex-shrink:0;width:44px;padding-top:1px}
.log-badge{font-family:var(--fm);font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;white-space:nowrap;flex-shrink:0;border:1px solid transparent}
.log-crit{background:rgba(255,64,96,.12);color:var(--red);border-color:rgba(255,64,96,.2)}
.log-warn{background:rgba(245,166,35,.1);color:var(--amber);border-color:rgba(245,166,35,.2)}
.log-info{background:rgba(77,124,255,.12);color:var(--blue);border-color:rgba(77,124,255,.2)}
.log-debug{background:var(--s3);color:var(--t4);border-color:var(--bd)}
.log-tp{font-family:var(--fm);font-size:9px;font-weight:700;color:var(--t4);width:72px;flex-shrink:0;padding-top:2px}
.log-msg{flex:1;color:var(--t2);line-height:1.4}
.log-new{animation:logIn .3s ease-out}
@keyframes logIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.log-foot{display:flex;align-items:center;justify-content:space-between;padding:6px 0;flex-wrap:wrap;gap:8px}
.log-pause-btn{font-family:var(--fm);font-size:10px;padding:4px 10px;background:var(--s3);border:1px solid var(--bd);border-radius:6px;color:var(--t2);transition:all var(--tf);cursor:pointer}.log-pause-btn:hover{border-color:var(--bd2);color:var(--t1)}
.load-more-btn{font-size:12px;color:var(--blue);transition:color var(--tf)}.load-more-btn:hover{color:var(--blu)}

/* BILLING */
.billing-plan-card{position:relative;background:linear-gradient(135deg,rgba(9,19,40,.85),rgba(6,15,36,.9));border:1px solid rgba(77,124,255,.3);border-radius:16px;overflow:hidden;margin-bottom:16px}
.bp-glow{position:absolute;top:-40px;right:-40px;width:220px;height:220px;background:radial-gradient(circle,rgba(77,124,255,.2),transparent 70%);pointer-events:none}
.bp-content{position:relative;z-index:1;padding:24px}
.bp-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px}
.bp-plan-label{font-family:var(--fm);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:5px}
.bp-plan-name{font-family:var(--fd);font-size:22px;font-weight:900;color:var(--t1);margin-bottom:4px}
.bp-plan-sub{font-size:12px;color:var(--t3)}
.bp-price-val{font-family:var(--fd);font-size:28px;font-weight:900;color:var(--t1);text-align:right}
.bp-price-val span{font-size:14px;color:var(--t3)}
.bp-price-sub{font-size:11px;color:var(--t4);text-align:right;margin-top:3px}
.bp-features{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:16px}
.bp-feat{font-size:12px;color:var(--green)}
.bp-actions{display:flex;gap:8px}
.billing-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.billing-stat-card{text-align:center;padding:16px}
.bs-ic{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;margin:0 auto 10px}
.bs-val{font-family:var(--fd);font-size:20px;font-weight:800;color:var(--t1);margin-bottom:3px}
.bs-lbl{font-size:12px;color:var(--t3);margin-bottom:2px}.bs-sub{font-size:10px;color:var(--t4)}
.payment-method{padding:4px 0}
.pm-card{display:flex;align-items:center;gap:12px;padding:14px;background:var(--s2);border-radius:10px;border:1px solid var(--bd)}
.pm-type{font-family:var(--fd);font-size:13px;font-weight:800;color:var(--blue);background:var(--ba);padding:3px 9px;border-radius:5px;border:1px solid rgba(77,124,255,.22)}
.pm-num{font-family:var(--fm);font-size:13px;color:var(--t1);margin-bottom:3px}.pm-exp{font-size:11px;color:var(--t4)}

/* SETTINGS */
.settings-tabs{display:flex;gap:2px;margin-bottom:14px;flex-wrap:wrap;background:var(--s2);border:1px solid var(--bd);border-radius:10px;padding:4px}
.stab{padding:7px 14px;border-radius:7px;font-size:12px;font-weight:600;color:var(--t3);cursor:pointer;transition:all var(--tf)}
.stab:hover{color:var(--t2)}.stab.active{background:var(--s4);color:var(--t1);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.stab.active{box-shadow:0 2px 8px rgba(0,0,0,.3),0 0 0 1px rgba(77,124,255,.25) inset}
.sg-title{font-family:var(--fd);font-size:12px;font-weight:700;color:var(--t1);letter-spacing:.05em;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--bd)}
.sr{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--bd)}
.sr:last-child{border-bottom:none}
.sr-info{flex:1;min-width:0}
.sr-lbl{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:2px}
.sr-desc{font-size:11px;color:var(--t4)}
.sr-input{background:var(--s2);border:1px solid var(--bd);border-radius:7px;padding:7px 11px;color:var(--t1);font-family:var(--fb);font-size:13px;outline:none;transition:border-color var(--tf);min-width:180px}.sr-input:focus{border-color:var(--blue)}
.sr-select{background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:9px 12px;color:var(--t1);font-family:var(--fb);font-size:13px;outline:none;cursor:pointer;min-width:140px;box-shadow:inset 0 2px 4px rgba(0,0,0,0.1);transition:all var(--tf)}
.sr-select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(77,124,255,.2), inset 0 2px 4px rgba(0,0,0,0.1);background:rgba(0,0,0,0.4)}
.api-key-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.api-key-val{font-family:var(--fm);font-size:11px;color:var(--blue);background:var(--ba);padding:4px 10px;border-radius:5px}
.color-swatch{width:24px;height:24px;border-radius:50%;cursor:pointer;transition:transform .15s,outline .15s;border:2px solid transparent;outline:2px solid transparent;outline-offset:2px}
.color-swatch:hover{transform:scale(1.18)}
.color-swatch[data-active]{outline-color:rgba(255,255,255,.8)}
.dirty-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;background:rgba(245,166,35,.07);border:1px solid rgba(245,166,35,.2);border-radius:9px;margin-bottom:14px;font-size:13px;color:var(--amber)}
.dirty-bar-right{display:flex;gap:7px;flex-shrink:0}
#settingsDirtyDot{width:7px;height:7px;background:var(--amber);border-radius:50%;box-shadow:0 0 6px var(--amber);display:none;flex-shrink:0;margin:0 2px;animation:pulse 2s ease-in-out infinite}

/* SUPPORT */
.sup-hero{position:relative;background:linear-gradient(135deg,rgba(6,13,28,.95),rgba(9,19,40,.9));border:1px solid var(--bd2);border-radius:16px;overflow:hidden;padding:32px;margin-bottom:16px;text-align:center}
.sup-hero-glow{position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:400px;height:300px;background:radial-gradient(circle,rgba(77,124,255,.12),transparent 70%);pointer-events:none}
.sup-hero-content{position:relative;z-index:1}
.sup-hero-title{font-family:var(--fd);font-size:26px;font-weight:900;color:var(--t1);margin-bottom:8px}
.sup-hero-sub{font-size:13px;color:var(--t3);margin-bottom:20px}
.sup-search-wrap{position:relative;max-width:480px;margin:0 auto}
.sup-search{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--s2);border:1px solid var(--bd2);border-radius:10px;width:100%;transition:border-color var(--tf)}
.sup-search:focus-within{border-color:var(--blue)}
.sup-search input{flex:1;background:none;border:none;outline:none;color:var(--t1);font-size:14px}.sup-search input::placeholder{color:var(--t4)}
.sup-search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--s1);border:1px solid var(--bd2);border-radius:10px;overflow:hidden;z-index:20;box-shadow:0 12px 40px rgba(0,0,0,.6)}
.ssr-item{padding:10px 14px;cursor:pointer;font-size:13px;color:var(--t2);transition:background var(--tf)}.ssr-item:hover{background:var(--hover);color:var(--t1)}
.sup-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.sup-card{background:var(--surf);border:1px solid var(--bd);border-radius:var(--cr);padding:18px;cursor:pointer;transition:all var(--tf)}
.sup-card:hover{border-color:var(--bd2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.sup-card-ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:10px}
.sup-card-title{font-size:14px;font-weight:700;color:var(--t1);margin-bottom:6px}
.sup-card-desc{font-size:12px;color:var(--t3);line-height:1.5;margin-bottom:10px}
.sup-card-link{font-size:12px;color:var(--blue);font-weight:600}
.faq-list{display:flex;flex-direction:column;gap:0}
.faq-item{border-bottom:1px solid var(--bd)}.faq-item:last-child{border-bottom:none}
.faq-q{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 0;text-align:left;font-size:13px;font-weight:600;color:var(--t1);cursor:pointer;transition:color var(--tf)}.faq-q:hover{color:var(--blue)}
.faq-arrow{font-size:16px;color:var(--t3);transition:transform .25s}.faq-item.open .faq-arrow{transform:rotate(90deg)}
.faq-a{display:none;padding:0 0 13px;font-size:12px;color:var(--t3);line-height:1.6}.faq-item.open .faq-a{display:block}

/* ADMIN */
.admin-tabs{display:flex;gap:2px;margin-bottom:14px;flex-wrap:wrap;border-bottom:1px solid var(--bd)}
.atab{padding:9px 16px;font-size:13px;font-weight:600;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all var(--tf)}
.atab:hover{color:var(--t2)}.atab.active{color:var(--t1);border-bottom-color:var(--blue)}.atab-danger:hover{color:var(--red)}.atab-danger.active{color:var(--red);border-bottom-color:var(--red)}
.atab{position:relative}
.atab.active::after{content:'';position:absolute;left:8px;right:8px;bottom:-2px;height:2px;border-radius:99px;background:currentColor;opacity:.85}
.audit-list{display:flex;flex-direction:column;gap:4px}
.audit-row{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--s2);border-radius:7px;font-size:12px;border:1px solid var(--bd);transition:background var(--tf)}.audit-row:hover{background:var(--hover)}
.audit-time{font-family:var(--fm);font-size:10px;color:var(--t4);flex-shrink:0;width:36px}
.audit-sev{font-size:8px;flex-shrink:0}.audit-actor{font-family:var(--fm);font-size:10px;color:var(--blue);flex-shrink:0;width:52px}
.audit-msg{font-size:11px;color:var(--t2)}
.sysops-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.sysop-card{background:var(--s2);border:1px solid var(--bd);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:12px;justify-content:space-between}
.sysop-head{display:flex;align-items:flex-start;gap:10px}
.sysop-ic{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.sysop-name{font-size:12px;font-weight:700;color:var(--t1);margin-bottom:4px}
.sysop-desc{font-size:11px;color:var(--t4);line-height:1.5}
.maint-card{background:var(--s2);border:1px solid var(--bd);border-radius:10px;padding:16px;margin-top:12px;transition:border-color .3s}
.maint-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}
.maint-title{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:4px}
.maint-desc{font-size:11px;color:var(--t4);line-height:1.5}
.maint-status{font-size:12px;font-family:var(--fm)}.maint-status.on{color:var(--red)}
.session-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.session-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--s2);border-radius:8px;border:1px solid var(--bd);transition:background var(--tf)}.session-row:hover{background:var(--hover)}
.session-current{border-color:rgba(0,232,148,.25)!important}
.session-ic{font-size:20px;flex-shrink:0}
.session-device{font-size:12px;font-weight:600;color:var(--t1)}.session-meta{font-size:10px;color:var(--t4);margin-top:2px}
.api-key-table{display:flex;flex-direction:column;gap:6px}
.ak-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:var(--s2);border-radius:8px;border:1px solid var(--bd)}
.ak-name{font-size:12px;font-weight:700;color:var(--t1);margin-bottom:3px}
.ak-meta{font-family:var(--fm);font-size:10px;color:var(--t4)}.ak-actions{display:flex;gap:5px}
.perm-matrix{background:var(--s2);border-radius:10px;overflow:hidden;border:1px solid var(--bd)}
.perm-header-row,.perm-row{display:grid;grid-template-columns:220px repeat(5,1fr);border-bottom:1px solid var(--bd)}
.perm-row:last-child{border-bottom:none}
.perm-header-row{background:var(--s3);padding:8px 14px;font-family:var(--fm);font-size:9px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.08em}
.perm-row{padding:10px 14px;transition:background var(--tf)}.perm-row:hover{background:var(--hover)}
.perm-member{display:flex;align-items:center;gap:10px}
.perm-av{width:28px;height:28px;background:linear-gradient(135deg,var(--blue),var(--violet));border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:10px;font-weight:800;color:#fff;flex-shrink:0}
.perm-name{font-size:12px;font-weight:600;color:var(--t1)}.perm-email{font-size:10px;color:var(--t4)}
.perm-role-cell{display:flex;align-items:center;justify-content:center}
.perm-check{font-size:13px}.perm-yes{color:var(--green)}.perm-no{color:var(--t5)}.perm-owner{font-size:12px}
.danger-warning{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:rgba(255,64,96,.06);border:1px solid rgba(255,64,96,.2);border-radius:10px;margin-bottom:14px}
.dw-ic{font-size:24px;flex-shrink:0}
.dw-title{font-size:13px;font-weight:700;color:var(--red);margin-bottom:4px}
.dw-msg{font-size:12px;color:var(--t3);line-height:1.5}
.danger-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.danger-card{background:var(--surf);border:1px solid var(--bd);border-radius:var(--cr);padding:16px;display:flex;flex-direction:column;gap:12px;justify-content:space-between;transition:all var(--tf)}.danger-card:hover{border-color:rgba(255,64,96,.2)}
.danger-card-crit{border-color:rgba(255,64,96,.25)!important;background:rgba(255,64,96,.04)!important}
.dc-title{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:5px}
.dc-title-red{color:var(--red)!important}
.dc-desc{font-size:11px;color:var(--t4);line-height:1.5}

/* MODALS */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(16px);z-index:400;animation:fadeIn .3s ease-out}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(9, 19, 40, 0.7);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid rgba(255,255,255,0.08);border-radius:24px;width:480px;max-width:95vw;max-height:85vh;overflow-y:auto;z-index:401;box-shadow:0 32px 96px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,0.06);animation:modalIn .4s cubic-bezier(0.2,0.8,0.2,1)}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 20px 0;gap:12px}
.modal-title{font-family:var(--fd);font-size:16px;font-weight:800;color:var(--t1)}
.modal-sub{font-size:12px;color:var(--t3);margin-top:3px}
.modal-close{color:var(--t3);font-size:14px;padding:4px 7px;border-radius:7px;transition:all var(--tf)}.modal-close:hover{color:var(--t1);background:var(--hover)}
.modal-body{padding:16px 20px}
.modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:0 20px 18px}
.mwarn{background:rgba(245,166,35,.07);border:1px solid rgba(245,166,35,.2);border-radius:8px;padding:11px 13px;font-size:13px;color:var(--amber);margin-bottom:14px;line-height:1.5}
.ml{display:block;font-size:11px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px;margin-top:12px}.ml:first-child{margin-top:0}
.mi{width:100%;background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:12px 14px;color:var(--t1);font-family:var(--fb);font-size:13px;outline:none;transition:all var(--tf);box-shadow:inset 0 2px 4px rgba(0,0,0,0.1)}
.mi:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(77,124,255,.2), inset 0 2px 4px rgba(0,0,0,0.1);background:rgba(0,0,0,0.4)}
.mt{min-height:90px;resize:vertical}

/* PALETTE */
#palOverlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(10px);z-index:300}
#palette{position:fixed;top:12vh;left:50%;transform:translateX(-50%);width:640px;max-width:95vw;background:rgba(9, 19, 40, 0.7);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid rgba(255,255,255,0.08);border-radius:20px;overflow:hidden;z-index:301;box-shadow:0 32px 96px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,0.06);animation:palIn .3s var(--tfb)}
.palette-search{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--bd)}
.palette-search svg{flex-shrink:0;color:var(--t3)}
#palInput{flex:1;background:none;border:none;outline:none;color:var(--t1);font-size:15px;font-family:var(--fb)}
#palInput::placeholder{color:var(--t4)}
.kbd-esc{font-family:var(--fm);font-size:9px;background:var(--s3);border:1px solid var(--bd);border-radius:4px;padding:2px 6px;color:var(--t4)}
#palResults{max-height:360px;overflow-y:auto;padding:4px 0}
.pal-grp{font-family:var(--fm);font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--t5);padding:10px 14px 4px}
.pal-item{display:flex;align-items:center;gap:11px;padding:9px 14px;cursor:pointer;transition:background var(--tf)}
.pal-item:hover,.pal-sel{background:var(--hover)}
.pal-ic{width:28px;height:28px;background:var(--s3);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.pal-nm{font-size:13px;font-weight:600;color:var(--t1)}
.pal-sb{font-size:11px;color:var(--t3);margin-top:1px}
.palette-footer{display:flex;gap:16px;padding:9px 16px;border-top:1px solid var(--bd);font-family:var(--fm);font-size:10px;color:var(--t4)}
.palette-footer kbd{font-family:var(--fm);background:var(--s3);border:1px solid var(--bd);border-radius:4px;padding:1px 5px;color:var(--t3);font-size:9px}

/* KB SHEET */
#kbSheet{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center}
.kb-bg{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px)}
.kb-panel{position:relative;z-index:1;background:rgba(9,19,40,.72);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);border:1px solid rgba(255,255,255,.1);border-radius:20px;width:560px;max-width:95vw;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;animation:modalIn .22s var(--tfb);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 32px 80px rgba(0,0,0,.55)}
.kb-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--bd);flex-shrink:0}
.kb-title{font-family:var(--fd);font-size:15px;font-weight:700;color:var(--t1)}
.kb-body{overflow-y:auto;padding:14px 20px 18px;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.kb-grp{grid-column:1/-1;font-family:var(--fm);font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--t5);padding:12px 0 5px;border-top:1px solid var(--bd);margin-top:6px}
.kb-grp:first-child{border-top:none;padding-top:0;margin-top:0}
.kb-row{display:flex;align-items:center;justify-content:space-between;padding:5px 5px;border-radius:6px;font-size:12px;color:var(--t2);transition:background var(--tf)}.kb-row:hover{background:var(--hover)}
.kb-keys{display:flex;gap:4px;flex-shrink:0}
.kb-keys kbd{font-family:var(--fm);font-size:9px;background:var(--s3);border:1px solid var(--bd2);border-radius:4px;padding:2px 6px;color:var(--t2);box-shadow:0 2px 0 var(--bd)}
.kb-hint{font-size:10px;color:var(--t4);font-family:var(--fb);max-width:140px;text-align:right;line-height:1.35}

/* DRAWER */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);z-index:450;animation:fadeIn .2s ease-out}
.drawer{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:95vw;background:rgba(9, 19, 40, 0.65);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);border-left:1px solid rgba(255,255,255,0.08);z-index:451;display:flex;flex-direction:column;box-shadow:-20px 0 80px rgba(0,0,0,.6);animation:drawerIn .32s cubic-bezier(.22,.95,.26,1)}
@keyframes drawerIn{0%{transform:translateX(100%)}65%{transform:translateX(-1.2%)}100%{transform:translateX(0)}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--bd);flex-shrink:0}
.drawer-title{font-family:var(--fd);font-size:15px;font-weight:700;color:var(--t1)}
.drawer-close{color:var(--t3);font-size:14px;padding:4px 7px;border-radius:7px;transition:all var(--tf)}.drawer-close:hover{color:var(--t1);background:var(--hover)}
.drawer-body{flex:1;overflow-y:auto;padding:16px 18px}
/* Full-page guild panel (/guild/:id) — same controls as drawer, separate URL */
.guild-standalone-body{
  min-height:100vh;margin:0;font-family:var(--fb);font-size:14px;line-height:1.6;color:var(--t1);-webkit-font-smoothing:antialiased;
  background:radial-gradient(ellipse at top right,rgba(77,124,255,.08),transparent 600px),radial-gradient(ellipse at bottom left,rgba(155,114,239,.08),transparent 600px),var(--bg);
  background-attachment:fixed
}
.guild-standalone-app{display:flex;flex-direction:column;min-height:100vh;max-width:1100px;margin:0 auto;padding:0 18px 40px}
.guild-standalone-topbar{padding:24px 0 16px;border-bottom:1px solid transparent;position:relative}
.guild-standalone-topbar::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent)}
.guild-standalone-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.guild-standalone-back,.guild-standalone-dash{font-size:13px;font-weight:600;color:var(--cyan);text-decoration:none;white-space:nowrap}
.guild-standalone-back:hover,.guild-standalone-dash:hover{text-decoration:underline}
.guild-standalone-brand{font-family:var(--fd);font-weight:800;font-size:12px;color:var(--t4);letter-spacing:.14em}
.guild-standalone-title{font-family:var(--fd);font-size:clamp(18px,2.5vw,22px);font-weight:800;margin:0;color:var(--t1);letter-spacing:-.02em;line-height:1.2}
.guild-standalone-main{flex:1;background:rgba(9, 19, 40, 0.4);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.06);border-radius:24px;padding:24px 28px;margin-top:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 16px 64px rgba(0,0,0,.45)}
.drw-hero{display:flex;align-items:center;gap:14px;padding:14px;background:var(--s2);border-radius:10px;margin-bottom:14px;border:1px solid var(--bd)}
.drw-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.drw-k{background:rgba(0,0,0,0.25);border-radius:12px;padding:12px 14px;border:1px solid rgba(255,255,255,.06);text-align:center;box-shadow:inset 0 2px 4px rgba(0,0,0,0.1)}
.drw-kv{font-family:var(--fd);font-size:14px;font-weight:700;color:var(--t1)}
.drw-kl{font-size:10px;color:var(--t3);margin-top:2px}
.drw-sec{font-family:var(--fm);font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--t5);padding:10px 0 6px;border-top:1px solid var(--bd);margin-top:4px}
#serverDrawer.drawer-control{width:min(820px,98vw)}
#serverDrawer.drawer-control .drawer-body{background:#141820}
/* Dyno-inspired guild control panel (server drawer overview) */
.drw-dyno{--drw-pink:#ff6eb4;--drw-pink2:#d9467a;--drw-surface:rgba(9, 19, 40, 0.4);--drw-elev:rgba(255,255,255,0.02);--drw-border:rgba(255,255,255,.07)}
.drw-dyno-head{display:flex;align-items:center;gap:18px;margin-bottom:20px;padding:4px 2px}
.drw-dyno-ico{width:56px;height:56px;border-radius:16px;object-fit:cover;flex-shrink:0;box-shadow:0 8px 32px rgba(0,0,0,.35)}
.drw-dyno-ico-fallback{display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;font-size:18px;color:#fff;border-radius:16px}
.drw-dyno-gname{font-family:var(--fd);font-size:24px;font-weight:900;letter-spacing:-.03em;color:var(--t1)}
.drw-dyno-meta{font-size:13px;color:var(--t3);margin-top:6px;line-height:1.4}
.drw-dyno-badges{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.drw-dyno-card{background:var(--drw-surface);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--drw-border);border-radius:16px;padding:24px;margin-bottom:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 32px rgba(0,0,0,.25)}
.drw-dyno-card--activity{padding-bottom:12px}
.drw-dyno-sec{font-family:var(--fm);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#8b92a8;margin:0 0 14px}
.drw-dyno-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}
@media(max-width:640px){.drw-dyno-stats{grid-template-columns:repeat(2,1fr)}}
.drw-dyno-stat{background:var(--drw-elev);border:1px solid var(--drw-border);border-radius:14px;padding:14px 10px;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.03);transition:transform var(--tf)}
.drw-dyno-stat:hover{transform:translateY(-2px)}
.drw-dyno-stat-n{display:block;font-family:var(--fd);font-size:24px;font-weight:900;color:var(--t1);line-height:1.15}
.drw-dyno-stat-l{display:block;font-size:10px;color:var(--t4);text-transform:uppercase;letter-spacing:.08em;margin-top:6px;font-weight:700}
.drw-dyno-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px}
.drw-dyno-dot{color:var(--t5);user-select:none}
.drw-dyno-link,.drw-dyno-link-btn{background:none;border:none;padding:0;font:inherit;color:var(--drw-pink);font-weight:600;cursor:pointer;text-decoration:none;transition:opacity .15s}
.drw-dyno-link:hover,.drw-dyno-link-btn:hover{opacity:.85;text-decoration:underline}
.drw-dyno-form .drw-field span{font-size:11px;color:var(--t3)}
.drw-dyno-input{background:#0f131d!important;border-color:rgba(255,255,255,.1)!important;border-radius:10px!important;padding:10px 12px!important}
.drw-dyno-divider{height:1px;background:var(--drw-border);margin:14px 0}
.drw-dyno-note{font-size:12px;color:var(--t2);line-height:1.6;margin:0}
.drw-dyno-field{margin-top:12px}
.drw-dyno-botrow{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.drw-dyno-bot-av{border-radius:11px;flex-shrink:0}
.drw-dyno-bot-name{font-weight:700;font-size:14px;margin-bottom:4px}
.drw-dyno-micro{font-size:11px;color:var(--t3);margin:0 0 10px;line-height:1.45}
.drw-dyno-cmdlist{display:flex;flex-wrap:wrap;gap:6px;max-height:88px;overflow-y:auto}
.drw-dyno-cmd{font-size:10px;padding:4px 8px;background:#0f131d;border:1px solid var(--drw-border);border-radius:6px;color:var(--cyan)}
.drw-dyno-actions{display:flex;flex-wrap:wrap;gap:8px}
.drw-dyno-btn-primary{
  padding:10px 20px;border-radius:12px;font-size:13px;font-weight:700;
  background:linear-gradient(135deg,var(--drw-pink),var(--drw-pink2));color:#fff!important;
  box-shadow:0 4px 20px rgba(232,93,140,.35),inset 0 1px 0 rgba(255,255,255,.15);border:1px solid transparent;transition:all var(--tf)
}
.drw-dyno-btn-primary:hover{box-shadow:0 8px 32px rgba(232,93,140,.5),inset 0 1px 0 rgba(255,255,255,.25);transform:translateY(-2px);filter:brightness(1.08)}
.drw-dyno-btn-sec{
  padding:10px 20px;border-radius:12px;font-size:13px;font-weight:600;
  background:rgba(255,255,255,0.06);color:var(--t1)!important;border:1px solid transparent;transition:all var(--tf);box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)
}
.drw-dyno-btn-sec:hover{color:var(--t1)!important;background:rgba(255,255,255,0.12);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05),0 8px 24px rgba(0,0,0,.25)}
.drw-dyno-btn-danger{padding:10px 20px;border-radius:12px;font-size:13px;font-weight:600;background:rgba(255,64,96,.12);color:#ff7a8f!important;border:1px solid transparent;transition:all var(--tf)}
.drw-dyno-btn-danger:hover{background:rgba(255,64,96,.2);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05),0 8px 24px rgba(0,0,0,.25)}
.drw-dyno-foot{font-size:10px;color:var(--t4);margin:12px 0 0;line-height:1.45}
.drw-dyno-tbl-wrap{border:1px solid var(--drw-border);border-radius:10px;overflow:hidden;max-height:200px;overflow-y:auto}
.drw-dyno-tbl{width:100%;border-collapse:collapse;font-size:11px}
.drw-dyno-tbl th{text-align:left;padding:8px 10px;background:#0f131d;color:var(--t5);font-size:9px;text-transform:uppercase;letter-spacing:.08em;position:sticky;top:0}
.drw-dyno-tbl td{padding:8px 10px;border-top:1px solid var(--drw-border);color:var(--t2);vertical-align:top}
.drw-dyno-tbl tr:first-child td{border-top:none}
.drw-act-t{white-space:nowrap;font-family:var(--fm);color:var(--t3);width:1%}
.drw-act-s{font-family:var(--fm);font-size:10px;color:var(--violet);width:1%}
.drw-act-m{word-break:break-word}
#serverDrawer .drw-tabs--cp .drw-tab.active{
  background:linear-gradient(135deg,rgba(232,93,140,.2),rgba(217,70,122,.12))!important;
  border-color:rgba(232,93,140,.45)!important;color:var(--t1)!important
}
.drw-tabs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--bd)}
.drw-tabs.drw-tabs--cp{gap:6px;padding:10px 12px;margin:0 -4px 14px;background:linear-gradient(180deg,rgba(77,124,255,.06),transparent);border:1px solid var(--bd);border-radius:12px}
.drw-tabs.drw-tabs--cp .drw-tab{border-radius:999px;padding:8px 14px;font-size:11px;font-weight:600}
.drw-tab{font-size:11px;padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:rgba(0,0,0,0.25);color:var(--t2);cursor:pointer;font-family:var(--fm);min-height:36px;transition:all var(--tf)}
.drw-tab:hover{color:var(--t1);border-color:rgba(255,255,255,0.15);background:rgba(255,255,255,0.05);transform:translateY(-1px)}
.drw-tab.active{background:rgba(77,124,255,.15);border-color:rgba(77,124,255,.45);color:var(--t1);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05)}
.drw-pane{margin-bottom:6px}
.drw-tbl-wrap{font-size:11px;max-height:280px;overflow:auto;border:1px solid var(--bd);border-radius:8px;margin-top:8px;-webkit-overflow-scrolling:touch}
.drw-tbl{width:100%;border-collapse:collapse}
.drw-tbl th,.drw-tbl td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--bd2);vertical-align:top}
.drw-tbl th{position:sticky;top:0;z-index:1;background:var(--s2);font-size:9px;text-transform:uppercase;color:var(--t5);box-shadow:0 1px 0 var(--bd2)}
.drw-tbl tr:last-child td{border-bottom:none}
.drw-field label{display:block;font-size:10px;color:var(--t3);margin-bottom:4px}
.drw-row-actions{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.btn.drw-xs{font-size:10px;padding:4px 8px}

/* TOASTS */
.toast-wrap,.toast-container{position:fixed;bottom:20px;right:20px;z-index:500;display:flex;flex-direction:column-reverse;gap:10px;max-width:360px;pointer-events:none}
.toast-wrap .toast,.toast-container .toast{pointer-events:auto}
.toast{display:flex;align-items:flex-start;gap:10px;padding:16px 18px;background:rgba(9,19,40,.6);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);opacity:0;transform:translateY(24px) scale(0.95);transition:all .4s cubic-bezier(0.2,0.8,0.2,1);position:relative;overflow:hidden;max-width:360px}
.toast{pointer-events:auto}
.toast.show{opacity:1;transform:translateY(0) scale(1)}
.toast.out{opacity:0;transform:translateY(8px) scale(0.9)}
.toast-success{border-color:rgba(0,232,148,.4);box-shadow:0 16px 40px rgba(0,232,148,.15), inset 0 1px 0 rgba(255,255,255,.1)}
.toast-error{border-color:rgba(255,64,96,.5);box-shadow:0 16px 40px rgba(255,64,96,.15), inset 0 1px 0 rgba(255,255,255,.1)}
.toast-warning{border-color:rgba(245,166,35,.5);box-shadow:0 16px 40px rgba(245,166,35,.15), inset 0 1px 0 rgba(255,255,255,.1)}
.toast-info{border-color:rgba(77,124,255,.5);box-shadow:0 16px 40px rgba(77,124,255,.15), inset 0 1px 0 rgba(255,255,255,.1)}
.ti{font-size:15px;flex-shrink:0;margin-top:1px}
.tm{flex:1;font-size:13px;color:var(--t1);line-height:1.4}
.tx{color:rgba(255,255,255,.4);font-size:11px;padding:2px 4px;border-radius:4px;transition:color var(--tf);flex-shrink:0}.tx:hover{color:#fff}
.tp{position:absolute;bottom:0;left:0;height:2px;border-radius:0 0 0 11px;transition-timing-function:linear}
.tp-success{background:var(--green)}.tp-error{background:var(--red)}.tp-warning{background:var(--amber)}.tp-info{background:var(--blue)}

/* MOBILE DOCK */
.mobile-dock{display:none;position:fixed;left:0;right:0;bottom:0;z-index:240;justify-content:space-around;align-items:stretch;gap:2px;padding:6px 8px calc(8px + env(safe-area-inset-bottom,0));background:rgba(5,13,30,.92);backdrop-filter:blur(16px);border-top:1px solid var(--bd2);box-shadow:0 -8px 32px rgba(0,0,0,.45)}
.dock-item{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px;border-radius:10px;color:var(--t4);font-size:9px;font-weight:600;transition:background var(--tf),color var(--tf)}
.dock-item .dock-ic{display:flex;align-items:center;justify-content:center;opacity:.72}
.dock-item:hover,.dock-item:focus-visible{color:var(--t2);background:var(--hover);outline:none}
.dock-item.active{color:var(--blue);background:rgba(77,124,255,.12)}
.dock-item.active .dock-ic{opacity:1}
.dock-lbl{font-family:var(--fm);letter-spacing:.02em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* BULK BAR */
.bulk-bar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--s2);border:1px solid var(--bd2);border-radius:12px;padding:10px 16px;display:flex;align-items:center;gap:9px;z-index:260;box-shadow:0 8px 32px rgba(0,0,0,.5);transition:transform .3s var(--tfb),opacity .25s;opacity:0;pointer-events:none;white-space:nowrap;max-width:calc(100vw - 24px)}
.bulk-bar.active{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.bulk-count{font-size:12px;font-weight:600;color:var(--t1)}
.bulk-sep{width:1px;height:16px;background:var(--bd2);flex-shrink:0}
.bulk-close{color:var(--t3);font-size:13px;padding:3px 5px;border-radius:5px;transition:all var(--tf)}.bulk-close:hover{color:var(--t1);background:var(--hover)}

/* EMPTY STATE */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 24px;color:var(--t3);text-align:center;font-size:13px}
.empty-state > div:not(.empty-icon){font-size:14px;font-weight:700;color:var(--t1)}
.empty-state{border:1px dashed var(--bd2);border-radius:14px;background:linear-gradient(165deg,rgba(77,124,255,.05),rgba(9,19,40,.2));backdrop-filter:blur(4px);box-shadow:inset 0 0 20px rgba(0,0,0,0.2)}
.empty-icon{font-size:24px;background:rgba(255,255,255,0.03);width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin-bottom:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08),0 8px 16px rgba(0,0,0,0.2)}

/* MISC */
.hidden{display:none!important}
.green-text{color:var(--green)}
*:focus-visible{outline:2px solid rgba(77,124,255,.75);outline-offset:2px;border-radius:8px}
.app::before{
  content:'';position:fixed;inset:-20% -20% auto auto;width:45vw;height:45vw;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(77,124,255,.14),transparent 65%);
  filter:blur(10px);animation:softFloat 9s ease-in-out infinite
}
.app::after{
  content:'';position:fixed;inset:auto auto -18% -18%;width:40vw;height:40vw;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(155,114,239,.11),transparent 65%);
  filter:blur(12px);animation:softFloat 11s ease-in-out infinite reverse
}
.sidebar,.main{position:relative;z-index:1}

/* BOOT SHIMMER */
.app.app-booting .card,
.app.app-booting .srv-mcard,
.app.app-booting .topbar{position:relative;overflow:hidden}
.app.app-booting .card::after,
.app.app-booting .srv-mcard::after,
.app.app-booting .topbar::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.08) 45%,transparent 70%);
  background-size:220% 100%;animation:shimmer .9s linear 1
}

/* Loading skeletons */
.sk-row{display:flex;align-items:center;gap:10px;padding:8px 0}
.sk{display:inline-block;border-radius:8px;background:linear-gradient(100deg,rgba(255,255,255,.06) 20%,rgba(255,255,255,.16) 45%,rgba(255,255,255,.06) 70%);background-size:220% 100%;animation:shimmer 1s linear infinite}
.sk-dot{width:28px;height:28px;border-radius:50%}
.sk-lg{height:14px;width:45%}
.sk-sm{height:12px;width:22%}
.sk-btn{height:28px;width:90px;border-radius:7px}

/* Subtle scroll polish */
.content{scroll-behavior:smooth}
.table-wrap,.drawer-body,.log-list,.np-list{scrollbar-gutter:stable}

@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-1px)}
  .kpi:hover,.bstat:hover,.wf-card:hover,.mod-card:hover,.sup-card:hover{transform:translateY(-2px)}
}

@media(min-width:1500px){
  .content{padding:28px 34px 64px}
  .dash-bigstats{gap:14px}
  .kpi-grid,.modules-grid,.wf-grid,.analytics-kpis{gap:14px}
  .card{padding:18px 20px}
  .tb-page-title{font-size:15px}
}

/* RESPONSIVE */
@media(max-width:1100px){
  .dash-bigstats{grid-template-columns:repeat(2,1fr)}
  .analytics-kpis{grid-template-columns:repeat(3,1fr)}
  .cmd-categories{grid-template-columns:repeat(3,1fr)}
  .billing-stats{grid-template-columns:repeat(2,1fr)}
  .bp-features{grid-template-columns:repeat(2,1fr)}
  .sysops-grid{grid-template-columns:repeat(2,1fr)}
  .danger-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);box-shadow:none}
  .sidebar.open{transform:translateX(0);box-shadow:4px 0 60px rgba(0,0,0,.7)}
  .sb-close{display:flex}
  .main{margin-left:0;padding-bottom:calc(56px + env(safe-area-inset-bottom,0))}
  .tb-hamburger{display:flex}
  .tb-m{display:none}
  .sec-head{align-items:stretch}
  .sec-hr{width:100%}
  .sec-hr .btn{flex:1;justify-content:center}
  .dash-lower{grid-template-columns:1fr}
  .health-label{min-width:140px}
  .chart-grid{grid-template-columns:1fr}
  .sup-cards{grid-template-columns:repeat(2,1fr)}
  .mobile-dock{display:flex}
  .toast-wrap,.toast-container{bottom:calc(72px + env(safe-area-inset-bottom,0));right:12px;left:auto;max-width:min(360px,calc(100vw - 24px))}
  .bulk-bar.active{bottom:calc(68px + env(safe-area-inset-bottom,0))}
}
@media(max-width:640px){
  #sec-servers .srv-table-wrap{display:none!important}
  #sec-servers .srv-cards-grid{display:flex}
}
@media(max-width:700px){
  .content{padding:14px 12px 40px}
  .content > .sec{max-width:none}
  .card{padding:14px}
  .sec-title,.team-sec-title{font-size:20px}
  .sec-sub{font-size:11px}
  .dh-content{padding:20px 18px}
  .dh-greeting{font-size:20px}
  .dh-sub{font-size:12px}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .analytics-kpis{grid-template-columns:repeat(2,1fr)}
  .shard-grid{grid-template-columns:repeat(8,1fr)}
  .billing-stats{grid-template-columns:repeat(2,1fr)}
  .drw-kpis{grid-template-columns:repeat(2,1fr)}
  .sdp-kpis{grid-template-columns:repeat(2,1fr)}
  .drw-tabs{position:sticky;top:-1px;z-index:2;background:var(--s1);padding-top:8px}
  #serverDrawer.drawer-control{width:100vw;max-width:100vw}
  .drawer-body{padding:14px 12px}
  .sup-cards{grid-template-columns:1fr}
  .perm-header-row,.perm-row{grid-template-columns:120px repeat(5,1fr)}
  .danger-grid{grid-template-columns:1fr}
  .sysops-grid{grid-template-columns:1fr}
  .kb-body{grid-template-columns:1fr}
  .bulk-bar{width:calc(100% - 24px);bottom:74px;flex-wrap:wrap;padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px))}
  .cmd-categories{grid-template-columns:repeat(2,1fr)}
  .table-wrap{border-left:none;border-right:none;border-radius:0;margin-left:-12px;margin-right:-12px}
  .data-table th,.data-table td{padding:9px 10px}
  .td-act{flex-wrap:wrap}
  .topbar{height:auto;min-height:var(--tbh);padding:8px 12px;align-items:flex-start}
  .tb-l{flex:1;min-width:0}
  .tb-r{margin-left:0;flex-wrap:wrap;justify-content:flex-end}
  .tb-profile .tb-prof-info{display:none}
  .notif-panel,.prof-drop{position:fixed;top:calc(var(--tbh) + 6px);left:10px;right:10px;width:auto;max-width:none}
  .mobile-dock{display:flex;gap:4px;animation:dockIn .24s ease}
  .content{padding-bottom:94px}
  .app::before,.app::after{opacity:.6}
}
@media(max-width:420px){
  .topbar{padding:0 12px;gap:6px}
  .tb-r .tb-sep:first-of-type,.tb-icon:nth-child(2),.tb-sep{display:none}
  .tb-invite{display:none}
  .tb-m.tb-mid{flex-wrap:wrap;max-width:100%}
  .btn{padding:8px 12px}
  .btn-xs{padding:4px 8px}
  .kpi-grid,.dash-bigstats,.analytics-kpis{grid-template-columns:1fr}
  .drw-kpis,.sdp-kpis,.billing-stats,.bp-features{grid-template-columns:1fr}
  .search-box{max-width:100%}
  .tb-page-title{font-size:13px}
  .sec-sub,.muted{font-size:11px}
  .card{border-radius:10px}
  .btn{min-height:34px}
  .mobile-dock{bottom:8px;width:calc(100vw - 12px);padding:6px}
}

@media(max-width:360px){
  .content{padding:10px 8px 92px}
  .topbar{padding:0 8px}
  .sec-head{gap:10px}
  .sec-title,.team-sec-title{font-size:18px}
  .filter-bar{gap:8px}
  .ftab{padding:6px 9px;font-size:11px}
  .btn{padding:7px 10px;font-size:12px}
  .btn-xs{font-size:10px}
}

/* SCROLL-TO-TOP FAB */
.scroll-top-fab{position:fixed;bottom:24px;right:24px;z-index:240;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(77,124,255,.92);color:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:0 6px 20px rgba(0,0,0,.45);backdrop-filter:blur(8px);cursor:pointer;opacity:0;transform:translateY(12px) scale(.88);transition:opacity .22s var(--tf),transform .22s var(--tfb),background .14s;pointer-events:none}
.scroll-top-fab.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.scroll-top-fab:hover{background:rgba(77,124,255,1);transform:translateY(-2px) scale(1.06)}
.scroll-top-fab:active{transform:translateY(0) scale(.96)}
@media(max-width:900px){.scroll-top-fab{bottom:calc(68px + env(safe-area-inset-bottom,0));right:16px}}
@media(max-width:700px){.scroll-top-fab{bottom:calc(82px + env(safe-area-inset-bottom,0));right:12px;width:38px;height:38px}}

/* SESSION TIMER */
.session-timer{display:inline-flex;align-items:center;gap:4px;font-family:var(--fm);font-size:10px;color:var(--t4);padding:0 6px;white-space:nowrap}
.session-timer.warn{color:var(--amber);animation:pulseDim 1.2s ease-in-out infinite}
@keyframes pulseDim{0%,100%{opacity:1}50%{opacity:.5}}

/* PRINT */
@media print{
  body{background:#fff!important;color:#111!important;font-size:11pt}
  .sidebar,.topbar,.mobile-dock,.bulk-bar,.toast-wrap,.toast-container,.scroll-top-fab,.drawer-overlay,.modal-overlay,.palette-overlay,.palette,.kb-sheet,.offline-banner,#navProgress{display:none!important}
  .app{display:block!important}.main{margin-left:0!important}
  .content{padding:0!important;overflow:visible!important}
  .card{break-inside:avoid;box-shadow:none!important;border:1px solid #ddd!important;border-radius:6px}
  .sec{display:block!important;page-break-before:auto}
  .sec.active{display:block!important}
  .data-table th,.data-table td{border:1px solid #ccc!important;padding:4px 6px!important}
  a{color:inherit!important;text-decoration:underline}
  .btn,.btn-xs,.btn-ghost{border:1px solid #888!important;background:transparent!important;color:#111!important}
}

/* HIGH CONTRAST */
@media(forced-colors:active){
  .badge,.hs,.ftab,.stab,.btn,.btn-xs{border:1px solid ButtonText;forced-color-adjust:none}
  .card,.kpi,.toast{border:1px solid ButtonText}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .card:hover,.kpi:hover,.btn:hover,.btn-xs:hover{transform:none!important}
  .card::after,.card::before{display:none!important}
}

/* ════════════════════════════════════════════════════════════════════
   BOT BRANDING
════════════════════════════════════════════════════════════════════ */
#app[data-view="bot-branding"]{--view-tint:rgba(0,212,255,.07)}
#app[data-view="embed-builder"]{--view-tint:rgba(155,114,239,.07)}

/* Identity grid */
.bb-identity-grid{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start;margin-bottom:4px}
@media(max-width:640px){.bb-identity-grid{grid-template-columns:1fr}}

/* Avatar preview circle */
.bb-av-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.bb-av-preview{width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--violet));display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:28px;font-weight:900;color:#fff;border:3px solid rgba(77,124,255,.4);box-shadow:0 0 24px rgba(77,124,255,.35);overflow:hidden;flex-shrink:0;position:relative;background-size:cover;background-position:center;transition:box-shadow .3s}
.bb-av-preview:hover{box-shadow:0 0 36px rgba(77,124,255,.55)}
.bb-av-actions{flex:1}

/* Banner preview */
.bb-banner-wrap{}
.bb-banner-preview{width:100%;height:80px;border-radius:10px;background:var(--s2);border:1px dashed rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;transition:all .3s;overflow:hidden}

/* Colour row */
.bb-color-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bb-color-swatch{width:40px;height:40px;border-radius:8px;border:2px solid rgba(255,255,255,.15);cursor:pointer;padding:0;background:none;flex-shrink:0;transition:transform .2s,box-shadow .2s}
.bb-color-swatch:hover{transform:scale(1.1);box-shadow:0 4px 16px rgba(0,0,0,.3)}
.bb-color-hex{max-width:110px!important;font-family:var(--fm)!important;font-size:12px!important}
.bb-color-presets{display:flex;gap:6px;flex-wrap:wrap}
.bb-cpre{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.15);cursor:pointer;transition:all .15s;flex-shrink:0}
.bb-cpre:hover{transform:scale(1.25);box-shadow:0 2px 10px rgba(0,0,0,.35)}

/* Nickname rows */
.nick-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px;background:var(--s2);border:1px solid var(--bd);border-radius:8px}

/* Theme presets */
.theme-presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.theme-preset{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 10px;border-radius:10px;border:1px solid var(--bd);background:var(--s2);cursor:pointer;transition:all .2s;min-width:64px;font-size:11px;color:var(--t3)}
.theme-preset:hover{border-color:var(--bd2);color:var(--t1);background:var(--hover);transform:translateY(-2px)}
.theme-preset.active{border-color:var(--accent);color:var(--t1);background:rgba(77,124,255,.1);box-shadow:0 0 12px rgba(77,124,255,.2)}
.tp-swatch{width:36px;height:36px;border-radius:8px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.3)}

/* ════════════════════════════════════════════════════════════════════
   EMBED BUILDER
════════════════════════════════════════════════════════════════════ */
.embed-builder-layout{display:grid;grid-template-columns:1fr 420px;gap:20px;align-items:start}
@media(max-width:1100px){.embed-builder-layout{grid-template-columns:1fr}}
.embed-controls{}
.embed-preview-col{}

/* Discord-style embed preview */
.dc-msg-wrap{display:flex;gap:12px;padding:8px 4px}
.dc-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--violet));flex-shrink:0}
.dc-msg-body{flex:1;min-width:0}
.dc-msg-name{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:4px;display:flex;align-items:center;gap:6px}
.dc-bot-tag{font-size:9px;font-weight:700;background:#5865f2;color:#fff;padding:2px 5px;border-radius:4px;letter-spacing:.03em}
.dc-embed{position:relative;background:rgba(30,31,34,0.9);border-radius:4px;max-width:520px;overflow:hidden;margin-top:2px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.dc-embed-pill{position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px}
.dc-embed-inner{padding:10px 14px 10px 16px;display:grid;gap:4px}
.dc-embed-author{font-size:12px;font-weight:600;color:var(--t1)}
.dc-embed-title{font-size:14px;font-weight:700}
.dc-embed-desc{font-size:13px;color:#dcddde;white-space:pre-wrap;word-break:break-word}
.dc-embed-fields{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.dc-ef{flex:0 0 100%;min-width:0}
.dc-ef-inline{flex:0 1 calc(33% - 8px)}
.dc-ef-name{font-size:12px;font-weight:700;color:var(--t1);margin-bottom:2px}
.dc-ef-val{font-size:12px;color:#dcddde}
.dc-embed-image{margin-top:6px}
.dc-embed-thumb{position:absolute;top:10px;right:10px}
.dc-embed-footer{display:flex;align-items:center;gap:6px;margin-top:8px;border-top:1px solid rgba(255,255,255,.06);padding-top:6px}

/* Colour presets in embed */
.eb-color-presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.eb-cpre{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.12);cursor:pointer;transition:all .15s;flex-shrink:0}
.eb-cpre:hover{transform:scale(1.28);box-shadow:0 2px 10px rgba(0,0,0,.35)}

/* Field rows */
.eb-field-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px;background:var(--s2);border:1px solid var(--bd);border-radius:8px}

/* JSON output */
.eb-json-out{background:var(--s1);border:1px solid var(--bd);border-radius:8px;padding:10px 12px;font-family:var(--fm);font-size:10px;line-height:1.6;color:var(--t2);overflow-x:auto;max-height:200px;overflow-y:auto;white-space:pre;word-break:break-all}

/* Preset grid */
.eb-preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:480px){.eb-preset-grid{grid-template-columns:repeat(2,1fr)}}
.eb-preset-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;background:var(--s2);border:1px solid var(--bd);border-radius:10px;cursor:pointer;transition:all .2s;font-size:11px;color:var(--t2);font-family:var(--fb)}
.eb-preset-btn:hover{background:var(--hover);border-color:var(--bd2);color:var(--t1);transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.2)}
.ep-icon{font-size:20px}

/* ════════════════════════════════════════════════════════════════════
   IMPROVED RESPONSIVENESS
════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .dash-bigstats{grid-template-columns:repeat(2,1fr)}
  .dash-lower{grid-template-columns:1fr}
  .qa-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .dash-bigstats{grid-template-columns:1fr 1fr}
  .content{padding:14px 14px 40px}
  .sec-head{flex-direction:column;align-items:flex-start}
  .sec-hr{flex-wrap:wrap;gap:6px}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .bb-identity-grid{grid-template-columns:1fr}
  .embed-builder-layout{grid-template-columns:1fr}
  .filter-bar{flex-direction:column;align-items:flex-start}
  .search-box{max-width:100%}
  .theme-presets{gap:6px}
  .eb-preset-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .dash-bigstats{grid-template-columns:1fr}
  .dh-greeting{font-size:20px}
  .dh-content{padding:18px 16px}
  .kpi-grid{grid-template-columns:1fr}
  .qa-grid{grid-template-columns:repeat(3,1fr)}
}

/* ════════════════════════════════════════════════════════════════════
   IMPROVED SETTINGS & FORMS
════════════════════════════════════════════════════════════════════ */
.settings-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:16px;padding:4px;background:rgba(0,0,0,.15);border-radius:12px;border:1px solid var(--bd)}
.stab{padding:8px 14px;border-radius:9px;font-size:12px;font-weight:600;color:var(--t3);transition:all var(--tf);cursor:pointer;border:1px solid transparent;background:transparent;white-space:nowrap;font-family:var(--fb)}
.stab:hover{color:var(--t1);background:rgba(255,255,255,.06)}
.stab.active{background:rgba(77,124,255,.15);color:var(--blue);border-color:rgba(77,124,255,.3);box-shadow:0 2px 8px rgba(77,124,255,.12)}
.settings-body{display:block}
.settings-body.hidden{display:none}
.sg-title{font-family:var(--fd);font-size:12px;font-weight:800;color:var(--t1);letter-spacing:.04em;margin-bottom:12px;text-transform:uppercase}
.sr{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--bd);flex-wrap:wrap}
.sr:last-of-type{border-bottom:none}
.sr-info{flex:1;min-width:0}
.sr-lbl{font-size:13px;font-weight:600;color:var(--t1)}
.sr-desc{font-size:11px;color:var(--t4);margin-top:2px;line-height:1.4}
.sr-input{min-width:180px;max-width:320px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 12px;color:var(--t1);font-size:13px;font-family:var(--fb);outline:none;transition:border-color var(--tf),box-shadow var(--tf)}
.sr-input:focus{border-color:rgba(77,124,255,.55);box-shadow:0 0 0 3px rgba(77,124,255,.15)}
.sr-select{min-width:160px;max-width:260px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 12px;color:var(--t1);font-size:13px;font-family:var(--fb);outline:none;transition:border-color var(--tf);cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.sr-select:focus{border-color:rgba(77,124,255,.55);box-shadow:0 0 0 3px rgba(77,124,255,.15)}
.dirty-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.3);border-radius:10px;margin-bottom:14px;flex-wrap:wrap;gap:8px;animation:slideInDown .25s ease-out;font-size:13px;color:var(--amber)}
.dirty-bar-right{display:flex;gap:8px}
.mi{width:100%;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 12px;color:var(--t1);font-size:13px;font-family:var(--fb);outline:none;transition:border-color var(--tf)}
.mi:focus{border-color:rgba(77,124,255,.55);box-shadow:0 0 0 3px rgba(77,124,255,.15)}

/* ════════════════════════════════════════════════════════════════════
   IMPROVED SCROLLBAR & GLOBAL POLISH
════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18)}

/* Better focus ring across all interactive elements */
:focus-visible{outline:2px solid rgba(77,124,255,.85);outline-offset:2px;border-radius:4px}

/* Gradient flow animation on primary buttons */
@keyframes gradientFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Improved card hover glow -- tracked via JS mousemove */
.card{--mouse-x:-9999px;--mouse-y:-9999px}

/* Topbar tooltip positioning */
[title]:not(button):not(a):not(input){cursor:default}

/* Toast improvements */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:99999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;font-size:13px;font-weight:500;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1);animation:toastIn .3s cubic-bezier(.34,1.56,.64,1) both;pointer-events:auto;max-width:340px;border:1px solid rgba(255,255,255,.1)}
.toast.toast-success{background:rgba(0,232,148,.15);border-color:rgba(0,232,148,.3);color:#a7f3d0}
.toast.toast-error{background:rgba(255,64,96,.15);border-color:rgba(255,64,96,.3);color:#fecdd3}
.toast.toast-warning{background:rgba(245,166,35,.15);border-color:rgba(245,166,35,.3);color:#fde68a}
.toast.toast-info{background:rgba(77,124,255,.15);border-color:rgba(77,124,255,.3);color:#bfdbfe}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.toast-dismiss{position:absolute;top:8px;right:8px;opacity:.5;cursor:pointer;font-size:12px;background:none;border:none;color:inherit}
.toast-dismiss:hover{opacity:1}

/* Improved modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease;backdrop-filter:blur(8px);padding:20px}
.modal-box{background:rgba(9,19,40,.95);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:28px;max-width:520px;width:100%;box-shadow:0 32px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);animation:modalIn .3s cubic-bezier(.34,1.56,.64,1)}
.modal-title{font-family:var(--fd);font-size:17px;font-weight:800;color:var(--t1);margin-bottom:10px}
.modal-sub{font-size:13px;color:var(--t3);line-height:1.6;margin-bottom:18px}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:20px}

/* Improved topbar view accent line */
#app[data-view="bot-branding"] .topbar{box-shadow:inset 0 -1px 0 rgba(0,212,255,.25)}
#app[data-view="embed-builder"] .topbar{box-shadow:inset 0 -1px 0 rgba(155,114,239,.28)}

/* ════════════════════════════════════════════════════════════════════
   EMPTY STATES
════════════════════════════════════════════════════════════════════ */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:48px 24px;text-align:center;
  background:rgba(255,255,255,.02);border:1px dashed rgba(255,255,255,.1);
  border-radius:var(--cr);min-height:200px;
}
.empty-state-icon{font-size:36px;opacity:.5;animation:softFloat 3s ease-in-out infinite}
.empty-state-title{font-family:var(--fd);font-size:16px;font-weight:700;color:var(--t2)}
.empty-state-sub{font-size:13px;color:var(--t4);max-width:360px;line-height:1.6}
.empty-state-action{margin-top:4px}

/* ════════════════════════════════════════════════════════════════════
   SKELETON LOADERS
════════════════════════════════════════════════════════════════════ */
@keyframes skeletonPulse{0%,100%{opacity:.45}50%{opacity:.85}}
.skel{background:var(--s3);border-radius:6px;animation:skeletonPulse 1.4s ease-in-out infinite}
.skel-text{height:12px;border-radius:4px}
.skel-title{height:18px;border-radius:5px}
.skel-avatar{width:40px;height:40px;border-radius:10px;flex-shrink:0}
.skel-badge{height:20px;width:60px;border-radius:99px}
.skel-btn{height:36px;width:100px;border-radius:10px}
.skel-card{background:rgba(9,19,40,.4);border:1px solid rgba(255,255,255,.06);border-radius:var(--cr);padding:20px 22px}
.skel-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--bd)}
.skel-row:last-child{border-bottom:none}
.skel-lines{flex:1;display:flex;flex-direction:column;gap:8px}

/* ════════════════════════════════════════════════════════════════════
   ERROR STATES
════════════════════════════════════════════════════════════════════ */
.error-banner{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;border-radius:12px;
  background:rgba(255,64,96,.08);border:1px solid rgba(255,64,96,.25);
  color:var(--t2);font-size:13px;line-height:1.55;
  animation:slideInDown .25s ease-out;
  margin-bottom:14px;
}
.error-banner-icon{color:var(--red);font-size:18px;flex-shrink:0;margin-top:1px}
.error-banner-body{flex:1;min-width:0}
.error-banner-title{font-weight:700;color:#fca5a5;margin-bottom:2px}
.error-banner-msg{color:rgba(252,165,165,.8);font-size:12px}
.error-banner-action{flex-shrink:0;align-self:center}
.warn-banner{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;border-radius:12px;
  background:rgba(245,166,35,.08);border:1px solid rgba(245,166,35,.25);
  color:var(--t2);font-size:13px;line-height:1.55;
  animation:slideInDown .25s ease-out;
  margin-bottom:14px;
}
.warn-banner-icon{color:var(--amber);font-size:18px;flex-shrink:0;margin-top:1px}
.info-banner{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;border-radius:12px;
  background:rgba(77,124,255,.08);border:1px solid rgba(77,124,255,.2);
  color:var(--t2);font-size:13px;line-height:1.55;
  margin-bottom:14px;
}

/* ════════════════════════════════════════════════════════════════════
   LOADING STATES
════════════════════════════════════════════════════════════════════ */
.page-loader{
  display:flex;align-items:center;justify-content:center;
  min-height:240px;flex-direction:column;gap:16px;
}
.page-loader-spinner{
  width:32px;height:32px;border-radius:50%;
  border:3px solid rgba(77,124,255,.15);
  border-top-color:var(--blue);
  animation:spin 0.8s linear infinite;
}
.page-loader-text{font-size:13px;color:var(--t4);font-family:var(--fm)}

/* Global progress bar (top of page) */
#navProgress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--violet));z-index:9999;border-radius:0 1px 1px 0;transition:width .25s ease-out,opacity .3s;opacity:0;pointer-events:none;width:0%}
#navProgress.active{opacity:1}
#navProgress.done{opacity:0;width:100%!important}

/* ════════════════════════════════════════════════════════════════════
   IMPROVED MOBILE LAYOUT
════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  :root{--sw:0px}
  .main{margin-left:0}
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .tb-hamburger{display:flex}
  .tb-m.tb-mid{max-width:min(260px,48vw)}
  .topbar{padding:0 14px;gap:8px}
  .content{padding:14px 12px 40px}
  .dash-bigstats{grid-template-columns:1fr 1fr}
  .dash-lower{grid-template-columns:1fr}
  .qa-grid{grid-template-columns:repeat(3,1fr)}
  .sec-head{flex-direction:column;align-items:flex-start}
  .sec-hr{flex-wrap:wrap;gap:6px;width:100%}
  .filter-bar{flex-direction:column;align-items:flex-start;gap:8px}
  .search-box{max-width:100%;width:100%}
  .embed-builder-layout{grid-template-columns:1fr}
  .bb-identity-grid{grid-template-columns:1fr}
  .theme-presets{gap:6px}
  .settings-tabs{gap:3px;padding:3px}
  .stab{padding:7px 10px;font-size:11px}
  .notif-panel,.prof-drop{right:8px;width:calc(100vw - 16px)}
  .table-wrap{border-radius:10px}
  .data-table th,.data-table td{padding:10px 10px}
}
@media(max-width:480px){
  .dash-bigstats{grid-template-columns:1fr}
  .dh-greeting{font-size:20px}
  .dh-content{padding:18px 16px}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .qa-grid{grid-template-columns:repeat(2,1fr)}
  .embed-builder-layout{grid-template-columns:1fr}
  .tb-invite{display:none}
  .tb-r .tb-sep:first-of-type{display:none}
}

/* ════════════════════════════════════════════════════════════════════
   ACCESSIBILITY IMPROVEMENTS
════════════════════════════════════════════════════════════════════ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[aria-hidden="true"]{pointer-events:none}
:focus-visible{outline:2px solid rgba(77,124,255,.85);outline-offset:2px;border-radius:4px}
button:disabled,[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none}
[aria-busy="true"]{cursor:wait}

/* ════════════════════════════════════════════════════════════════════
   SECTION TRANSITIONS (smoother navigation)
════════════════════════════════════════════════════════════════════ */
.sec{display:none}
.sec.active{display:block;animation:secEnter .22s cubic-bezier(.2,.8,.2,1) both}
@keyframes secEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ════════════════════════════════════════════════════════════════════
   IMPROVED AUDIT / LOG ROWS
════════════════════════════════════════════════════════════════════ */
.audit-list{display:flex;flex-direction:column;gap:0}
.audit-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--bd);font-size:12px;color:var(--t3);line-height:1.45}
.audit-row:last-child{border-bottom:none}
.audit-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:4px;background:var(--t5)}
.audit-dot.green{background:var(--green);box-shadow:0 0 6px rgba(0,232,148,.4)}
.audit-dot.red{background:var(--red);box-shadow:0 0 6px rgba(255,64,96,.4)}
.audit-dot.amber{background:var(--amber);box-shadow:0 0 6px rgba(245,166,35,.4)}
.audit-dot.blue{background:var(--blue)}
.audit-meta{flex:1;min-width:0}
.audit-msg{color:var(--t2);margin-bottom:1px}
.audit-time{font-family:var(--fm);font-size:10px;color:var(--t4)}

/* ════════════════════════════════════════════════════════════════════
   IMPROVED PROFILE DROPDOWN
════════════════════════════════════════════════════════════════════ */
.prof-drop{position:absolute;top:calc(var(--tbh) + 8px);right:14px;width:280px;background:rgba(7,14,32,.92);border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);z-index:200;overflow:hidden;animation:slideInDown .2s ease-out;backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px)}
.pd-user{display:flex;align-items:center;gap:12px;padding:16px}
.pd-av{width:42px;height:42px;background:linear-gradient(135deg,var(--blue),var(--violet));border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:14px;font-weight:900;color:#fff;flex-shrink:0;box-shadow:0 4px 12px rgba(77,124,255,.35)}
.pd-name{font-weight:700;font-size:14px;color:var(--t1);margin-bottom:1px}
.pd-email{font-size:11px;color:var(--t4);margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
.pd-tier{font-size:10px;color:var(--violet);font-weight:600;display:flex;align-items:center;gap:4px}
.pd-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.pd-stat{text-align:center;padding:10px 4px}
.pd-sv{font-family:var(--fd);font-size:15px;font-weight:800;color:var(--t1);margin-bottom:2px}
.pd-sl{font-family:var(--fm);font-size:9px;color:var(--t4);text-transform:uppercase;letter-spacing:.06em}
.pd-hr{border:none;border-top:1px solid var(--bd);margin:0}
.pd-item{display:flex;align-items:center;width:100%;padding:10px 16px;font-size:13px;color:var(--t2);transition:all var(--tf);text-align:left;gap:10px;font-family:var(--fb)}
.pd-item:hover{background:rgba(255,255,255,.05);color:var(--t1)}
.pd-item svg{width:14px;height:14px;flex-shrink:0;opacity:.6}
.pd-item:hover svg{opacity:1}
.pd-out{color:#fca5a5!important}.pd-out:hover{background:rgba(255,64,96,.07)!important}

/* ════════════════════════════════════════════════════════════════════
   GRADIENT TEXT UTILITY
════════════════════════════════════════════════════════════════════ */
.text-gradient{background:linear-gradient(135deg,var(--blue),var(--violet),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-gradient-amber{background:linear-gradient(135deg,var(--amber),#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ════════════════════════════════════════════════════════════════════
   SERVER CARD IMPROVEMENTS
════════════════════════════════════════════════════════════════════ */
.srv-plan-badge{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;padding:2px 7px;border-radius:99px;font-family:var(--fm);text-transform:uppercase;letter-spacing:.06em}
.srv-plan-free{background:rgba(255,255,255,.06);color:var(--t4);border:1px solid var(--bd)}
.srv-plan-pro{background:var(--va);color:var(--violet);border:1px solid rgba(155,114,239,.25)}
.srv-plan-premium{background:rgba(245,166,35,.12);color:var(--amber);border:1px solid rgba(245,166,35,.28)}