/* ═══════════════════════════════════════════════════════════════
   VANNIBEL CRYPTO — assets/css/app.css
   Mobile-app shell styled to match vannibel.com user dashboard
   (navy→blue gradient header, gold accents, glass cards)
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Brand — identical to the main site */
  --cx-deep:#05112a;
  --cx-navy:#0d1f5c;
  --cx-navy2:#0B194A;
  --cx-blue:#1a3a8f;
  --cx-brand:#2563EB;
  --cx-indigo:#4f46e5;
  --cx-gold:#f5c518;
  --cx-gold-d:#d4a800;
  --cx-gold-l:#ffe066;

  --cx-bg:#f4f6fb;
  --cx-card:#ffffff;
  --cx-card2:#f8faff;
  --cx-brd:#e4ebfa;
  --cx-brd2:#c7d2fe;

  --cx-txt:#0f1b3d;
  --cx-sub:#64748b;
  --cx-muted:#94a3b8;

  --cx-ok:#059669;
  --cx-warn:#d97706;
  --cx-danger:#dc2626;
  --cx-purple:#7c3aed;

  /* Coin colours */
  --c-btc:#f7931a;
  --c-eth:#627eea;
  --c-usdt:#26a17b;

  --cx-font:-apple-system,BlinkMacSystemFont,'Inter','Roboto','Open Sans','Helvetica Neue',sans-serif;
  --cx-mono:ui-monospace,'SF Mono','Cascadia Mono','Roboto Mono',Menlo,monospace;

  --cx-nav-h:66px;
  --cx-radius:18px;
  --cx-shadow:0 6px 24px rgba(13,31,92,.07);
  --cx-shadow-lg:0 14px 44px rgba(13,31,92,.13);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;padding:0;
  font-family:var(--cx-font);
  background:var(--cx-bg);
  color:var(--cx-txt);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
}
img,svg,video,canvas{max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
/* Long hashes/addresses must never push the layout wide */
p,span,div,td,th,li,h1,h2,h3,h4,label{overflow-wrap:anywhere;}
::selection{background:rgba(245,197,24,.3);}

/* Hide scrollbars on horizontal rails */
.cx-noscroll{scrollbar-width:none;-ms-overflow-style:none;}
.cx-noscroll::-webkit-scrollbar{display:none;height:0;}

/* ═══════════════════════════════════════════
   APP SHELL
   ═══════════════════════════════════════════ */
.cx-app{
  min-height:100dvh;min-height:100vh;
  display:flex;flex-direction:column;
  max-width:560px;margin:0 auto;
  background:var(--cx-bg);
  position:relative;
}
@media(min-width:561px){
  body{background:#eaeefb;}
  .cx-app{box-shadow:0 0 60px rgba(13,31,92,.1);}
}
.cx-main{
  flex:1;min-height:0;
  padding-bottom:calc(var(--cx-nav-h) + env(safe-area-inset-bottom,0px) + 18px);
}

/* ═══════════════════════════════════════════
   HEADER — navy gradient, glow blobs, grid
   ═══════════════════════════════════════════ */
.cx-hd{
  background:linear-gradient(145deg,var(--cx-deep) 0%,var(--cx-navy) 40%,#1a2f80 70%,var(--cx-brand) 100%);
  border-radius:0 0 30px 30px;
  padding-bottom:1.15rem;
  position:relative;overflow:hidden;
}
.cx-hd::before{
  content:'';position:absolute;top:-70px;right:-80px;
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,197,24,.22) 0%,transparent 70%);
  pointer-events:none;
}
.cx-hd::after{
  content:'';position:absolute;bottom:-50px;left:-60px;
  width:210px;height:210px;border-radius:50%;
  background:radial-gradient(circle,rgba(79,70,229,.3) 0%,transparent 70%);
  pointer-events:none;
}
.cx-hd-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:32px 32px;
}

/* Logo bar */
.cx-logobar{position:relative;z-index:3;display:flex;align-items:center;gap:.55rem;padding:calc(env(safe-area-inset-top,0px) + .9rem) 1.1rem .5rem;}
.cx-logomark{
  width:31px;height:31px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,var(--cx-gold-d),var(--cx-gold-l));
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:15px;color:var(--cx-navy);
  box-shadow:0 2px 12px rgba(245,197,24,.4);
}
.cx-logotext{font-weight:900;font-size:15.5px;color:#fff;letter-spacing:.06em;line-height:1;}
.cx-logosub{font-size:8.5px;font-weight:700;color:var(--cx-gold);letter-spacing:.14em;text-transform:uppercase;margin-top:2px;}
.cx-chip-secure{
  margin-left:auto;display:inline-flex;align-items:center;gap:.28rem;
  background:rgba(5,150,105,.16);border:1px solid rgba(16,185,129,.38);
  color:#6ee7b7;font-size:8.5px;font-weight:800;padding:.24rem .55rem;border-radius:20px;
  letter-spacing:.04em;white-space:nowrap;
}
.cx-hd-icons{display:flex;gap:.4rem;margin-left:.45rem;}
.cx-hd-icon{
  width:36px;height:36px;border-radius:11px;flex-shrink:0;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  position:relative;transition:.15s;
}
.cx-hd-icon:active{transform:scale(.93);}
.cx-hd-icon:hover{background:rgba(255,255,255,.18);}
.cx-dot{
  position:absolute;top:-4px;right:-4px;
  background:var(--cx-gold);color:var(--cx-navy);
  font-size:8px;font-weight:900;border-radius:50%;
  min-width:16px;height:16px;padding:0 3px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #10215c;
}
.cx-dot.purple{background:#a78bfa;color:#1e1b4b;}
.cx-dot.red{background:var(--cx-danger);color:#fff;}

/* Greeting */
.cx-greet{position:relative;z-index:3;padding:.1rem 1.1rem .5rem;display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;}
.cx-greet-t{font-size:11.5px;color:rgba(255,255,255,.55);}
.cx-greet-n{font-size:13px;font-weight:800;color:#fff;}
.cx-greet-id{
  margin-left:auto;font-family:var(--cx-mono);font-size:9px;
  color:rgba(255,255,255,.45);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);padding:.16rem .45rem;border-radius:6px;
}

/* ═══════════════════════════════════════════
   PORTFOLIO SUMMARY (above the carousel)
   ═══════════════════════════════════════════ */
.cx-port{position:relative;z-index:3;padding:0 1.1rem .7rem;}
.cx-port-lbl{font-size:9px;font-weight:700;color:rgba(255,255,255,.42);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.22rem;display:flex;align-items:center;gap:.4rem;}
.cx-port-row{display:flex;align-items:baseline;gap:.35rem;}
.cx-port-cur{font-size:16px;font-weight:700;color:rgba(255,255,255,.5);}
.cx-port-val{font-size:31px;font-weight:900;color:#fff;line-height:1;letter-spacing:-.7px;}
.cx-port-val.blur{filter:blur(8px);user-select:none;}
.cx-eye{background:none;border:none;cursor:pointer;color:rgba(255,255,255,.45);padding:0 0 0 .3rem;display:inline-flex;align-items:center;transition:.15s;}
.cx-eye:hover{color:var(--cx-gold);}
.cx-port-sub{margin-top:.3rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:10.5px;color:rgba(255,255,255,.4);}
.cx-delta{display:inline-flex;align-items:center;gap:.2rem;font-weight:800;font-size:10.5px;padding:.14rem .45rem;border-radius:20px;}
.cx-delta.up{background:rgba(5,150,105,.2);color:#6ee7b7;border:1px solid rgba(16,185,129,.3);}
.cx-delta.down{background:rgba(220,38,38,.18);color:#fca5a5;border:1px solid rgba(248,113,113,.3);}
.cx-delta.flat{background:rgba(255,255,255,.08);color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.14);}

/* ═══════════════════════════════════════════
   WALLET CAROUSEL — horizontal swipe
   ═══════════════════════════════════════════ */
.cx-wrail{
  position:relative;z-index:3;
  display:flex;gap:.7rem;
  overflow-x:auto;overflow-y:hidden;
  padding:.1rem 1.1rem .2rem;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
.cx-wcard{
  flex:0 0 auto;
  width:calc(100% - 3.1rem);
  min-width:258px;max-width:330px;
  scroll-snap-align:center;
  border-radius:20px;
  padding:1rem 1.1rem 1.05rem;
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 28px rgba(0,0,0,.18);
  transition:border-color .25s;
}
.cx-wcard::before{
  content:'';position:absolute;top:-45px;right:-45px;
  width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,var(--wc-glow,rgba(245,197,24,.2)) 0%,transparent 70%);
  pointer-events:none;
}
.cx-wcard-wm{
  position:absolute;right:-6px;bottom:-18px;z-index:0;
  font-size:60px;font-weight:900;opacity:.055;color:#fff;
  letter-spacing:-2px;white-space:nowrap;pointer-events:none;
}
.cx-wc-top{position:relative;z-index:1;display:flex;align-items:center;gap:.55rem;margin-bottom:.75rem;}
.cx-coin{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:14px;color:#fff;
  box-shadow:0 3px 12px rgba(0,0,0,.25);
  /* Fallback for any symbol without its own brand colour — e.g. a fiat
     currency in the Convert picker. Never leave a coin bubble transparent. */
  background:linear-gradient(135deg,var(--cx-navy),var(--cx-brand));
}
.cx-coin.btc{background:linear-gradient(135deg,#f7931a,#ffb347);}
.cx-coin.eth{background:linear-gradient(135deg,#627eea,#8aa0f5);}
.cx-coin.usdt{background:linear-gradient(135deg,#26a17b,#3ecf9e);}
.cx-wc-name{font-size:12.5px;font-weight:800;color:#fff;line-height:1.2;}
.cx-wc-net{font-size:9px;color:rgba(255,255,255,.45);font-weight:600;margin-top:1px;}
.cx-wc-px{margin-left:auto;text-align:right;flex-shrink:0;}
.cx-wc-px-v{font-size:11.5px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;}
.cx-wc-px-c{font-size:9.5px;font-weight:800;margin-top:1px;}
.cx-wc-px-c.up{color:#6ee7b7;}
.cx-wc-px-c.down{color:#fca5a5;}

.cx-wc-bal{position:relative;z-index:1;}
.cx-wc-bal-l{font-size:8.5px;font-weight:700;color:rgba(255,255,255,.38);letter-spacing:.13em;text-transform:uppercase;margin-bottom:.2rem;}
.cx-wc-bal-v{font-size:25px;font-weight:900;color:#fff;line-height:1.05;letter-spacing:-.4px;font-variant-numeric:tabular-nums;word-break:break-all;}
.cx-wc-bal-v.blur{filter:blur(7px);user-select:none;}
.cx-wc-bal-u{font-size:11px;color:rgba(255,255,255,.5);font-weight:700;margin-top:.2rem;}
.cx-wc-bal-u.blur{filter:blur(5px);user-select:none;}

.cx-wc-meta{position:relative;z-index:1;display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.7rem;}
.cx-wc-tag{
  font-size:9px;font-weight:700;padding:.2rem .5rem;border-radius:20px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.65);white-space:nowrap;
}
.cx-wc-tag.lock{background:rgba(217,119,6,.18);border-color:rgba(245,158,11,.3);color:#fcd34d;}
.cx-wc-tag.pend{background:rgba(37,99,235,.2);border-color:rgba(96,165,250,.32);color:#93c5fd;}

.cx-wc-acts{position:relative;z-index:1;display:flex;gap:.4rem;margin-top:.8rem;}
.cx-wc-act{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.25rem;
  padding:.46rem .4rem;border-radius:10px;
  font-size:10px;font-weight:800;border:none;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;
  border:1px solid rgba(255,255,255,.18);transition:.15s;
}
.cx-wc-act:active{transform:scale(.96);}
.cx-wc-act.gold{background:var(--cx-gold);color:var(--cx-navy);border-color:var(--cx-gold-d);}

/* Carousel dots */
.cx-wdots{position:relative;z-index:3;display:flex;justify-content:center;gap:.35rem;padding:.6rem 0 .1rem;}
.cx-wdot{height:3.5px;border-radius:3px;border:none;padding:0;cursor:pointer;transition:.3s;background:rgba(255,255,255,.28);width:6px;}
.cx-wdot.on{width:22px;background:var(--cx-gold);}

/* ═══════════════════════════════════════════
   PRICE TICKER — right-to-left
   ═══════════════════════════════════════════ */
.cx-tick{
  position:relative;z-index:3;
  margin:.55rem 1.1rem 0;
  display:flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:.44rem .6rem .44rem .5rem;
  overflow:hidden;
}
.cx-tick-ic{
  width:25px;height:25px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--cx-gold-d),var(--cx-gold-l));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(245,197,24,.4);
}
.cx-tick-live{
  flex-shrink:0;display:inline-flex;align-items:center;gap:.22rem;
  font-size:8px;font-weight:900;letter-spacing:.08em;
  color:#6ee7b7;background:rgba(5,150,105,.2);
  border:1px solid rgba(16,185,129,.3);
  border-radius:20px;padding:.14rem .4rem;
}
.cx-tick-live i{width:5px;height:5px;border-radius:50%;background:#10b981;display:block;animation:cxPulse 1.6s infinite;}
@keyframes cxPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.cx-tick-win{flex:1;min-width:0;overflow:hidden;height:18px;position:relative;}
.cx-tick-trk{
  position:absolute;top:0;left:0;
  display:flex;align-items:center;gap:1.6rem;
  white-space:nowrap;
  animation:cxMarquee 42s linear infinite;
  will-change:transform;
}
.cx-tick-win:hover .cx-tick-trk,
.cx-tick-win:active .cx-tick-trk{animation-play-state:paused;}
@keyframes cxMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cx-tick-item{display:inline-flex;align-items:center;gap:.3rem;font-size:11px;font-weight:600;color:rgba(255,255,255,.72);}
.cx-tick-sym{font-weight:900;color:#fff;letter-spacing:.02em;}
.cx-tick-px{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.82);}
.cx-tick-ch{font-weight:800;font-size:10px;}
.cx-tick-ch.up{color:#6ee7b7;}
.cx-tick-ch.down{color:#fca5a5;}
.cx-tick-sep{color:rgba(255,255,255,.18);}

/* ═══════════════════════════════════════════
   4 ACTION BUTTONS (under the ticker)
   ═══════════════════════════════════════════ */
.cx-acts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;
  margin:1rem 1.1rem 1.3rem;
}
.cx-act{
  background:var(--cx-card);
  border:1.5px solid var(--cx-brd);
  border-radius:16px;
  padding:.85rem .4rem .7rem;
  text-align:center;position:relative;overflow:hidden;
  transition:.18s;display:block;
}
.cx-act::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,transparent 58%,rgba(37,99,235,.045));}
.cx-act:active{transform:scale(.96);}
.cx-act:hover{border-color:var(--cx-brd2);transform:translateY(-3px);box-shadow:0 10px 26px rgba(37,99,235,.11);}
.cx-act-ic{
  width:42px;height:42px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto .45rem;position:relative;z-index:1;
}
.cx-act-l{font-size:10.5px;font-weight:800;color:var(--cx-txt);line-height:1.2;position:relative;z-index:1;}
.cx-act-s{font-size:8.5px;font-weight:700;color:var(--cx-muted);margin-top:.15rem;position:relative;z-index:1;}
@media(max-width:340px){
  .cx-acts{grid-template-columns:repeat(2,1fr);}
}

/* ═══════════════════════════════════════════
   SECTIONS / CARDS
   ═══════════════════════════════════════════ */
.cx-sec{margin:0 1.1rem 1.25rem;}
.cx-sh{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:0 1.1rem .6rem;}
.cx-sh.flush{margin-left:0;margin-right:0;}
.cx-sh-t{font-size:14px;font-weight:800;color:var(--cx-txt);display:flex;align-items:center;gap:.4rem;}
.cx-sh-l{font-size:11.5px;font-weight:700;color:var(--cx-brand);flex-shrink:0;}

.cx-card{
  background:var(--cx-card);
  border:1.5px solid var(--cx-brd);
  border-radius:var(--cx-radius);
  box-shadow:var(--cx-shadow);
  overflow:hidden;
}
.cx-card-pad{padding:1rem 1.05rem;}
.cx-card-hd{
  padding:.85rem 1.05rem;border-bottom:1px solid var(--cx-brd);
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  background:var(--cx-card2);
}
.cx-card-hd h3{margin:0;font-size:13px;font-weight:800;color:var(--cx-txt);}

/* Market list rows */
.cx-mkt{display:flex;align-items:center;gap:.7rem;padding:.72rem 1.05rem;border-bottom:1px solid var(--cx-brd);}
.cx-mkt:last-child{border-bottom:none;}
.cx-mkt-n{flex:1;min-width:0;}
.cx-mkt-s{font-size:12.5px;font-weight:800;color:var(--cx-txt);}
.cx-mkt-f{font-size:10px;color:var(--cx-muted);font-weight:600;margin-top:1px;}
.cx-mkt-r{text-align:right;flex-shrink:0;}
.cx-mkt-p{font-size:12.5px;font-weight:800;color:var(--cx-txt);font-variant-numeric:tabular-nums;}
.cx-mkt-c{font-size:10.5px;font-weight:800;margin-top:1px;}
.cx-up{color:var(--cx-ok);}
.cx-down{color:var(--cx-danger);}
.cx-flat{color:var(--cx-sub);}

/* Transaction rows */
.cx-tx{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.05rem;border-bottom:1px solid var(--cx-brd);}
.cx-tx:last-child{border-bottom:none;}
.cx-tx-ic{width:38px;height:38px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;}
.cx-tx-b{flex:1;min-width:0;}
.cx-tx-t{font-size:12.5px;font-weight:800;color:var(--cx-txt);line-height:1.25;}
.cx-tx-m{font-size:10px;color:var(--cx-muted);margin-top:2px;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;}
.cx-tx-r{text-align:right;flex-shrink:0;}
.cx-tx-a{font-size:12.5px;font-weight:900;font-variant-numeric:tabular-nums;}
.cx-tx-u{font-size:9.5px;color:var(--cx-muted);margin-top:1px;}

.cx-chip{display:inline-flex;align-items:center;gap:.22rem;font-size:9px;font-weight:800;padding:.14rem .42rem;border-radius:20px;white-space:nowrap;}

/* Empty state */
.cx-empty{text-align:center;padding:2.2rem 1.2rem;}
.cx-empty-ic{width:58px;height:58px;border-radius:18px;background:var(--cx-card2);border:1.5px solid var(--cx-brd);display:flex;align-items:center;justify-content:center;margin:0 auto .8rem;}
.cx-empty-t{font-size:13.5px;font-weight:800;color:var(--cx-txt);margin-bottom:.25rem;}
.cx-empty-p{font-size:11.5px;color:var(--cx-sub);line-height:1.55;max-width:270px;margin:0 auto;}

/* ═══════════════════════════════════════════
   PROMO / NOTICE BANNERS
   ═══════════════════════════════════════════ */
.cx-promo{
  margin:0 1.1rem 1.25rem;border-radius:20px;overflow:hidden;
  padding:1.15rem 1.15rem 1.05rem;position:relative;
  background:linear-gradient(130deg,#0B194A 0%,#1a2880 42%,#2563EB 100%);
  display:block;
}
.cx-promo::before{content:'';position:absolute;top:-60px;right:-55px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(245,197,24,.22),transparent 70%);pointer-events:none;}
.cx-promo::after{content:'';position:absolute;bottom:-50px;left:-40px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(79,70,229,.3),transparent 70%);pointer-events:none;}
.cx-promo-wm{position:absolute;right:-8px;bottom:-16px;font-size:58px;font-weight:900;opacity:.055;color:#fff;letter-spacing:-2px;white-space:nowrap;pointer-events:none;}
.cx-promo-in{position:relative;z-index:1;}
.cx-promo-tag{font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--cx-gold);margin-bottom:.3rem;display:inline-flex;align-items:center;gap:.35rem;}
.cx-promo-h{font-size:17px;font-weight:900;color:#fff;line-height:1.22;margin:0 0 .3rem;max-width:230px;}
.cx-promo-p{font-size:10.5px;color:rgba(255,255,255,.62);line-height:1.55;max-width:240px;margin-bottom:.8rem;}
.cx-promo-cta{display:inline-block;background:var(--cx-gold);color:var(--cx-navy);font-size:11px;font-weight:900;padding:.46rem 1.05rem;border-radius:20px;}
.cx-promo-badge{position:absolute;top:1rem;right:1rem;z-index:1;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;}

/* Inline notice */
.cx-notice{
  display:flex;gap:.65rem;align-items:flex-start;
  margin:0 1.1rem 1.1rem;padding:.8rem .9rem;
  border-radius:14px;font-size:11.5px;line-height:1.55;
  border:1.5px solid;
}
.cx-notice svg{flex-shrink:0;margin-top:1px;}
.cx-notice b{display:block;margin-bottom:.1rem;font-size:12px;}
.cx-notice.warn{background:#fffbeb;border-color:#fde68a;color:#92400e;}
.cx-notice.info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af;}
.cx-notice.ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46;}
.cx-notice.err{background:#fef2f2;border-color:#fecaca;color:#991b1b;}

/* ═══════════════════════════════════════════
   BOTTOM NAV
   ═══════════════════════════════════════════ */
.cx-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  max-width:560px;margin:0 auto;
  height:calc(var(--cx-nav-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--cx-brd);
  display:grid;grid-template-columns:repeat(5,1fr);
  box-shadow:0 -4px 24px rgba(13,31,92,.07);
}
.cx-nav-i{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  font-size:9px;font-weight:700;color:var(--cx-muted);
  position:relative;transition:.15s;padding-top:.2rem;
}
.cx-nav-i.on{color:var(--cx-navy);}
.cx-nav-i.on::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--cx-gold);
}
.cx-nav-i svg{transition:.15s;}
.cx-nav-i:active{transform:scale(.9);}
/* Centre FAB — Swap */
.cx-nav-fab{display:flex;align-items:center;justify-content:center;position:relative;}
.cx-nav-fab span{
  position:absolute;top:-17px;
  width:50px;height:50px;border-radius:17px;
  background:linear-gradient(135deg,var(--cx-navy),var(--cx-brand));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(13,31,92,.34);
  border:3px solid #fff;
}
.cx-nav-fab small{position:absolute;bottom:9px;font-size:9px;font-weight:800;color:var(--cx-navy);}
.cx-nav-badge{
  position:absolute;top:4px;right:calc(50% - 20px);
  background:var(--cx-danger);color:#fff;font-size:8px;font-weight:900;
  min-width:15px;height:15px;border-radius:20px;padding:0 3px;
  display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;
}

/* ═══════════════════════════════════════════
   SUB-PAGE HEADER (inner pages)
   ═══════════════════════════════════════════ */
.cx-phd{
  background:linear-gradient(140deg,var(--cx-deep) 0%,var(--cx-navy) 45%,var(--cx-brand) 100%);
  border-radius:0 0 26px 26px;position:relative;overflow:hidden;
  padding:calc(env(safe-area-inset-top,0px) + .85rem) 1.1rem 1.15rem;
}
.cx-phd::before{content:'';position:absolute;top:-70px;right:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(245,197,24,.2),transparent 70%);pointer-events:none;}
.cx-phd-row{position:relative;z-index:2;display:flex;align-items:center;gap:.65rem;}
.cx-back{
  width:36px;height:36px;border-radius:11px;flex-shrink:0;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.cx-back:active{transform:scale(.92);}
.cx-phd-t{font-size:16px;font-weight:900;color:#fff;line-height:1.2;}
.cx-phd-s{font-size:10.5px;color:rgba(255,255,255,.55);margin-top:2px;}
.cx-phd-body{position:relative;z-index:2;margin-top:1rem;}

/* ═══════════════════════════════════════════
   FORMS — properly styled inputs everywhere
   ═══════════════════════════════════════════ */
.cx-form{display:flex;flex-direction:column;gap:.95rem;}
.cx-fg{display:flex;flex-direction:column;gap:.3rem;}
.cx-lbl{font-size:11px;font-weight:800;color:var(--cx-txt);letter-spacing:.01em;display:flex;align-items:center;gap:.3rem;}
.cx-lbl .req{color:var(--cx-danger);}
.cx-hint{font-size:10px;color:var(--cx-muted);line-height:1.5;}

.cx-in,
.cx-sel,
.cx-ta{
  width:100%;
  font-family:var(--cx-font);
  font-size:13.5px;font-weight:600;
  color:var(--cx-txt);
  background:#fff;
  border:1.5px solid var(--cx-brd);
  border-radius:13px;
  padding:.78rem .9rem;
  outline:none;
  transition:border-color .16s, box-shadow .16s, background .16s;
  -webkit-appearance:none;appearance:none;
  line-height:1.4;
}
.cx-ta{min-height:112px;resize:vertical;}
.cx-in::placeholder,.cx-ta::placeholder{color:var(--cx-muted);font-weight:500;}
.cx-in:focus,.cx-sel:focus,.cx-ta:focus{
  border-color:var(--cx-brand);
  box-shadow:0 0 0 3.5px rgba(37,99,235,.13);
  background:#fff;
}
.cx-in:disabled,.cx-sel:disabled,.cx-ta:disabled{background:#f1f5f9;color:var(--cx-muted);cursor:not-allowed;}
.cx-in.err,.cx-sel.err,.cx-ta.err{border-color:var(--cx-danger);box-shadow:0 0 0 3.5px rgba(220,38,38,.1);}
.cx-sel{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;
  padding-right:2.3rem;cursor:pointer;
}
/* Input with a unit/max affix */
.cx-inwrap{position:relative;}
.cx-inwrap .cx-in{padding-right:5.2rem;}
.cx-affix{
  position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:.3rem;
}
.cx-unit{font-size:11px;font-weight:900;color:var(--cx-sub);}
.cx-maxbtn{
  background:var(--cx-navy);color:#fff;border:none;cursor:pointer;
  font-size:9.5px;font-weight:900;padding:.28rem .5rem;border-radius:7px;
  font-family:inherit;letter-spacing:.03em;
}
.cx-maxbtn:active{transform:scale(.93);}

/* File input */
.cx-file{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  border:1.8px dashed var(--cx-brd2);border-radius:14px;
  background:var(--cx-card2);padding:1.15rem .9rem;
  cursor:pointer;text-align:center;transition:.16s;
}
.cx-file:hover{border-color:var(--cx-brand);background:#eff6ff;}
.cx-file.has{border-style:solid;border-color:var(--cx-ok);background:#ecfdf5;}
.cx-file input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.cx-file-t{font-size:11.5px;font-weight:800;color:var(--cx-txt);}
.cx-file-s{font-size:10px;color:var(--cx-muted);}
.cx-file-thumb{width:100%;max-height:150px;object-fit:contain;border-radius:10px;margin-top:.3rem;}

/* Checkbox / toggle rows */
.cx-check{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;}
.cx-check input{width:19px;height:19px;flex-shrink:0;margin-top:1px;accent-color:var(--cx-brand);cursor:pointer;}
.cx-check span{font-size:11.5px;color:var(--cx-sub);line-height:1.55;}

.cx-tgl-row{display:flex;align-items:center;gap:.9rem;padding:.9rem 0;border-bottom:1px solid var(--cx-brd);}
.cx-tgl-row:last-child{border-bottom:none;}
.cx-tgl-b{flex:1;min-width:0;}
.cx-tgl-t{font-size:12.5px;font-weight:800;color:var(--cx-txt);}
.cx-tgl-d{font-size:10.5px;color:var(--cx-sub);margin-top:2px;line-height:1.5;}
.cx-tgl{position:relative;width:46px;height:26px;flex-shrink:0;}
.cx-tgl input{position:absolute;opacity:0;width:0;height:0;}
.cx-tgl i{
  position:absolute;inset:0;border-radius:26px;cursor:pointer;
  background:#cbd5e1;transition:.22s;display:block;
}
.cx-tgl i::before{
  content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;transition:.22s;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.cx-tgl input:checked + i{background:var(--cx-ok);}
.cx-tgl input:checked + i::before{transform:translateX(20px);}

/* Segmented control */
.cx-seg{display:flex;gap:.3rem;background:var(--cx-card2);border:1.5px solid var(--cx-brd);border-radius:13px;padding:.26rem;}
.cx-seg button,
.cx-seg a{
  flex:1;border:none;background:none;cursor:pointer;
  font-family:inherit;font-size:11.5px;font-weight:800;color:var(--cx-sub);
  padding:.52rem .4rem;border-radius:10px;transition:.16s;
  text-align:center;display:block;line-height:1.3;
}
.cx-seg button.on,
.cx-seg a.on{background:#fff;color:var(--cx-navy);box-shadow:0 2px 8px rgba(13,31,92,.1);}

/* Buttons */
.cx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  width:100%;border:none;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:900;letter-spacing:.01em;
  padding:.92rem 1.2rem;border-radius:14px;transition:.16s;
  background:linear-gradient(135deg,var(--cx-navy),var(--cx-brand));color:#fff;
  box-shadow:0 6px 20px rgba(13,31,92,.22);
}
.cx-btn:active{transform:scale(.975);}
.cx-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;}
.cx-btn.gold{background:linear-gradient(135deg,var(--cx-gold-d),var(--cx-gold));color:var(--cx-navy);box-shadow:0 6px 20px rgba(245,197,24,.3);}
.cx-btn.ghost{background:#fff;color:var(--cx-navy);border:1.5px solid var(--cx-brd);box-shadow:none;}
.cx-btn.danger{background:linear-gradient(135deg,#b91c1c,var(--cx-danger));box-shadow:0 6px 20px rgba(220,38,38,.22);}
.cx-btn.sm{font-size:11.5px;padding:.6rem .9rem;border-radius:11px;width:auto;}
.cx-spin{
  width:15px;height:15px;border-radius:50%;flex-shrink:0;
  border:2.2px solid rgba(255,255,255,.3);border-top-color:#fff;
  animation:cxSpin .7s linear infinite;display:none;
}
.cx-btn.loading .cx-spin{display:block;}
.cx-btn.ghost .cx-spin{border-color:rgba(13,31,92,.25);border-top-color:var(--cx-navy);}
@keyframes cxSpin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════
   SWAP WIDGET
   ═══════════════════════════════════════════ */
.cx-swap-leg{
  background:var(--cx-card2);
  border:1.5px solid var(--cx-brd);
  border-radius:16px;padding:.85rem .95rem;
}
.cx-swap-leg.focus{border-color:var(--cx-brand);box-shadow:0 0 0 3.5px rgba(37,99,235,.1);}
.cx-swap-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.4rem;}
.cx-swap-lbl{font-size:9.5px;font-weight:800;color:var(--cx-muted);letter-spacing:.12em;text-transform:uppercase;}
.cx-swap-bal{font-size:10px;color:var(--cx-sub);font-weight:700;}
.cx-swap-row{display:flex;align-items:center;gap:.6rem;}
.cx-swap-amt{
  flex:1;min-width:0;border:none;background:none;outline:none;
  font-family:inherit;font-size:24px;font-weight:900;color:var(--cx-txt);
  padding:0;letter-spacing:-.5px;width:100%;
  font-variant-numeric:tabular-nums;
}
.cx-swap-amt::placeholder{color:#cbd5e1;}
.cx-swap-amt:disabled{background:none;color:var(--cx-txt);}
.cx-swap-pick{
  display:flex;align-items:center;gap:.4rem;flex-shrink:0;
  background:#fff;border:1.5px solid var(--cx-brd);border-radius:30px;
  padding:.3rem .65rem .3rem .35rem;cursor:pointer;position:relative;
}
.cx-swap-pick select{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;
}
.cx-swap-pick .cx-coin{width:26px;height:26px;font-size:11px;}
.cx-swap-pick b{font-size:12.5px;font-weight:900;color:var(--cx-txt);}
.cx-swap-usd{font-size:10.5px;color:var(--cx-muted);font-weight:700;margin-top:.3rem;}

.cx-swap-mid{display:flex;align-items:center;justify-content:center;margin:-.55rem 0;position:relative;z-index:2;}
.cx-swap-flip{
  width:40px;height:40px;border-radius:13px;cursor:pointer;
  background:linear-gradient(135deg,var(--cx-navy),var(--cx-brand));
  border:3px solid var(--cx-bg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 16px rgba(13,31,92,.26);transition:.2s;
}
.cx-swap-flip:active{transform:scale(.9) rotate(180deg);}

.cx-rate{
  background:#fff;border:1.5px solid var(--cx-brd);border-radius:14px;
  padding:.3rem .95rem;margin-top:.9rem;
}
.cx-rate-r{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.5rem 0;border-bottom:1px dashed var(--cx-brd);font-size:11.5px;}
.cx-rate-r:last-child{border-bottom:none;}
.cx-rate-k{color:var(--cx-sub);font-weight:600;}
.cx-rate-v{color:var(--cx-txt);font-weight:800;text-align:right;font-variant-numeric:tabular-nums;}
.cx-rate-v.big{font-size:13px;color:var(--cx-ok);}

/* ═══════════════════════════════════════════
   ADDRESS / QR BOX (deposit)
   ═══════════════════════════════════════════ */
.cx-qr{
  background:#fff;border:1.5px solid var(--cx-brd);border-radius:18px;
  padding:1.1rem;text-align:center;
}
.cx-qr-img{width:178px;height:178px;margin:0 auto .85rem;display:block;border-radius:12px;background:#f8faff;border:1px solid var(--cx-brd);}
.cx-addr{
  display:flex;align-items:center;gap:.6rem;
  background:var(--cx-card2);border:1.5px dashed var(--cx-brd2);
  border-radius:12px;padding:.7rem .8rem;margin-top:.2rem;
}
.cx-addr code{
  flex:1;min-width:0;font-family:var(--cx-mono);font-size:11px;
  color:var(--cx-txt);word-break:break-all;line-height:1.5;text-align:left;
}
.cx-copy{
  flex-shrink:0;background:var(--cx-navy);color:#fff;border:none;cursor:pointer;
  font-family:inherit;font-size:10px;font-weight:900;
  padding:.42rem .62rem;border-radius:9px;letter-spacing:.03em;
}
.cx-copy:active{transform:scale(.93);}
.cx-copy.done{background:var(--cx-ok);}

/* ═══════════════════════════════════════════
   PROFILE / SETTINGS LISTS
   ═══════════════════════════════════════════ */
.cx-prof-hero{position:relative;z-index:2;display:flex;align-items:center;gap:.9rem;margin-top:1rem;}
.cx-avatar{
  width:66px;height:66px;border-radius:21px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:23px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,var(--cx-gold-d),var(--cx-gold-l));
  border:2.5px solid rgba(255,255,255,.25);
  box-shadow:0 6px 20px rgba(0,0,0,.2);
  object-fit:cover;
}
.cx-prof-n{font-size:16.5px;font-weight:900;color:#fff;line-height:1.2;}
.cx-prof-e{font-size:11px;color:rgba(255,255,255,.55);margin-top:2px;word-break:break-all;}
.cx-prof-tags{display:flex;gap:.35rem;margin-top:.45rem;flex-wrap:wrap;}
.cx-prof-tag{font-size:8.5px;font-weight:800;padding:.2rem .5rem;border-radius:20px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8);letter-spacing:.04em;}
.cx-prof-tag.ok{background:rgba(5,150,105,.22);border-color:rgba(16,185,129,.35);color:#6ee7b7;}
.cx-prof-tag.warn{background:rgba(217,119,6,.22);border-color:rgba(245,158,11,.35);color:#fcd34d;}

.cx-list{background:var(--cx-card);border:1.5px solid var(--cx-brd);border-radius:var(--cx-radius);overflow:hidden;box-shadow:var(--cx-shadow);}
.cx-li{display:flex;align-items:center;gap:.8rem;padding:.88rem 1.05rem;border-bottom:1px solid var(--cx-brd);transition:.14s;}
.cx-li:last-child{border-bottom:none;}
.cx-li:active{background:var(--cx-card2);}
.cx-li-ic{width:36px;height:36px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.cx-li-b{flex:1;min-width:0;}
.cx-li-t{font-size:12.5px;font-weight:800;color:var(--cx-txt);}
.cx-li-d{font-size:10.5px;color:var(--cx-sub);margin-top:2px;line-height:1.45;}
.cx-li-r{flex-shrink:0;display:flex;align-items:center;gap:.4rem;font-size:11px;font-weight:700;color:var(--cx-muted);}

/* Stat grid */
.cx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;}
.cx-stat{background:var(--cx-card);border:1.5px solid var(--cx-brd);border-radius:15px;padding:.8rem .5rem;text-align:center;}
.cx-stat-v{font-size:17px;font-weight:900;color:var(--cx-txt);line-height:1;font-variant-numeric:tabular-nums;}
.cx-stat-l{font-size:9px;font-weight:700;color:var(--cx-muted);margin-top:.28rem;letter-spacing:.04em;text-transform:uppercase;}

/* KYC steps */
.cx-steps{display:flex;align-items:center;gap:.25rem;margin-bottom:1.2rem;}
.cx-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:.3rem;position:relative;}
.cx-step-n{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:900;
  background:#fff;border:2px solid var(--cx-brd);color:var(--cx-muted);
  position:relative;z-index:2;
}
.cx-step.on .cx-step-n{background:var(--cx-navy);border-color:var(--cx-navy);color:#fff;}
.cx-step.done .cx-step-n{background:var(--cx-ok);border-color:var(--cx-ok);color:#fff;}
.cx-step-l{font-size:9px;font-weight:700;color:var(--cx-muted);text-align:center;}
.cx-step.on .cx-step-l,.cx-step.done .cx-step-l{color:var(--cx-txt);}
.cx-step::after{
  content:'';position:absolute;top:14px;left:50%;width:100%;height:2px;
  background:var(--cx-brd);z-index:1;
}
.cx-step:last-child::after{display:none;}
.cx-step.done::after{background:var(--cx-ok);}

/* ═══════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════ */
.cx-toasts{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--cx-nav-h) + env(safe-area-inset-bottom,0px) + 14px);
  z-index:9999;display:flex;flex-direction:column;gap:.5rem;
  width:calc(100% - 2rem);max-width:430px;pointer-events:none;
}
.cx-toast{
  display:flex;align-items:flex-start;gap:.6rem;
  background:#0f1b3d;color:#fff;
  border-radius:14px;padding:.8rem .95rem;
  font-size:12px;font-weight:600;line-height:1.5;
  box-shadow:0 12px 34px rgba(0,0,0,.3);
  border-left:4px solid var(--cx-brand);
  animation:cxToastIn .3s cubic-bezier(.2,1.2,.3,1);
  pointer-events:auto;
}
.cx-toast.ok{border-left-color:#10b981;}
.cx-toast.err{border-left-color:#ef4444;}
.cx-toast.warn{border-left-color:#f59e0b;}
.cx-toast b{display:block;font-size:12.5px;font-weight:900;margin-bottom:.1rem;}
.cx-toast.out{animation:cxToastOut .25s forwards;}
@keyframes cxToastIn{from{opacity:0;transform:translateY(18px) scale(.95)}to{opacity:1;transform:none}}
@keyframes cxToastOut{to{opacity:0;transform:translateY(12px) scale(.96)}}

/* ═══════════════════════════════════════════
   SHEET / MODAL
   ═══════════════════════════════════════════ */
.cx-ov{
  position:fixed;inset:0;z-index:9000;
  background:rgba(5,17,42,.6);backdrop-filter:blur(4px);
  display:none;align-items:flex-end;justify-content:center;
}
.cx-ov.open{display:flex;}
.cx-sheet{
  width:100%;max-width:560px;
  background:#fff;border-radius:24px 24px 0 0;
  padding:1.1rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom,0px));
  max-height:88dvh;max-height:88vh;overflow-y:auto;
  animation:cxSheetUp .3s cubic-bezier(.2,1,.3,1);
}
@keyframes cxSheetUp{from{transform:translateY(100%)}to{transform:none}}
.cx-sheet-grip{width:40px;height:4px;border-radius:4px;background:var(--cx-brd2);margin:0 auto .9rem;}
.cx-sheet h3{margin:0 0 .25rem;font-size:16px;font-weight:900;color:var(--cx-txt);}
.cx-sheet p.sub{margin:0 0 1.1rem;font-size:11.5px;color:var(--cx-sub);line-height:1.55;}

/* ═══════════════════════════════════════════
   AUTH PAGE
   ═══════════════════════════════════════════ */
.cx-auth{
  min-height:100dvh;min-height:100vh;
  display:flex;flex-direction:column;
  background:linear-gradient(165deg,var(--cx-deep) 0%,var(--cx-navy) 42%,#15296b 72%,var(--cx-blue) 100%);
  position:relative;overflow:hidden;
}
.cx-auth::before{content:'';position:absolute;top:-130px;right:-110px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(245,197,24,.18),transparent 70%);pointer-events:none;}
.cx-auth::after{content:'';position:absolute;bottom:-150px;left:-120px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(79,70,229,.26),transparent 70%);pointer-events:none;}
.cx-auth-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:34px 34px;}
.cx-auth-in{
  position:relative;z-index:2;flex:1;
  width:100%;max-width:430px;margin:0 auto;
  padding:2.1rem 1.4rem calc(2rem + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;
}
.cx-auth-brand{display:flex;align-items:center;gap:.6rem;justify-content:center;margin-bottom:1.5rem;}
.cx-auth-brand .cx-logomark{width:40px;height:40px;border-radius:12px;font-size:19px;}
.cx-auth-h{font-size:25px;font-weight:900;color:#fff;letter-spacing:-.5px;line-height:1.18;margin:0 0 .35rem;text-align:center;}
.cx-auth-p{font-size:12.5px;color:rgba(255,255,255,.55);line-height:1.6;text-align:center;margin:0 0 1.6rem;}
.cx-auth-card{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;padding:1.3rem 1.2rem;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 16px 48px rgba(0,0,0,.26);
}
/* Dark-surface form fields */
.cx-auth-card .cx-lbl{color:rgba(255,255,255,.72);}
.cx-auth-card .cx-hint{color:rgba(255,255,255,.4);}
.cx-auth-card .cx-in,
.cx-auth-card .cx-sel{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.16);
  color:#fff;
}
.cx-auth-card .cx-in::placeholder{color:rgba(255,255,255,.34);}
.cx-auth-card .cx-in:focus,
.cx-auth-card .cx-sel:focus{
  border-color:var(--cx-gold);
  background:rgba(255,255,255,.12);
  box-shadow:0 0 0 3.5px rgba(245,197,24,.16);
}
.cx-auth-card .cx-sel{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' opacity='.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.cx-auth-card .cx-sel option{background:var(--cx-navy);color:#fff;}
.cx-auth-card .cx-check span{color:rgba(255,255,255,.62);}
.cx-auth-card .cx-btn{background:linear-gradient(135deg,var(--cx-gold-d),var(--cx-gold));color:var(--cx-navy);box-shadow:0 8px 24px rgba(245,197,24,.28);}
.cx-auth-sw{text-align:center;margin-top:1.15rem;font-size:12px;color:rgba(255,255,255,.5);}
.cx-auth-sw a{color:var(--cx-gold);font-weight:800;}
.cx-auth-trust{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-top:1.5rem;flex-wrap:wrap;}
.cx-auth-trust span{display:inline-flex;align-items:center;gap:.3rem;font-size:9.5px;font-weight:700;color:rgba(255,255,255,.42);letter-spacing:.03em;}
.cx-pwtoggle{
  position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;padding:.2rem;
  color:rgba(255,255,255,.45);display:flex;
}
.cx-pos{position:relative;}
.cx-pos .cx-in{padding-right:2.8rem;}

/* ═══════════════════════════════════════════
   MISC UTILITIES
   ═══════════════════════════════════════════ */
.cx-flex{display:flex;}
.cx-between{display:flex;align-items:center;justify-content:space-between;gap:.6rem;}
.cx-gap{gap:.6rem;}
.cx-grow{flex:1;min-width:0;}
.cx-center{text-align:center;}
.cx-mono{font-family:var(--cx-mono);}
.cx-sp8{height:.5rem;}
.cx-sp16{height:1rem;}
.cx-sp24{height:1.5rem;}
.cx-hr{height:1px;background:var(--cx-brd);border:none;margin:1rem 0;}
.cx-small{font-size:10.5px;color:var(--cx-muted);line-height:1.55;}

/* Grid of two for forms */
.cx-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.8rem;}
@media(max-width:360px){.cx-two{grid-template-columns:minmax(0,1fr);}}

/* Skeleton shimmer while prices load */
.cx-skel{background:linear-gradient(90deg,#e8edf8 25%,#f3f6fc 50%,#e8edf8 75%);background-size:200% 100%;animation:cxShim 1.4s infinite;border-radius:6px;color:transparent!important;}
@keyframes cxShim{from{background-position:200% 0}to{background-position:-200% 0}}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .cx-tick-trk{animation:none!important;}
}