:root{
  --p:#16C35F;--p2:#0EA54F;--p3:#0D8C42;
  --a:#FF6B2C;--a2:#E55A20;
  --gp:rgba(22,195,95,.22);
  --bg:#F2FBF6;--bg2:#FFFFFF;--bg3:#EAF6F0;
  --card:#FFFFFF;
  --ink:#0A1F12;--ink2:#2D5040;--ink3:#6B9080;--ink4:#A8C4B4;
  --line:#D5EDE0;
  --r:14px;--r2:22px;--r3:28px;--rf:9999px;
  --sw:264px;--th:62px;--bn:66px;
  --ff:'Plus Jakarta Sans',sans-serif;
  --sh1:0 2px 12px rgba(0,0,0,.06);
  --sh2:0 8px 32px rgba(0,0,0,.1);
  --shg:0 6px 24px rgba(22,195,95,.22);
  --ease:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
[data-theme=dark]{
  --bg:#060F09;--bg2:#0C1A10;--bg3:#0F1E13;
  --card:#0C1A10;
  --ink:#E4F5EC;--ink2:#7BB898;--ink3:#4D7A60;--ink4:#2A4D38;
  --line:#172B1E;
  --sh1:0 2px 12px rgba(0,0,0,.35);
  --sh2:0 8px 32px rgba(0,0,0,.55);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{font-family:var(--ff);background:var(--bg);color:var(--ink);min-height:100vh;overflow-x:hidden;transition:background .3s,color .3s;font-size:14px;line-height:1.5}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--p);border-radius:99px;opacity:.5}

/* SPLASH */
#splash{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .4s}
#splash.hide{opacity:0;pointer-events:none}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:8px}
#splash-logo{width:76px;height:76px;border-radius:22px;object-fit:contain;box-shadow:var(--shg);animation:splashPop .5s var(--spring)}
@keyframes splashPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
.s-name{font-size:26px;font-weight:900;color:var(--p);letter-spacing:-.5px;margin-top:6px}
.s-ver{font-size:11px;font-weight:700;color:var(--ink4);background:var(--bg3);padding:2px 8px;border-radius:var(--rf);border:1px solid var(--line)}
.s-tag{font-size:12px;color:var(--ink3);margin-top:2px}
.s-bar{width:160px;height:3px;background:var(--bg3);border-radius:var(--rf);overflow:hidden;margin-top:16px}
.s-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--p),var(--a));border-radius:var(--rf);transition:width .1s linear}

/* AUTH */
#auth-wrap{display:none;min-height:100vh;position:relative;align-items:center;justify-content:center;padding:20px;overflow:hidden}
.auth-bg-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.25;pointer-events:none}
.blob1{width:400px;height:400px;background:var(--p);top:-100px;right:-100px}
.blob2{width:300px;height:300px;background:var(--a);bottom:-60px;left:-60px}
.auth-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);padding:36px 32px;width:100%;max-width:420px;box-shadow:var(--sh2);position:relative;z-index:1;animation:fadeUp .4s var(--spring)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.auth-logo{text-align:center;margin-bottom:26px}
.auth-logo-ring{width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg,rgba(22,195,95,.15),rgba(255,107,44,.1));border:2px solid var(--line);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;padding:8px}
.auth-logo-ring img{width:42px;height:42px;object-fit:contain}
.auth-logo h1{font-size:22px;font-weight:900;color:var(--ink);letter-spacing:-.4px}
.auth-logo p{font-size:12px;color:var(--ink3);margin-top:3px}
.a-tabs{display:flex;background:var(--bg3);border-radius:10px;padding:3px;margin-bottom:22px;gap:3px}
.a-tab{flex:1;padding:9px;text-align:center;font-size:13px;font-weight:700;color:var(--ink3);cursor:pointer;border-radius:8px;transition:all .2s;border:none;background:none;font-family:var(--ff)}
.a-tab.on{background:var(--p);color:#fff}
.afl{display:flex;flex-direction:column;gap:12px}
.afg{display:flex;flex-direction:column;gap:5px}
.afg label{font-size:11px;font-weight:800;color:var(--ink3);text-transform:uppercase;letter-spacing:.8px}
.afi{width:100%;padding:11px 14px;background:var(--bg3);border:1.5px solid var(--line);border-radius:9px;font-size:13.5px;color:var(--ink);outline:none;transition:all .2s;font-family:var(--ff)}
.afi:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(22,195,95,.1);background:var(--bg2)}
.afi::placeholder{color:var(--ink4)}
.pass-wrap{position:relative}
.pass-wrap .afi{padding-right:42px}
.pass-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--ink3);display:flex;align-items:center;transition:color .2s}
.pass-eye:hover{color:var(--p)}
.strength-wrap{margin-top:-4px}
.strength-bar{height:3px;border-radius:var(--rf);transition:all .3s;background:var(--line)}
.strength-label{font-size:10.5px;margin-top:4px;font-weight:700}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 20px;border-radius:9px;font-size:13.5px;font-weight:700;cursor:pointer;transition:all .2s var(--ease);border:none;font-family:var(--ff);white-space:nowrap;text-decoration:none}
.btn-p{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;width:100%;box-shadow:var(--shg)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 10px 28px var(--gp)}
.btn-p:active{transform:translateY(0)}
.btn-g{background:var(--bg3);color:var(--ink);border:1.5px solid var(--line);width:100%}
.btn-g:hover{border-color:var(--p);color:var(--p)}
.btn-sm{padding:7px 13px;font-size:12px}
.btn-xs{padding:5px 9px;font-size:11px}
.btn-out{background:transparent;border:1.5px solid var(--line);color:var(--ink2)}
.btn-out:hover{border-color:var(--p);color:var(--p)}
.btn-grn{background:var(--p);color:#fff}
.btn-grn:hover{background:var(--p2)}
.btn-org{background:var(--a);color:#fff}
.btn-red{background:#FEF2F2;color:#EF4444;border:1.5px solid #FECACA}
.btn-red:hover{background:#EF4444;color:#fff}
.btn-red2{background:#EF4444;color:#fff}
.btn-red2:hover{background:#DC2626}
.w100{width:100%}
.divider{display:flex;align-items:center;gap:10px;color:var(--ink4);font-size:11px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}
.alink{text-align:center;font-size:12.5px;color:var(--ink3)}
.alink a{color:var(--p);cursor:pointer;font-weight:700;text-decoration:none}

/* APP */
#app-wrap{display:none;min-height:100vh}
.sbo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99;backdrop-filter:blur(3px)}
.sbo.on{display:block}

/* SIDEBAR */
.sidebar{width:var(--sw);background:var(--card);border-right:1px solid var(--line);position:fixed;left:0;top:0;bottom:0;z-index:100;display:flex;flex-direction:column;transition:transform .3s var(--ease)}
.sb-top{padding:18px 16px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.sb-logo{width:32px;height:32px;border-radius:9px;object-fit:contain;flex-shrink:0}
.sb-brand{font-size:17px;font-weight:900;color:var(--p);letter-spacing:-.3px;line-height:1.2}
.sb-ver{font-size:9.5px;font-weight:700;color:var(--ink4)}
.sb-nav{flex:1;padding:10px 8px;overflow-y:auto}
.sb-sec{font-size:9px;font-weight:800;color:var(--ink4);text-transform:uppercase;letter-spacing:1.8px;padding:10px 10px 5px}
.ni{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;cursor:pointer;transition:all .18s;color:var(--ink3);font-size:13px;font-weight:600;margin-bottom:1px;position:relative;user-select:none}
.ni:hover{background:rgba(22,195,95,.07);color:var(--p)}
.ni.on{background:rgba(22,195,95,.1);color:var(--p);font-weight:800}
.ni.on::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:3px;background:var(--p);border-radius:0 3px 3px 0}
.ni .ico{width:16px;text-align:center;flex-shrink:0;display:flex;align-items:center}
.ni .nbadge{margin-left:auto;background:var(--a);color:#fff;font-size:9px;font-weight:800;padding:2px 6px;border-radius:var(--rf);min-width:17px;text-align:center}
.sb-user{padding:11px 10px;border-top:1px solid var(--line);display:flex;align-items:center;gap:9px;cursor:pointer;transition:background .2s}
.sb-user:hover{background:var(--bg3)}
.av{width:34px;height:34px;border-radius:50%;flex-shrink:0;object-fit:cover;background:linear-gradient(135deg,var(--p),var(--a));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px}
.sb-uname{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-uemail{font-size:10px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* TOPBAR */
.main{margin-left:var(--sw);display:flex;flex-direction:column;min-height:100vh}
.topbar{height:var(--th);background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 20px;gap:10px;position:sticky;top:0;z-index:50}
.tb-title{font-size:17px;font-weight:900;flex:1;letter-spacing:-.3px}
.ib{width:36px;height:36px;border-radius:9px;border:none;background:var(--bg3);color:var(--ink2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;position:relative;flex-shrink:0}
.ib:hover{background:rgba(22,195,95,.1);color:var(--p)}
.ib .dot{position:absolute;top:4px;right:4px;width:15px;height:15px;background:var(--a);color:#fff;border-radius:50%;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--card)}
.tb-av-wrap{cursor:pointer}
.tb-av{width:32px!important;height:32px!important;font-size:12px!important;border:2px solid var(--line)}

/* PAGE */
.page{flex:1;padding:22px 20px;padding-bottom:calc(22px + var(--bn))}

/* BOTTOM NAV */
.bnav{display:none;position:fixed;bottom:0;left:0;right:0;height:var(--bn);background:var(--card);border-top:1px solid var(--line);z-index:100;align-items:center;padding:0 4px}
.bni{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;padding:6px 4px;cursor:pointer;transition:color .2s;color:var(--ink4);border-radius:9px;position:relative}
.bni .bico{font-size:20px;transition:transform .2s var(--spring);display:flex;align-items:center;justify-content:center}
.bni .blbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.bni.on{color:var(--p)}
.bni.on .bico{transform:scale(1.18)}
.bni .bdot{position:absolute;top:4px;right:calc(50% - 16px);background:var(--a);color:#fff;font-size:8px;font-weight:800;padding:1px 4px;border-radius:var(--rf)}
.fab{position:fixed;bottom:calc(var(--bn) + 12px);right:16px;width:50px;height:50px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;cursor:pointer;z-index:150;box-shadow:0 5px 18px var(--gp);display:flex;align-items:center;justify-content:center;transition:all .25s var(--spring)}
.fab:hover{transform:scale(1.1) rotate(45deg)}
.fab:active{transform:scale(.94)}

/* CARDS */
.card{background:var(--card);border-radius:var(--r);border:1px solid var(--line);transition:background .3s}
.cp{padding:18px}
.card:hover{box-shadow:var(--sh1)}

/* STAT */
.sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:11px;margin-bottom:18px}
.sc{border-radius:var(--r);padding:16px;border:1px solid var(--line);background:var(--card);transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden}
.sc:hover{transform:translateY(-2px);box-shadow:var(--sh1)}
.sc-glow{position:absolute;top:-10px;right:-10px;width:60px;height:60px;border-radius:50%;opacity:.1}
.sc-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:11px}
.g-ico{background:rgba(22,195,95,.12);color:var(--p)}
.o-ico{background:rgba(255,107,44,.12);color:var(--a)}
.b-ico{background:rgba(59,130,246,.12);color:#3B82F6}
.pu-ico{background:rgba(139,92,246,.12);color:#8B5CF6}
.sc-lbl{font-size:10px;font-weight:800;color:var(--ink3);text-transform:uppercase;letter-spacing:.8px}
.sc-val{font-size:19px;font-weight:900;color:var(--ink);margin-top:4px;line-height:1.15}
.sc-sub{font-size:10.5px;color:var(--ink3);margin-top:3px}

/* TX */
.txl{display:flex;flex-direction:column;gap:5px}
.txi{display:flex;align-items:center;gap:11px;padding:11px 12px;background:var(--bg3);border-radius:9px;transition:all .18s;cursor:pointer;border:1px solid transparent}
.txi:hover{background:rgba(22,195,95,.06);border-color:rgba(22,195,95,.14)}
.tx-ico{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.tx-inf{flex:1;min-width:0}
.tx-nm{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-ct{font-size:10.5px;color:var(--ink3);margin-top:1px}
.tx-am{font-size:13.5px;font-weight:900;flex-shrink:0}
.tx-am.inc{color:var(--p)}
.tx-am.exp{color:#EF4444}
.tx-del{background:none;border:none;color:var(--ink4);cursor:pointer;padding:4px 7px;border-radius:6px;transition:all .18s;display:flex;align-items:center;flex-shrink:0}
.tx-del:hover{color:#EF4444;background:rgba(239,68,68,.08)}

/* SAVINGS */
.savc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:10px;transition:all .2s}
.savc:hover{box-shadow:var(--sh1);transform:translateY(-1px)}
.savc-h{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.savc-nm{font-size:14px;font-weight:800}
.savc-tg{font-size:11px;color:var(--ink3);margin-top:2px}
.savc-acts{display:flex;gap:4px}
.pbar{height:6px;background:var(--bg3);border-radius:var(--rf);overflow:hidden;margin-bottom:8px}
.pfill{height:100%;border-radius:var(--rf);background:linear-gradient(90deg,var(--p),var(--a));transition:width .9s var(--spring)}
.savc-f{display:flex;justify-content:space-between;font-size:11px}
.savc-cur{color:var(--p);font-weight:800}
.savc-pct{color:var(--ink3);font-weight:600}

/* MODAL */
.mo{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;display:flex;align-items:flex-end;justify-content:center;backdrop-filter:blur(5px);opacity:0;pointer-events:none;transition:opacity .22s}
.mo.on{opacity:1;pointer-events:all}
.mo-box{background:var(--card);border-radius:var(--r3) var(--r3) 0 0;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;padding:24px 20px 20px;transform:translateY(100%);transition:transform .32s var(--spring)}
.mo.on .mo-box{transform:none}
.mo-ico-wrap{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mo-title{font-size:17px;font-weight:900;margin-bottom:18px;display:flex;align-items:center;gap:9px;letter-spacing:-.2px}
.mo-x{margin-left:auto;background:var(--bg3);border:none;width:28px;height:28px;border-radius:50%;cursor:pointer;color:var(--ink3);display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.mo-x:hover{background:var(--p);color:#fff}
.mf{display:flex;flex-direction:column;gap:13px}
.mf label{font-size:10.5px;font-weight:800;color:var(--ink2);text-transform:uppercase;letter-spacing:.8px;display:block;margin-bottom:5px}
.mf input,.mf select,.mf textarea{width:100%;padding:11px 13px;background:var(--bg3);border:1.5px solid var(--line);border-radius:9px;font-size:13.5px;color:var(--ink);outline:none;transition:all .2s;font-family:var(--ff)}
.mf input:focus,.mf select:focus,.mf textarea:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(22,195,95,.1);background:var(--bg2)}
.mf textarea{resize:vertical;min-height:70px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tt{display:flex;background:var(--bg3);border-radius:9px;padding:3px;gap:3px;margin-bottom:10px}
.ttb{flex:1;padding:9px;text-align:center;font-size:13px;font-weight:700;cursor:pointer;border-radius:7px;transition:all .2s;border:none;background:none;color:var(--ink3);font-family:var(--ff);display:flex;align-items:center;justify-content:center;gap:5px}
.ttb.inc.on{background:var(--p);color:#fff}
.ttb.exp.on{background:#EF4444;color:#fff}
.del-icon{width:64px;height:64px;border-radius:50%;background:rgba(239,68,68,.1);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}

/* UI HELPERS */
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sh-t{font-size:15px;font-weight:900;letter-spacing:-.2px}
.ph{margin-bottom:20px}
.ph h1{font-size:22px;font-weight:900;letter-spacing:-.5px}
.ph p{font-size:13px;color:var(--ink3);margin-top:3px}
.es{text-align:center;padding:36px 20px;color:var(--ink3)}
.es .ee{font-size:40px;display:block;margin-bottom:10px}
.es h3{font-size:16px;font-weight:900;color:var(--ink);margin-bottom:4px}
.es p{font-size:13px}
.sk{background:linear-gradient(90deg,var(--bg3) 25%,var(--line) 50%,var(--bg3) 75%);background-size:200% 100%;animation:sk 1.4s infinite;border-radius:9px}
@keyframes sk{0%{background-position:-200% 0}100%{background-position:200% 0}}
.status{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--rf);font-size:10.5px;font-weight:700}
.status.ok{background:rgba(22,195,95,.1);color:var(--p)}
.status.bad{background:rgba(239,68,68,.1);color:#EF4444}
.status.warn{background:rgba(255,107,44,.1);color:var(--a)}
.hidden{display:none!important}
.flex{display:flex}.ic{align-items:center}.jb{justify-content:space-between}.gap2{gap:8px}.gap1{gap:5px}.w100{width:100%}

/* TOAST */
#tw{position:fixed;top:14px;right:14px;z-index:9999;display:flex;flex-direction:column;gap:7px;pointer-events:none}
.toast{background:var(--card);border-radius:9px;padding:11px 15px;box-shadow:var(--sh2);display:flex;align-items:center;gap:9px;border-left:3px solid var(--p);font-size:13px;font-weight:600;min-width:250px;pointer-events:all;animation:fadeUp .3s var(--spring)}
.toast.err{border-left-color:#EF4444}
.toast.warn{border-left-color:var(--a)}

/* CHART */
.ch-w{position:relative;height:230px}
.ch-w canvas{max-height:230px}
.cg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ptabs{display:flex;background:var(--bg3);border-radius:8px;padding:3px;gap:2px}
.pt{padding:5px 11px;font-size:11px;font-weight:700;border-radius:6px;cursor:pointer;border:none;background:none;color:var(--ink3);transition:all .2s;font-family:var(--ff)}
.pt.on{background:var(--p);color:#fff}

/* FILTER */
.fb{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.fb input,.fb select{padding:8px 11px;background:var(--bg3);border:1.5px solid var(--line);border-radius:8px;font-size:12.5px;color:var(--ink);outline:none;transition:border-color .2s;font-family:var(--ff)}
.fb input:focus,.fb select:focus{border-color:var(--p)}
.fb input{flex:1;min-width:130px}
.exp-btns{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:13px}

/* MONTHLY */
.mc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:10px}
.ms{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mi{text-align:center;padding:9px;background:var(--bg3);border-radius:8px}
.mi .ma{font-size:13.5px;font-weight:900}
.mi .ml{font-size:10px;color:var(--ink3);margin-top:2px;font-weight:600}
.mi.ii .ma{color:var(--p)}
.mi.ee .ma{color:#EF4444}
.mi.ss .ma{color:#3B82F6}

/* RANKING */
.ri{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;background:var(--bg3);margin-bottom:7px;transition:all .2s;border:1.5px solid transparent}
.ri:hover{border-color:rgba(22,195,95,.15)}
.ri.me{border-color:var(--p)!important;background:rgba(22,195,95,.05)}
.rnum{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;flex-shrink:0}
.r1{background:linear-gradient(135deg,#F59E0B,#F97316);color:#fff}
.r2{background:linear-gradient(135deg,#9CA3AF,#6B7280);color:#fff}
.r3{background:linear-gradient(135deg,#CD7F32,#92400E);color:#fff}
.roth{background:var(--card);color:var(--ink3);font-size:12px;border:1px solid var(--line)}
.rank-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--line)}
.rank-av-def{width:40px;height:40px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--p),var(--a));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;border:2px solid var(--line)}

/* BADGE */
.bg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:9px}
.bgi{background:var(--bg3);border-radius:var(--r);padding:13px 10px;text-align:center;transition:all .2s;border:1.5px solid transparent}
.bgi:hover{transform:translateY(-2px)}
.bgi.earned{background:rgba(22,195,95,.07);border-color:rgba(22,195,95,.2)}
.bgi.locked{opacity:.38;filter:grayscale(1)}
.bgi .be{font-size:26px;display:block;margin-bottom:6px}
.bgi .bn2{font-size:11px;font-weight:800;color:var(--ink)}
.bgi .bd{font-size:9.5px;color:var(--ink3);margin-top:2px}
.bgi .bs{font-size:9.5px;margin-top:4px;font-weight:700}
.bgi.earned .bs{color:var(--p)}

/* PROFILE */
.prof-h{background:linear-gradient(135deg,var(--p),var(--p3));border-radius:var(--r2);padding:26px 20px;color:#fff;margin-bottom:16px;position:relative;overflow:hidden}
.prof-h::before,.prof-h::after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.07)}
.prof-h::before{width:100px;height:100px;top:-30px;right:-20px}
.prof-h::after{width:70px;height:70px;bottom:-20px;left:-15px}
.prof-av-wrap{position:relative;display:inline-block;margin-bottom:10px}
.prof-av{width:74px;height:74px;border-radius:50%;border:3px solid rgba(255,255,255,.4);object-fit:cover;display:block;cursor:pointer}
.prof-av-edit{position:absolute;bottom:0;right:0;width:22px;height:22px;background:var(--a);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;border:2px solid #fff}
.prof-nm{font-size:19px;font-weight:900}
.prof-em{font-size:12px;opacity:.75;margin-top:2px}
.prof-jn{font-size:10px;opacity:.5;margin-top:4px}

/* PROFILE STATS CARD */
.prof-stat-row{display:flex;gap:10px;margin-bottom:16px}
.psr{flex:1;text-align:center;padding:12px 8px;background:var(--bg3);border-radius:10px}
.psr .pv{font-size:15px;font-weight:900;color:var(--p)}
.psr .pl{font-size:9.5px;color:var(--ink3);margin-top:2px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}

/* MENU LIST */
.menu-list{display:flex;flex-direction:column;gap:1px}
.menu-item{display:flex;align-items:center;gap:11px;padding:13px 12px;border-radius:9px;cursor:pointer;transition:all .18s;color:var(--ink2)}
.menu-item:hover{background:var(--bg3)}
.menu-ico{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.menu-label{flex:1;font-size:13.5px;font-weight:700}
.menu-sub{font-size:11px;color:var(--ink3);margin-top:1px}
.menu-arrow{color:var(--ink4)}

/* NOTIF */
.nfi{display:flex;gap:11px;padding:12px;border-radius:9px;background:var(--bg3);margin-bottom:7px;border:1.5px solid transparent;transition:all .2s}
.nfi.unread{background:rgba(22,195,95,.06);border-color:rgba(22,195,95,.14)}
.nfi .ni-ico{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--card);flex-shrink:0}
.nfi .ni-t{font-size:13px;font-weight:800}
.nfi .ni-b{font-size:11.5px;color:var(--ink3);margin-top:2px;line-height:1.5}
.nfi .ni-tm{font-size:10px;color:var(--ink4);margin-top:3px}

/* PORTFOLIO */
.ps{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
.pi{text-align:center;padding:12px;background:var(--bg3);border-radius:9px}
.pi .pv{font-size:15px;font-weight:900;color:var(--p)}
.pi .pl{font-size:9.5px;color:var(--ink3);margin-top:2px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.act-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.act-item:last-child{border:none}
.act-dot{width:8px;height:8px;border-radius:50%;background:var(--p);flex-shrink:0;margin-top:4px}
.act-txt{font-size:12.5px;color:var(--ink2)}
.act-time{font-size:10px;color:var(--ink4);margin-top:2px}

/* TIPS */
.tc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:10px}
.tc h3{font-size:13.5px;font-weight:800;margin-bottom:8px;display:flex;align-items:center;gap:7px}
.tc p,.tc li{font-size:13px;color:var(--ink2);line-height:1.7}
.tc ul{padding-left:16px}
.calc-res{background:rgba(22,195,95,.07);border:1.5px solid rgba(22,195,95,.15);border-radius:9px;padding:13px;margin-top:10px}
.sim-res{background:linear-gradient(135deg,rgba(22,195,95,.07),rgba(255,107,44,.05));border-radius:var(--r);padding:16px;text-align:center;margin-top:10px}
.sim-res .rv{font-size:24px;font-weight:900;color:var(--p)}
.sim-res .rl{font-size:12px;color:var(--ink3);margin-top:3px}
.cc{background:linear-gradient(135deg,#071209,#122018);border-radius:var(--r);padding:18px;color:#fff;position:relative;overflow:hidden;margin-bottom:10px}
.cc::before{content:'';position:absolute;top:-20px;right:-20px;width:70px;height:70px;border-radius:50%;background:rgba(22,195,95,.15)}
.cc .ci{font-size:28px;display:block;margin-bottom:8px}
.cc h3{font-size:14px;font-weight:900;margin-bottom:4px}
.cc p{font-size:12px;opacity:.6;line-height:1.6}

/* ADMIN */
.adm-tbl{width:100%;border-collapse:collapse}
.adm-tbl th{text-align:left;padding:9px 11px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--ink3);border-bottom:1px solid var(--line)}
.adm-tbl td{padding:11px;font-size:12.5px;border-bottom:1px solid var(--line);vertical-align:middle}
.adm-tbl tr:hover td{background:var(--bg3)}
.adm-av{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.adm-av-def{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--p),var(--a));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:10px}

/* PHOTO UPLOAD */
.photo-wrap{display:flex;flex-direction:column;align-items:center;gap:11px;padding:18px;background:var(--bg3);border-radius:var(--r);border:2px dashed var(--line);cursor:pointer;transition:all .2s}
.photo-wrap:hover{border-color:var(--p);background:rgba(22,195,95,.05)}
.photo-prev{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--p)}

/* INFO CARD */
.info-card{background:linear-gradient(135deg,var(--p),var(--p2));border-radius:var(--r);padding:16px;color:#fff;margin-bottom:14px;position:relative;overflow:hidden}
.info-card::before{content:'';position:absolute;top:-15px;right:-15px;width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.1)}

/* FOOTER */
.footer{background:linear-gradient(135deg,#040C06,#091409);color:#fff;padding:36px 20px 20px;margin-top:32px;border-radius:var(--r2) var(--r2) 0 0}
.fg-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:28px}
.fb-logo{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.fb-logo img{width:26px;height:26px;border-radius:8px;object-fit:contain}
.fb-logo span{font-size:17px;font-weight:900;color:var(--p)}
.fb-desc{font-size:12px;color:rgba(255,255,255,.38);line-height:1.7;max-width:210px}
.ft-t{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.4px;color:rgba(255,255,255,.28);margin-bottom:11px}
.fl-links{list-style:none;display:flex;flex-direction:column;gap:7px}
.fl-links a{font-size:12.5px;color:rgba(255,255,255,.46);text-decoration:none;cursor:pointer;transition:color .2s}
.fl-links a:hover{color:var(--p)}
.fc-list{display:flex;flex-direction:column;gap:9px}
.fci{display:flex;align-items:center;gap:9px;font-size:12px;color:rgba(255,255,255,.46);text-decoration:none;transition:color .2s}
.fci:hover{color:rgba(255,255,255,.8)}
.fci .fi-ico{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fci .fi-ico.g{background:rgba(22,195,95,.15);color:var(--p)}
.fci .fi-ico.o{background:rgba(255,107,44,.15);color:var(--a)}
.fci .fi-ico.b{background:rgba(59,130,246,.15);color:#93C5FD}
.f-bot{border-top:1px solid rgba(255,255,255,.07);padding-top:15px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:5px}
.f-bot p{font-size:11px;color:rgba(255,255,255,.2)}

/* NOTIF PERMISSION BANNER */
.notif-banner{background:rgba(22,195,95,.08);border:1.5px solid rgba(22,195,95,.2);border-radius:var(--r);padding:14px;margin-bottom:16px;display:flex;align-items:center;gap:12px}
.notif-banner .nb-ico{width:36px;height:36px;border-radius:9px;background:rgba(22,195,95,.12);color:var(--p);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.notif-banner .nb-text{flex:1;font-size:12.5px;color:var(--ink2);line-height:1.5}
.notif-banner .nb-text strong{color:var(--ink);font-weight:800;display:block;margin-bottom:2px}

/* VERSION BADGE */
.ver-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(22,195,95,.1);border:1px solid rgba(22,195,95,.2);color:var(--p);font-size:10px;font-weight:800;padding:2px 8px;border-radius:var(--rf)}

@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.on{transform:none}
  .main{margin-left:0}
  .bnav{display:flex}
  .page{padding:14px 12px;padding-bottom:calc(14px + var(--bn))}
  .sg{grid-template-columns:1fr 1fr}
  .fg-grid{grid-template-columns:1fr;gap:22px}
  .frow{grid-template-columns:1fr}
  .cg{grid-template-columns:1fr}
  .topbar{padding:0 12px}
  .ps{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:420px){
  .sg{grid-template-columns:1fr}
  .ps{grid-template-columns:1fr 1fr}
  .auth-box{padding:28px 22px}
}