/* ============================================================
   apEXE // INFECTION PROTOCOL  —  core stylesheet
   Theme: pixel-virus / retro CRT terminal / neon-green on black
   ============================================================ */

:root{
  /* palette: purple-slate darks + lime / sage greens */
  --bg:#141419;
  --bg-2:#1b1a23;
  --panel:#23222f;
  --panel-2:#2a2937;
  --panel-line:#3a3947;
  --grid:#2a2937;
  --slate:#4a4956;

  --green:#93d356;            /* lime — primary accent */
  --green-soft:#7cc44a;
  --green-dim:#63b05f;        /* sage — secondary */
  --green-deep:#3a5b34;       /* deep green for borders/fills */
  --green-glow:rgba(147,211,86,.40);

  --amber:#e9c26a;
  --red:#e8615b;
  --red-glow:rgba(232,97,91,.40);
  --cyan:#6fd0c4;
  --magenta:#b673c9;

  --txt:#dadce4;
  --txt-dim:#8b8b9c;
  --txt-faint:#56556a;

  --mono:'Share Tech Mono', monospace;
  --term:'VT323', monospace;
  --pixel:'Press Start 2P', monospace;

  --maxw:1180px;
  --r:3px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(147,211,86,.06), transparent 55%),
    radial-gradient(ellipse 90% 70% at 50% 120%, rgba(74,73,86,.18), transparent 60%),
    var(--bg);
  color:var(--txt);
  font-family:var(--mono);
  font-size:16px;
  line-height:1.5;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:none;
  letter-spacing:.3px;
}
body::before{ /* faint global grid */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    linear-gradient(rgba(74,73,86,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,73,86,.10) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 40%, #000 40%, transparent 90%);
}
img{image-rendering:pixelated;image-rendering:crisp-edges;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--green);color:#15151b;}
.hidden{display:none !important;}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:#1b1a22;}
::-webkit-scrollbar-thumb{background:var(--green-deep);border:1px solid var(--green-dim);}
::-webkit-scrollbar-thumb:hover{background:var(--green-dim);}

/* ============================================================
   CRT OVERLAYS
   ============================================================ */
.crt-overlay{
  position:fixed;inset:0;z-index:9000;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.11) 0px, rgba(0,0,0,.11) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:multiply;
}
.crt-overlay::after{ /* moving scan band */
  content:"";position:absolute;left:0;right:0;height:140px;
  background:linear-gradient(180deg, transparent, rgba(147,211,86,.05), transparent);
  animation:scan 7s linear infinite;
}
@keyframes scan{0%{top:-20%}100%{top:120%}}
.crt-vignette{
  position:fixed;inset:0;z-index:9001;pointer-events:none;
  box-shadow:inset 0 0 150px 26px rgba(0,0,0,.72), inset 0 0 60px rgba(26,24,34,.5);
  background:radial-gradient(ellipse at center, transparent 62%, rgba(0,0,0,.42) 100%);
}
.crt-flicker{
  position:fixed;inset:0;z-index:9002;pointer-events:none;
  background:rgba(147,211,86,.01);animation:flicker 5s steps(60) infinite;
}
@keyframes flicker{0%,100%{opacity:.5}3%{opacity:.9}6%{opacity:.4}9%{opacity:.7}50%{opacity:.55}}
#matrix-rain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.14;}

/* ============================================================
   BOOT SEQUENCE
   ============================================================ */
.boot{position:fixed;inset:0;z-index:9500;background:var(--bg);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.boot-inner{width:min(760px,92vw);}
.boot-log{font-family:var(--term);font-size:21px;line-height:1.35;color:var(--green);margin:0;white-space:pre-wrap;text-shadow:0 0 6px var(--green-glow);min-height:46vh;}
.boot-bar{margin-top:18px;height:16px;border:1px solid var(--green-dim);background:#15151b;position:relative;overflow:hidden;}
.boot-bar-fill{height:100%;width:0;background:repeating-linear-gradient(90deg,var(--green) 0 8px, var(--green-dim) 8px 12px);box-shadow:0 0 12px var(--green-glow);transition:width .2s;}
.boot-skip{margin-top:14px;font-family:var(--mono);font-size:11px;color:var(--txt-faint);text-align:right;animation:blink 1.1s steps(2) infinite;}
@keyframes blink{50%{opacity:0}}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:200;display:flex;align-items:center;gap:18px;
  padding:10px 18px;background:linear-gradient(180deg,rgba(27,26,35,.96),rgba(20,20,25,.9));
  border-bottom:1px solid var(--panel-line);backdrop-filter:blur(4px);
}
.topbar-left{display:flex;align-items:center;gap:10px;cursor:pointer;}
.topbar-logo{width:34px;height:34px;border:1px solid var(--green-dim);box-shadow:0 0 12px var(--green-glow);}
.topbar-title{font-family:var(--pixel);font-size:14px;color:var(--green);text-shadow:0 0 8px var(--green-glow);}
.topbar-sub{color:var(--txt-faint);font-size:10px;}
.topbar-nav{display:flex;gap:6px;flex:1;}
.nav-btn{
  background:transparent;border:1px solid transparent;color:var(--txt-dim);
  font-family:var(--mono);font-size:12px;padding:7px 12px;letter-spacing:1px;transition:.12s;
}
.nav-btn:hover{color:var(--green);border-color:var(--green-deep);background:rgba(147,211,86,.05);}
.nav-btn.active{color:var(--green);border-color:var(--green-dim);background:rgba(147,211,86,.08);text-shadow:0 0 8px var(--green-glow);}
.nav-admin{color:var(--amber);}
.nav-admin:hover{color:var(--amber);border-color:#5a4410;}
.topbar-right{display:flex;align-items:center;gap:10px;}
.global-pill{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--green);border:1px solid var(--green-deep);padding:6px 10px;background:rgba(147,211,86,.04);white-space:nowrap;}
.pill-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red-glow);animation:pulse 1.4s infinite;}
@keyframes pulse{50%{opacity:.3;transform:scale(.7)}}
.wallet-pill{
  background:rgba(147,211,86,.06);border:1px solid var(--green-dim);color:var(--green);
  font-family:var(--mono);font-size:11px;padding:6px 11px;letter-spacing:.5px;transition:.12s;white-space:nowrap;
}
.wallet-pill:hover{background:rgba(147,211,86,.14);box-shadow:0 0 10px var(--green-glow);}
.wallet-pill.disconnected{color:var(--txt-faint);border-color:var(--green-deep);}

/* mobile bottom nav (hidden on desktop) */
.botnav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:250;
  background:linear-gradient(0deg,rgba(20,20,25,.98),rgba(27,26,35,.94));border-top:1px solid var(--panel-line);
  backdrop-filter:blur(6px);padding:6px 6px calc(6px + env(safe-area-inset-bottom));}
.botnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:transparent;border:none;color:var(--txt-dim);font-family:var(--mono);font-size:9px;letter-spacing:1px;padding:6px 2px;transition:.12s;}
.botnav-btn .bi{font-size:18px;line-height:1;}
.botnav-btn.active{color:var(--green);text-shadow:0 0 8px var(--green-glow);}
.botnav-btn:active{transform:scale(.92);}

.audio-toggle{position:fixed;right:14px;bottom:14px;z-index:300;background:rgba(20,20,25,.8);border:1px solid var(--green-deep);color:var(--txt-dim);font-family:var(--mono);font-size:11px;padding:6px 9px;}
.audio-toggle:hover{color:var(--green);border-color:var(--green-dim);}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.app{position:relative;z-index:2;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px;}
.view{animation:viewIn .35s ease;}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.section{padding:46px 0;}
.row{display:flex;gap:18px;}
.col{flex:1;}
.center{text-align:center;}
.mt{margin-top:18px;}.mt2{margin-top:34px;}.mb{margin-bottom:18px;}

/* window/panel chrome — looks like an OS window */
.win{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--panel-line);position:relative;
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 18px 50px rgba(0,0,0,.55), inset 0 0 60px rgba(42,41,55,.25);
}
.win-bar{
  display:flex;align-items:center;gap:8px;padding:7px 11px;
  background:linear-gradient(180deg,#33313f,#262430);border-bottom:1px solid var(--panel-line);
  font-family:var(--mono);font-size:11px;color:var(--green-soft);letter-spacing:1px;
}
.win-dots{display:flex;gap:5px;}
.win-dots i{width:10px;height:10px;border:1px solid #0008;display:inline-block;}
.win-dots i:nth-child(1){background:var(--red);}
.win-dots i:nth-child(2){background:var(--amber);}
.win-dots i:nth-child(3){background:var(--green);}
.win-title{flex:1;}
.win-x{color:var(--txt-faint);}
.win-body{padding:18px;}

.label{font-family:var(--mono);font-size:11px;color:var(--txt-dim);letter-spacing:2px;text-transform:uppercase;}
.mono-sm{font-size:12px;color:var(--txt-dim);}
.hl{color:var(--green);text-shadow:0 0 6px var(--green-glow);}
.hl-amber{color:var(--amber);}
.hl-red{color:var(--red);}
.dim{color:var(--txt-dim);}
.faint{color:var(--txt-faint);}

/* headings */
h1,h2,h3{font-family:var(--pixel);color:var(--green);text-shadow:0 0 12px var(--green-glow);margin:0 0 14px;line-height:1.4;}
h1{font-size:30px;}h2{font-size:20px;}h3{font-size:14px;}
p{margin:0 0 12px;}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--pixel);font-size:12px;line-height:1.3;text-align:center;
  padding:15px 22px;border:1px solid var(--green);color:var(--green);
  background:linear-gradient(180deg,rgba(147,211,86,.12),rgba(147,211,86,.03));
  letter-spacing:1px;position:relative;overflow:hidden;transition:.14s;text-transform:uppercase;
}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(147,211,86,.35),transparent 70%);transform:translateX(-120%);transition:.5s;}
.btn:hover{background:var(--green);color:#15151b;box-shadow:0 0 24px var(--green-glow);transform:translateY(-1px);}
.btn:hover::after{transform:translateX(120%);}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.6);}
.btn:disabled:hover{background:linear-gradient(180deg,rgba(147,211,86,.12),rgba(147,211,86,.03));color:var(--green);box-shadow:none;transform:none;}
.btn-lg{font-size:15px;padding:19px 34px;}
.btn-block{display:flex;width:100%;}
.btn-amber{border-color:var(--amber);color:var(--amber);background:linear-gradient(180deg,rgba(255,194,61,.12),rgba(255,194,61,.03));}
.btn-amber:hover{background:var(--amber);color:#120c00;box-shadow:0 0 24px rgba(255,194,61,.5);}
.btn-red{border-color:var(--red);color:var(--red);background:linear-gradient(180deg,rgba(255,59,48,.12),rgba(255,59,48,.03));}
.btn-red:hover{background:var(--red);color:#120000;box-shadow:0 0 24px var(--red-glow);}
.btn-ghost{border-color:var(--green-deep);color:var(--txt-dim);background:transparent;font-family:var(--mono);font-size:12px;padding:11px 16px;}
.btn-ghost:hover{color:var(--green);border-color:var(--green-dim);background:rgba(147,211,86,.05);box-shadow:none;transform:none;}
.btn-sm{font-family:var(--mono);font-size:11px;padding:8px 12px;letter-spacing:.5px;}

/* ============================================================
   LANDING / HERO
   ============================================================ */
.hero{position:relative;padding:60px 0 30px;overflow:hidden;}
.hero-banner{
  position:absolute;inset:0;background-image:url('../assets/banner.jpeg');
  background-size:cover;background-position:center;opacity:.10;filter:saturate(1.2) hue-rotate(40deg) contrast(1.1);
  mask-image:linear-gradient(180deg,#000 0%, transparent 92%);
}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .9fr;gap:30px;align-items:center;}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:var(--red);border:1px solid var(--red);padding:6px 11px;letter-spacing:2px;margin-bottom:20px;background:rgba(255,59,48,.06);text-transform:uppercase;}
.hero-h1{font-family:var(--pixel);font-size:clamp(26px,4vw,46px);line-height:1.25;margin:0 0 18px;color:#eef0f5;text-shadow:0 0 18px var(--green-glow), 3px 3px 0 var(--green-deep);}
.hero-h1 .vir{color:var(--green);}
.hero-sub{font-size:19px;font-family:var(--term);color:var(--txt);max-width:560px;line-height:1.3;}
.hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;align-items:center;}

.hero-terminal{min-height:300px;}
.term-screen{font-family:var(--term);font-size:18px;line-height:1.32;color:var(--green);height:300px;overflow:hidden;padding:14px;background:#1a1922;border:1px solid var(--panel-line);position:relative;}
.term-screen .ln{white-space:pre-wrap;word-break:break-word;}
.term-screen .ok{color:var(--green);}
.term-screen .warn{color:var(--amber);}
.term-screen .err{color:var(--red);}
.term-screen .dimln{color:var(--txt-faint);}
.term-cursor{display:inline-block;width:9px;height:17px;background:var(--green);vertical-align:-2px;animation:blink 1s steps(2) infinite;box-shadow:0 0 8px var(--green-glow);}

/* stats strip */
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px;}
.stat{background:var(--panel);border:1px solid var(--panel-line);padding:18px 16px;position:relative;overflow:hidden;}
.stat::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--green);box-shadow:0 0 10px var(--green-glow);}
.stat-num{font-family:var(--pixel);font-size:24px;color:var(--green);text-shadow:0 0 12px var(--green-glow);}
.stat-num.red{color:var(--red);text-shadow:0 0 12px var(--red-glow);}
.stat-lbl{font-size:11px;color:var(--txt-dim);letter-spacing:1.5px;margin-top:8px;text-transform:uppercase;}

/* global infection meter */
.global-meter{margin-top:30px;}
.meter-shell{height:30px;border:1px solid var(--green-dim);background:#15151b;position:relative;overflow:hidden;box-shadow:inset 0 0 18px rgba(0,0,0,.7);}
.meter-fill{height:100%;width:0;background:repeating-linear-gradient(90deg,var(--green) 0 12px,var(--green-dim) 12px 18px);box-shadow:0 0 16px var(--green-glow);transition:width 1.2s cubic-bezier(.2,.8,.2,1);position:relative;}
.meter-fill::after{content:"";position:absolute;right:0;top:0;bottom:0;width:18px;background:#eef0f5;box-shadow:0 0 18px var(--green);}
.meter-grid{position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(0,0,0,.5) calc(10% - 1px) 10%);}
.meter-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--pixel);font-size:13px;color:#eef0f5;text-shadow:0 0 6px #000,0 0 10px var(--green-glow);}

/* feature cards on landing */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px;}
.feat{background:var(--panel);border:1px solid var(--panel-line);padding:20px;transition:.16s;}
.feat:hover{border-color:var(--green-dim);transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.5);}
.feat-ico{font-family:var(--pixel);font-size:20px;color:var(--green);margin-bottom:12px;}
.feat h3{font-size:13px;margin-bottom:8px;}
.feat p{font-size:14px;color:var(--txt-dim);font-family:var(--mono);margin:0;}

.ape-strip{display:flex;gap:0;margin-top:30px;overflow:hidden;border:1px solid var(--panel-line);}
.ape-strip img{width:14.2%;aspect-ratio:1;object-fit:cover;border-right:1px solid var(--panel-line);filter:saturate(.7);transition:.2s;}
.ape-strip img:hover{filter:saturate(1.4) brightness(1.1);transform:scale(1.06);z-index:2;}

/* ============================================================
   ONBOARDING / STEPS
   ============================================================ */
.steps-head{display:flex;gap:8px;justify-content:center;margin:10px 0 26px;flex-wrap:wrap;}
.step-chip{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--txt-faint);border:1px solid var(--green-deep);padding:8px 13px;letter-spacing:1px;}
.step-chip .n{font-family:var(--pixel);font-size:11px;}
.step-chip.active{color:var(--green);border-color:var(--green);background:rgba(147,211,86,.07);box-shadow:0 0 12px var(--green-glow);}
.step-chip.done{color:var(--green-soft);border-color:var(--green-dim);}
.step-chip.done .n::after{content:" ✓";}

.onb{max-width:620px;margin:0 auto;}
.wallet-list{display:grid;gap:10px;margin-top:6px;}
.wallet-opt{display:flex;align-items:center;gap:14px;padding:15px;border:1px solid var(--panel-line);background:var(--panel);transition:.14s;text-align:left;width:100%;color:var(--txt);}
.wallet-opt:hover{border-color:var(--green);background:rgba(147,211,86,.06);box-shadow:0 0 14px var(--green-glow);transform:translateX(4px);}
.wallet-ico{width:38px;height:38px;display:grid;place-items:center;font-size:20px;border:1px solid var(--panel-line);background:#1a1922;}
.wallet-opt .wn{font-family:var(--mono);font-size:15px;color:var(--txt);}
.wallet-opt .wd{font-size:11px;color:var(--txt-faint);}
.wallet-opt .arr{margin-left:auto;color:var(--green-dim);}

.field{margin-bottom:18px;}
.field label{display:block;font-size:11px;color:var(--green-soft);letter-spacing:1.5px;margin-bottom:7px;text-transform:uppercase;}
.field input,.field textarea,.field select{
  width:100%;background:#1a1922;border:1px solid var(--panel-line);color:var(--txt);
  font-family:var(--mono);font-size:15px;padding:12px 13px;outline:none;transition:.12s;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--green);box-shadow:0 0 0 1px var(--green-dim),0 0 14px var(--green-glow);}
.field textarea{resize:vertical;min-height:84px;}
.field .hint{font-size:11px;color:var(--txt-faint);margin-top:5px;}
.field.err input,.field.err textarea{border-color:var(--red);box-shadow:0 0 0 1px var(--red);}
.field-err{color:var(--red);font-size:11px;margin-top:5px;}
.input-prefix{display:flex;align-items:center;border:1px solid var(--panel-line);background:#1a1922;}
.input-prefix span{padding:0 12px;color:var(--txt-faint);font-family:var(--mono);border-right:1px solid var(--panel-line);}
.input-prefix input{border:none;}

.x-connect-card{text-align:center;padding:24px;}
.x-logo{font-family:var(--pixel);font-size:40px;color:var(--txt);margin-bottom:10px;}

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash-grid{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start;}
.id-card{position:relative;overflow:hidden;}
.id-card .avatar{width:100%;aspect-ratio:1;max-height:360px;object-fit:cover;object-position:center top;border-bottom:1px solid var(--panel-line);filter:saturate(.9) contrast(1.05);display:block;}
.id-card .avatar-wrap{position:relative;}
.avatar-wrap .strain-tag{position:absolute;left:8px;bottom:8px;background:rgba(20,20,25,.85);border:1px solid var(--green-dim);color:var(--green);font-size:11px;padding:4px 8px;letter-spacing:1px;}
.avatar-wrap .scanline-mini{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.25) 2px 4px);pointer-events:none;}
.id-rows{padding:14px;}
.id-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed var(--green-deep);font-size:13px;}
.id-row:last-child{border-bottom:none;}
.id-row .k{color:var(--txt-dim);font-size:11px;letter-spacing:1px;}
.id-row .v{color:var(--green);font-family:var(--mono);text-shadow:0 0 6px var(--green-glow);}

.infect-meter-lg .meter-shell{height:44px;}
.infect-meter-lg .meter-pct{font-size:18px;}
.infect-stage{display:flex;justify-content:space-between;font-size:11px;color:var(--txt-faint);margin-top:8px;letter-spacing:1px;}

.daily-box{text-align:center;padding:26px 22px;}
.daily-status{font-family:var(--term);font-size:21px;margin-bottom:6px;}
.daily-status.ready{color:var(--green);}
.daily-status.done{color:var(--txt-dim);}
.daily-status.danger{color:var(--red);}
.daily-timer{font-family:var(--pixel);font-size:18px;color:var(--amber);text-shadow:0 0 10px rgba(255,194,61,.5);margin:10px 0;}
.daily-gain{font-size:13px;color:var(--green-soft);margin-top:8px;}

.streak-flame{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--pixel);font-size:26px;color:var(--amber);text-shadow:0 0 14px rgba(255,194,61,.6);}
.streak-days{display:flex;gap:5px;justify-content:center;margin-top:12px;flex-wrap:wrap;}
.streak-day{width:26px;height:26px;border:1px solid var(--green-deep);display:grid;place-items:center;font-size:11px;color:var(--txt-faint);font-family:var(--mono);}
.streak-day.hit{background:rgba(255,194,61,.15);border-color:var(--amber);color:var(--amber);box-shadow:0 0 8px rgba(255,194,61,.4);}
.streak-day.miss{background:rgba(255,59,48,.1);border-color:var(--red);color:var(--red);}

.wl-track{margin-top:8px;}
.wl-bar{height:18px;border:1px solid var(--green-dim);background:#15151b;position:relative;overflow:hidden;}
.wl-bar-fill{height:100%;background:linear-gradient(90deg,var(--green-dim),var(--green));box-shadow:0 0 12px var(--green-glow);transition:width .8s;}
.wl-marks{display:flex;justify-content:space-between;font-size:10px;color:var(--txt-faint);margin-top:6px;}

/* achievements */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
.ach{border:1px solid var(--panel-line);background:var(--panel);padding:14px;text-align:center;position:relative;transition:.16s;}
.ach.locked{filter:grayscale(1);opacity:.45;}
.ach.unlocked:hover{transform:translateY(-3px);border-color:var(--green-dim);box-shadow:0 8px 24px rgba(0,0,0,.5);}
.ach.unlocked{border-color:var(--green-deep);}
.ach-ico{font-size:30px;margin-bottom:8px;line-height:1;}
.ach-name{font-family:var(--mono);font-size:12px;color:var(--green);margin-bottom:4px;}
.ach-desc{font-size:10px;color:var(--txt-dim);line-height:1.3;}
.ach.unlocked::after{content:"UNLOCKED";position:absolute;top:6px;right:6px;font-size:8px;color:var(--green);letter-spacing:1px;}
.ach.locked::after{content:"LOCKED";position:absolute;top:6px;right:6px;font-size:8px;color:var(--txt-faint);letter-spacing:1px;}

/* ============================================================
   LEADERBOARD
   ============================================================ */
.lb-table{width:100%;border-collapse:collapse;font-size:14px;}
.lb-table th{font-family:var(--mono);font-size:11px;color:var(--txt-dim);letter-spacing:1.5px;text-align:left;padding:11px 12px;border-bottom:1px solid var(--green-dim);text-transform:uppercase;}
.lb-table td{padding:11px 12px;border-bottom:1px solid var(--green-deep);font-family:var(--mono);}
.lb-table tr{transition:.1s;}
.lb-table tbody tr:hover{background:rgba(147,211,86,.05);}
.lb-table tr.me{background:rgba(147,211,86,.1);box-shadow:inset 3px 0 0 var(--green);}
.lb-rank{font-family:var(--pixel);font-size:13px;color:var(--txt-dim);}
.lb-rank.r1{color:#ffd700;text-shadow:0 0 10px rgba(255,215,0,.6);}
.lb-rank.r2{color:#cfd8e0;}
.lb-rank.r3{color:#cd7f32;}
.lb-user{display:flex;align-items:center;gap:9px;}
.lb-user img{width:28px;height:28px;border:1px solid var(--panel-line);}
.lb-pct{color:var(--green);text-shadow:0 0 6px var(--green-glow);font-weight:bold;}
.lb-streak{color:var(--amber);}
.badge{display:inline-block;font-size:9px;padding:2px 6px;border:1px solid;letter-spacing:1px;margin-left:5px;}
.badge.wl{color:var(--green);border-color:var(--green-dim);}
.badge.og{color:var(--amber);border-color:var(--amber);}
.lb-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px;}
.podium{border:1px solid var(--panel-line);background:var(--panel);padding:18px;text-align:center;position:relative;}
.podium img{width:64px;height:64px;border:1px solid var(--green-dim);margin-bottom:10px;}
.podium.p1{border-color:#ffd700;box-shadow:0 0 24px rgba(255,215,0,.25);transform:translateY(-10px);}
.podium.p1 img{border-color:#ffd700;box-shadow:0 0 16px rgba(255,215,0,.5);}
.podium .crown{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:22px;}
.podium .pu{font-family:var(--mono);font-size:13px;color:var(--green);}
.podium .pp{font-family:var(--pixel);font-size:16px;color:var(--green);margin-top:6px;text-shadow:0 0 10px var(--green-glow);}

/* ============================================================
   MODALS / TOASTS
   ============================================================ */
.modal-root{position:fixed;inset:0;z-index:8000;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal-backdrop{position:absolute;inset:0;background:rgba(12,11,17,.82);backdrop-filter:blur(3px);animation:fadeIn .2s;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{position:relative;width:min(560px,94vw);max-height:90vh;overflow:auto;animation:modalIn .25s cubic-bezier(.2,.9,.3,1);}
@keyframes modalIn{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
.modal-virus{border:2px solid var(--red);box-shadow:0 0 0 1px #000,0 0 50px var(--red-glow);}
.modal-virus .win-bar{background:linear-gradient(180deg,#3a0d0a,#1e0605);border-color:var(--red);color:var(--red);}

.toast-root{position:fixed;top:70px;right:14px;z-index:8500;display:flex;flex-direction:column;gap:10px;max-width:340px;}
.toast{border:1px solid var(--green-dim);background:rgba(27,26,35,.96);padding:13px 15px;font-size:13px;color:var(--txt);box-shadow:0 8px 26px rgba(0,0,0,.5);animation:toastIn .3s;position:relative;overflow:hidden;}
.toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green);}
.toast.warn::before{background:var(--amber);}
.toast.err::before{background:var(--red);}
.toast .tt{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--green);margin-bottom:3px;text-transform:uppercase;}
.toast.warn .tt{color:var(--amber);}.toast.err .tt{color:var(--red);}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}

/* infection result reveal */
.reveal-pct{font-family:var(--pixel);font-size:54px;color:var(--green);text-shadow:0 0 24px var(--green-glow);text-align:center;margin:10px 0;}
.reveal-id{font-family:var(--pixel);font-size:22px;color:var(--amber);text-align:center;letter-spacing:2px;}

/* infection card canvas */
.card-preview{display:flex;flex-direction:column;align-items:center;gap:14px;}
#card-canvas{width:100%;max-width:420px;border:1px solid var(--green-dim);box-shadow:0 0 30px rgba(0,0,0,.6);background:#000;}
.card-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}

/* ============================================================
   ADMIN
   ============================================================ */
.admin-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;}
.admin-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px;}
.admin-stat{border:1px solid var(--panel-line);background:var(--panel);padding:14px;}
.admin-stat .v{font-family:var(--pixel);font-size:20px;color:var(--green);text-shadow:0 0 10px var(--green-glow);}
.admin-stat .k{font-size:11px;color:var(--txt-dim);letter-spacing:1px;margin-top:6px;text-transform:uppercase;}
.admin-table{width:100%;border-collapse:collapse;font-size:13px;}
.admin-table th{font-family:var(--mono);font-size:10px;color:var(--txt-dim);letter-spacing:1px;text-align:left;padding:9px;border-bottom:1px solid var(--green-dim);text-transform:uppercase;}
.admin-table td{padding:9px;border-bottom:1px solid var(--green-deep);font-family:var(--mono);font-size:12px;vertical-align:middle;}
.admin-table input{width:64px;background:#1a1922;border:1px solid var(--panel-line);color:var(--green);font-family:var(--mono);padding:4px 6px;}
.status-tag{font-size:10px;padding:2px 7px;border:1px solid;letter-spacing:1px;}
.status-tag.pending{color:var(--amber);border-color:var(--amber);}
.status-tag.approved{color:var(--green);border-color:var(--green-dim);}
.status-tag.rejected{color:var(--red);border-color:var(--red);}
.tweet-verify{display:flex;align-items:center;gap:6px;}
.tweet-verify.ok{color:var(--green);}
.tweet-verify.no{color:var(--txt-faint);}

/* footer */
.foot{border-top:1px solid var(--panel-line);margin-top:50px;padding:26px 0;text-align:center;color:var(--txt-faint);font-size:12px;}
.foot a{color:var(--green-dim);text-decoration:none;}
.foot a:hover{color:var(--green);}

/* misc utils */
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--green-deep),transparent);margin:24px 0;}
.tag-glitch{animation:tagGlitch 4s infinite;}
@keyframes tagGlitch{0%,97%,100%{transform:none;}98%{transform:translate(-2px,1px);}99%{transform:translate(2px,-1px);}}
.warn-banner{border:1px solid var(--red);background:rgba(255,59,48,.08);padding:13px 16px;color:var(--red);font-family:var(--mono);font-size:13px;display:flex;align-items:center;gap:10px;animation:warnPulse 1.6s infinite;}
@keyframes warnPulse{50%{background:rgba(255,59,48,.16);}}

.glitch-text{position:relative;display:inline-block;}
.glitch-text::before,.glitch-text::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;}
.glitch-text::before{color:var(--cyan);animation:gl1 3s infinite linear alternate;clip-path:inset(0 0 60% 0);}
.glitch-text::after{color:var(--magenta);animation:gl2 2.5s infinite linear alternate;clip-path:inset(60% 0 0 0);}
@keyframes gl1{0%,90%,100%{transform:none;opacity:0}92%{transform:translate(-2px,0);opacity:.8}96%{transform:translate(2px,0);opacity:.6}}
@keyframes gl2{0%,90%,100%{transform:none;opacity:0}93%{transform:translate(2px,0);opacity:.7}97%{transform:translate(-2px,0);opacity:.5}}

.typewriter-line{overflow:hidden;white-space:nowrap;}

/* ============================================================
   HOMEPAGE REWORK (v2 palette)
   ============================================================ */
.hero{padding:64px 0 26px;}
.hero-banner{opacity:.07;filter:saturate(1) contrast(1) brightness(.9);}
.hero-scan{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 2px, transparent 2px 5px);
  mask-image:linear-gradient(180deg,#000,transparent 80%);}
.hero-h1{color:#eef0f5;text-shadow:0 0 22px rgba(147,211,86,.25), 4px 4px 0 rgba(58,91,52,.55);letter-spacing:1px;}
.hero-sub{color:var(--txt-dim);}
.hero-chips{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 2px;}
.hero-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--panel-line);
  background:rgba(42,41,55,.45);padding:9px 13px;font-size:11px;color:var(--txt-dim);letter-spacing:1px;}
.hero-chip b{font-family:var(--pixel);font-size:12px;color:var(--green);text-shadow:0 0 8px var(--green-glow);}
.hero-chip.alt b{color:var(--red);text-shadow:0 0 8px var(--red-glow);}

/* section heads */
.sec-head{text-align:center;margin-bottom:26px;}
.sec-head .label{display:inline-block;margin-bottom:8px;color:var(--green-dim);}
.sec-head h2{margin:0 auto;}

.meter-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.meter-head .label{display:inline-flex;align-items:center;gap:8px;color:var(--green);}
.global-meter{margin-top:34px;}

/* stats refine */
.stats-strip{margin-top:24px;}
.stat{background:linear-gradient(180deg,var(--panel),var(--panel-2));transition:.16s;}
.stat:hover{transform:translateY(-3px);border-color:var(--green-dim);}
.stat::before{background:var(--green-dim);}
.red-stat::before{background:var(--red);box-shadow:0 0 10px var(--red-glow);}

/* how-it-works */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.step3{position:relative;border:1px solid var(--panel-line);background:linear-gradient(180deg,var(--panel),var(--panel-2));padding:26px 22px 24px;overflow:hidden;transition:.16s;}
.step3::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,var(--green),transparent);}
.step3:hover{transform:translateY(-3px);border-color:var(--green-dim);box-shadow:0 14px 34px rgba(0,0,0,.45);}
.step3 .sn{position:absolute;top:14px;right:18px;font-family:var(--pixel);font-size:26px;color:var(--green-deep);}
.step3 .si{color:var(--green);margin-bottom:14px;}
.step3 .si .pico{width:36px;height:36px;}
.step3 h3{font-size:13px;margin-bottom:9px;}
.step3 p{font-size:14px;color:var(--txt-dim);font-family:var(--mono);margin:0;line-height:1.5;}

/* rewards band */
.rewards-band{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--panel-line);
  background:linear-gradient(180deg,var(--panel),var(--panel-2));position:relative;}
.rewards-band::before,.rewards-band::after{content:"";position:absolute;width:13px;height:13px;pointer-events:none;}
.rewards-band::before{top:-1px;left:-1px;border-top:2px solid var(--green);border-left:2px solid var(--green);}
.rewards-band::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--green);border-right:2px solid var(--green);}
.reward{padding:28px 22px;text-align:center;border-right:1px solid var(--panel-line);transition:.16s;}
.reward:last-child{border-right:none;}
.reward:hover{background:rgba(147,211,86,.05);}
.reward .ri{color:var(--green);}
.reward .ri .pico{width:32px;height:32px;}
.reward .rt{font-family:var(--pixel);font-size:13px;color:var(--green);margin:12px 0 8px;text-shadow:0 0 10px var(--green-glow);}
.reward .rd{font-size:13px;color:var(--txt-dim);line-height:1.5;}

/* final cta band */
.cta-band{border:1px solid var(--panel-line);background:
  radial-gradient(ellipse 80% 120% at 50% 0%, rgba(147,211,86,.08), transparent 70%),
  linear-gradient(180deg,var(--panel),var(--panel-2));padding:44px 24px;position:relative;overflow:hidden;}
.cta-band::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 2px,transparent 2px 4px);pointer-events:none;}
.cta-h{font-size:clamp(18px,2.4vw,26px);}

/* footer */
.foot{display:flex;align-items:center;justify-content:center;gap:14px;text-align:left;}
.foot-logo{width:40px;height:40px;border:1px solid var(--panel-line);}
.foot a{color:var(--green-dim);text-decoration:none;}
.foot a:hover{color:var(--green);}

/* required social tasks (application form) */
.req-tasks{border:1px solid var(--panel-line);background:rgba(42,41,55,.4);padding:14px;margin-bottom:18px;}
.req-tasks > .label{color:var(--amber);display:flex;align-items:center;gap:8px;}
.req{display:flex;align-items:center;gap:11px;padding:10px 4px;border-bottom:1px dashed var(--green-deep);cursor:pointer;}
.req:last-of-type{border-bottom:none;}
.req input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:0 0 20px;border:1px solid var(--green-dim);background:#1a1922;display:grid;place-items:center;cursor:pointer;transition:.12s;}
.req input[type=checkbox]:checked{background:var(--green);border-color:var(--green);box-shadow:0 0 10px var(--green-glow);}
.req input[type=checkbox]:checked::after{content:"\2713";color:#15151b;font-size:14px;font-weight:bold;}
.req-label{flex:1;font-family:var(--mono);font-size:14px;color:var(--txt);}
.req-label b{color:var(--green);}
.req.done .req-label{color:var(--green-soft);}
.req-open{white-space:nowrap;}
.req-tasks.shake{animation:reqShake .45s;}
@keyframes reqShake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* ============================================================
   PIXEL ICONS
   ============================================================ */
.pico{display:inline-block;width:1em;height:1em;vertical-align:-0.14em;
  fill:currentColor;filter:drop-shadow(0 0 2px currentColor);}
.feat-ico .pico{width:34px;height:34px;}
.ach-ico .pico{width:30px;height:30px;}
.botnav-btn .pico{width:19px;height:19px;}
.step-chip .pico,.wl-marks .pico,.id-row .pico,.daily-status .pico{width:1.05em;height:1.05em;}
.icon-lg{width:46px;height:46px;}
.icon-xl{width:64px;height:64px;}

/* ============================================================
   HUD CORNER BRACKETS (premium window chrome)
   ============================================================ */
.win{--cnr:var(--green-dim);}
.win::before,.win::after{content:"";position:absolute;width:13px;height:13px;pointer-events:none;z-index:3;}
.win::before{top:-1px;left:-1px;border-top:2px solid var(--green);border-left:2px solid var(--green);}
.win::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--green);border-right:2px solid var(--green);}
.win.modal-virus::before{border-color:var(--red);} .win.modal-virus::after{border-color:var(--red);}
.win:hover{border-color:var(--green-dim);}

/* ============================================================
   NOTCHED / SHIMMER BUTTONS (redo)
   ============================================================ */
.btn{clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));}
.btn-sm,.btn-ghost{clip-path:polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));}
.btn::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);opacity:.4;pointer-events:none;}

/* ============================================================
   REFINED INFECTION METER (moving stripes + glow pulse)
   ============================================================ */
.meter-shell{box-shadow:inset 0 0 18px rgba(0,0,0,.8), 0 0 0 1px rgba(147,211,86,.08);}
.meter-fill{background:repeating-linear-gradient(115deg,var(--green) 0 10px,var(--green-soft) 10px 16px,var(--green-dim) 16px 22px);
  background-size:200% 100%;animation:meterFlow 1.1s linear infinite;}
@keyframes meterFlow{to{background-position:-44px 0;}}
.meter-pct{letter-spacing:1px;}

/* ============================================================
   VIEW TRANSITION (data-corruption glitch)
   ============================================================ */
.app.glitching{animation:viewGlitch .32s steps(2) 1;}
@keyframes viewGlitch{
  0%{opacity:.2;transform:translateX(-3px) skewX(-1deg);filter:hue-rotate(60deg) saturate(2);}
  25%{transform:translateX(4px);clip-path:inset(8% 0 40% 0);}
  50%{transform:translateX(-2px);clip-path:inset(60% 0 5% 0);}
  100%{opacity:1;transform:none;filter:none;clip-path:none;}
}

/* ============================================================
   WALLET OPTION ICON BOXES + ONBOARDING POLISH
   ============================================================ */
.wallet-ico .pico{width:22px;height:22px;}
.wallet-opt:hover .wallet-ico{color:var(--green);box-shadow:0 0 12px var(--green-glow);}
.x-logo .pico{width:54px;height:54px;}

/* streak flame (icon + number) */
.streak-flame{align-items:center;}
.streak-flame .pico{width:30px;height:30px;}

/* podium medal */
.podium .medal{display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--pixel);font-size:13px;margin-bottom:8px;}
.podium .medal .pico{width:22px;height:22px;}
.podium.p1 .medal{color:#ffd700;} .podium.p2 .medal{color:#cfd8e0;} .podium.p3 .medal{color:#cd7f32;}

/* status chips with inline icons */
.inline-ico{display:inline-flex;align-items:center;gap:6px;}

/* refined feature card hover */
.feat{position:relative;overflow:hidden;}
.feat::after{content:"";position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 18px 18px 0;border-color:transparent var(--green-deep) transparent transparent;transition:.2s;}
.feat:hover::after{border-width:0 24px 24px 0;border-color:transparent var(--green) transparent transparent;}
.feat-ico{color:var(--green);}

/* achievement icon color + unlock pulse */
.ach.unlocked .ach-ico{color:var(--green);}
.ach.locked .ach-ico{color:var(--txt-faint);}
.ach.unlocked{animation:none;}
.ach.just-unlocked{animation:achPop .6s ease;}
@keyframes achPop{0%{transform:scale(.6);opacity:0;}60%{transform:scale(1.12);}100%{transform:scale(1);opacity:1;}}

/* toast icon */
.toast .ti{position:absolute;right:12px;top:50%;transform:translateY(-50%);opacity:.25;}
.toast .ti .pico{width:30px;height:30px;}

/* heading scanline accent */
h1::after,h2::after{content:"";display:block;width:54px;height:3px;margin-top:10px;
  background:linear-gradient(90deg,var(--green),transparent);box-shadow:0 0 8px var(--green-glow);}
.center h1::after,.center h2::after{margin-left:auto;margin-right:auto;}

/* reveal pct breathing */
.reveal-pct{animation:revealPulse 1.6s ease-in-out infinite;}
@keyframes revealPulse{50%{text-shadow:0 0 40px var(--green),0 0 14px var(--green-glow);}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:20px;}
  .hero{padding:34px 0 20px;}
  .term-screen{height:230px;font-size:16px;}
  .steps3{grid-template-columns:1fr;}
  .rewards-band{grid-template-columns:1fr;}
  .reward{border-right:none;border-bottom:1px solid var(--panel-line);}
  .reward:last-child{border-bottom:none;}
  .dash-grid{grid-template-columns:1fr;}
  .stats-strip{grid-template-columns:repeat(2,1fr);}
  .feat-grid{grid-template-columns:1fr;}
  .topbar-nav{display:none;}
  .topbar-title{font-size:11px;}
  .botnav{display:flex;}
  .app{padding-bottom:70px;}
  .audio-toggle{bottom:74px;}
  .toast-root{top:62px;}
}
@media (max-width:560px){
  body{font-size:15px;}
  h1{font-size:22px;}
  .hero-h1{font-size:24px;}
  .stats-strip{grid-template-columns:1fr 1fr;}
  .lb-podium{grid-template-columns:1fr;}
  .lb-table .hide-sm{display:none;}
  .win-body{padding:13px;}
  .reveal-pct{font-size:40px;}
}