@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
:root{
  --bg0:#030308;--bg1:#070712;--bg2:#0b0b1a;--bg3:#111126;
  --glass:rgba(255,255,255,.02);--glass2:rgba(255,255,255,.05);--glass3:rgba(255,255,255,.08);
  --p:#6d5dfc;--p2:#9b8eff;--pg:rgba(109,93,252,.12);--pd:rgba(109,93,252,.25);
  --cyan:#00f0ff;--cd:rgba(0,240,255,.1);
  --green:#00ffaa;--gd:rgba(0,255,170,.1);
  --amber:#ffd700;--ad:rgba(255,215,0,.1);
  --rose:#ff4a76;--rd:rgba(255,74,118,.1);
  --t1:#f3f3fb;--t2:rgba(243,243,251,.7);--t3:rgba(243,243,251,.42);--t4:rgba(243,243,251,.22);
  --bdr:rgba(255,255,255,.05);--bdr2:rgba(255,255,255,.11);--bdrp:rgba(109,93,252,.25);
  --r1:6px;--r2:11px;--r3:18px;--r4:24px;--rf:9999px;
  --sh:0 12px 36px rgba(0,0,0,.6);--shp:0 0 25px rgba(109,93,252,.25);
  --ff:'Plus Jakarta Sans',sans-serif;--fd:'Plus Jakarta Sans',sans-serif;--fm:'JetBrains Mono',monospace;
  --tr:all .3s cubic-bezier(.25,.8,.25,1);--trf:all .15s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:15px;}
body{font-family:var(--ff);background:var(--bg0);color:var(--t1);line-height:1.6;overflow:hidden;-webkit-font-smoothing:antialiased;user-select:none;}

/* Custom Scrollbars */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--pd);border-radius:10px;transition:var(--trf);}
::-webkit-scrollbar-thumb:hover{background:var(--p);}

/* TITLEBAR */
.tb{height:42px;background:rgba(3,3,8,.85);border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;padding:0 16px;-webkit-app-region:drag;position:fixed;top:0;left:0;right:0;z-index:1000;backdrop-filter:blur(20px);}
.tb-brand{display:flex;align-items:center;gap:8px;font-family:var(--fd);font-size:13px;font-weight:800;background:linear-gradient(135deg,#fff,#a99fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.tb-dot{width:7px;height:7px;background:var(--p);border-radius:50%;box-shadow:0 0 8px var(--p);animation:pulse 2.5s infinite;}
.tb-btns{display:flex;gap:5px;-webkit-app-region:no-drag;}
.tb-btn{width:26px;height:26px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--glass);color:var(--t3);font-size:11px;transition:var(--trf);}
.tb-btn:hover{background:var(--glass2);color:var(--t1);transform:scale(1.05);}
.tb-btn.cl:hover{background:#ff4a76;color:#fff;}
.tb-btn.mx:hover{background:#00ffaa;color:#fff;}
.tb-btn.mn:hover{background:#ffd700;color:#fff;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 18px;border:none;border-radius:var(--r2);font-family:var(--ff);font-size:13px;font-weight:600;cursor:pointer;transition:var(--tr);overflow:hidden;position:relative;}
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: all 0.6s ease;
}
.btn:hover::before { left: 100%; }
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(109,93,252,.35);}
.btn:active{transform:translateY(0) scale(.97);}

.btn-p{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;box-shadow:var(--shp);}
.btn-p:hover{filter:brightness(1.1);box-shadow:0 6px 28px rgba(109,93,252,.55);}
.btn-s{background:var(--glass2);color:var(--t1);border:1px solid var(--bdr);}
.btn-s:hover{background:var(--glass3);border-color:var(--bdr2);}
.btn-g{background:transparent;color:var(--t2);border:1px solid var(--bdr);}
.btn-g:hover{color:var(--t1);border-color:var(--bdr2);background:var(--glass);}
.btn-green{background:var(--gd);color:var(--green);border:1px solid rgba(0,255,170,.3);}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:var(--r1);}

/* INPUTS */
.inp{width:100%;padding:11px 14px;background:var(--glass);border:1px solid var(--bdr);border-radius:var(--r2);color:var(--t1);font-family:var(--ff);font-size:13px;outline:none;transition:var(--tr);backdrop-filter:blur(8px);}
.inp:focus{border-color:var(--p);background:rgba(109,93,252,.06);box-shadow:0 0 15px rgba(109,93,252,.15);}
.inp::placeholder{color:var(--t4);}
textarea.inp{resize:vertical;min-height:80px;}
select.inp{cursor:pointer;}

/* CARDS */
.card{background:var(--glass);border:1px solid var(--bdr);border-radius:var(--r3);padding:20px;transition:var(--tr);backdrop-filter:blur(15px);}
.card:hover{background:var(--glass2);border-color:var(--bdr2);transform:translateY(-3px);box-shadow:var(--sh);}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--rf);font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
.badge-p   {background:var(--pg);color:var(--p2);  border:1px solid var(--pd);}
.badge-cyan{background:var(--cd);color:var(--cyan); border:1px solid rgba(0,240,255,.25);}
.badge-green{background:var(--gd);color:var(--green);border:1px solid rgba(0,255,170,.25);}
.badge-amber{background:var(--ad);color:var(--amber);border:1px solid rgba(255,215,0,.25);}
.badge-rose {background:var(--rd);color:var(--rose); border:1px solid rgba(255,74,118,.25);}

/* SPINNER */
.spin{display:inline-block;width:20px;height:20px;border:2px solid var(--bdr2);border-top-color:var(--p);border-radius:50%;animation:spin .7s linear infinite;}
.spin-sm{width:14px;height:14px;}

/* TOAST */
#toasts{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;}
.toast{padding:11px 18px;border-radius:var(--r2);font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px;animation:slideUp .3s ease;min-width:240px;backdrop-filter:blur(12px);border:1px solid;}
.toast.s{background:rgba(0,255,170,.12);color:var(--green);border-color:rgba(0,255,170,.2);}
.toast.e{background:rgba(255,74,118,.12);color:var(--rose); border-color:rgba(255,74,118,.2);}
.toast.i{background:var(--pg);color:var(--p2);border-color:var(--pd);}

/* MODAL */
.modal-bg{position:fixed;inset:0;background:rgba(3,3,8,.8);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;z-index:800;animation:fadeIn .2s ease;}
.modal{background:linear-gradient(135deg,var(--bg2),var(--bg1));border:1px solid rgba(109,93,252,.2);border-radius:var(--r4);padding:30px;width:92%;box-shadow:0 30px 80px rgba(0,0,0,.7),var(--shp);animation:popIn .3s ease;}

/* LABEL */
.lbl{font-size:11px;font-weight:800;color:var(--t3);letter-spacing:.8px;text-transform:uppercase;margin-bottom:6px;display:block;}

/* ANIMATIONS */
@keyframes spin   {to{transform:rotate(360deg);}}
@keyframes pulse  {0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
@keyframes fadeIn {from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn  {from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes vIn    {from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}

/* BG NOISE */
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.018'/%3E%3C/svg%3E");pointer-events:none;z-index:0;}