*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --nv:#0B1829;--cd:#0F2235;--cd2:#132840;
  --tl:#028A8A;--tl2:#02C39A;--or:#FF6B35;
  --bl:#3B9EE8;--bl2:#5BBAFF;--am:#F5C842;
  --gy:#8BA4BC;--gy2:#4A6480;--gy3:#2A4560;
  --wh:#F0F6FF;--of:#C8DDEF;--rd:#E05A5A;--gn:#2ECC88;--dk:#071220;
}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;background:var(--nv);color:var(--wh);overflow-x:hidden;}
a{text-decoration:none;}

/* ── PAGES ── */
.pg{display:none !important;}
.pg.on{display:block !important;animation:pgFade .2s ease;}
@keyframes pgFade{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
@keyframes rot{to{transform:rotate(360deg);}}


*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --nv:#0B1829;--cd:#0F2235;--cd2:#132840;
  --tl:#028A8A;--tl2:#02C39A;--or:#FF6B35;
  --bl:#3B9EE8;--bl2:#5BBAFF;--am:#F5C842;
  --gy:#8BA4BC;--gy2:#4A6480;--gy3:#2A4560;
  --wh:#F0F6FF;--of:#C8DDEF;--rd:#E05A5A;--gn:#2ECC88;
  --dk:#071220;
}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;background:var(--nv);color:var(--wh);min-height:100vh;overflow-x:hidden;}


@keyframes fi{from{opacity:0;transform:translateY(5px);}to{opacity:1;}}
/* inputs */
.inp{width:100%;padding:11px 14px;border-radius:10px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);color:var(--wh);font-size:13px;font-family:'DM Sans',sans-serif;transition:all .2s;outline:none;}
.inp:focus{border-color:rgba(2,195,154,0.5);background:rgba(2,195,154,0.04);}
.inp::placeholder{color:var(--gy2);}
.inp.err{border-color:rgba(224,90,90,0.6);background:rgba(224,90,90,0.04);}
.inp.ok{border-color:rgba(2,195,154,0.4);}
.fw{margin-bottom:13px;}
.lb{display:block;font-size:10px;color:var(--gy);text-transform:uppercase;letter-spacing:.8px;margin-bottom:5px;font-weight:500;}
.et{display:none;font-size:11px;color:var(--rd);margin-top:4px;}
.et.on{display:block;}
/* buttons */
.btn{padding:11px 22px;border-radius:10px;border:none;font-size:13px;font-weight:500;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.btn:hover{transform:translateY(-1px);}
.btn-t{background:linear-gradient(135deg,var(--tl),var(--tl2));color:#fff;}
.btn-o{background:linear-gradient(135deg,#E85A28,var(--or));color:#fff;}
.btn-g{background:transparent;border:1px solid rgba(255,255,255,0.13);color:var(--of);}
.btn-g:hover{border-color:rgba(255,255,255,0.3);}
.btn-f{width:100%;padding:13px;}
.btn-s{padding:7px 16px;font-size:12px;border-radius:8px;}
.btn-d{opacity:.7;cursor:not-allowed!important;pointer-events:none;}
.sp{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,0.25);border-top-color:#fff;border-radius:50%;animation:spi .7s linear infinite;}
@keyframes spi{to{transform:rotate(360deg);}}
/* banner */
.bn{padding:10px 14px;border-radius:9px;font-size:12px;margin-bottom:13px;display:none;align-items:center;gap:8px;line-height:1.5;}
.bn.on{display:flex;}
.bn.er{background:rgba(224,90,90,0.08);border:1px solid rgba(224,90,90,0.22);color:#F09090;}
.bn.ok{background:rgba(2,195,154,0.08);border:1px solid rgba(2,195,154,0.22);color:var(--tl2);}
/* toast */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(2,195,154,0.12);border:1px solid rgba(2,195,154,0.3);border-radius:10px;padding:10px 22px;font-size:12px;color:var(--tl2);z-index:9999;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap;backdrop-filter:blur(8px);}
#toast.on{opacity:1;}
/* card */
.card{background:var(--cd);border-radius:16px;border:1px solid rgba(255,255,255,0.06);padding:1.3rem;}
/* badges */
.badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;padding:2px 9px;border-radius:100px;font-weight:500;}
.bt{background:rgba(2,195,154,.1);border:1px solid rgba(2,195,154,.22);color:var(--tl2);}
.bo{background:rgba(255,107,53,.1);border:1px solid rgba(255,107,53,.22);color:var(--or);}
.bg{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--gy);}
.bb{background:rgba(59,158,232,.1);border:1px solid rgba(59,158,232,.22);color:var(--bl2);}
.bam{background:rgba(245,200,66,.1);border:1px solid rgba(245,200,66,.22);color:var(--am);}
.bbl{background:rgba(59,158,232,.1);border:1px solid rgba(59,158,232,.22);color:var(--bl2);}
.bu{background:rgba(74,100,128,.2);border:1px solid rgba(74,100,128,.3);color:var(--gy2);}
/* pw */
.pw-bars{display:flex;gap:3px;margin-top:5px;}
.pw-bar{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.08);transition:background .3s;}
.pw-h{font-size:10px;color:var(--gy2);margin-top:3px;}
/* otp */
.otp-row{display:flex;gap:10px;justify-content:center;margin:20px 0;}
.ob{width:48px;height:56px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--wh);font-size:26px;font-weight:700;text-align:center;font-family:'Syne',sans-serif;transition:all .2s;outline:none;}
.ob:focus{border-color:var(--tl2);background:rgba(2,195,154,.07);}
.ob.fill{border-color:rgba(2,195,154,.4);background:rgba(2,195,154,.06);}
.ob.err{border-color:var(--rd);}
/* steps */
.sr{display:flex;align-items:center;max-width:640px;margin:0 auto;padding:1.25rem 1.5rem 0;width:100%;}
.st{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;}
.st::after{content:'';position:absolute;top:15px;left:50%;width:100%;height:1.5px;background:rgba(255,255,255,.08);z-index:0;}
.st:last-child::after{display:none;}
.st.done::after{background:var(--tl2);}
.sd{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.12);background:var(--nv);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;z-index:1;transition:all .3s;}
.st.done .sd{background:var(--tl);border-color:var(--tl2);color:#fff;}
.st.active .sd{background:var(--cd);border-color:var(--tl2);color:var(--tl2);}
.sl{font-size:10px;color:var(--gy2);margin-top:4px;text-align:center;}
.st.active .sl{color:var(--tl2);}.st.done .sl{color:var(--gy);}
/* ob card */
.obc{background:var(--cd);border-radius:18px;border:1px solid rgba(255,255,255,.07);padding:1.75rem;width:100%;max-width:580px;margin:0 auto;}
/* cert check */
.cc{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(13,27,42,.4);cursor:pointer;transition:all .2s;}
.cc:hover{border-color:rgba(255,107,53,.3);}
.cc.on{border-color:rgba(255,107,53,.4);background:rgba(255,107,53,.06);}
.ccb{width:15px;height:15px;border-radius:4px;border:1.5px solid rgba(255,255,255,.2);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;}
.cc.on .ccb{background:var(--or);border-color:var(--or);color:#fff;}
/* verify opts */
.vo{padding:1rem;border-radius:11px;border:1px solid rgba(255,255,255,.08);background:rgba(13,27,42,.5);cursor:pointer;transition:all .2s;text-align:center;}
.vo:hover{border-color:rgba(2,195,154,.3);}
.vo.on{border-color:var(--tl2);background:rgba(2,195,154,.07);}
/* checklist */
.ci{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:rgba(13,27,42,.4);margin-bottom:8px;cursor:pointer;transition:all .2s;}
.ci.done{border-color:rgba(2,195,154,.25);background:rgba(2,195,154,.04);}
.cd{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;transition:all .2s;}
.ci.done .cd{background:var(--tl2);border-color:var(--tl2);color:var(--nv);}
/* nav */
.lnav{display:flex;align-items:center;justify-content:space-between;padding:0 2.5rem;height:60px;background:rgba(11,24,41,.97);border-bottom:1px solid rgba(2,138,138,.15);position:sticky;top:0;z-index:100;backdrop-filter:blur(10px);}
/* sidebar */
.sb{width:215px;background:var(--cd);border-right:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;padding:.85rem .7rem;gap:2px;flex-shrink:0;min-height:100vh;}
.sb-logo{padding:.3rem .4rem .9rem;display:flex;}
.sb-logo img{height:26px;width:auto;}
.sl2{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;font-size:12px;color:var(--gy);cursor:pointer;transition:all .18s;border:none;background:transparent;width:100%;text-align:left;font-family:'DM Sans',sans-serif;text-decoration:none;}
.sl2:hover{background:rgba(255,255,255,.04);color:var(--wh);}
.sl2.on{background:rgba(2,195,154,.09);color:var(--tl2);}
.ico{width:16px;text-align:center;font-size:13px;flex-shrink:0;}
.nb{min-width:16px;height:16px;background:var(--or);border-radius:100px;font-size:9px;font-weight:700;color:#fff;text-align:center;line-height:16px;margin-left:auto;padding:0 4px;}
/* dashboard */
.dbm{flex:1;overflow-y:auto;padding:1.5rem 1.7rem;}
.dv{display:none;}.dv.on{display:block;}
.dt{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.3rem;gap:1rem;}
.dn{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;}
.ds{font-size:12px;color:var(--gy);margin-top:2px;}
/* metrics */
.mets{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-bottom:1.1rem;}
.met{background:var(--cd);border-radius:12px;border:1px solid rgba(255,255,255,.06);padding:1rem;}
.mv{font-family:'Syne',sans-serif;font-size:26px;font-weight:800;line-height:1;}
.ml{font-size:11px;color:var(--gy);margin-top:4px;}
.ms{font-size:10px;margin-top:3px;}
.ms.up{color:var(--gn);}.ms.w{color:var(--or);}
/* grids */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.1rem;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.85rem;}
/* table */
.tbl{width:100%;border-collapse:collapse;}
.tbl th{font-size:10px;color:var(--gy2);text-transform:uppercase;letter-spacing:.8px;padding:7px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06);}
.tbl td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.04);font-size:12px;vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr:hover td{background:rgba(255,255,255,.015);}
/* progress */
.prog{height:5px;background:rgba(255,255,255,.07);border-radius:100px;}
.pf{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--tl),var(--tl2));transition:width .6s;}
/* chips */
.chip{padding:5px 13px;border-radius:100px;font-size:11px;cursor:pointer;border:1px solid rgba(255,255,255,.1);background:transparent;color:var(--gy);font-family:'DM Sans',sans-serif;transition:all .2s;}
.chip.on{background:rgba(2,195,154,.1);border-color:rgba(2,195,154,.35);color:var(--tl2);}
/* status pills */
.spi{font-size:10px;padding:3px 9px;border-radius:100px;font-weight:500;}
.sp-n{background:rgba(2,195,154,.09);color:var(--tl2);}
.sp-s{background:rgba(245,200,66,.1);color:var(--am);}
.sp-r{background:rgba(224,90,90,.08);color:var(--rd);}
/* action btns */
.ab{padding:5px 11px;border-radius:7px;font-size:11px;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .2s;border:none;font-weight:500;}
.ab-s{background:rgba(2,195,154,.1);color:var(--tl2);}
.ab-s:hover{background:rgba(2,195,154,.18);}
.ab-b{background:rgba(255,107,53,.1);border:1px solid rgba(255,107,53,.22);color:var(--or);}
.ab-b:hover{background:rgba(255,107,53,.18);}
.ab-d{background:rgba(255,255,255,.04);color:var(--gy2);cursor:default;}
/* wallet */
.wc{background:linear-gradient(135deg,rgba(2,138,138,.15),rgba(2,195,154,.08));border:1px solid rgba(2,195,154,.2);border-radius:16px;padding:1.25rem;}
/* job card */
.jc{background:var(--cd);border-radius:12px;border:1px solid rgba(255,255,255,.06);padding:1rem;margin-bottom:.75rem;transition:all .2s;}
.jc:hover{border-color:rgba(2,195,154,.22);transform:translateY(-1px);}
/* auth split */
.as{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;}
.al{background:var(--dk);padding:3rem;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;}
.ar{background:var(--nv);display:flex;align-items:center;justify-content:center;padding:2rem;overflow-y:auto;}
.ab2{width:100%;max-width:400px;}
.at{padding:.6rem 1.25rem;font-size:13px;color:var(--gy);cursor:pointer;border:none;background:transparent;border-bottom:2px solid transparent;transition:all .2s;font-family:'DM Sans',sans-serif;font-weight:500;}
.at.on{color:var(--tl2);border-bottom-color:var(--tl2);}
/* feat row */
.feat{display:flex;align-items:flex-start;gap:11px;margin-bottom:14px;}
.fi{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
/* scrollbar */
::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:4px;}


/* ── DASHBOARD ── */
.db-shell{display:flex;min-height:100vh;}
.dbm{flex:1;min-width:0;overflow-y:auto;padding:1.5rem 1.7rem;}

/* ── MOBILE ── */
.mob-hdr{display:none;align-items:center;justify-content:space-between;
  padding:.85rem 1.1rem;background:var(--cd);
  border-bottom:1px solid rgba(255,255,255,.05);
  position:sticky;top:0;z-index:100;}
.mob-tog{background:none;border:none;color:var(--gy);font-size:22px;cursor:pointer;}
.mob-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;}
.mob-ov.on{display:block;}
.sb-drawer{
  position:fixed !important;
  left:0;top:0;bottom:0;z-index:300;
  width:240px;
  transform:translateX(-100%);
  transition:transform .25s ease;
  background:var(--cd);
  display:flex;flex-direction:column;
  overflow-y:auto;
}
.sb-drawer.open{transform:translateX(0);}

/* ── AI ── */
.ai-box{background:rgba(2,195,154,.05);border:1px solid rgba(2,195,154,.2);
  border-radius:14px;padding:1.25rem;margin-top:1rem;
  font-size:13px;line-height:1.75;color:var(--of);}
.ai-box.err{background:rgba(224,90,90,.06);border-color:rgba(224,90,90,.25);color:var(--rd);}
.ai-sp{display:inline-block;width:13px;height:13px;
  border:2px solid rgba(2,195,154,.3);border-top-color:var(--tl2);
  border-radius:50%;animation:rot .7s linear infinite;
  vertical-align:middle;margin-left:4px;}

/* ── QUIZ ── */
.qopt{display:flex;align-items:center;gap:10px;padding:10px 13px;
  border-radius:9px;border:1px solid rgba(255,255,255,.08);
  margin-bottom:7px;cursor:pointer;font-size:13px;
  transition:all .18s;user-select:none;}
.qopt:hover{border-color:rgba(2,195,154,.35);background:rgba(2,195,154,.04);}
.qopt.sel{border-color:rgba(2,195,154,.55);background:rgba(2,195,154,.08);}
.qopt.right{border-color:rgba(46,204,136,.55);background:rgba(46,204,136,.07);}
.qopt.wrong{border-color:rgba(224,90,90,.45);background:rgba(224,90,90,.06);}
.qbullet{width:15px;height:15px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.2);flex-shrink:0;transition:all .18s;}
.qopt.sel .qbullet{background:var(--tl2);border-color:var(--tl2);}
.qopt.right .qbullet{background:var(--gn);border-color:var(--gn);}
.qopt.wrong .qbullet{background:var(--rd);border-color:var(--rd);}

/* ── MISC ── */
.sbar{height:4px;border-radius:100px;background:rgba(255,255,255,.08);}
.sbar-f{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--tl),var(--tl2));}
.ni{display:flex;align-items:flex-start;gap:12px;padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.05);}
.ni:last-child{border-bottom:none;}
.chip{padding:6px 16px;border-radius:100px;font-size:12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.1);background:transparent;
  color:var(--gy);font-family:'DM Sans',sans-serif;transition:all .2s;white-space:nowrap;}
.chip:hover{border-color:rgba(2,195,154,.35);color:var(--wh);}
.chip.on{background:rgba(2,195,154,.12);border-color:rgba(2,195,154,.45);
  color:var(--tl2);font-weight:500;}

@media(max-width:768px){
  .mob-hdr{display:flex !important;}
  .db-shell > .sb{display:none !important;}
  .dbm{padding:1rem !important;}
  .mets{grid-template-columns:1fr 1fr !important;}
  .g2,.g3{grid-template-columns:1fr !important;}
  .as{grid-template-columns:1fr !important;}
  .al{display:none !important;}
}
@media(max-width:480px){
  .g2,.g3{grid-template-columns:1fr !important;}
  .otp-row{gap:6px;}
  .obox{width:40px;height:48px;font-size:20px;}
}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px;}

/* ── MESSAGING ── */
.msg-thread:hover { background: rgba(255,255,255,.03) !important; }
.chat-thread { display:flex;flex-direction:column;gap:.75rem; }