/* ============================================================
   AirGrab — premium visual system, dark edition
   Deep canvas + Coinbase blue = trust. Motion = alive. v17
   ============================================================ */

:root{
  --blue:#0052ff; --blue-hi:#4d8bff; --blue-active:#003ecc;
  --gold:#f4b000; --gold-text:#e8b64c;
  --canvas:#0a0b0d; --surface:#13161c; --surface-2:#1a1f27; --surface-3:#222834;
  --hairline:#22262e; --hairline-soft:#1a1e25;
  --ink:#f3f5f8; --body:#a9b0bb; --muted:#7e8590; --muted-soft:#565d68;
  --up:#3ddc97; --up-soft:#58c08f; --down:#ff5d6c;
  --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:100px;
  --shadow:0 2px 8px rgba(0,0,0,.35);
  --shadow-lg:0 10px 34px rgba(0,0,0,.5);
  --shadow-blue:0 8px 24px rgba(0,82,255,.35);
  --spring:cubic-bezier(.22,1.1,.35,1);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
body{overscroll-behavior:none}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.up{color:var(--up)} .down{color:var(--down)}
.hidden{display:none!important}
button{font-family:inherit}
a{color:var(--blue-hi);text-decoration:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}

#app{max-width:520px;margin:0 auto;min-height:100vh;position:relative;padding-bottom:84px}

/* ---------- screens & transitions ---------- */
.screen{display:none;animation:screenIn .3s var(--spring)}
.screen.active{display:block}
.screen.active.slideUp{animation:slideUp .44s var(--spring)}
@keyframes screenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes slideUp{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}

/* ---------- type ---------- */
.h-sec{font-size:22px;font-weight:600;letter-spacing:-.4px;margin:0;color:var(--ink)}
.title{font-size:18px;font-weight:600;color:var(--ink)}
.sm{font-size:14px;color:var(--body)}
.cap{font-size:12px;font-weight:600;letter-spacing:.3px}
.muted{color:var(--muted)}
.seeAll{cursor:pointer;color:var(--blue-hi);font-weight:600}

/* ---------- buttons ---------- */
.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;
  border-radius:var(--r-pill);height:52px;font-size:16px;font-weight:600;cursor:pointer;
  transition:transform .18s var(--spring),box-shadow .25s ease,background .15s ease;overflow:hidden}
.btn:active{transform:scale(.965)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:var(--shadow-blue)}
.btn-primary:active{background:var(--blue-active)}
.btn-onDark{background:#fff;color:#0a0b0d;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.btn-soft{background:var(--surface-2);color:var(--ink);border:1px solid var(--hairline)}
.btn:disabled{background:#1c2331;color:#5b6470;box-shadow:none;cursor:default}
.btn-glow{animation:btnBreath 3.2s ease-in-out infinite}
@keyframes btnBreath{0%,100%{box-shadow:0 8px 24px rgba(0,82,255,.35)}50%{box-shadow:0 8px 36px rgba(0,82,255,.65)}}
.btnArrow{display:inline-block;transition:transform .2s var(--spring)}
.btn:active .btnArrow{transform:translateX(4px)}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-pill)}
.badge-safe{background:rgba(61,220,151,.12);color:var(--up)}
.badge-blue{background:rgba(77,139,255,.14);color:var(--blue-hi)}
.badge-warn{position:relative;overflow:hidden;background:rgba(244,176,0,.13);color:var(--gold-text)}
.badge-warn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);
  animation:sheen 3.4s ease-in-out infinite}
@keyframes sheen{0%,55%{left:-70%}85%,100%{left:130%}}
.badge-gold{background:rgba(244,176,0,.16);color:var(--gold-text)}
.liveBadge{background:rgba(61,220,151,.13);color:var(--up)}
.liveDot{width:7px;height:7px;border-radius:50%;background:var(--up);animation:livePulse 1.8s ease-in-out infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(61,220,151,.5)}50%{box-shadow:0 0 0 5px rgba(61,220,151,0)}}

.pad{padding:20px}
.pageIntro{padding:14px 20px 0;margin:0}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-xl);padding:18px;box-shadow:var(--shadow)}

/* ============================================================
   ENTRY — cinematic hero
   ============================================================ */
#s-entry{background:var(--canvas);min-height:100vh;color:#fff;padding:0}
.heroWrap{position:relative;padding:52px 22px 26px;display:flex;flex-direction:column;min-height:100vh;overflow:hidden}
.heroWrap>*{position:relative;z-index:1}
.heroBg{position:absolute;inset:0;z-index:0;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5}
.orbA{width:340px;height:340px;left:-120px;top:-80px;background:radial-gradient(circle,#0052ff 0%,transparent 70%);animation:orbDrift 14s ease-in-out infinite alternate}
.orbB{width:280px;height:280px;right:-110px;bottom:6%;background:radial-gradient(circle,#123a8f 0%,transparent 70%);animation:orbDrift 18s ease-in-out infinite alternate-reverse}
@keyframes orbDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(34px,26px) scale(1.12)}}
.floaty{position:absolute;font-size:20px;opacity:0;animation:floatDown 13s linear infinite}
.f1{left:12%;animation-delay:0s;font-size:22px}
.f2{left:78%;animation-delay:2.6s;font-size:15px}
.f3{left:55%;animation-delay:5.4s;font-size:26px}
.f4{left:30%;animation-delay:8s;font-size:14px}
.f5{left:88%;animation-delay:10.5s;font-size:18px}
@keyframes floatDown{0%{transform:translateY(-8vh) rotate(-8deg);opacity:0}
  8%{opacity:.22}60%{opacity:.22}
  100%{transform:translateY(104vh) rotate(10deg);opacity:0}}

.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-.2px;color:var(--ink)}
.brand .logo{width:28px;height:28px;border-radius:9px;background:linear-gradient(145deg,#2b6dff,#0043d6);
  display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 4px 12px rgba(0,82,255,.4)}
.heroSpacer{flex:1;min-height:20px}
.heroHi{color:#8a9099;font-size:15px;margin:0 0 4px;min-height:20px}
.heroTitle{font-weight:400;letter-spacing:-1.6px;line-height:1.02;font-size:42px;margin:0 0 14px;
  animation:riseIn .7s var(--spring) both}
.heroTitle b{font-weight:650;background:linear-gradient(100deg,#4d8bff,#9dc0ff 60%,#4d8bff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.heroSub{color:#b5bac2;font-size:16px;margin:0 0 24px;max-width:340px;animation:riseIn .7s .08s var(--spring) both}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.addrField{background:#14171d;border:1.5px solid #262a30;border-radius:var(--r-lg);
  padding:16px;color:#fff;font-family:var(--mono);font-size:13px;width:100%;margin-bottom:12px;
  transition:border-color .2s ease,box-shadow .25s ease;animation:riseIn .7s .16s var(--spring) both}
.addrField::placeholder{color:#5b616e}
.addrField:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,82,255,.22),0 0 24px rgba(0,82,255,.25)}
#s-entry .btn-primary{animation:riseIn .7s .22s var(--spring) both,btnBreath 3.2s 1s ease-in-out infinite}
.errline{color:#ff6b7d;font-size:13px;margin-top:10px;min-height:18px}

.safeNote{display:flex;gap:10px;align-items:flex-start;color:#9aa0a8;font-size:13px;margin-top:14px;line-height:1.45;
  border:1px solid #23262b;background:rgba(255,255,255,.03);border-radius:var(--r-lg);padding:12px}
.safeNote b{color:#fff}
.safeShield{font-size:16px;line-height:1.3}
.safeBadge{flex-shrink:0;margin-top:2px}

.ticker{margin:14px -22px 0;padding:9px 0;border-top:1px solid #1c1f24;border-bottom:1px solid #1c1f24;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tickerTrack{display:flex;gap:34px;width:max-content;white-space:nowrap;font-size:12.5px;color:#8a9099;
  animation:tickerMove 34s linear infinite}
.tickerTrack span{display:inline-flex;gap:6px;align-items:center}
@keyframes tickerMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.guideMini{border:1px solid #262a30;border-radius:var(--r-lg);background:rgba(255,255,255,.04);
  padding:0;color:#aeb4bd;font-size:13px;line-height:1.45;margin-top:12px;overflow:hidden}
.guideMini summary{list-style:none;cursor:pointer;padding:12px;display:flex;align-items:center;gap:6px;min-height:44px}
.guideMini summary::-webkit-details-marker{display:none}
.guideMini summary b{color:#fff}
.guideMini .chev{margin-left:auto;transition:transform .25s var(--spring);color:#5b616e}
.guideMini[open] .chev{transform:rotate(180deg)}
.guideMini>span{display:block;padding:0 12px 12px}
.guideMini code{font-family:var(--mono);color:#fff}

.heroStats{display:flex;gap:22px;margin-top:16px;padding-top:18px;border-top:1px solid #23262b}
.heroStats .n{font-size:20px;font-weight:600}.heroStats .l{color:#8a9099;font-size:12px}

/* ============================================================
   SCANNING — the hero moment
   ============================================================ */
#s-scan{background:radial-gradient(120% 90% at 50% 0%,#101524 0%,var(--canvas) 55%);min-height:100vh;color:#fff;padding:22px}
#s-scan.active{display:flex;flex-direction:column;align-items:center;justify-content:center}
.scanStage{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}
.radar{position:relative;width:172px;height:172px;margin-bottom:26px}
.scanArc{position:absolute;inset:0;transform:rotate(-90deg)}
.scanArcTrack{fill:none;stroke:#23262b;stroke-width:4}
.scanArcFill{fill:none;stroke:var(--blue);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:377;stroke-dashoffset:377;transition:stroke-dashoffset .8s ease;
  filter:drop-shadow(0 0 6px rgba(0,82,255,.8))}
.radarRing{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(0,82,255,.35);
  animation:radarPing 2.6s ease-out infinite}
.rr2{animation-delay:1.3s}
@keyframes radarPing{from{transform:scale(.6);opacity:.9}to{transform:scale(1.35);opacity:0}}
.radarSweep{position:absolute;inset:14px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(0,82,255,0) 0deg,rgba(0,82,255,.4) 46deg,rgba(0,82,255,0) 70deg);
  animation:spin 2.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.radarCore{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px;
  animation:coreBob 2.4s ease-in-out infinite}
@keyframes coreBob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
.radarCore.found{animation:foundPop .55s var(--spring)}
@keyframes foundPop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.scanTitle{color:#fff;font-size:20px}
.scanChain{color:#8a9099;font-size:14px;margin-top:8px;height:20px;font-family:var(--mono)}
.scanChains{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px;max-width:340px}
.chainChip{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:var(--r-pill);
  border:1px solid #23262b;background:rgba(255,255,255,.03);color:#6b7078;font-size:12.5px;font-weight:600;
  opacity:.45;transform:scale(.96);transition:all .35s var(--spring)}
.chainChip i{width:8px;height:8px;border-radius:50%;background:var(--cc,#627eea);opacity:.5;transition:opacity .3s}
.chainChip b{font-weight:800;color:var(--up);width:0;overflow:hidden;transition:width .3s var(--spring)}
.chainChip.lit{opacity:1;transform:scale(1);color:#e8eaee;border-color:rgba(0,82,255,.45);
  background:rgba(0,82,255,.10);box-shadow:0 0 14px rgba(0,82,255,.18)}
.chainChip.lit i{opacity:1;box-shadow:0 0 8px var(--cc,#627eea)}
.chainChip.lit b{width:14px}
.scanFoot{color:#5b616e;font-size:12.5px;margin-top:24px;max-width:300px;line-height:1.5}

/* ============================================================
   HOME — glowing hero band on the dark canvas
   ============================================================ */
.homeHero{background:radial-gradient(140% 100% at 50% -12%,rgba(0,82,255,.22) 0%,rgba(0,82,255,.05) 45%,transparent 72%);
  color:#fff;padding-bottom:22px;border-bottom:1px solid var(--hairline-soft)}
.appbar{position:sticky;top:0;z-index:20;background:rgba(10,11,13,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--hairline-soft);padding:14px 20px;display:flex;align-items:center;justify-content:space-between}
.appbar .brand{color:var(--ink)}
.appbarDark{position:static;background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}

.balHero{padding:28px 20px 16px;text-align:center}
.balLabel{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.balBig{font-family:var(--mono);font-size:46px;font-weight:500;letter-spacing:-2px;margin:8px 0 2px;color:#fff;
  font-variant-numeric:tabular-nums}
.balBig.goldPop{animation:goldPop 1.4s var(--spring)}
@keyframes goldPop{0%{transform:scale(1)}18%{transform:scale(1.07);text-shadow:0 0 30px rgba(244,176,0,.85)}
  60%{text-shadow:0 0 18px rgba(244,176,0,.4)}100%{transform:scale(1);text-shadow:none}}
.balDelta{font-size:13.5px;font-weight:600;color:var(--muted);font-family:var(--mono)}

.trustCard{display:flex;align-items:center;gap:13px;margin:10px 20px 0;padding:12px 14px;
  border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);background:rgba(255,255,255,.04);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.trustRingWrap{position:relative;width:44px;height:44px;flex-shrink:0}
.trustRing{position:absolute;inset:0;transform:rotate(-90deg)}
.trustTrack{fill:none;stroke:rgba(255,255,255,.1);stroke-width:3.5}
.trustFill{fill:none;stroke:var(--up);stroke-width:3.5;stroke-linecap:round;
  stroke-dasharray:126;stroke-dashoffset:126;transition:stroke-dashoffset 1.1s .3s var(--spring)}
.trustCard.go .trustFill{stroke-dashoffset:0}
.trustMark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--up);font-weight:800;font-size:16px;opacity:0;transform:scale(.5);transition:all .4s 1.1s var(--spring)}
.trustCard.go .trustMark{opacity:1;transform:scale(1)}
.trustTitle{font-weight:700;font-size:14.5px;color:#fff}
.trustChecks{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:2px}
.trustChecks span{font-size:11.5px;color:var(--muted);font-weight:600}

.quickRow{display:flex;gap:10px;padding:16px 20px 8px}
.quickRow .btn{flex:1;height:48px;font-size:15px}

/* ---------- drop summary ---------- */
.dropSummary{margin:12px 20px 6px;border:1px solid rgba(61,220,151,.2);border-radius:var(--r-xl);padding:16px;
  background:linear-gradient(180deg,rgba(61,220,151,.09),rgba(19,22,28,0) 55%),var(--surface);box-shadow:var(--shadow)}
.dropSummaryTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.dropKicker{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--blue-hi)}
.dropHeadline{font-size:20px;font-weight:750;letter-spacing:-.3px;line-height:1.15;margin-top:2px;color:var(--ink)}
.dropMoney{font-family:var(--mono);font-size:42px;font-weight:850;letter-spacing:-1.4px;line-height:1;color:var(--up);margin-top:10px;text-shadow:0 8px 28px rgba(61,220,151,.25)}
.dropMoneySub{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.25px;color:var(--up-soft);margin-top:5px}
.dropSummaryText{font-size:13px;color:var(--body);margin-top:5px}
.dropStats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.dropStat{border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--surface-2);padding:10px}
.dropStatNum{font-family:var(--mono);font-weight:800;font-size:20px;letter-spacing:-.4px;color:var(--ink)}
.dropStatMoney .dropStatNum{color:var(--up);font-size:17px;letter-spacing:-.3px}
.dropStatLabel{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.25px}
.dropSummary .btn{height:46px;margin-top:12px;font-size:14px}
.pulseDot{width:9px;height:9px;border-radius:50%;background:var(--up);box-shadow:0 0 0 5px rgba(61,220,151,.1);margin-top:7px;flex-shrink:0;animation:livePulse 2s ease-in-out infinite}

/* ---------- asset rows ---------- */
.rowList{padding:2px 20px}
.row{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--hairline-soft);
  transition:transform .15s ease}
.row:last-child{border-bottom:0}
.row:active{transform:scale(.985)}
.rowList:not(.settled) .row{animation:rowIn .45s var(--spring) both}
@keyframes rowIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.plate{position:relative;width:42px;height:42px;border-radius:50%;background:var(--surface-2);display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:12.5px;flex-shrink:0;color:var(--ink)}
.plateTxt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.chainDot{position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;border-radius:50%;
  background:#4a5590;border:2px solid var(--canvas);display:flex;align-items:center;justify-content:center;z-index:2}
.chainDot::before{content:"";width:5px;height:5px;background:#fff;transform:rotate(45deg)}
.row .meta{flex:1;min-width:0}
.row .nm{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px;color:var(--ink)}
.row .sub{font-size:13px;color:var(--muted);font-family:var(--mono)}
.row .right{text-align:right;flex-shrink:0}
.row .val{font-family:var(--mono);font-weight:600;font-size:15px;color:var(--ink)}
.vTag{display:inline-flex;align-items:center;font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  padding:2px 6px;border-radius:var(--r-pill);flex-shrink:0}
.vTag.ok{background:rgba(61,220,151,.12);color:var(--up)}
.vTag.unk{background:rgba(244,176,0,.14);color:var(--gold-text)}

/* ---------- airdrop cards ---------- */
.adCard{position:relative;border:1px solid var(--hairline);border-radius:var(--r-xl);padding:16px;margin:12px 20px;
  background:var(--surface);box-shadow:var(--shadow);transition:transform .18s var(--spring),box-shadow .25s ease;overflow:hidden}
.adCard:active{transform:scale(.98)}
.adCard.locked{min-height:214px}
.adCard.locked .adContent{filter:blur(3px);opacity:.5;pointer-events:none}
.adCard .top{display:flex;align-items:center;gap:12px}
.adCard .claimBtn{margin-top:14px;height:48px}
.adPlate{border-radius:14px;color:#fff;font-weight:800}
.adValueLine{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding:11px 12px;border-radius:var(--r-lg);background:rgba(61,220,151,.08);border:1px solid rgba(61,220,151,.2)}
.adValueLine span{font-size:12px;color:var(--up-soft);font-weight:800;text-transform:uppercase;letter-spacing:.25px}
.adValueLine b{font-family:var(--mono);font-size:20px;color:var(--up);letter-spacing:-.5px}
.adFacts{display:grid;gap:6px;margin-top:12px}
.adFacts div{display:flex;gap:8px;font-size:12px;color:var(--body)}
.adFacts b{min-width:58px;color:var(--ink)}
.lockOverlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;background:linear-gradient(180deg,rgba(10,11,13,.55),rgba(10,11,13,.94));z-index:2}
.lockMark{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;font-size:19px;margin-bottom:8px;box-shadow:var(--shadow-blue)}
.lockTitle{font-weight:800;font-size:16px;color:var(--ink)}
.lockCopy{font-size:13px;color:var(--body);max-width:270px;margin:4px 0 12px}
.lockOverlay .btn{height:44px;max-width:220px;font-size:14px}

.infoCard{margin:12px 20px;border:1px solid rgba(0,82,255,.25);background:rgba(0,82,255,.06);border-radius:var(--r-xl);padding:16px}
.infoList{display:grid;gap:10px;margin-top:10px}
.infoList div{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--body)}
.infoList b{min-width:78px;color:var(--ink)}
.empty{padding:34px 20px;text-align:center;color:var(--muted)}
.empty .big{font-size:34px}
.fomoFoot{text-align:center;border:1px solid var(--hairline);background:var(--surface);border-radius:var(--r-xl);padding:22px 18px;box-shadow:var(--shadow)}
.fomoFoot .btn{margin-top:14px;height:48px}

/* ============================================================
   ALERTS
   ============================================================ */
.alertHero{text-align:center;padding:32px 18px}
.bellWrap{position:relative;width:74px;height:74px;margin:0 auto}
.bell{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:38px;
  transform-origin:top center;animation:bellSwing 2.8s ease-in-out infinite}
@keyframes bellSwing{0%,55%,100%{transform:rotate(0)}62%{transform:rotate(13deg)}70%{transform:rotate(-11deg)}
  78%{transform:rotate(7deg)}86%{transform:rotate(-4deg)}92%{transform:rotate(2deg)}}
.bellWave{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(0,82,255,.4);animation:radarPing 2.8s ease-out infinite}
.bw2{animation-delay:1.4s}
.alertPerks{display:flex;flex-direction:column;gap:8px;margin:0 auto 18px;max-width:260px;text-align:left}
.alertPerks span{font-size:13.5px;color:var(--body);background:var(--surface-2);border:1px solid var(--hairline-soft);border-radius:var(--r-md);padding:9px 12px}

/* ============================================================
   ACCOUNT
   ============================================================ */
.profTop{display:flex;align-items:center;gap:14px;padding:20px}
.avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(145deg,#2b6dff,#0043d6);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:24px;overflow:hidden;flex-shrink:0;box-shadow:0 6px 16px rgba(0,82,255,.35)}
.avatar img{width:100%;height:100%;object-fit:cover}
.kv{display:flex;justify-content:space-between;padding:13px 20px;border-bottom:1px solid var(--hairline-soft);font-size:15px}
.kv .k{color:var(--muted)} .kv .v{font-weight:600;font-family:var(--mono);color:var(--ink)}

.tier{border:1px solid var(--hairline);border-radius:var(--r-xl);padding:20px;margin:12px 20px;background:var(--surface)}
.tier.featured{position:relative;background:linear-gradient(160deg,#141d33 0%,#10131a 60%);color:#fff;border-color:rgba(0,82,255,.35);
  overflow:hidden;box-shadow:var(--shadow-lg);animation:tierBreath 4.5s ease-in-out infinite}
@keyframes tierBreath{0%,100%{box-shadow:0 12px 34px rgba(0,82,255,.12)}50%{box-shadow:0 12px 46px rgba(0,82,255,.4)}}
.tierGlow{position:absolute;top:-70px;right:-70px;width:210px;height:210px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,82,255,.45) 0%,transparent 70%);animation:orbDrift 9s ease-in-out infinite alternate;pointer-events:none}
.tier .tname{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.tier .tprice{font-family:var(--mono);font-size:34px;font-weight:500;letter-spacing:-1px;margin:8px 0 2px;color:#fff}
.perMo{font-size:14px;color:var(--muted)}
.tierHint{color:var(--muted);margin-top:-2px}
.priceStrike{color:var(--muted);text-decoration:line-through;text-decoration-thickness:2px;margin-right:6px}
.tier ul{list-style:none;padding:0;margin:14px 0 16px}
.tier li{display:flex;gap:9px;padding:6px 0;font-size:14px;color:var(--body)}
.tier.featured li{color:#c6ccd6}
.tier li::before{content:"\2713";color:var(--up);font-weight:800}
.tierFoot{color:var(--muted);text-align:center;margin-top:12px}

.refCard{margin:12px 20px;border:1px dashed rgba(0,82,255,.5);border-radius:var(--r-xl);padding:18px;background:rgba(0,82,255,.05)}
.refGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.refMetric{background:var(--surface-2);border:1px solid rgba(0,82,255,.25);border-radius:var(--r-lg);padding:12px}
.refNum{font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:-.6px;font-variant-numeric:tabular-nums;color:var(--ink)}
.refLabel{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.refProgress{height:8px;background:rgba(0,82,255,.14);border-radius:var(--r-pill);overflow:hidden;margin-top:12px}
.refFill{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--blue-hi));border-radius:var(--r-pill);
  transition:width .9s var(--spring)}
.refRules{display:grid;gap:8px;margin-top:14px}
.refRules div{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--body)}
.refRules b{min-width:62px;color:var(--ink)}
.refLink{display:flex;gap:8px;margin-top:12px}
.refLink input{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-md);padding:12px;font-family:var(--mono);font-size:11px;color:var(--ink)}
.refLink button{border:0;background:var(--blue);color:#fff;border-radius:var(--r-md);padding:0 16px;min-height:44px;font-weight:600;cursor:pointer;transition:background .2s ease,transform .15s var(--spring)}
.refLink button:active{transform:scale(.94)}
.refLink button.copied{background:#0f8f5f}
.withdrawBtn{margin-top:12px}
.withdrawBtn:disabled{background:var(--surface-2);color:var(--muted)}

/* ============================================================
   TABBAR — dark glass + sliding pill
   ============================================================ */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;z-index:30;
  background:rgba(12,14,18,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--hairline-soft);
  display:none;padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
.tabPill{position:absolute;top:7px;left:0;height:50px;width:70px;border-radius:16px;background:rgba(0,82,255,.16);
  opacity:0;transition:left .35s var(--spring),width .35s var(--spring),opacity .3s ease;pointer-events:none}
.tabPill.show{opacity:1}
.tab{position:relative;flex:1;background:0;border:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 0;min-height:50px;color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;z-index:1;
  transition:color .2s ease}
.tab:focus-visible{outline:none}
.tab.on{color:var(--blue-hi)}
.tab svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s var(--spring)}
.tab.on svg{animation:iconPop .35s var(--spring)}
@keyframes iconPop{0%{transform:scale(1)}45%{transform:scale(1.18) translateY(-2px)}100%{transform:scale(1)}}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(16px) scale(.95);background:#1d222a;border:1px solid #2a3039;color:#fff;font-weight:600;padding:13px 20px;border-radius:var(--r-pill);opacity:0;transition:.28s var(--spring);z-index:60;max-width:92%;text-align:center;font-size:14px;box-shadow:var(--shadow-lg)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.toast.good{background:#0f8f5f;border-color:#0f8f5f}
.secHead{padding:20px 20px 4px;display:flex;align-items:baseline;justify-content:space-between}

/* ============================================================
   PAYMENT SHEET — dark spring slide-up
   ============================================================ */
.payOverlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  z-index:80;display:none;align-items:flex-end;justify-content:center;padding:16px 10px 0}
.payOverlay.show{display:flex;animation:backdropIn .3s ease both}
@keyframes backdropIn{from{opacity:0}to{opacity:1}}
.paySheet{width:100%;max-width:520px;max-height:92vh;overflow:auto;background:#101318;border:1px solid var(--hairline);border-bottom:0;
  border-radius:28px 28px 0 0;padding:10px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 44px rgba(0,0,0,.6)}
.payOverlay.show .paySheet{animation:sheetUp .5s var(--spring) both}
@keyframes sheetUp{from{transform:translateY(60%)}to{transform:translateY(0)}}
.payOverlay.hiding{animation:backdropOut .24s ease both}
.payOverlay.hiding .paySheet{animation:sheetDown .24s ease both}
@keyframes backdropOut{from{opacity:1}to{opacity:0}}
@keyframes sheetDown{from{transform:translateY(0)}to{transform:translateY(40%)}}
.payHandle{width:42px;height:4px;border-radius:var(--r-pill);background:#2a3039;margin:0 auto 14px}
.payHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.iconBtn{width:44px;height:44px;border:0;border-radius:50%;background:var(--surface-2);color:var(--ink);font-weight:700;font-size:16px;cursor:pointer;flex-shrink:0;transition:transform .15s var(--spring)}
.iconBtn:active{transform:scale(.9)}
.paySection{margin-bottom:14px}
.payLabel{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);margin-bottom:8px}
.payPlans{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.payOption,.payMethod{border:1.5px solid var(--hairline);background:var(--surface-2);border-radius:var(--r-lg);padding:12px;
  text-align:left;cursor:pointer;color:var(--ink);min-height:44px;
  transition:border-color .2s ease,box-shadow .2s ease,transform .18s var(--spring)}
.payOption:active,.payMethod:active{transform:scale(.97)}
.payOption.on,.payMethod.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,82,255,.18);background:rgba(0,82,255,.1)}
.payOption .pn,.payMethod .pn{font-weight:700;font-size:14px;color:var(--ink)}
.payOption .pp,.payMethod .pp{font-family:var(--mono);font-size:13px;color:var(--muted);margin-top:2px}
.miniStrike{color:var(--muted-soft);text-decoration:line-through;text-decoration-thickness:1.5px}
.payMethods{display:grid;gap:8px}
.payMethod{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mIconWrap{display:flex;align-items:center;gap:10px;min-width:0}
.mIcon{position:relative;width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.mIcon img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.discountBox{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid rgba(61,220,151,.2);background:rgba(61,220,151,.06);border-radius:var(--r-lg);padding:12px;margin-bottom:10px}
.discountTitle{font-size:14px;font-weight:700;color:var(--ink)}
.invoiceBox{border:1px solid rgba(0,82,255,.3);background:rgba(0,82,255,.08);border-radius:var(--r-lg);padding:14px;margin-top:14px;animation:screenIn .3s var(--spring)}
.invoiceLine{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(0,82,255,.18);padding:9px 0;font-size:14px}
.invoiceLine:first-child{padding-top:0}
.invoiceLine:last-child{border-bottom:0;padding-bottom:0}
.invoiceLine span:first-child{color:var(--muted)}
.invoiceLine b,.invoiceAddr{font-family:var(--mono);font-weight:700;text-align:right;word-break:break-all;color:var(--ink)}
.copyLine{display:flex;gap:8px;margin-top:12px}
.copyLine input{flex:1;min-width:0;border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--surface-2);color:var(--ink);font-family:var(--mono);font-size:11px;padding:12px}
.copyLine button{border:0;background:var(--blue);color:#fff;border-radius:var(--r-md);font-weight:700;padding:0 14px;min-height:44px;cursor:pointer}
.reviewBox{display:grid;gap:10px;margin-top:14px;animation:screenIn .3s var(--spring)}
.refInput{width:100%;border:1.5px solid var(--hairline);background:var(--surface-2);border-radius:var(--r-lg);padding:14px;font-family:var(--mono);font-size:14px;text-transform:uppercase;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease}
.refInput::placeholder{color:var(--muted-soft);text-transform:none}
.refInput:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,82,255,.18)}

/* ---------- confetti ---------- */
.confettiWrap{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden}
.confettiWrap i{position:absolute;top:-14px;width:8px;height:13px;border-radius:2px;opacity:0;
  animation:cfall var(--d,2s) ease-in var(--dl,0s) forwards}
@keyframes cfall{0%{transform:translate(0,0) rotate(0deg);opacity:1}
  100%{transform:translate(var(--dx,0px),106vh) rotate(var(--rot,540deg));opacity:.85}}

/* ---------- skeleton shimmer ---------- */
.skel{position:relative;overflow:hidden;background:var(--surface-2);border-radius:var(--r-md);color:transparent!important}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);animation:skelShine 1.3s infinite}
@keyframes skelShine{100%{transform:translateX(100%)}}

/* ---------- responsive ---------- */
@media(max-width:360px){.payPlans{grid-template-columns:1fr}.paySheet{padding-left:16px;padding-right:16px}.copyLine{display:grid}}
@media(max-width:380px){.dropStats{grid-template-columns:1fr}.dropHeadline{font-size:18px}.dropMoney{font-size:36px}
  .adValueLine{align-items:flex-start;flex-direction:column;gap:5px}.heroTitle{font-size:36px}.balBig{font-size:40px}}

/* ============================================================
   REDUCED MOTION — calm variant, cross-fades only
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .screen{animation:fadeOnly .01ms}
  .tickerTrack{animation:none;transform:none}
  .floaty,.orbA,.orbB,.radarSweep,.radarRing,.bellWave{display:none}
  .trustFill{stroke-dashoffset:0!important}
  .trustMark{opacity:1!important;transform:scale(1)!important}
  .scanArcFill{transition:none}
  .btn-glow,#s-entry .btn-primary,.tier.featured{animation:none}
  @keyframes fadeOnly{from{opacity:1}to{opacity:1}}
}