*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#080808;
  --s1:#0d0d0d;
  --s2:#111111;
  --s3:#161616;
  --s4:#1c1c1c;
  --b1:#1e1e1e;
  --b2:#2a2a2a;
  --b3:#333;
  --tx:#e8e8e8;
  --tx2:#aaa;
  --tx3:#666;
  --ac:#b3e837;
  --ac2:rgba(179,232,55,0.12);
  --ac3:rgba(179,232,55,0.06);
  --ac4:rgba(179,232,55,0.25);
  --glow:rgba(179,232,55,0.15);
  --gold:#f59e0b;
  --silver:#94a3b8;
  --bronze:#b45309;
  --fd:'Syne',sans-serif;
  --fm:'JetBrains Mono',monospace;
  --r4:4px;--r6:6px;--r8:8px;--r12:12px;
}

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:var(--fd);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;cursor:pointer}

/* scrollbar */
::-webkit-scrollbar{width:2px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--b2)}

/* noise overlay */
body::after{
  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='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity:.022;pointer-events:none;z-index:9999
}

/* grid bg */
body::before{
  content:'';position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(179,232,55,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(179,232,55,.018) 1px,transparent 1px);
  background-size:48px 48px;
  pointer-events:none;z-index:0
}

.app{display:flex;min-height:100vh;position:relative;z-index:1}

/* ════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════ */
.sidebar{
  width:220px;height:100vh;
  background:var(--s1);
  border-right:1px solid var(--b1);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;z-index:100;
  transition:width .25s ease,transform .25s cubic-bezier(.4,0,.2,1)
}

/* top logo */
.sb-top{
  padding:20px 16px 16px;
  border-bottom:1px solid var(--b1);
  position:relative
}
.sb-top::after{
  content:'';position:absolute;bottom:-1px;left:16px;right:16px;height:1px;
  background:linear-gradient(90deg,var(--ac),transparent);opacity:.4
}
.sb-brand{
  font-family:var(--fm);font-size:9px;font-weight:400;
  color:var(--tx3);letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px
}
.sb-name{font-size:18px;font-weight:800;letter-spacing:-.03em;line-height:1}
.sb-name em{color:var(--ac);font-style:normal}
.sb-badge{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:8px;padding:3px 8px;
  background:var(--ac3);border:1px solid rgba(179,232,55,.18);
  border-radius:var(--r4);
  font-family:var(--fm);font-size:9px;color:var(--ac);letter-spacing:.1em
}
.sb-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--ac);animation:pulse 2s infinite}

/* xp block */
.xp-block{padding:14px 16px;border-bottom:1px solid var(--b1)}
.xp-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.xp-lv{font-family:var(--fm);font-size:9px;font-weight:600;color:var(--ac);letter-spacing:.12em}
.xp-pts{font-family:var(--fm);font-size:9px;color:var(--tx3)}
.xp-track{height:2px;background:var(--b2);border-radius:1px;overflow:hidden;position:relative}
.xp-fill{
  height:100%;border-radius:1px;
  background:linear-gradient(90deg,var(--ac),#d4f55a);
  transition:width .8s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 10px var(--glow)
}

/* nav */
.sb-nav{flex:1;padding:10px 0;overflow-y:auto}
.nav-label{
  padding:10px 16px 4px;
  font-family:var(--fm);font-size:8px;color:var(--tx3);
  letter-spacing:.2em;text-transform:uppercase
}
.ni{
  display:flex;align-items:center;gap:8px;
  padding:8px 16px;cursor:pointer;
  transition:all .15s;
  border-left:2px solid transparent;
  font-size:12px;font-weight:700;
  color:var(--tx3);user-select:none;
  position:relative
}
.ni:hover{color:var(--tx2);background:var(--s2)}
.ni.active{color:var(--ac);border-left-color:var(--ac);background:var(--ac3)}
.ni.ni-locked{cursor:pointer;opacity:.55}
.ni.ni-locked:hover{opacity:.75;color:var(--tx2);background:var(--s2)}
.ni-lock-ic{margin-left:auto;font-size:11px}
.ni-badge-soon{
  margin-left:auto;font-family:var(--fm);font-size:7px;
  background:var(--ac);color:#000;padding:2px 6px;
  border-radius:10px;letter-spacing:.08em;font-weight:700;
  animation:pulse 2s infinite
}
.ni .n-ic{
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  font-size:13px;flex-shrink:0
}
.ni .n-ct{
  margin-left:auto;font-family:var(--fm);font-size:8px;
  background:var(--b2);padding:2px 6px;border-radius:10px;color:var(--tx3)
}
.ni.active .n-ct{background:var(--ac2);color:var(--ac)}

/* logout */
.sb-logout{padding:10px 16px;border-top:1px solid var(--b1)}
.logout-btn{
  display:flex;align-items:center;gap:7px;
  width:100%;padding:4px 0;background:none;border:none;cursor:pointer;
  font-family:var(--fm);font-size:9px;color:var(--tx3);letter-spacing:.1em;
  transition:color .15s
}
.logout-btn:hover{color:#ff6b6b}

/* mini rank */
.sb-rank{padding:14px 16px;border-top:1px solid var(--b1)}
.sb-rank-title{
  font-family:var(--fm);font-size:8px;color:var(--tx3);
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px
}
.sr-row{display:flex;align-items:center;gap:6px;padding:3px 0}
.sr-pos{width:14px;font-family:var(--fm);font-size:9px;color:var(--tx3);text-align:center;flex-shrink:0}
.sr-pos.g{color:var(--gold)}.sr-pos.s{color:var(--silver)}.sr-pos.b{color:var(--bronze)}
.sr-name{flex:1;font-size:11px;font-weight:700;color:var(--tx2)}
.sr-name.you{color:var(--ac)}
.sr-xp{font-family:var(--fm);font-size:9px;color:var(--tx3)}

/* ════════════════════════════════════════
   MAIN
════════════════════════════════════════ */
.main{margin-left:220px;flex:1;min-height:100vh;transition:margin-left .25s ease}
.view{display:none;padding:40px 48px;animation:fadeIn .3s ease}
.view.active{display:block}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes countUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes missionComplete{0%{transform:scale(1);box-shadow:none}40%{transform:scale(1.03);box-shadow:0 0 40px rgba(179,232,55,.3),0 8px 40px rgba(0,0,0,.4)}100%{transform:scale(1)}}
.mc.completing{animation:missionComplete .7s cubic-bezier(.4,0,.2,1)}

/* page header */
.ph{margin-bottom:40px;position:relative}
.ph-tag{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--fm);font-size:9px;color:var(--ac);
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px
}
.ph-tag::before{content:'';width:20px;height:1px;background:var(--ac)}
.ph-tag.sb-toggle{cursor:pointer;user-select:none}
.ph-tag.sb-toggle:hover::before{width:28px;transition:width .2s}
.ph-title{
  font-size:34px;font-weight:800;letter-spacing:-.04em;
  line-height:1.05;margin-bottom:10px
}
.ph-desc{font-size:13px;color:var(--tx3);max-width:440px;line-height:1.7;font-weight:400}

/* ════════════════════════════════════════
   STATS
════════════════════════════════════════ */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:40px}
.stat{
  background:var(--s2);border:1px solid var(--b1);border-radius:var(--r8);
  padding:18px 20px;position:relative;overflow:hidden;
  transition:border-color .2s,transform .2s
}
.stat:hover{border-color:var(--b2);transform:translateY(-1px)}
.stat::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(179,232,55,.3),transparent);
  opacity:0;transition:opacity .3s
}
.stat:hover::before{opacity:1}
.stat-label{
  font-family:var(--fm);font-size:8px;color:var(--tx3);
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:10px
}
.stat-val{font-size:28px;font-weight:800;letter-spacing:-.04em;line-height:1}
.stat-val.ac{color:var(--ac)}
.stat-sub{font-family:var(--fm);font-size:10px;color:var(--tx3);margin-top:5px}

/* ════════════════════════════════════════
   SECTION
════════════════════════════════════════ */
.sec{margin-bottom:44px}
.sec-hd{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;padding-bottom:12px;
  border-bottom:1px solid var(--b1)
}
.sec-title{
  font-size:12px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tx2)
}
.sec-title em{
  font-family:var(--fm);font-size:10px;
  color:var(--tx3);font-weight:400;font-style:normal;margin-left:8px;
  letter-spacing:.05em
}
.sec-action{
  font-family:var(--fm);font-size:9px;color:var(--ac);
  cursor:pointer;letter-spacing:.1em;
  border:1px solid rgba(179,232,55,.2);padding:4px 10px;border-radius:var(--r4);
  transition:all .15s
}
.sec-action:hover{background:var(--ac2)}

/* ════════════════════════════════════════
   MISSION CARDS
════════════════════════════════════════ */
.mg{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.mc{
  background:var(--s2);border:1px solid var(--b1);border-radius:var(--r8);
  padding:20px;cursor:pointer;transition:all .2s;
  position:relative;overflow:hidden
}
.mc::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 60%,rgba(179,232,55,.03));
  pointer-events:none
}
.mc:hover{border-color:var(--b3);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.3)}
.mc.done{
  border-color:rgba(179,232,55,.2);
  background:linear-gradient(135deg,var(--s2),rgba(179,232,55,.03))
}
.mc.done::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--ac),transparent)
}
.mc.locked{opacity:.3;cursor:not-allowed}
.mc.locked:hover{transform:none;box-shadow:none;border-color:var(--b1)}
.mc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mc-num{
  font-family:var(--fm);font-size:9px;color:var(--tx3);
  letter-spacing:.15em;font-weight:600
}
.mc-status{
  width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--b2);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;flex-shrink:0;transition:all .2s
}
.mc-status.done{background:var(--ac);border-color:var(--ac);color:#000;font-weight:700}
.mc-status.locked{border-style:dashed;color:var(--tx3)}
.mc-title{font-size:14px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px;line-height:1.3}
.mc-desc{font-size:12px;color:var(--tx3);line-height:1.6;margin-bottom:14px}
.mc-foot{display:flex;align-items:center;justify-content:space-between}
.mc-xp{
  font-family:var(--fm);font-size:9px;color:var(--ac);
  background:var(--ac3);border:1px solid rgba(179,232,55,.15);
  padding:3px 8px;border-radius:var(--r4);font-weight:600
}
.mc-tag{
  font-family:var(--fm);font-size:9px;color:var(--tx3);
  background:var(--s3);border:1px solid var(--b1);
  padding:3px 8px;border-radius:var(--r4)
}
.mc-prog{margin-top:12px;height:2px;background:var(--b1);border-radius:1px;overflow:hidden}
.mc-prog-fill{height:100%;background:var(--ac);border-radius:1px;box-shadow:0 0 6px var(--glow);transition:width .4s ease}

/* ════════════════════════════════════════
   CHECKLIST
════════════════════════════════════════ */
.cl{list-style:none;display:flex;flex-direction:column;gap:6px}
.ci{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  background:var(--s2);border:1px solid var(--b1);border-radius:var(--r6);
  cursor:pointer;transition:all .15s;user-select:none
}
.ci:hover{border-color:var(--b2);background:var(--s3)}
.ci.chk{opacity:.45}
.ci.chk:hover{opacity:.6}
.cb{
  width:16px;height:16px;border:1.5px solid var(--b2);border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;flex-shrink:0;transition:all .2s
}
.ci.chk .cb{background:var(--ac);border-color:var(--ac);color:#000;font-weight:700}
.ci-text{font-size:12px;font-weight:600}
.ci.chk .ci-text{text-decoration:line-through;color:var(--tx3)}

/* ════════════════════════════════════════
   DOWNLOAD CARDS
════════════════════════════════════════ */
.dg{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.dc{
  background:var(--s2);border:1px solid var(--b1);border-radius:var(--r8);
  padding:16px 18px;display:flex;align-items:center;gap:12px;
  cursor:pointer;transition:all .2s
}
.dc:hover{border-color:rgba(179,232,55,.25);background:var(--ac3)}
.dc:hover .d-btn{background:rgba(179,232,55,.18);border-color:rgba(179,232,55,.3)}
.d-icon{
  width:38px;height:38px;background:var(--s3);border:1px solid var(--b2);
  border-radius:var(--r6);display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0
}
.d-info{flex:1}
.d-name{font-size:12px;font-weight:700;margin-bottom:3px}
.d-meta{font-family:var(--fm);font-size:9px;color:var(--tx3)}
.d-btn{
  font-family:var(--fm);font-size:9px;color:var(--ac);
  background:var(--ac3);border:1px solid rgba(179,232,55,.15);
  padding:5px 10px;border-radius:var(--r4);white-space:nowrap;transition:all .15s
}

/* ════════════════════════════════════════
   VIDEO CARDS
════════════════════════════════════════ */
.vg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.vc{
  background:var(--s2);border:1px solid var(--b1);border-radius:var(--r8);
  overflow:hidden;transition:border-color .2s
}
.vc:hover{border-color:var(--b2)}
.vthumb{
  width:100%;aspect-ratio:16/9;background:var(--s3);
  display:flex;align-items:center;justify-content:center;
  position:relative;cursor:pointer;overflow:hidden
}
.vthumb iframe{width:100%;height:100%;border:none;position:absolute;inset:0}
.v-placeholder{display:flex;flex-direction:column;align-items:center;gap:10px}
.v-play{
  width:48px;height:48px;border-radius:50%;
  background:var(--ac);display:flex;align-items:center;justify-content:center;
  font-size:16px;color:#000;transition:transform .2s;font-weight:700
}
.vthumb:hover .v-play{transform:scale(1.08)}
.v-soon{font-family:var(--fm);font-size:9px;color:var(--tx3);letter-spacing:.12em}
.vinfo{padding:14px 16px}
.v-title{font-size:13px;font-weight:700;margin-bottom:4px;letter-spacing:-.01em}
.v-meta{font-family:var(--fm);font-size:9px;color:var(--tx3)}

/* ════════════════════════════════════════
   RANKING PRIZE CARD
════════════════════════════════════════ */
.rk-prize{
  background:var(--s2);border:1px solid rgba(179,232,55,.25);
  border-radius:var(--r8);padding:16px 20px;margin-bottom:12px;
  position:relative;overflow:hidden
}
.rk-prize::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,#b3e837,transparent)
}
.rk-prize-tag{font-family:var(--fm);font-size:9px;color:#b3e837;letter-spacing:.14em;margin-bottom:6px}
.rk-prize-title{font-family:var(--fd);font-size:14px;font-weight:700;color:var(--tx1);line-height:1.4;margin-bottom:6px}
.rk-prize-foot{font-family:var(--fm);font-size:10px;color:var(--tx3)}

/* ════════════════════════════════════════
   RANKING TABLE
════════════════════════════════════════ */
.rt-wrap{background:var(--s2);border:1px solid var(--b1);border-radius:var(--r8);overflow:hidden}
.rtable{width:100%;border-collapse:collapse}
.rtable th{
  text-align:left;font-family:var(--fm);font-size:8px;color:var(--tx3);
  letter-spacing:.18em;text-transform:uppercase;
  padding:10px 16px;background:var(--s3);border-bottom:1px solid var(--b1)
}
.rtable td{padding:12px 16px;font-size:12px;border-bottom:1px solid var(--b1)}
.rtable tr:last-child td{border-bottom:none}
.rtable tbody tr{transition:background .12s}
.rtable tbody tr:hover td{background:var(--s3)}
.rt-medal{font-size:14px}
.rt-name{font-weight:700}
.rt-name.you{color:var(--ac)}
.rt-score{font-family:var(--fm);font-size:11px;color:var(--ac);font-weight:600}
.rt-badge{
  font-family:var(--fm);font-size:8px;
  background:var(--s3);border:1px solid var(--b1);
  padding:2px 7px;border-radius:var(--r4);color:var(--tx3);letter-spacing:.08em
}

/* ════════════════════════════════════════
   REWARDS
════════════════════════════════════════ */
.rw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.rw-card{
  background:var(--s2);border:1px solid var(--b1);border-radius:var(--r8);
  padding:20px;position:relative;overflow:hidden;transition:all .2s
}
.rw-card.unlocked{border-color:rgba(179,232,55,.2)}
.rw-card.unlocked::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--ac),transparent)
}
.rw-card.locked-rw{opacity:.35}
.rw-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.rw-icon{font-size:22px}
.rw-status{
  font-family:var(--fm);font-size:8px;letter-spacing:.1em;
  padding:3px 8px;border-radius:var(--r4);border:1px solid var(--b1);color:var(--tx3)
}
.rw-status.open{color:var(--ac);background:var(--ac3);border-color:rgba(179,232,55,.2)}
.rw-title{font-size:14px;font-weight:700;margin-bottom:5px;letter-spacing:-.01em}
.rw-desc{font-size:11px;color:var(--tx3);line-height:1.6;margin-bottom:12px}
.rw-req{font-family:var(--fm);font-size:9px;color:var(--tx3)}
.rw-req span{color:var(--ac)}
.rw-btn{
  margin-top:14px;width:100%;padding:10px;
  background:var(--ac);color:#000;border:none;border-radius:var(--r6);
  font-family:var(--fd);font-size:12px;font-weight:700;
  cursor:pointer;transition:all .15s;letter-spacing:-.01em
}
.rw-btn:hover{background:#c4f546;transform:translateY(-1px)}
.rw-btn:disabled{opacity:.25;cursor:not-allowed;transform:none}

/* ════════════════════════════════════════
   HALL DA FAMA
════════════════════════════════════════ */
.hall{
  background:var(--s2);border:1px solid rgba(179,232,55,.12);
  border-radius:var(--r12);padding:28px;margin-bottom:28px;
  text-align:center;position:relative;overflow:hidden
}
.hall::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% -10%,rgba(179,232,55,.07),transparent 65%);
  pointer-events:none
}
.hall-title{font-size:20px;font-weight:800;letter-spacing:-.03em;margin-bottom:5px}
.hall-desc{font-size:12px;color:var(--tx3);margin-bottom:20px;font-family:var(--fm)}
.hall-members{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.hm{
  display:flex;align-items:center;gap:6px;
  background:var(--s3);border:1px solid var(--b1);
  padding:6px 12px;border-radius:20px;
  font-size:11px;font-weight:700
}
.hm .hxp{font-family:var(--fm);font-size:9px;color:var(--ac)}
.hm.you-hm{border-color:rgba(179,232,55,.3);background:var(--ac3);color:var(--ac)}

/* ════════════════════════════════════════
   UPSELL / COMUNIDADE
════════════════════════════════════════ */
.upsell{
  background:var(--s2);border:1px solid rgba(179,232,55,.18);
  border-radius:var(--r12);padding:40px;margin-bottom:28px;
  position:relative;overflow:hidden;text-align:center
}
.upsell::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% -20%,rgba(179,232,55,.1),transparent 60%),
    radial-gradient(ellipse at 80% 80%,rgba(179,232,55,.04),transparent 50%);
  pointer-events:none
}
.up-tag{
  display:inline-block;
  font-family:var(--fm);font-size:9px;color:var(--ac);
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px
}
.up-title{font-size:32px;font-weight:800;letter-spacing:-.04em;line-height:1.05;margin-bottom:10px}
.up-desc{font-size:13px;color:var(--tx3);max-width:460px;margin:0 auto 24px;line-height:1.7}
.up-price{margin-bottom:28px}
.up-from{font-family:var(--fm);font-size:12px;color:var(--tx3);text-decoration:line-through;margin-bottom:4px}
.up-val{font-size:40px;font-weight:800;color:var(--ac);letter-spacing:-.04em;line-height:1}
.up-per{font-family:var(--fm);font-size:12px;color:var(--tx3)}
.up-cta{
  display:inline-block;padding:14px 40px;
  background:var(--ac);color:#000;border:none;border-radius:var(--r6);
  font-family:var(--fd);font-size:14px;font-weight:800;
  cursor:pointer;transition:all .2s;letter-spacing:-.02em
}
.up-cta:hover{background:#c4f546;transform:translateY(-2px);box-shadow:0 10px 30px var(--glow)}
.up-note{font-family:var(--fm);font-size:10px;color:var(--tx3);margin-top:12px}

.benefits{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-bottom:24px}
.benefit{
  background:var(--s2);border:1px solid var(--b1);border-radius:var(--r8);
  padding:16px;display:flex;gap:12px;align-items:flex-start
}
.b-ic{font-size:18px;flex-shrink:0;margin-top:1px}
.b-title{font-size:12px;font-weight:700;margin-bottom:3px}
.b-desc{font-size:11px;color:var(--tx3);line-height:1.5}

.agents-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.ap{
  background:var(--s3);border:1px solid var(--b1);border-radius:var(--r6);
  padding:14px;position:relative;overflow:hidden;transition:border-color .2s
}
.ap:hover{border-color:var(--b2)}
.ap.soon::after{
  content:'EM BREVE';position:absolute;top:8px;right:8px;
  font-family:var(--fm);font-size:7px;color:var(--tx3);
  background:var(--s2);border:1px solid var(--b1);
  padding:2px 6px;border-radius:var(--r4);letter-spacing:.1em
}
.ap.soon{opacity:.35}
.ap-ic{font-size:18px;margin-bottom:8px}
.ap-name{font-size:12px;font-weight:700;margin-bottom:3px}
.ap-desc{font-size:10px;color:var(--tx3);line-height:1.4;font-family:var(--fm)}

/* ════════════════════════════════════════
   PROX CARD (DASHBOARD)
════════════════════════════════════════ */
.prox-wrap{
  background:var(--s2);border:1px solid rgba(179,232,55,.15);
  border-radius:var(--r8);padding:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  transition:all .2s;position:relative;overflow:hidden;max-width:560px
}
.prox-wrap::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:2px;background:var(--ac)
}
.prox-wrap:hover{border-color:rgba(179,232,55,.3);transform:translateX(3px)}
.prox-content .num{font-family:var(--fm);font-size:9px;color:var(--ac);letter-spacing:.15em;margin-bottom:5px}
.prox-content .title{font-size:15px;font-weight:700;letter-spacing:-.02em;margin-bottom:3px}
.prox-content .desc{font-size:12px;color:var(--tx3)}
.prox-arrow{
  font-size:18px;color:var(--tx3);flex-shrink:0;
  transition:transform .2s
}
.prox-wrap:hover .prox-arrow{transform:translateX(4px);color:var(--ac)}

/* done state */
.done-state{
  background:var(--s2);border:1px solid rgba(179,232,55,.2);
  border-radius:var(--r8);padding:20px;max-width:560px;
  font-family:var(--fm);font-size:12px;color:var(--ac);font-weight:600;
  display:flex;align-items:center;gap:10px
}

/* ════════════════════════════════════════
   MODAL
════════════════════════════════════════ */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.88);
  z-index:500;display:flex;align-items:center;justify-content:center;
  padding:24px;backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .2s
}
.overlay.open{opacity:1;pointer-events:all}
.modal{
  background:var(--s2);border:1px solid var(--b2);border-radius:var(--r12);
  width:100%;max-width:500px;max-height:80vh;overflow-y:auto;
  transform:translateY(16px) scale(.98);
  transition:transform .2s cubic-bezier(.4,0,.2,1)
}
.overlay.open .modal{transform:translateY(0) scale(1)}
.modal::before{
  content:'';display:block;height:2px;
  background:linear-gradient(90deg,var(--ac),transparent)
}
.m-head{padding:20px 22px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.m-tag{font-family:var(--fm);font-size:8px;color:var(--ac);letter-spacing:.18em;margin-bottom:5px}
.m-title{font-size:18px;font-weight:800;letter-spacing:-.03em}
.m-close{
  width:26px;height:26px;background:var(--s3);border:1px solid var(--b2);
  border-radius:var(--r4);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:11px;color:var(--tx3);flex-shrink:0;transition:all .15s
}
.m-close:hover{color:var(--tx);border-color:var(--b3)}
.m-body{padding:16px 22px 22px}
.m-desc{font-size:12px;color:var(--tx3);line-height:1.7;margin-bottom:16px}
.m-cl{list-style:none;display:flex;flex-direction:column;gap:5px;margin-bottom:20px}
.m-ci{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;background:var(--s3);border:1px solid var(--b1);
  border-radius:var(--r6);cursor:pointer;transition:all .12s;user-select:none
}
.m-ci:hover{border-color:var(--b2)}
.m-cb{
  width:14px;height:14px;border:1.5px solid var(--b2);border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  font-size:8px;flex-shrink:0;transition:all .15s
}
.m-ci.done .m-cb{background:var(--ac);border-color:var(--ac);color:#000;font-weight:700}
.m-ci.done span{text-decoration:line-through;color:var(--tx3)}
.m-ci span{font-size:12px;font-weight:600}
.m-btn{
  width:100%;padding:13px;background:var(--ac);color:#000;border:none;
  border-radius:var(--r6);font-family:var(--fd);font-size:13px;font-weight:800;
  cursor:pointer;transition:all .15s;letter-spacing:-.01em
}
.m-btn:hover{background:#c4f546;transform:translateY(-1px)}
.m-btn:disabled{opacity:.3;cursor:not-allowed;transform:none}

/* ════════════════════════════════════════
   TOAST
════════════════════════════════════════ */
.toast{
  position:fixed;bottom:24px;right:24px;
  background:var(--s2);border:1px solid rgba(179,232,55,.3);
  color:var(--tx);padding:11px 18px;border-radius:var(--r8);
  font-size:12px;font-weight:700;z-index:9000;
  transform:translateY(80px);opacity:0;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  box-shadow:0 4px 20px rgba(0,0,0,.5),0 0 20px var(--glow)
}
.toast.show{transform:translateY(0);opacity:1}
.toast::before{
  content:'';display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--ac);margin-right:8px;
  vertical-align:middle
}

/* ════════════════════════════════════════
   MOBILE
════════════════════════════════════════ */
.sb-top-row{display:flex;align-items:center;justify-content:space-between}
.mob-btn{
  display:none;
  width:28px;height:28px;
  background:none;border:none;outline:none;
  align-items:center;justify-content:center;
  cursor:pointer;font-size:18px;color:var(--tx3);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;flex-shrink:0
}
.mob-open{
  display:none;position:fixed;top:14px;left:12px;z-index:300;
  background:none;border:none;outline:none;
  align-items:center;justify-content:center;
  cursor:pointer;font-size:18px;color:var(--tx);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;padding:4px
}
.mob-overlay{display:none}

@media(max-width:900px){
  .sidebar{
    transform:translateX(-100%);transition:transform .25s ease;
    z-index:200
  }
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0;width:100%;position:relative;z-index:1}
  .view{padding:20px 16px}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .mob-btn{display:flex}
  .mob-open{display:flex}
  .sidebar{z-index:200}
  .ni{
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    min-height:44px
  }
  .ph-tag::before{display:none}
}

/* ════════════════════════════════════════
   SIDEBAR COLLAPSE — desktop only
════════════════════════════════════════ */
.sb-toggle-btn{
  display:none;
  width:22px;height:22px;background:none;
  border:1px solid var(--b1);border-radius:var(--r4);
  cursor:pointer;align-items:center;justify-content:center;
  font-size:13px;color:var(--tx3);font-family:var(--fm);
  transition:color .15s,border-color .15s;
  flex-shrink:0;line-height:1;padding:0;margin-left:auto
}
.sb-toggle-btn:hover{color:var(--tx);border-color:var(--b2)}

.ni-label{
  overflow:hidden;max-width:160px;opacity:1;white-space:nowrap;
  transition:opacity .2s ease,max-width .25s ease
}
.sb-logout-label{
  overflow:hidden;max-width:60px;opacity:1;white-space:nowrap;
  transition:opacity .2s ease,max-width .25s ease
}

@media(min-width:901px){
  .sb-toggle-btn{display:flex}

  /* collapsed width */
  .sidebar.collapsed{width:60px;overflow:hidden}
  body.sb-collapsed .main{margin-left:60px}

  /* hide text blocks */
  .sidebar.collapsed .sb-brand,
  .sidebar.collapsed .sb-badge,
  .sidebar.collapsed .sb-name,
  .sidebar.collapsed .xp-block,
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .sb-rank{display:none}

  /* top area: center toggle btn */
  .sidebar.collapsed .sb-top{padding:12px 8px}
  .sidebar.collapsed .sb-top-row{justify-content:center}

  /* nav items: center icon */
  .sidebar.collapsed .ni{padding:10px 0;justify-content:center;gap:0}
  .sidebar.collapsed .ni-label{max-width:0;opacity:0}
  .sidebar.collapsed .ni-lock-ic,
  .sidebar.collapsed .ni-badge-soon,
  .sidebar.collapsed .n-ct{display:none}

  /* logout: center icon */
  .sidebar.collapsed .sb-logout{display:flex;justify-content:center;padding:10px 8px}
  .sidebar.collapsed .logout-btn{justify-content:center;padding:4px;gap:0}
  .sidebar.collapsed .sb-logout-label{max-width:0;opacity:0}

  /* tooltip when collapsed */
  .sidebar.collapsed .ni[data-tooltip]{position:relative}
  .sidebar.collapsed .ni[data-tooltip]:hover::after{
    content:attr(data-tooltip);
    position:absolute;left:calc(100% + 10px);top:50%;
    transform:translateY(-50%);
    background:var(--s3);border:1px solid var(--b2);
    color:var(--tx);font-family:var(--fm);font-size:10px;
    letter-spacing:.06em;padding:5px 10px;border-radius:var(--r4);
    white-space:nowrap;z-index:200;pointer-events:none;
    box-shadow:0 4px 16px rgba(0,0,0,.5)
  }
}