/* ============================================================
   STORIN.4TECH — LIQUID GLASS EDITION
   Animated Mesh • Frosted Glass • Fluid Motion
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Inter","SF Pro Display","Segoe UI",Arial,sans-serif;
  background:#06060c;color:#f0f0f5;font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  letter-spacing:-.01em;
  position:relative;
}

/* ============================================================
   ANIMATED MESH GRADIENT BACKGROUND
   ============================================================ */
body::before{
  content:"";position:fixed;inset:-40%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 18% 25%,rgba(139,92,246,.7),transparent 42%),
    radial-gradient(circle at 82% 18%,rgba(34,211,238,.6),transparent 42%),
    radial-gradient(circle at 70% 82%,rgba(236,72,153,.5),transparent 44%),
    radial-gradient(circle at 25% 88%,rgba(52,211,153,.45),transparent 42%),
    radial-gradient(circle at 50% 50%,rgba(99,102,241,.5),transparent 55%);
  filter:blur(90px) saturate(140%);
  animation:meshFloat 24s ease-in-out infinite alternate;
  will-change:transform;
}
body::after{
  content:"";position:fixed;inset:-40%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 65% 40%,rgba(56,189,248,.55),transparent 40%),
    radial-gradient(circle at 30% 65%,rgba(167,139,250,.55),transparent 45%),
    radial-gradient(circle at 85% 75%,rgba(217,70,239,.4),transparent 42%);
  filter:blur(100px) saturate(140%);
  animation:meshFloat2 30s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes meshFloat{
  0%{transform:translate(0,0) rotate(0deg) scale(1)}
  33%{transform:translate(4%,-3%) rotate(4deg) scale(1.08)}
  66%{transform:translate(-3%,4%) rotate(-3deg) scale(1.05)}
  100%{transform:translate(3%,2%) rotate(2deg) scale(1.1)}
}
@keyframes meshFloat2{
  0%{transform:translate(0,0) rotate(0deg) scale(1.05)}
  50%{transform:translate(-5%,3%) rotate(-5deg) scale(1.1)}
  100%{transform:translate(4%,-4%) rotate(4deg) scale(1.02)}
}

:root{
  --glass-1:rgba(255,255,255,.06);
  --glass-2:rgba(255,255,255,.09);
  --glass-3:rgba(255,255,255,.12);
  --glass-border:rgba(255,255,255,.14);
  --glass-border-2:rgba(255,255,255,.24);
  --glass-highlight:rgba(255,255,255,.32);
  --txt:#f2f2f8;
  --txt-2:#a8a8bc;
  --mut:#6e6e88;
  --mut-2:#42425c;
  --accent:#a78bfa;
  --accent-2:#67e8f9;
  --accent-3:#f0abfc;
  --accent-4:#6ee7b7;
  --green:#34d399;
  --amber:#fbbf24;
  --red:#f87171;
  --iridescent:linear-gradient(135deg,#a78bfa 0%,#67e8f9 45%,#f0abfc 100%);
  --iridescent-2:linear-gradient(120deg,#67e8f9 0%,#a78bfa 50%,#f0abfc 100%);
  --r:14px;--r-2:18px;--r-3:22px;--r-4:28px;
  --e:cubic-bezier(.4,0,.2,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --e-out:cubic-bezier(.16,1,.3,1);
  --hh:62px;--dh:80px;
  --shadow-glass:0 8px 32px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.2);
  --shadow-float:0 20px 60px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.3);
}
::-webkit-scrollbar{width:0;height:0}

/* ============================================================
   APP SHELL — GLASS LAYER OVER MESH
   ============================================================ */
.app{
  position:fixed;inset:0;display:flex;flex-direction:column;
  overflow:hidden;isolation:isolate;
}
.auth{
  position:fixed;inset:0;z-index:5000;display:flex;flex-direction:column;
  overflow:hidden;
}
.auth.hide{display:none}

/* ============================================================
   AUTH SCREEN
   ============================================================ */
.auth-scroll{
  flex:1;overflow-y:auto;padding:44px 22px;
  display:flex;flex-direction:column;justify-content:center;
  min-height:100%;position:relative;z-index:2;
}
.auth-head{
  display:flex;flex-direction:column;align-items:center;
  gap:16px;margin-bottom:36px;
  animation:fadeUp .8s var(--e-out) both;
}
.auth-logo{
  width:72px;height:72px;border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-border-2);
  display:grid;place-items:center;position:relative;
  box-shadow:
    0 8px 32px rgba(0,0,0,.4),
    0 1px 0 rgba(255,255,255,.15) inset,
    0 -8px 24px rgba(139,92,246,.15) inset;
  animation:logoFloat 4s ease-in-out infinite;
}
.auth-logo::before{
  content:"";position:absolute;inset:-2px;border-radius:26px;
  background:conic-gradient(from 0deg,transparent,rgba(167,139,250,.5),transparent 40%,rgba(103,232,249,.5),transparent 70%);
  opacity:.5;animation:rotate 8s linear infinite;z-index:-1;
  filter:blur(6px);
}
.auth-logo::after{
  content:"";position:absolute;inset:0;border-radius:24px;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.25),transparent 55%);
  pointer-events:none;
}
@keyframes logoFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-4px) rotate(-2deg)}
}
@keyframes rotate{to{transform:rotate(360deg)}}
.auth-logo svg{width:32px;height:32px;position:relative;z-index:2;
  filter:drop-shadow(0 0 12px rgba(167,139,250,.6));
}
.auth-title{
  font-size:24px;font-weight:800;letter-spacing:-.5px;
  text-align:center;
  background:var(--iridescent);
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gradientShift 6s ease-in-out infinite;
}
@keyframes gradientShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.auth-title span{font-style:italic;font-weight:400}
.auth-sub{
  font-size:10px;color:var(--mut);letter-spacing:3px;
  text-transform:uppercase;font-weight:700;
}
.auth-card{
  padding:28px 26px;border-radius:var(--r-4);
  background:linear-gradient(155deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  backdrop-filter:blur(32px) saturate(180%);
  -webkit-backdrop-filter:blur(32px) saturate(180%);
  border:1px solid var(--glass-border);
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-float),0 1px 0 rgba(255,255,255,.15) inset;
  animation:fadeUp .9s .1s var(--e-out) both;
}
.auth-card::before{
  content:"";position:absolute;top:0;left:24px;right:24px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
}
.auth-card::after{
  content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(255,255,255,.04) 60deg,transparent 120deg,transparent 240deg,rgba(167,139,250,.06) 300deg,transparent 360deg);
  animation:rotate 30s linear infinite;pointer-events:none;
  opacity:.6;
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ============================================================
   TABS
   ============================================================ */
.tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  padding:4px;border-radius:14px;
  background:rgba(0,0,0,.3);
  border:1px solid var(--glass-border);
  margin-bottom:26px;position:relative;z-index:2;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.tab-b{
  padding:11px;border-radius:10px;border:none;background:transparent;
  font-family:inherit;font-size:12px;font-weight:700;
  color:var(--mut);cursor:pointer;transition:all .3s var(--e);
  letter-spacing:.3px;position:relative;overflow:hidden;
}
.tab-b.on{
  background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 4px 12px rgba(0,0,0,.2);
  transform:scale(1.02);
}
.tab-b.on::after{
  content:"";position:absolute;bottom:0;left:20%;right:20%;height:2px;
  background:var(--iridescent);border-radius:2px;
  box-shadow:0 0 12px rgba(167,139,250,.6);
}
.tab-b:active{transform:scale(.96)}

/* ============================================================
   FORM FIELDS — GLASS INPUTS
   ============================================================ */
.fld{margin-bottom:16px;position:relative;z-index:2}
.fld-lbl{
  font-size:11px;font-weight:700;color:var(--txt-2);
  letter-spacing:.3px;margin-bottom:8px;
  display:flex;align-items:center;gap:4px;
}
.fld-lbl .req{
  color:var(--accent);font-weight:800;
  animation:pulseSoft 2s ease-in-out infinite;
}
@keyframes pulseSoft{
  0%,100%{opacity:1}
  50%{opacity:.5}
}
.fld-w{position:relative}
.fld-ic{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;pointer-events:none;opacity:.6;
  transition:opacity .3s,transform .3s;
}
.fld-ic svg{width:100%;height:100%;stroke:var(--txt-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.inp{
  width:100%;padding:14px 16px 14px 42px;border-radius:14px;
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  color:var(--txt);font-size:13.5px;font-family:inherit;
  outline:none;transition:all .3s var(--e);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
.inp::placeholder{color:var(--mut-2)}
.inp:focus{
  border-color:rgba(167,139,250,.5);
  background:rgba(0,0,0,.35);
  box-shadow:
    0 0 0 4px rgba(167,139,250,.12),
    0 1px 0 rgba(255,255,255,.08) inset,
    0 0 24px rgba(167,139,250,.15);
}
.fld-w:focus-within .fld-ic{opacity:1;transform:translateY(-50%) scale(1.1)}
.fld-w:focus-within .fld-ic svg{stroke:var(--accent)}

/* ============================================================
   BUTTONS — LIQUID GLASS
   ============================================================ */
.btn{
  width:100%;padding:15px 20px;border:none;border-radius:14px;
  font-family:inherit;font-size:13px;font-weight:700;
  letter-spacing:.3px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  cursor:pointer;transition:all .3s var(--e);
  position:relative;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset;
}
.btn::before{
  content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .6s var(--e);
  pointer-events:none;
}
.btn:active::before{left:150%}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn svg{width:16px;height:16px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:2}
.btn span{position:relative;z-index:2}

.btn-p{
  background:linear-gradient(135deg,#a78bfa 0%,#8b5cf6 50%,#6366f1 100%);
  color:#fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 -2px 8px rgba(0,0,0,.2) inset,
    0 12px 32px rgba(139,92,246,.4),
    0 0 0 1px rgba(255,255,255,.1);
}
.btn-p::after{
  content:"";position:absolute;inset:0;border-radius:14px;
  background:radial-gradient(circle at 30% 10%,rgba(255,255,255,.35),transparent 55%);
  pointer-events:none;
}
.btn-p:active{
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 -2px 8px rgba(0,0,0,.2) inset,
    0 6px 16px rgba(139,92,246,.5);
}
.btn-p svg{stroke:#fff}

.btn-g{
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid var(--glass-border);
  color:var(--txt-2);
  box-shadow:0 4px 16px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.08) inset;
}
.btn-g:active{background:rgba(255,255,255,.1);border-color:var(--glass-border-2)}
.btn-g svg{stroke:var(--txt-2)}

.btn-d{
  background:rgba(248,113,113,.08);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(248,113,113,.3);
  color:#fca5a5;
  box-shadow:0 4px 16px rgba(248,113,113,.15),0 1px 0 rgba(255,255,255,.08) inset;
}
.btn-d svg{stroke:#fca5a5}
.mt10{margin-top:12px}

/* ============================================================
   HEADER — FLOATING GLASS
   ============================================================ */
.hdr{
  position:relative;z-index:40;height:var(--hh);flex:0 0 var(--hh);
  padding:0 20px;padding-top:env(safe-area-inset-top);
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,rgba(10,10,18,.72),rgba(10,10,18,.4));
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--glass-border);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 4px 20px rgba(0,0,0,.15);
}
.brand{display:flex;align-items:center;gap:11px}
.brand-m{
  width:34px;height:34px;border-radius:12px;
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border-2);
  display:grid;place-items:center;position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 4px 12px rgba(0,0,0,.2);
  transition:transform .3s var(--e-spring);
}
.brand-m:active{transform:scale(.9) rotate(-8deg)}
.brand-m svg{
  width:17px;height:17px;
  stroke:url(#bGrad);
  fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(167,139,250,.6));
}
.brand-n{
  font-size:14.5px;font-weight:800;letter-spacing:-.3px;color:#fff;
}
.brand-n span{
  background:var(--iridescent);
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gradientShift 5s ease-in-out infinite;
}
.hdr-btn{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
  display:grid;place-items:center;cursor:pointer;
  transition:all .3s var(--e);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 4px 12px rgba(0,0,0,.15);
}
.hdr-btn:active{transform:scale(.9);background:rgba(255,255,255,.15)}
.hdr-btn svg{width:16px;height:16px;stroke:var(--txt-2);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   VIEWPORT & PAGES
   ============================================================ */
.vp{position:relative;flex:1;overflow:hidden}
.pg{
  position:absolute;inset:0;
  padding:24px 20px calc(var(--dh) + 34px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.pg-eye{
  font-size:10px;font-weight:800;letter-spacing:2.4px;
  text-transform:uppercase;margin-bottom:8px;
  background:var(--iridescent);
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gradientShift 5s ease-in-out infinite;
  animation-delay:.5s;
}
.pg-t{
  font-size:27px;font-weight:800;letter-spacing:-.7px;
  margin-bottom:6px;color:#fff;line-height:1.15;
}
.pg-d{font-size:12.5px;color:var(--mut);line-height:1.65;margin-bottom:24px}

/* ============================================================
   CARDS — LIQUID GLASS BASE
   ============================================================ */
.cd{
  position:relative;
  background:linear-gradient(155deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:var(--r-3);
  padding:20px;
  box-shadow:
    var(--shadow-glass),
    0 1px 0 rgba(255,255,255,.15) inset,
    0 -1px 0 rgba(0,0,0,.2) inset;
  overflow:hidden;
  transition:transform .3s var(--e),box-shadow .3s var(--e);
}
.cd::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,.4) 50%,transparent 95%);
  pointer-events:none;
}
.cd::after{
  content:"";position:absolute;top:-30%;left:-30%;width:60%;height:60%;
  background:radial-gradient(circle,rgba(255,255,255,.15),transparent 60%);
  border-radius:50%;pointer-events:none;
  animation:glassShine 8s ease-in-out infinite;
}
@keyframes glassShine{
  0%,100%{opacity:.3;transform:translate(0,0)}
  50%{opacity:.7;transform:translate(30%,30%)}
}
.cd+.cd{margin-top:12px}
.cd-hd{display:flex;align-items:center;gap:12px;margin-bottom:16px;position:relative;z-index:2}
.cd-ic{
  width:40px;height:40px;flex:0 0 40px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(167,139,250,.25),rgba(103,232,249,.12));
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 4px 14px rgba(139,92,246,.25);
  transition:transform .4s var(--e-spring);
}
.cd:active .cd-ic{transform:scale(1.08) rotate(-6deg)}
.cd-ic svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,255,255,.5))}
.cd-ic.t{background:linear-gradient(145deg,rgba(103,232,249,.25),rgba(167,139,250,.12))}
.cd-t{font-size:13.5px;font-weight:700;letter-spacing:-.2px;color:#fff}
.cd-s{font-size:10.5px;color:var(--mut);margin-top:2px}

/* ============================================================
   BALANCE CARD — HERO LIQUID GLASS
   ============================================================ */
.bal{
  padding:26px;position:relative;overflow:hidden;
  border-radius:var(--r-4);
  animation:cardFloat 6s ease-in-out infinite;
}
@keyframes cardFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
.bal::after{
  content:"";position:absolute;right:-80px;top:-80px;
  width:220px;height:220px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(167,139,250,.4),rgba(103,232,249,.3),rgba(240,171,252,.3),rgba(167,139,250,.4));
  filter:blur(40px);pointer-events:none;
  animation:rotate 20s linear infinite;
}
.bal-lbl{
  font-size:10.5px;font-weight:700;letter-spacing:1.8px;
  text-transform:uppercase;color:rgba(255,255,255,.7);
  margin-bottom:10px;display:flex;align-items:center;gap:7px;
  position:relative;z-index:2;
}
.bal-lbl svg{
  width:12px;height:12px;stroke:var(--accent-2);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(103,232,249,.8));
}
.bal-amt{
  font-size:36px;font-weight:800;letter-spacing:-1.6px;
  line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;margin-bottom:22px;
  position:relative;z-index:2;
  text-shadow:0 0 24px rgba(255,255,255,.2),0 0 60px rgba(167,139,250,.3);
}
.bal-amt .rp{
  font-size:16px;font-weight:600;
  background:var(--iridescent);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-right:4px;letter-spacing:0;
}
.bal-bot{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:12px;position:relative;z-index:2;
}
.bal-m .k{
  font-size:9px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:rgba(255,255,255,.5);
  margin-bottom:4px;
}
.bal-m .v{
  font-size:11.5px;font-weight:700;letter-spacing:1px;
  color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
.bal-ref{
  width:40px;height:40px;border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border-2);
  display:grid;place-items:center;cursor:pointer;
  transition:all .4s var(--e-spring);
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset;
}
.bal-ref:active{transform:scale(.9) rotate(-45deg);background:rgba(255,255,255,.2)}
.bal-ref svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bal-ref.spin svg{animation:spin .8s var(--e)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.sec{margin:28px 4px 14px;display:flex;align-items:center;gap:12px}
.sec-t{
  font-size:13px;font-weight:700;letter-spacing:.2px;
  color:#fff;display:flex;align-items:center;gap:10px;
  white-space:nowrap;
}
.sec-t::before{
  content:"";width:3px;height:16px;border-radius:3px;
  background:var(--iridescent);
  box-shadow:0 0 12px rgba(167,139,250,.7);
  animation:pulseGlow 3s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 12px rgba(167,139,250,.7)}
  50%{box-shadow:0 0 20px rgba(103,232,249,.9)}
}
.sec::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--glass-border),transparent);
}

/* ============================================================
   QUICK MENU GRID
   ============================================================ */
.qm{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.qm-i{
  position:relative;
  padding:15px 6px 13px;border-radius:var(--r-2);
  background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-border);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  cursor:pointer;transition:all .3s var(--e);
  font-family:inherit;text-decoration:none;color:inherit;
  box-shadow:0 4px 16px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.1) inset;
  overflow:hidden;
  animation:qkIn .5s var(--e-out) both;
}
.qm-i:nth-child(1){animation-delay:.05s}
.qm-i:nth-child(2){animation-delay:.1s}
.qm-i:nth-child(3){animation-delay:.15s}
.qm-i:nth-child(4){animation-delay:.2s}
.qm-i:nth-child(5){animation-delay:.25s}
.qm-i:nth-child(6){animation-delay:.3s}
.qm-i:nth-child(7){animation-delay:.35s}
.qm-i:nth-child(8){animation-delay:.4s}
@keyframes qkIn{
  from{opacity:0;transform:translateY(14px) scale(.94)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.qm-i::before{
  content:"";position:absolute;inset:0;border-radius:var(--r-2);
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.15),transparent 60%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.qm-i:active{
  transform:scale(.94);
  border-color:var(--glass-border-2);
  box-shadow:0 8px 24px rgba(139,92,246,.3),0 1px 0 rgba(255,255,255,.15) inset;
}
.qm-i:active::before{opacity:1}
.qm-ic{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(167,139,250,.24),rgba(103,232,249,.1));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 4px 12px rgba(139,92,246,.2);
  transition:transform .4s var(--e-spring);
}
.qm-i:active .qm-ic{transform:scale(1.12) rotate(-8deg)}
.qm-ic svg{
  width:17px;height:17px;stroke:#fff;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.4));
}
.qm-ic.t{background:linear-gradient(145deg,rgba(103,232,249,.24),rgba(167,139,250,.1))}
.qm-ic.x{background:rgba(255,255,255,.06);border-color:var(--glass-border)}
.qm-ic.x svg{stroke:var(--mut);filter:none}
.qm-l{font-size:10px;font-weight:700;color:rgba(255,255,255,.9);text-align:center;line-height:1.3;letter-spacing:.1px}
.qm-i.lock{opacity:.55}
.qm-i.lock .qm-l{color:var(--mut)}
.qm-b{
  position:absolute;top:7px;right:7px;
  font-size:7px;font-weight:800;letter-spacing:.5px;
  padding:2px 6px;border-radius:999px;
  background:rgba(251,191,36,.16);color:var(--amber);
  border:1px solid rgba(251,191,36,.35);
  text-transform:uppercase;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:pulseSoft 2.5s ease-in-out infinite;
}

/* ============================================================
   STATS GRID
   ============================================================ */
.st{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}
.st-i{
  padding:18px 10px;border-radius:var(--r-2);
  background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-border);text-align:center;
  box-shadow:0 4px 16px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.1) inset;
  position:relative;overflow:hidden;
  transition:transform .3s var(--e-spring);
}
.st-i:active{transform:scale(.96)}
.st-i::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:32px;height:2px;border-radius:2px;
  background:var(--iridescent);
  box-shadow:0 0 14px rgba(167,139,250,.7);
}
.st-i .n{
  font-size:22px;font-weight:800;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.6px;
  text-shadow:0 0 20px rgba(255,255,255,.2);
}
.st-i.t .n{
  background:var(--iridescent);
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gradientShift 5s ease-in-out infinite;
}
.st-i .l{
  font-size:9px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--mut);margin-top:8px;
}

/* ============================================================
   FORM FIELDS 2 (WITHOUT ICON)
   ============================================================ */
.fld2{margin-bottom:14px}
.fld2-lbl{
  font-size:11.5px;font-weight:700;color:var(--txt-2);
  letter-spacing:.2px;margin-bottom:8px;
  display:flex;justify-content:space-between;align-items:baseline;
}
.fld2-lbl .h{font-weight:500;color:var(--mut);font-size:10.5px}
.inp2{
  width:100%;padding:14px 16px;border-radius:14px;
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  color:var(--txt);font-size:13.5px;font-family:inherit;
  outline:none;transition:all .3s var(--e);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
.inp2::placeholder{color:var(--mut-2)}
.inp2:focus{
  border-color:rgba(167,139,250,.5);
  background:rgba(0,0,0,.35);
  box-shadow:0 0 0 4px rgba(167,139,250,.12),0 1px 0 rgba(255,255,255,.08) inset,0 0 24px rgba(167,139,250,.15);
}

/* ============================================================
   SEGMENTED CONTROL
   ============================================================ */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg-i{
  padding:14px;border-radius:14px;
  background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--txt-2);
  cursor:pointer;font-family:inherit;transition:all .3s var(--e);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
}
.seg-i svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.seg-i:active{transform:scale(.97)}
.seg-i.on{
  background:linear-gradient(145deg,rgba(167,139,250,.28),rgba(103,232,249,.14));
  border-color:rgba(167,139,250,.5);
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 8px 24px rgba(139,92,246,.35);
  transform:scale(1.01);
}

/* ============================================================
   QUICK NOMINAL
   ============================================================ */
.qn{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.qn-i{
  padding:13px 6px;border-radius:12px;
  background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  text-align:center;font-family:inherit;
  font-size:11.5px;font-weight:800;color:var(--txt-2);
  cursor:pointer;transition:all .3s var(--e);
  font-variant-numeric:tabular-nums;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
.qn-i.on,.qn-i:active{
  background:linear-gradient(145deg,rgba(167,139,250,.28),rgba(103,232,249,.14));
  border-color:rgba(167,139,250,.5);
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 8px 24px rgba(139,92,246,.35);
}
.qn-i:active{transform:scale(.95)}

/* ============================================================
   FEE BOX
   ============================================================ */
.fee{
  border-radius:16px;
  background:rgba(0,0,0,.24);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
  overflow:hidden;margin-bottom:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
.fee-r{
  display:flex;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--glass-border);
  font-size:12.5px;
}
.fee-r:last-child{border-bottom:none}
.fee-r .l{color:var(--mut)}
.fee-r .v{font-weight:800;color:var(--txt-2);font-variant-numeric:tabular-nums}
.fee-r.t{
  background:linear-gradient(90deg,rgba(167,139,250,.15),rgba(103,232,249,.08));
  border-top:1px solid rgba(167,139,250,.3);
}
.fee-r.t .l{
  background:var(--iridescent);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;font-size:11px;
}
.fee-r.t .v{
  background:var(--iridescent);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size:16px;font-weight:800;
}

/* ============================================================
   NOTE / ALERT
   ============================================================ */
.note{
  display:flex;gap:11px;padding:14px 16px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(251,191,36,.12),rgba(251,191,36,.04));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(251,191,36,.24);
  margin-bottom:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
.note svg{width:15px;height:15px;flex:0 0 15px;stroke:var(--amber);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px;filter:drop-shadow(0 0 6px rgba(251,191,36,.5))}
.note p{font-size:11px;color:#e8d9a5;line-height:1.7}
.note b{color:#fef3c7;font-weight:800}
.note.g{
  background:linear-gradient(135deg,rgba(167,139,250,.12),rgba(103,232,249,.06));
  border-color:rgba(167,139,250,.28);
}
.note.g svg{stroke:var(--accent);filter:drop-shadow(0 0 6px rgba(167,139,250,.5))}
.note.g p{color:#d6c8f5}

/* ============================================================
   RULES CARD
   ============================================================ */
.rules{
  padding:20px;border-radius:var(--r-3);
  background:linear-gradient(155deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--glass-border);
  margin-bottom:16px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-glass),0 1px 0 rgba(255,255,255,.15) inset;
}
.rules::before{
  content:"";position:absolute;top:0;left:24px;right:24px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
}
.rules::after{
  content:"";position:absolute;top:-60px;right:-60px;width:180px;height:180px;
  border-radius:50%;
  background:conic-gradient(from 0deg,rgba(167,139,250,.3),rgba(103,232,249,.2),transparent 70%);
  filter:blur(30px);pointer-events:none;
  animation:rotate 20s linear infinite;
}
.rules-h{display:flex;align-items:center;gap:11px;margin-bottom:16px;position:relative;z-index:2}
.rules-h svg{width:17px;height:17px;stroke:var(--accent-2);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(103,232,249,.7))}
.rules-h h4{
  font-size:12px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;
  background:var(--iridescent);
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gradientShift 5s ease-in-out infinite;
}
.rl{display:flex;flex-direction:column;gap:9px;position:relative;z-index:2}
.rl-i{
  display:flex;gap:11px;padding:12px 14px;border-radius:12px;
  background:rgba(0,0,0,.24);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);align-items:flex-start;
  transition:all .3s var(--e);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}
.rl-i:active{transform:translateX(3px);border-color:var(--glass-border-2)}
.rl-n{
  width:22px;height:22px;flex:0 0 22px;border-radius:8px;
  background:linear-gradient(145deg,rgba(167,139,250,.35),rgba(103,232,249,.2));
  border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;
  font-size:10.5px;font-weight:800;color:#fff;
  box-shadow:0 2px 8px rgba(139,92,246,.35);
}
.rl-t{flex:1;font-size:11px;color:var(--txt-2);line-height:1.65}
.rl-t b{
  background:var(--iridescent);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:800;
}
.rl-t em{
  font-style:normal;color:#fef3c7;font-weight:800;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  background:rgba(251,191,36,.15);padding:2px 7px;border-radius:5px;
  border:1px solid rgba(251,191,36,.25);
  letter-spacing:.3px;
}

/* ============================================================
   GENERATOR CARD
   ============================================================ */
.gen{padding:36px 22px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.gen-ic{
  width:84px;height:84px;border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border-2);
  display:grid;place-items:center;position:relative;
  box-shadow:
    0 8px 32px rgba(139,92,246,.3),
    0 1px 0 rgba(255,255,255,.15) inset;
  animation:floatBounce 4s ease-in-out infinite;
}
.gen-ic::before{
  content:"";position:absolute;inset:-12px;border-radius:36px;
  border:1px dashed rgba(167,139,250,.3);
  animation:rotate 24s linear infinite;
}
.gen-ic::after{
  content:"";position:absolute;inset:-24px;border-radius:44px;
  border:1px dashed rgba(103,232,249,.15);
  animation:rotate 18s linear infinite reverse;
}
@keyframes floatBounce{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-6px) rotate(2deg)}
}
.gen-ic svg{
  width:36px;height:36px;
  stroke:url(#bGrad);
  fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 14px rgba(167,139,250,.7));
}
.gen h3{font-size:17px;font-weight:800;color:#fff;letter-spacing:-.2px}
.gen p{font-size:11.5px;color:var(--mut);line-height:1.75;max-width:280px}

.gm{
  padding:18px;border-radius:16px;
  background:linear-gradient(145deg,rgba(167,139,250,.18),rgba(103,232,249,.08));
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(167,139,250,.35);
  margin-bottom:14px;position:relative;overflow:hidden;
  box-shadow:0 8px 28px rgba(139,92,246,.25),0 1px 0 rgba(255,255,255,.15) inset;
}
.gm::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--iridescent);
  background-size:200% 100%;
  animation:gradientShift 4s ease-in-out infinite;
  box-shadow:0 0 16px rgba(167,139,250,.6);
}
.gm-l{
  display:flex;align-items:center;gap:8px;
  font-size:9.5px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;
  background:var(--iridescent);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:12px;
}
.gm-l svg{width:13px;height:13px;stroke:var(--accent-2);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(103,232,249,.7))}
.gm-w{display:flex;align-items:center;gap:12px}
.gm-v{
  flex:1;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:14.5px;font-weight:700;color:#fff;
  word-break:break-all;line-height:1.4;letter-spacing:-.1px;
  text-shadow:0 0 12px rgba(255,255,255,.15);
}
.gm-c{
  width:44px;height:44px;flex:0 0 44px;border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.05));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border-2);
  display:grid;place-items:center;cursor:pointer;
  transition:all .4s var(--e-spring);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 4px 14px rgba(0,0,0,.2);
}
.gm-c:active{transform:scale(.88) rotate(-8deg);background:rgba(255,255,255,.22)}
.gm-c svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gm-c.ok{
  background:linear-gradient(145deg,rgba(52,211,153,.35),rgba(52,211,153,.15));
  border-color:rgba(52,211,153,.5);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 8px 24px rgba(52,211,153,.4);
}
.gm-c.ok svg{stroke:#fff;filter:drop-shadow(0 0 8px rgba(52,211,153,.8))}

/* ============================================================
   PASSWORD CHOICE
   ============================================================ */
.pwd{
  padding:18px;border-radius:16px;
  background:rgba(0,0,0,.24);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
  margin-bottom:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
.pwd-l{
  font-size:10px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--amber);margin-bottom:12px;
  display:flex;align-items:center;gap:8px;
  text-shadow:0 0 12px rgba(251,191,36,.5);
}
.pwd-l svg{width:13px;height:13px;stroke:var(--amber);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(251,191,36,.6))}
.pwd-g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pwd-o{
  padding:14px 10px;border-radius:12px;
  background:linear-gradient(145deg,rgba(251,191,36,.12),rgba(251,191,36,.03));
  border:1px solid rgba(251,191,36,.28);
  text-align:center;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:13px;font-weight:800;color:#fde68a;
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 4px 14px rgba(251,191,36,.15);
  transition:transform .3s var(--e-spring);
}
.pwd-o:active{transform:scale(.96)}
.pwd-o .o{
  display:block;font-family:inherit;font-size:8.5px;
  letter-spacing:1.6px;color:var(--mut);
  text-transform:uppercase;font-weight:800;margin-bottom:5px;
}

/* ============================================================
   HISTORY
   ============================================================ */
.ch{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;margin-bottom:18px;scrollbar-width:none}
.ch::-webkit-scrollbar{display:none}
.ch-i{
  flex:0 0 auto;padding:9px 16px;border-radius:999px;
  background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
  font-family:inherit;font-size:11.5px;font-weight:700;
  color:var(--txt-2);cursor:pointer;transition:all .3s var(--e);
  white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
.ch-i.on{
  background:linear-gradient(145deg,rgba(167,139,250,.28),rgba(103,232,249,.14));
  border-color:rgba(167,139,250,.5);
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 6px 20px rgba(139,92,246,.35);
}
.ch-i:active{transform:scale(.95)}

.hs{display:flex;flex-direction:column;gap:10px}
.hs-i{
  display:flex;align-items:center;gap:14px;padding:16px;
  border-radius:var(--r-2);
  background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--glass-border);
  transition:all .3s var(--e);
  box-shadow:0 4px 16px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.1) inset;
  animation:hsIn .5s var(--e-out) both;
  position:relative;overflow:hidden;
}
.hs-i::after{
  content:"";position:absolute;left:0;top:20%;bottom:20%;
  width:3px;border-radius:3px;
  background:var(--iridescent);
  opacity:0;transition:opacity .3s;
  box-shadow:0 0 12px rgba(167,139,250,.6);
}
.hs-i:active{transform:scale(.985)}
.hs-i:active::after{opacity:1}
@keyframes hsIn{
  from{opacity:0;transform:translateY(12px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.hs-ic{
  width:42px;height:42px;flex:0 0 42px;border-radius:14px;
  display:grid;place-items:center;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 4px 12px rgba(0,0,0,.2);
}
.hs-ic svg{width:18px;height:18px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px currentColor)}
.hs-ic.d{
  background:linear-gradient(145deg,rgba(167,139,250,.3),rgba(103,232,249,.12));
  border:1px solid rgba(255,255,255,.18);
}
.hs-ic.d svg{stroke:#fff}
.hs-ic.w{
  background:linear-gradient(145deg,rgba(251,191,36,.28),rgba(251,191,36,.1));
  border:1px solid rgba(251,191,36,.35);
}
.hs-ic.w svg{stroke:#fde68a}
.hs-m{flex:1;min-width:0}
.hs-t{font-size:12.5px;font-weight:800;color:#fff;margin-bottom:3px;letter-spacing:-.1px}
.hs-s{
  font-size:10.5px;color:var(--mut);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
  font-family:ui-monospace,Menlo,Consolas,monospace;
}
.hs-d{font-size:9.5px;color:var(--mut-2);margin-top:4px;letter-spacing:.3px}
.hs-r{text-align:right;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.hs-a{
  font-size:13px;font-weight:800;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.2px;
  text-shadow:0 0 12px rgba(255,255,255,.15);
}
.hs-a.p{
  background:linear-gradient(120deg,#6ee7b7,#34d399);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 8px rgba(52,211,153,.5));
}
.hs-a.m{
  background:linear-gradient(120deg,#fde68a,#fbbf24);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 8px rgba(251,191,36,.5));
}
.pl{
  display:inline-block;padding:4px 10px;border-radius:999px;
  font-size:8.5px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid;
}
.pl.pd{background:rgba(251,191,36,.15);color:#fde68a;border-color:rgba(251,191,36,.35)}
.pl.sc{background:rgba(52,211,153,.15);color:#6ee7b7;border-color:rgba(52,211,153,.35)}
.pl.fl{background:rgba(248,113,113,.15);color:#fca5a5;border-color:rgba(248,113,113,.35)}

.emp{padding:60px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.emp-ic{
  width:72px;height:72px;border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
  display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.1) inset;
  animation:floatBounce 4s ease-in-out infinite;
}
.emp-ic svg{width:28px;height:28px;stroke:var(--mut);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.emp h4{font-size:14px;font-weight:800;color:var(--txt-2)}
.emp p{font-size:11.5px;color:var(--mut);max-width:250px;line-height:1.75}

/* ============================================================
   ACCOUNT
   ============================================================ */
.pf{
  padding:24px;border-radius:var(--r-4);
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  backdrop-filter:blur(32px) saturate(180%);
  -webkit-backdrop-filter:blur(32px) saturate(180%);
  border:1px solid var(--glass-border-2);
  margin-bottom:16px;display:flex;align-items:center;gap:16px;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-float),0 1px 0 rgba(255,255,255,.15) inset;
  animation:cardFloat 6s ease-in-out infinite;
}
.pf::before{
  content:"";position:absolute;top:0;left:24px;right:24px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
}
.pf::after{
  content:"";position:absolute;right:-70px;top:-70px;width:200px;height:200px;
  border-radius:50%;
  background:conic-gradient(from 0deg,rgba(167,139,250,.4),rgba(103,232,249,.3),rgba(240,171,252,.3),rgba(167,139,250,.4));
  filter:blur(40px);pointer-events:none;
  animation:rotate 20s linear infinite;
}
.pf-av{
  width:70px;height:70px;flex:0 0 70px;border-radius:22px;
  display:grid;place-items:center;
  background:var(--iridescent);
  background-size:200% 200%;
  color:#fff;font-size:28px;font-weight:800;
  text-transform:uppercase;position:relative;z-index:2;
  box-shadow:
    0 12px 32px rgba(139,92,246,.5),
    0 1px 0 rgba(255,255,255,.3) inset,
    0 -4px 16px rgba(0,0,0,.2) inset;
  animation:gradientShift 6s ease-in-out infinite,avatarPulse 4s ease-in-out infinite;
  text-shadow:0 2px 12px rgba(0,0,0,.3);
}
@keyframes avatarPulse{
  0%,100%{box-shadow:0 12px 32px rgba(139,92,246,.5),0 1px 0 rgba(255,255,255,.3) inset,0 -4px 16px rgba(0,0,0,.2) inset,0 0 0 0 rgba(167,139,250,.4)}
  50%{box-shadow:0 12px 32px rgba(139,92,246,.5),0 1px 0 rgba(255,255,255,.3) inset,0 -4px 16px rgba(0,0,0,.2) inset,0 0 0 12px rgba(167,139,250,0)}
}
.pf-in{flex:1;min-width:0;position:relative;z-index:2}
.pf-n{font-size:18px;font-weight:800;color:#fff;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.3px;text-shadow:0 0 20px rgba(255,255,255,.15)}
.pf-e{
  font-size:11px;color:rgba(255,255,255,.7);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
  font-family:ui-monospace,Menlo,Consolas,monospace;
}
.pf-b{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  padding:4px 12px;border-radius:999px;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.28);
  font-size:9px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:#fff;
}
.pf-b::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:#6ee7b7;
  box-shadow:0 0 8px #6ee7b7;
  animation:pulseSoft 2s ease-in-out infinite;
}

.pfl{
  border-radius:var(--r-2);border:1px solid var(--glass-border);
  background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  overflow:hidden;margin-bottom:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset;
}
.pfr{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:15px 18px;border-bottom:1px solid var(--glass-border);gap:12px;
  transition:background .2s;
}
.pfr:last-child{border-bottom:none}
.pfr:active{background:rgba(255,255,255,.03)}
.pfl-l{
  display:flex;align-items:center;gap:10px;
  font-size:11.5px;color:var(--txt-2);font-weight:700;flex:0 0 auto;
}
.pfl-l svg{width:14px;height:14px;stroke:var(--accent);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(167,139,250,.4))}
.pfl-v{
  font-size:12px;font-weight:700;color:var(--txt);
  text-align:right;word-break:break-word;overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums;
}
.pfl-v.mn{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--txt-2)}
.pfl-v.ac{
  background:var(--iridescent);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:800;
}
.pfl-v.gr{color:var(--green);font-weight:800}
.pfl-w{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.cp{
  width:28px;height:28px;border-radius:10px;
  background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--glass-border);
  display:grid;place-items:center;cursor:pointer;
  flex:0 0 28px;transition:all .3s var(--e-spring);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset;
}
.cp:active{transform:scale(.85);background:rgba(255,255,255,.18)}
.cp svg{width:12px;height:12px;stroke:var(--txt-2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cp.ok{
  background:linear-gradient(145deg,rgba(52,211,153,.35),rgba(52,211,153,.15));
  border-color:rgba(52,211,153,.5);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 4px 14px rgba(52,211,153,.3);
}
.cp.ok svg{stroke:#fff;filter:drop-shadow(0 0 6px rgba(52,211,153,.8))}

.as{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px}
.as-i{
  padding:16px 10px;border-radius:var(--r-2);text-align:center;
  background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-border);
  box-shadow:0 4px 16px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.1) inset;
  transition:transform .3s var(--e-spring);
}
.as-i:active{transform:scale(.96)}
.as-i .n{
  font-size:20px;font-weight:800;line-height:1;
  background:var(--iridescent);
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums;letter-spacing:-.5px;
  animation:gradientShift 5s ease-in-out infinite;
}
.as-i .l{
  font-size:9px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--mut);margin-top:8px;
}

/* ============================================================
   FLOATING DOCK
   ============================================================ */
.dock{
  position:absolute;left:14px;right:14px;
  bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:60;height:66px;border-radius:22px;
  background:linear-gradient(180deg,rgba(20,20,30,.78),rgba(10,10,18,.85));
  backdrop-filter:blur(32px) saturate(180%);
  -webkit-backdrop-filter:blur(32px) saturate(180%);
  border:1px solid var(--glass-border-2);
  box-shadow:
    0 24px 60px rgba(0,0,0,.6),
    0 4px 16px rgba(0,0,0,.3),
    0 1px 0 rgba(255,255,255,.15) inset,
    0 -1px 0 rgba(0,0,0,.3) inset;
  display:grid;grid-template-columns:repeat(5,1fr);
  align-items:center;padding:0 6px;
  overflow:visible;
  animation:dockEnter .8s .3s var(--e-spring) both;
}
@keyframes dockEnter{
  from{opacity:0;transform:translateY(80px) scale(.9)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.dock::before{
  content:"";position:absolute;top:-1px;left:25%;right:25%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
}
.tb{
  position:relative;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;
  background:none;border:none;cursor:pointer;
  font-family:inherit;padding:0;text-decoration:none;
}
.tb-ic{
  width:22px;height:22px;display:grid;place-items:center;
  transition:transform .4s var(--e-spring);
}
.tb-ic svg{
  width:20px;height:20px;stroke:var(--mut);fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .3s,filter .3s;
}
.tb-l{
  font-size:9px;font-weight:700;letter-spacing:.2px;
  color:var(--mut);transition:color .3s,transform .3s;
}
.tb.on .tb-ic svg{
  stroke:var(--accent-2);
  filter:drop-shadow(0 0 10px rgba(103,232,249,.8));
}
.tb.on .tb-ic{transform:translateY(-2px) scale(1.15)}
.tb.on .tb-l{
  color:#fff;
  text-shadow:0 0 12px rgba(103,232,249,.5);
}
.tb:active .tb-ic{transform:scale(.82)}
.tb.on::after{
  content:"";position:absolute;top:6px;
  width:4px;height:4px;border-radius:50%;
  background:var(--accent-2);
  box-shadow:0 0 10px var(--accent-2);
  animation:pulseSoft 2s ease-in-out infinite;
}
.tb-c .tb-ic{
  width:52px;height:52px;margin-top:-26px;border-radius:18px;
  background:var(--iridescent);
  background-size:200% 200%;
  border:3px solid rgba(10,10,18,.95);
  box-shadow:
    0 12px 32px rgba(139,92,246,.55),
    0 0 0 1px rgba(255,255,255,.15),
    0 1px 0 rgba(255,255,255,.4) inset,
    0 -4px 16px rgba(0,0,0,.25) inset;
  transition:transform .4s var(--e-spring),box-shadow .3s;
  animation:gradientShift 4s ease-in-out infinite,centerPulse 3s ease-in-out infinite;
}
@keyframes centerPulse{
  0%,100%{
    box-shadow:
      0 12px 32px rgba(139,92,246,.55),
      0 0 0 1px rgba(255,255,255,.15),
      0 1px 0 rgba(255,255,255,.4) inset,
      0 -4px 16px rgba(0,0,0,.25) inset,
      0 0 0 0 rgba(167,139,250,.6);
  }
  50%{
    box-shadow:
      0 16px 40px rgba(139,92,246,.7),
      0 0 0 1px rgba(255,255,255,.2),
      0 1px 0 rgba(255,255,255,.4) inset,
      0 -4px 16px rgba(0,0,0,.25) inset,
      0 0 0 14px rgba(167,139,250,0);
  }
}
.tb-c .tb-ic svg{width:24px;height:24px;stroke:#fff;stroke-width:2.4;filter:drop-shadow(0 0 8px rgba(255,255,255,.6))}
.tb-c .tb-l{color:#fff;margin-top:2px;font-weight:800;text-shadow:0 0 12px rgba(167,139,250,.6)}
.tb-c.on .tb-ic{transform:translateY(-3px) scale(1.06)}
.tb-c.on::after{display:none}

/* ============================================================
   MODAL — SPRING IN
   ============================================================ */
.mb{
  position:fixed;inset:0;z-index:500;
  background:rgba(3,3,8,.7);
  backdrop-filter:blur(20px) saturate(120%);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--e),visibility .35s;
}
.mb.on{opacity:1;visibility:visible}
.mdl{
  width:100%;max-width:500px;max-height:86vh;
  background:linear-gradient(170deg,rgba(28,28,40,.94),rgba(14,14,22,.96));
  backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
  border:1px solid var(--glass-border-2);
  border-bottom:none;
  border-radius:28px 28px 0 0;
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform .5s var(--e-spring);
  overflow:hidden;
  box-shadow:0 -20px 80px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.15) inset;
}
.mdl::before{
  content:"";position:absolute;top:0;left:25%;right:25%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
}
.mb.on .mdl{transform:translateY(0)}
.mdl-gr{
  width:44px;height:5px;border-radius:5px;
  background:rgba(255,255,255,.2);
  margin:14px auto 0;flex:0 0 auto;
}
.mdl-h{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px 14px;flex:0 0 auto;
}
.mdl-h h3{
  font-size:16px;font-weight:800;color:#fff;
  display:flex;align-items:center;gap:11px;letter-spacing:-.2px;
}
.mdl-h h3 svg{
  width:18px;height:18px;stroke:var(--accent-2);fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(103,232,249,.6));
}
.mdl-x{
  width:34px;height:34px;border-radius:12px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  display:grid;place-items:center;cursor:pointer;
  transition:all .25s var(--e);
}
.mdl-x:active{transform:scale(.88) rotate(90deg);background:rgba(248,113,113,.2);border-color:rgba(248,113,113,.4)}
.mdl-x svg{width:13px;height:13px;stroke:var(--txt-2);fill:none;stroke-width:2.4;stroke-linecap:round}
.mdl-b{padding:4px 24px 30px;overflow-y:auto;flex:1;padding-bottom:calc(30px + env(safe-area-inset-bottom))}

.stp{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--glass-border);animation:fadeUp .5s var(--e-out) both}
.stp:nth-child(1){animation-delay:.05s}
.stp:nth-child(2){animation-delay:.1s}
.stp:nth-child(3){animation-delay:.15s}
.stp:nth-child(4){animation-delay:.2s}
.stp:nth-child(5){animation-delay:.25s}
.stp:nth-child(6){animation-delay:.3s}
.stp:nth-child(7){animation-delay:.35s}
.stp:nth-child(8){animation-delay:.4s}
.stp:nth-child(9){animation-delay:.45s}
.stp:last-child{border-bottom:none}
.stp-n{
  width:32px;height:32px;flex:0 0 32px;border-radius:12px;
  background:linear-gradient(145deg,rgba(167,139,250,.35),rgba(103,232,249,.2));
  border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;
  font-size:12.5px;font-weight:800;color:#fff;
  box-shadow:0 4px 14px rgba(139,92,246,.35),0 1px 0 rgba(255,255,255,.2) inset;
}
.stp-b{flex:1}
.stp-b h5{font-size:13.5px;font-weight:800;color:#fff;margin-bottom:5px;letter-spacing:-.1px}
.stp-b p{font-size:11.5px;color:var(--txt-2);line-height:1.7}
.cd-i{
  display:inline-block;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10.5px;padding:4px 10px;border-radius:7px;
  background:rgba(167,139,250,.15);
  border:1px solid rgba(167,139,250,.35);
  color:#d6c8f5;margin-top:7px;font-weight:800;
  letter-spacing:.3px;
}
.cd-i.am{
  background:rgba(251,191,36,.15);
  border-color:rgba(251,191,36,.35);
  color:#fde68a;
}

/* ============================================================
   CONFIRM MODAL
   ============================================================ */
.conf{
  width:100%;max-width:460px;
  padding:30px 26px calc(30px + env(safe-area-inset-bottom));
  background:linear-gradient(170deg,rgba(28,28,40,.94),rgba(14,14,22,.96));
  backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
  border:1px solid var(--glass-border-2);
  border-bottom:none;
  border-radius:28px 28px 0 0;
  transform:translateY(100%);
  transition:transform .5s var(--e-spring);
  max-height:92vh;overflow-y:auto;
  box-shadow:0 -20px 80px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.15) inset;
}
.conf::before{
  content:"";position:absolute;top:0;left:25%;right:25%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
}
.mb.on .conf{transform:translateY(0)}
.conf-ic{
  width:70px;height:70px;margin:0 auto 18px;border-radius:24px;
  background:linear-gradient(145deg,rgba(52,211,153,.28),rgba(52,211,153,.1));
  border:1px solid rgba(52,211,153,.4);
  display:grid;place-items:center;position:relative;
  box-shadow:
    0 12px 32px rgba(52,211,153,.35),
    0 1px 0 rgba(255,255,255,.25) inset;
  animation:floatBounce 4s ease-in-out infinite;
}
.conf-ic::before{
  content:"";position:absolute;inset:-12px;border-radius:36px;
  border:1px dashed rgba(52,211,153,.35);
  animation:rotate 20s linear infinite;
}
.conf-ic::after{
  content:"";position:absolute;inset:0;border-radius:24px;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.35),transparent 55%);
  pointer-events:none;
}
.conf-ic svg{
  width:32px;height:32px;stroke:#fff;fill:none;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 12px rgba(52,211,153,.9));
}
.conf h3{font-size:19px;font-weight:800;text-align:center;color:#fff;margin-bottom:10px;letter-spacing:-.3px}
.conf>p{font-size:11.5px;color:var(--txt-2);text-align:center;line-height:1.7;margin-bottom:18px}
.conf-g{
  padding:16px 18px;border-radius:14px;
  background:rgba(0,0,0,.3);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(167,139,250,.35);
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:13px;font-weight:800;
  background-clip:padding-box;
  color:#d6c8f5;
  word-break:break-all;text-align:center;margin-bottom:22px;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 4px 14px rgba(139,92,246,.15);
}
.pwt{
  display:flex;align-items:center;gap:10px;
  font-size:10.5px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--amber);
  margin-bottom:14px;justify-content:center;
  text-shadow:0 0 12px rgba(251,191,36,.5);
}
.pwt::before,.pwt::after{
  content:"";width:24px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(251,191,36,.4));
}
.pwt::after{background:linear-gradient(90deg,rgba(251,191,36,.4),transparent)}
.pwg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.pw{
  padding:18px 12px;border-radius:16px;
  background:linear-gradient(155deg,rgba(251,191,36,.1),rgba(251,191,36,.02));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(251,191,36,.28);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;transition:all .35s var(--e-spring);
  font-family:inherit;position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 4px 14px rgba(251,191,36,.12);
}
.pw::before{
  content:"";position:absolute;inset:0;border-radius:16px;
  background:radial-gradient(circle at 50% 0%,rgba(251,191,36,.2),transparent 60%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.pw.on{
  border-color:rgba(251,191,36,.7);
  background:linear-gradient(155deg,rgba(251,191,36,.22),rgba(251,191,36,.08));
  box-shadow:
    0 1px 0 rgba(255,255,255,.2) inset,
    0 12px 32px rgba(251,191,36,.4),
    0 0 0 4px rgba(251,191,36,.15);
  transform:scale(1.02);
}
.pw.on::before{opacity:1}
.pw-l{font-size:8.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--mut);position:relative;z-index:2}
.pw.on .pw-l{color:#fde68a}
.pw-v{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:14px;font-weight:800;color:var(--txt-2);
  letter-spacing:.2px;position:relative;z-index:2;
  transition:color .3s;
}
.pw.on .pw-v{color:#fef3c7;text-shadow:0 0 12px rgba(251,191,36,.6)}
.pw-ck{
  position:absolute;top:10px;right:10px;
  width:20px;height:20px;border-radius:50%;
  background:linear-gradient(145deg,#fde68a,#fbbf24);
  display:grid;place-items:center;
  opacity:0;transform:scale(.3);
  transition:all .4s var(--e-spring);
  box-shadow:0 4px 12px rgba(251,191,36,.5);
}
.pw.on .pw-ck{opacity:1;transform:scale(1)}
.pw-ck svg{width:11px;height:11px;stroke:#1a1200;fill:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.pwh{font-size:10px;color:var(--mut);text-align:center;margin-bottom:20px;min-height:14px;letter-spacing:.2px}
.conf-b{display:grid;grid-template-columns:1fr 1.3fr;gap:11px}

/* ============================================================
   TOAST
   ============================================================ */
.tw{
  position:fixed;top:calc(env(safe-area-inset-top) + 16px);
  left:50%;transform:translateX(-50%);
  z-index:900;display:flex;flex-direction:column;gap:10px;
  width:calc(100% - 32px);max-width:420px;pointer-events:none;
}
.tst{
  display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-radius:16px;
  background:linear-gradient(155deg,rgba(28,28,40,.96),rgba(14,14,22,.98));
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--glass-border-2);
  box-shadow:
    0 20px 48px rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.15) inset;
  animation:toastIn .5s var(--e-spring) both;pointer-events:auto;
}
.tst.out{animation:toastOut .35s var(--e) forwards}
@keyframes toastIn{
  from{opacity:0;transform:translateY(-24px) scale(.9)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes toastOut{
  to{opacity:0;transform:translateY(-16px) scale(.94)}
}
.tst-ic{
  width:30px;height:30px;flex:0 0 30px;border-radius:11px;
  display:grid;place-items:center;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset;
}
.tst-ic svg{width:15px;height:15px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tst.s .tst-ic{
  background:linear-gradient(145deg,rgba(52,211,153,.28),rgba(52,211,153,.1));
  border:1px solid rgba(52,211,153,.4);
}
.tst.s .tst-ic svg{stroke:#fff;filter:drop-shadow(0 0 6px rgba(52,211,153,.8))}
.tst.e .tst-ic{
  background:linear-gradient(145deg,rgba(248,113,113,.28),rgba(248,113,113,.1));
  border:1px solid rgba(248,113,113,.4);
}
.tst.e .tst-ic svg{stroke:#fff;filter:drop-shadow(0 0 6px rgba(248,113,113,.8))}
.tst.i .tst-ic{
  background:linear-gradient(145deg,rgba(167,139,250,.3),rgba(103,232,249,.15));
  border:1px solid rgba(167,139,250,.4);
}
.tst.i .tst-ic svg{stroke:#fff;filter:drop-shadow(0 0 6px rgba(167,139,250,.8))}
.tst.w .tst-ic{
  background:linear-gradient(145deg,rgba(251,191,36,.28),rgba(251,191,36,.1));
  border:1px solid rgba(251,191,36,.4);
}
.tst.w .tst-ic svg{stroke:#fff;filter:drop-shadow(0 0 6px rgba(251,191,36,.8))}
.tst-m{font-size:12px;font-weight:700;color:#fff;line-height:1.5}

/* ============================================================
   LOADING
   ============================================================ */
.ld{
  position:fixed;inset:0;z-index:800;
  background:rgba(3,3,8,.86);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  opacity:0;visibility:hidden;
  transition:opacity .3s,visibility .3s;
}
.ld.on{opacity:1;visibility:visible}
.ld-s{
  width:50px;height:50px;border-radius:50%;
  border:3px solid rgba(167,139,250,.15);
  border-top-color:var(--accent);
  border-right-color:var(--accent-2);
  animation:spin .9s linear infinite;
  position:relative;
  box-shadow:0 0 24px rgba(167,139,250,.4);
}
.ld-s::after{
  content:"";position:absolute;inset:8px;border-radius:50%;
  border:2px solid rgba(103,232,249,.15);
  border-bottom-color:var(--accent-2);
  animation:spin 1.4s linear infinite reverse;
}
.ld p{
  font-size:10.5px;letter-spacing:3px;
  text-transform:uppercase;color:var(--txt-2);font-weight:800;
}

.hidden{display:none!important}
.div{height:1px;background:linear-gradient(90deg,transparent,var(--glass-border),transparent);margin:24px 0}

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.adm-hdr{
  position:sticky;top:0;z-index:10;
  background:linear-gradient(180deg,rgba(10,10,18,.85),rgba(10,10,18,.5));
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  padding:16px 22px;border-bottom:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.adm-hdr h1{font-size:16px;font-weight:800;color:#fff;letter-spacing:-.3px}
.adm-hdr h1 span{
  background:var(--iridescent);
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gradientShift 5s ease-in-out infinite;
}
.adm-logout{
  padding:9px 16px;border-radius:11px;
  background:rgba(248,113,113,.1);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(248,113,113,.3);
  color:#fca5a5;font-family:inherit;
  font-size:11px;font-weight:800;cursor:pointer;
  transition:all .3s var(--e);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
}
.adm-logout:active{transform:scale(.95);background:rgba(248,113,113,.2)}
.adm-body{padding:20px 20px 60px;max-width:560px;margin:0 auto}
.adm-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.adm-stat{
  padding:18px;border-radius:var(--r-2);
  background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--glass-border);text-align:center;
  box-shadow:0 4px 20px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.1) inset;
}
.adm-stat .n{
  font-size:28px;font-weight:800;line-height:1;
  background:var(--iridescent);
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums;letter-spacing:-.8px;
  animation:gradientShift 5s ease-in-out infinite;
}
.adm-stat .l{
  font-size:9.5px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--mut);margin-top:8px;
}
.tx{
  padding:20px;border-radius:var(--r-2);
  background:linear-gradient(155deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--glass-border);margin-bottom:14px;
  position:relative;overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.1) inset;
  animation:fadeUp .5s var(--e-out) both;
}
.tx::before{
  content:"";position:absolute;top:0;left:20px;right:20px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
}
.tx-h{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:12px}
.tx-id{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10px;color:var(--mut);letter-spacing:.4px;
}
.tx-time{font-size:9.5px;color:var(--mut-2);letter-spacing:.3px}
.tx-gmail{
  padding:14px 16px;border-radius:12px;
  background:rgba(0,0,0,.3);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(167,139,250,.35);
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12.5px;font-weight:800;color:#d6c8f5;
  word-break:break-all;margin-bottom:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 4px 14px rgba(139,92,246,.15);
}
.tx-info{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:11px;color:var(--txt-2);margin-bottom:16px}
.tx-info .k{
  color:var(--mut);font-size:9px;letter-spacing:1.4px;
  text-transform:uppercase;display:block;margin-bottom:3px;font-weight:800;
}
.tx-info .v{font-weight:800;color:#fff;word-break:break-word}
.tx-btn{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.tx-btn button{
  padding:14px;border-radius:12px;border:none;
  font-family:inherit;font-size:11.5px;font-weight:800;
  letter-spacing:.6px;text-transform:uppercase;cursor:pointer;
  transition:all .3s var(--e);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset;
  position:relative;overflow:hidden;
}
.tx-btn button::before{
  content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .6s var(--e);pointer-events:none;
}
.tx-btn button:active::before{left:150%}
.tx-btn button:active{transform:scale(.96)}
.tx-btn .ok{
  background:linear-gradient(135deg,#6ee7b7 0%,#34d399 50%,#10b981 100%);
  color:#052e1a;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 8px 24px rgba(52,211,153,.35);
}
.tx-btn .no{
  background:rgba(248,113,113,.14);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(248,113,113,.35);
  color:#fca5a5;
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset;
}
.adm-empty{padding:70px 24px;text-align:center;color:var(--mut);font-size:12px;letter-spacing:.3px;line-height:1.75}
.adm-login{padding:80px 24px;max-width:400px;margin:0 auto}
.adm-login h2{
  font-size:26px;font-weight:800;text-align:center;margin-bottom:10px;
  letter-spacing:-.6px;
  background:var(--iridescent);
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gradientShift 5s ease-in-out infinite;
}
.adm-login h2 span{font-style:italic;font-weight:400}
.adm-login p{font-size:12px;color:var(--mut);text-align:center;margin-bottom:28px;letter-spacing:.3px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:380px){
  .bal-amt{font-size:30px}
  .pg-t{font-size:23px}
  .auth-title{font-size:21px}
  .qm{gap:8px}
  .qm-i{padding:13px 4px 11px}
  .qm-ic{width:34px;height:34px}
  .tb-l{font-size:8px}
  .pf-av{width:60px;height:60px;flex:0 0 60px;font-size:24px}
  .pf-n{font-size:16px}
  .gm-v{font-size:13px}
  .dock{left:12px;right:12px;height:62px}
  .tb-c .tb-ic{width:48px;height:48px}
}
@media(min-width:560px){
  .app{max-width:460px;margin:0 auto;border-left:1px solid var(--glass-border);border-right:1px solid var(--glass-border)}
  .auth{max-width:460px;left:50%;transform:translateX(-50%);border-left:1px solid var(--glass-border);border-right:1px solid var(--glass-border)}
  .dock{max-width:432px;left:50%;transform:translateX(-50%)}
  .mdl,.conf{border-radius:28px;margin-bottom:24px;max-height:82vh}
  .mb{align-items:center}
  .auth-scroll{max-width:440px;width:100%;margin:0 auto}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}