/* ============================================================
   Vai x Glory · Crystal UI
   Black + white · liquid glass · smooth spring animations
   ============================================================ */

/* ============================================================
   REMOVE MOBILE BLUE TAP HIGHLIGHT
   ============================================================ */
*,
*::before,
*::after{
  -webkit-tap-highlight-color: transparent !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  -webkit-touch-callout: none;
}

html, body{
  -webkit-tap-highlight-color: transparent !important;
}

button, a, input, select, textarea, label,
.btn, .mini, .badge,
.side-item, .bnav a, .md-nav a, .md-nav button,
.inbox-btn, .logout-btn, .hamburger, .menu-btn,
.cs-btn, .cred-chips button, .m-card, .slide-knob,
.rb-btn, .gp-launch, .quick, .bc-actions .btn,
.mm-links a, .mm-support, .mm-signin, .mm-getstarted,
.pc-btn, .price-btn, .auth-btn, .pw-tog, .faq-q,
[onclick], [role="button"]{
  -webkit-tap-highlight-color: transparent !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  outline: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

input, textarea{
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus,
.faq-q:focus,
.m-card:focus{
  outline: none;
}
button:focus-visible,
a:focus-visible,
.faq-q:focus-visible,
.m-card:focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 3px;
  border-radius: inherit;
}

input,
textarea,
select{
  -webkit-appearance: none;
  appearance: none;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"]{
  -webkit-appearance: none;
}

@media (max-width: 820px){
  input,
  select,
  textarea{
    font-size: 16px !important;
  }
}

/* ============================================================
   ROOT VARIABLES
   ============================================================ */
:root{
  --bg:#000000;
  --bg-2:#0A0A0A;
  --bg-3:#141414;
  --panel:linear-gradient(135deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.012) 100%);
  --border:rgba(255,255,255,.08);
  --border-2:rgba(255,255,255,.20);
  --text:#FFFFFF;
  --muted:#A1A1A1;
  --dim:#6B6B6B;
  --dimmer:#404040;
  --white:#FFFFFF;
  --white-2:#D4D4D4;
  --gray:#A1A1A1;
  --green:#FFFFFF;
  --red:#FFFFFF;
  --gold:#D4D4D4;
  --cyan:#D4D4D4;
  --violet:#FFFFFF;
  --violet-2:#D4D4D4;
  --pink:#FFFFFF;
  --blue:#FFFFFF;
  --r:18px;--r-sm:12px;
  --ease:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --pad:clamp(14px,4vw,28px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

*{margin:0;padding:0;box-sizing:border-box;min-width:0;
  -webkit-tap-highlight-color:transparent}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--text);
  font-size:clamp(13px,1.35vw + 9px,15px);line-height:1.55;
  min-height:100vh;min-height:100dvh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1100px 700px at 12% -10%,rgba(255,255,255,.04),transparent 60%),
    radial-gradient(900px 600px at 88% 0%,rgba(255,255,255,.025),transparent 60%);
  background-attachment:fixed;
}

img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.mono{font-family:'JetBrains Mono',monospace}
::selection{background:rgba(255,255,255,.35);color:#000}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.40)}

img:not([src*="hero-char"]):not([src*="guild-lvl"]){
  filter: grayscale(100%);
}

/* ============================================================
   SHINE SWEEP
   ============================================================ */
@keyframes shineSweep{
  0%{transform:translateX(-150%) skewX(-15deg);opacity:0}
  5%{opacity:1} 50%{opacity:1} 95%{opacity:0}
  100%{transform:translateX(280%) skewX(-15deg);opacity:0}
}
.shine{position:relative;overflow:hidden;isolation:isolate}
.shine > .shine-bar{
  position:absolute;top:-10%;left:0;width:55%;height:120%;
  background:linear-gradient(100deg,transparent 0%,transparent 35%,
    rgba(255,255,255,.22) 50%,transparent 65%,transparent 100%);
  transform:translateX(-150%) skewX(-15deg);
  animation:shineSweep 3s ease-in-out infinite;
  pointer-events:none;z-index:9999;border-radius:inherit;
}
.shine-soft > .shine-bar{
  background:linear-gradient(100deg,transparent 0%,transparent 35%,
    rgba(255,255,255,.12) 50%,transparent 65%,transparent 100%);
}

/* ============================================================
   GLASS SURFACES
   ============================================================ */
.crystal{
  position:relative;
  background:var(--panel);
  backdrop-filter:blur(32px) saturate(0%);
  -webkit-backdrop-filter:blur(32px) saturate(0%);
  border:1px solid var(--border);border-radius:var(--r);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 14px 44px rgba(0,0,0,.75);
}
.liquid-glass{
  position:relative;
  background:linear-gradient(135deg,
    rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 45%,rgba(255,255,255,.01) 100%);
  backdrop-filter:blur(36px) saturate(0%);
  -webkit-backdrop-filter:blur(36px) saturate(0%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 12px 40px rgba(0,0,0,.75);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:12px;border:1px solid var(--border);
  background:rgba(255,255,255,.035);color:var(--text);
  font-weight:600;font-size:13.5px;
  transition:all 220ms var(--spring);
  min-height:42px;white-space:nowrap;
  position:relative;overflow:hidden;
  will-change:transform;
}
.btn:hover{background:rgba(255,255,255,.09);border-color:var(--border-2)}
.btn:active{transform:scale(.94);transition-duration:100ms}
.btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}

.btn.primary{
  background:#FFFFFF;
  color:#000000;border:none;font-weight:900;
  letter-spacing:.03em;
  box-shadow:
    0 8px 24px rgba(255,255,255,.15),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.btn.primary::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(120deg,
    transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
  transform:translateX(-100%);
  transition:transform 700ms cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.btn.primary:hover::before{transform:translateX(100%)}
.btn.primary:hover{background:#F0F0F0;transform:translateY(-2px)}

.btn.success{
  background:#E5E5E5;color:#000;border:none;font-weight:800;
  box-shadow:0 8px 22px rgba(255,255,255,.12);
}
.btn.danger{
  background:transparent;
  border:1px solid rgba(255,255,255,.18);
  color:var(--muted);font-weight:700;
}
.btn.danger:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.40);
  color:var(--text);
}
.btn.cyan{border-color:rgba(255,255,255,.28);color:var(--text)}
.btn.purple{border-color:rgba(255,255,255,.28);color:var(--text)}
.btn.lg{padding:16px 24px;font-size:15px;min-height:54px;border-radius:14px}
.btn.icon{padding:9px;width:42px;min-height:42px;border-radius:12px}

/* ============================================================
   FORM FIELDS
   ============================================================ */
.field{margin-bottom:14px}
.field label{
  display:block;font-size:10.5px;font-weight:700;color:var(--muted);
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;
  font-family:'JetBrains Mono',monospace;
  transition:all 260ms var(--spring);
}
.field:focus-within label{color:#FFFFFF;transform:translateX(2px)}

.input,select,textarea{
  width:100%;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;padding:15px 18px;
  color:var(--text);font-size:14.5px;
  font-family:'JetBrains Mono',monospace;outline:none;
  transition:all 240ms var(--spring);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.input:focus,select:focus,textarea:focus{
  border-color:rgba(255,255,255,.50);
  box-shadow:0 0 0 4px rgba(255,255,255,.06),
    inset 0 1px 0 rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  transform:translateY(-1px);
}
.input::placeholder{color:var(--dimmer)}
select option{background:#0A0A0A;color:var(--text)}

/* ============================================================
   TOP BAR
   ============================================================ */
.top{
  position:sticky;top:0;z-index:60;
  backdrop-filter:blur(32px) saturate(0%);
  -webkit-backdrop-filter:blur(32px) saturate(0%);
  background:rgba(0,0,0,.85);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding-top:var(--safe-t);
  box-shadow:0 6px 24px rgba(0,0,0,.55);
}
.top-inner{
  width:100%;max-width:1280px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px var(--pad);min-height:60px;
}
.brand{display:flex;align-items:center;gap:10px;
  text-decoration:none;color:inherit;flex-shrink:0;min-width:0;
  transition:transform 240ms var(--spring);}
.brand:active{transform:scale(.97)}
.brand .logo{
  width:38px;height:38px;border-radius:11px;overflow:hidden;
  background:#FFFFFF;display:grid;place-items:center;flex-shrink:0;
  transition:transform 320ms var(--spring);
}
.brand:hover .logo{transform:rotate(-6deg) scale(1.06)}
.brand .logo img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%)}
.brand .txt{display:flex;flex-direction:column;min-width:0}
.brand .txt .t{
  font-size:14.5px;font-weight:900;font-style:italic;
  letter-spacing:-.01em;color:#FFFFFF;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.live{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.22);
  color:#FFFFFF;font-size:10.5px;font-weight:800;letter-spacing:.12em;
  font-family:'JetBrains Mono',monospace;text-transform:uppercase;
  transition:all 240ms var(--spring);
}
.live:hover{transform:scale(1.04);border-color:rgba(255,255,255,.40)}
.live .dot{
  width:7px;height:7px;border-radius:50%;background:#FFFFFF;
  box-shadow:0 0 10px rgba(255,255,255,.9);
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.3;transform:scale(.85)}}

/* ============================================================
   WRAP
   ============================================================ */
.wrap{
  width:100%;max-width:1280px;margin:0 auto;
  padding:28px var(--pad) calc(80px + var(--safe-b));
}
@media(max-width:600px){.wrap{padding-bottom:calc(140px + var(--safe-b))}}

.sec-label{
  font-size:15px;font-weight:900;letter-spacing:-.01em;color:var(--text);
  margin-bottom:16px;display:flex;align-items:center;gap:12px;
}
.sec-label .n{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:10px;
  background:#FFFFFF;color:#000;font-size:13px;font-weight:900;
  flex-shrink:0;
  transition:transform 320ms var(--spring);
}
.sec-label:hover .n{transform:rotate(-8deg) scale(1.08)}
.sec-label .ln{
  flex:1;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.24),transparent);
  min-width:20px;
}

/* ============================================================
   TOASTS
   ============================================================ */
.toast-wrap{
  position:fixed;top:80px;right:16px;z-index:200;
  display:flex;flex-direction:column;gap:10px;max-width:calc(100vw - 32px);
  pointer-events:none;
}
.toast{
  min-width:240px;max-width:360px;padding:14px 18px;border-radius:16px;
  display:flex;align-items:flex-start;gap:10px;font-size:13px;
  background:rgba(15,15,15,.96);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(24px) saturate(0%);
  -webkit-backdrop-filter:blur(24px) saturate(0%);
  box-shadow:0 12px 36px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.08);
  pointer-events:auto;
  animation:toastIn 460ms var(--spring);
  word-break:break-word;overflow:hidden;position:relative;
}
@keyframes toastIn{
  0%{opacity:0;transform:translateX(30px) scale(.94)}
  60%{transform:translateX(-4px) scale(1.02)}
  100%{opacity:1;transform:translateX(0) scale(1)}
}
.toast.ok{border-color:rgba(255,255,255,.50)}
.toast.err{border-color:rgba(255,255,255,.75)}
.toast.warn{border-color:rgba(255,255,255,.38)}
.toast.info{border-color:rgba(255,255,255,.30)}
@media(max-width:768px){
  .toast-wrap{top:auto;bottom:calc(90px + var(--safe-b));
    left:12px;right:12px;max-width:none}
}

/* ============================================================
   BADGES
   ============================================================ */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  border-radius:20px;font-size:9.5px;font-weight:800;letter-spacing:.10em;
  text-transform:uppercase;font-family:'JetBrains Mono',monospace;
  white-space:nowrap;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.20);
  color:#FFFFFF;
  transition:all 240ms var(--spring);
}
.badge:hover{transform:scale(1.05)}
.badge.green{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);color:#FFFFFF}
.badge.red{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.70);color:#FFFFFF}
.badge.gold{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.40);color:#E5E5E5}
.badge.cyan{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.32);color:#D4D4D4}
.badge.purple{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.32);color:#D4D4D4}
.badge.dim{color:var(--muted);border-color:var(--border)}

/* ============================================================
   MINI
   ============================================================ */
.mini{
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  color:var(--muted);padding:6px 10px;font-size:10px;font-weight:700;
  letter-spacing:.06em;border-radius:8px;cursor:pointer;
  transition:all 220ms var(--spring);
  text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;white-space:nowrap;
}
.mini:hover{border-color:var(--border-2);color:var(--text);transform:translateY(-1px)}
.mini:active{transform:scale(.92)}
.mini.ok{color:#FFFFFF;border-color:rgba(255,255,255,.50)}
.mini.warn{color:#D4D4D4;border-color:rgba(255,255,255,.35)}
.mini.danger{color:#FFFFFF;border-color:rgba(255,255,255,.65)}
.mini.cyan{color:#D4D4D4;border-color:rgba(255,255,255,.32)}
.mini.purple{color:#D4D4D4;border-color:rgba(255,255,255,.32)}

.empty{text-align:center;padding:50px 20px;color:var(--dim);font-size:13px}

/* ============================================================
   STATS
   ============================================================ */
.stat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:14px;margin-bottom:20px;
}
.stat{padding:22px 20px}
.stat .ic{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  font-size:16px;margin-bottom:12px;border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.05);color:#FFFFFF;
  transition:transform 340ms var(--spring);
}
.stat:hover .ic{transform:rotate(-8deg) scale(1.08)}
.stat .n{
  font-size:clamp(22px,3vw,32px);font-weight:900;
  font-family:'JetBrains Mono',monospace;line-height:1.05;
  letter-spacing:-.02em;margin-bottom:6px;color:#FFFFFF;
}
.stat .l{
  font-size:10px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.16em;font-family:'JetBrains Mono',monospace;font-weight:700;
}

.panel{padding:22px;margin-bottom:18px}
.panel h3{font-size:15px;font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.panel h3 .ic{
  width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:#FFFFFF;color:#000;font-size:13px;
  transition:transform 340ms var(--spring);
}
.panel:hover h3 .ic{transform:rotate(-8deg) scale(1.06)}
.panel .desc{font-size:12.5px;color:var(--muted);margin-bottom:16px}

/* ============================================================
   TABLES
   ============================================================ */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{
  text-align:left;padding:10px 12px;font-size:9.5px;font-weight:800;color:var(--dim);
  letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--border);
  font-family:'JetBrains Mono',monospace;white-space:nowrap;
}
td{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle;
  transition:background 200ms var(--ease);}
tbody tr:hover{background:rgba(255,255,255,.03)}

/* ============================================================
   SWITCH
   ============================================================ */
.switch{position:relative;display:inline-block;width:52px;height:28px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{
  position:absolute;cursor:pointer;inset:0;background:#1A1A1A;
  transition:all 340ms var(--spring);border-radius:28px;
  border:1px solid var(--border);
}
.switch .slider:before{
  content:"";position:absolute;height:20px;width:20px;
  left:3px;bottom:3px;background:#6B6B6B;transition:all 340ms var(--spring);
  border-radius:50%;
}
.switch input:checked + .slider{background:#FFFFFF;border-color:#FFFFFF}
.switch input:checked + .slider:before{
  transform:translateX(24px) scale(1.05);background:#000;
}
.switch:active .slider{transform:scale(.96)}

.kill-switch{
  display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.18);margin-bottom:14px;
  transition:all 240ms var(--spring);
}
.kill-switch:hover{border-color:rgba(255,255,255,.30)}
.kill-switch .lbl{flex:1;font-weight:700;font-size:14px}
.kill-switch .sub{font-size:11px;color:var(--muted);margin-top:3px;
  font-family:'JetBrains Mono',monospace}

/* ============================================================
   ADMIN LAYOUT
   ============================================================ */
.admin-layout{display:grid;grid-template-columns:260px 1fr;gap:20px;
  min-height:calc(100vh - 70px)}
@media(max-width:900px){.admin-layout{grid-template-columns:1fr}}
.sidebar{padding:20px 14px;position:sticky;top:78px;align-self:start;
  max-height:calc(100vh - 100px);overflow-y:auto}
@media(max-width:900px){.sidebar{position:static;max-height:none}}
.sidebar .nav-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:4px;
  border-radius:12px;color:var(--muted);font-weight:600;font-size:13.5px;
  cursor:pointer;
  transition:all 220ms var(--spring);
  border:1px solid transparent;
}
.sidebar .nav-item:hover{background:rgba(255,255,255,.06);color:var(--text);transform:translateX(2px)}
.sidebar .nav-item.on{background:#FFFFFF;color:#000;border-color:#FFFFFF}
.sidebar .nav-item:active{transform:scale(.97)}
.sidebar .nav-item .ic{
  width:34px;height:34px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  display:grid;place-items:center;font-size:13px;flex-shrink:0;
  transition:transform 340ms var(--spring);
}
.sidebar .nav-item:hover .ic{transform:rotate(-6deg) scale(1.08)}
.sidebar .nav-item.on .ic{background:#000;border-color:#000;color:#FFF}

/* ============================================================
   BOT CARDS
   ============================================================ */
.bot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));
  gap:16px;margin-bottom:22px;
}
.bot-card{
  padding:0;border-radius:22px;overflow:hidden;position:relative;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.05),transparent 55%),
    radial-gradient(circle at 0% 100%,rgba(255,255,255,.03),transparent 55%),
    linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.10);
  transition:all 320ms var(--spring);
  backdrop-filter:blur(32px) saturate(0%);
  -webkit-backdrop-filter:blur(32px) saturate(0%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 14px 42px rgba(0,0,0,.75);
}
.bot-card:hover{
  border-color:rgba(255,255,255,.40);
  transform:translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 22px 56px rgba(0,0,0,.85);
}
.bot-card:active{transform:translateY(-2px) scale(.99)}
.bot-card.expired{opacity:.5}

/* ============================================================
   FLOW CARDS
   ============================================================ */
.flow-card{
  padding:24px 22px;margin-bottom:18px;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.05),transparent 55%),
    linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.10);border-radius:22px;
  backdrop-filter:blur(32px) saturate(0%);
  -webkit-backdrop-filter:blur(32px) saturate(0%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 42px rgba(0,0,0,.65);
}
.flow-card.glow{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.24),
    0 16px 48px rgba(0,0,0,.8);
}
.flow-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.flow-head .ic{
  width:46px;height:46px;border-radius:14px;display:grid;
  place-items:center;font-size:17px;flex-shrink:0;
  background:#FFFFFF;color:#000;
  transition:transform 340ms var(--spring);
}
.flow-card:hover .flow-head .ic{transform:rotate(-8deg) scale(1.05)}
.flow-head .ttl{font-size:17px;font-weight:900;letter-spacing:-.01em}
.flow-head .sub{font-size:11.5px;color:var(--muted);margin-top:3px}
.flow-num{
  position:absolute;top:16px;right:20px;
  font-family:'JetBrains Mono',monospace;font-size:50px;font-weight:900;
  color:rgba(255,255,255,.06);letter-spacing:-.04em;line-height:1;
  pointer-events:none;user-select:none;
}

/* ============================================================
   MOBILE BOTTOM NAV
   ============================================================ */
.bottom-nav{display:none}
@media(max-width:600px){
  .bottom-nav{
    display:flex;position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(14px + var(--safe-b));z-index:100;padding:6px;
    border-radius:24px;
    background:linear-gradient(135deg,
      rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 50%,rgba(255,255,255,.08) 100%);
    backdrop-filter:blur(40px) saturate(0%);
    -webkit-backdrop-filter:blur(40px) saturate(0%);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:
      0 18px 50px rgba(0,0,0,.85),
      inset 0 1px 0 rgba(255,255,255,.20);
    overflow:hidden;
  }
  .bottom-nav .bn-item{
    display:flex;align-items:center;gap:10px;
    padding:8px 22px 8px 8px;border-radius:20px;color:var(--text);
    font-size:12px;font-weight:800;text-decoration:none;
    transition:all 280ms var(--spring);
    position:relative;z-index:3;
  }
  .bottom-nav .bn-item .ico{
    width:40px;height:40px;border-radius:13px;overflow:hidden;
    display:grid;place-items:center;
    background:#FFFFFF;color:#000;font-size:16px;flex-shrink:0;
    transition:transform 340ms var(--spring);
  }
  .bottom-nav .bn-item:active{transform:scale(.92)}
  .bottom-nav .bn-item:active .ico{transform:scale(.86)}
  .bottom-nav .bn-item .lbl{font-weight:900;font-size:13px;color:#FFF}
}

/* ============================================================
   PAYMENT
   ============================================================ */
.pay-pill{
  display:inline-flex;align-items:center;gap:8px;padding:12px 16px;
  border-radius:14px;border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  cursor:pointer;transition:all 220ms var(--spring);
}
.pay-pill:active{transform:scale(.96)}
.pay-pill.on{
  border-color:rgba(255,255,255,.60);
  background:rgba(255,255,255,.12);
}
.pay-pill .ic{
  width:38px;height:38px;border-radius:11px;
  background:rgba(255,255,255,.06);
  display:grid;place-items:center;font-size:16px;color:#FFFFFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform 320ms var(--spring);
}
.pay-pill:hover .ic{transform:rotate(-6deg) scale(1.06)}
.pay-pill .lbl{flex:1}
.pay-pill .t{font-weight:700;font-size:13.5px}
.pay-pill .s{font-size:11px;color:var(--muted);margin-top:2px}

.stepper{display:flex;align-items:center;gap:8px}
.stepper button{
  width:48px;height:48px;border-radius:13px;
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  font-size:20px;font-weight:800;color:var(--text);cursor:pointer;
  transition:all 240ms var(--spring);
}
.stepper button:hover{background:rgba(255,255,255,.10);
  border-color:var(--border-2);transform:scale(1.06)}
.stepper button:active{transform:scale(.90)}
.stepper input{
  flex:1;text-align:center;font-size:20px;font-weight:800;
  font-family:'JetBrains Mono',monospace;padding:12px;
}

.total-banner{
  padding:20px 22px;border-radius:18px;margin-top:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.total-banner .lbl{
  font-size:11px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.14em;font-family:'JetBrains Mono',monospace;font-weight:700;
}
.total-banner .amt{
  font-size:30px;font-weight:900;
  font-family:'JetBrains Mono',monospace;color:#FFFFFF;
  letter-spacing:-.02em;
}

/* ============================================================
   GLOBAL CLICK ANIMATIONS
   ============================================================ */

button:active,
a:active,
.btn:active, .mini:active,
.side-item:active,
.inbox-btn:active, .logout-btn:active, .hamburger:active,
.menu-btn:active,
.cs-btn:active, .cred-chips button:active, .m-card:active,
.rb-btn:active, .gp-launch:active, .quick:active,
.pc-btn:active, .price-btn:active, .auth-btn:active,
.faq-q:active, .feat:active, .step:active,
.mm-links a:active, .mm-support:active,
.mm-signin:active, .mm-getstarted:active,
.slide-knob:active{
  transform: scale(.94);
  transition-duration: 100ms;
}

button, a,
.btn, .mini, .badge,
.side-item, .md-nav a, .md-nav button,
.inbox-btn, .logout-btn, .hamburger,
.cs-btn, .cred-chips button, .m-card, .slide-knob,
.rb-btn, .gp-launch, .quick, .bc-actions .btn,
.modal-head .mini, .modal-head .btn.icon,
.menu-btn, .mm-links a, .mm-support, .mm-signin, .mm-getstarted,
.pc-btn, .price-btn, .auth-btn, .pw-tog, .faq-q,
.feat, .step, .metric, .tile, .panel{
  transition:
    transform 240ms var(--spring),
    background 200ms var(--ease),
    border-color 200ms var(--ease),
    box-shadow 260ms var(--ease),
    color 200ms var(--ease),
    opacity 200ms var(--ease);
}

.inbox-btn:active,
.logout-btn:active,
.hamburger:active,
.menu-btn:active{
  transform: scale(.88);
}
.inbox-btn, .logout-btn, .hamburger, .menu-btn{
  transition:transform 260ms var(--spring),
    background 200ms var(--ease),
    border-color 200ms var(--ease);
}
@media(hover:hover){
  .inbox-btn:hover,
  .logout-btn:hover,
  .hamburger:hover,
  .menu-btn:hover{
    transform: scale(1.06);
  }
}

.m-card{position:relative;overflow:hidden}
.m-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at var(--x,50%) var(--y,50%),
    rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%);
  opacity:0;transition:opacity 400ms;pointer-events:none;
}
.m-card:active::after{opacity:1;transition:opacity 0ms}

.quick .qi{
  transition: transform 300ms var(--spring);
}
.quick:active .qi{transform:rotate(-8deg) scale(.88)}

@keyframes slideKnobPulse{
  0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.4)}
  50%{box-shadow:0 4px 22px rgba(255,255,255,.4),
    0 0 0 3px rgba(255,255,255,.10)}
}
.slide-wrap.ready .slide-knob{animation:slideKnobPulse 2s ease-in-out infinite}
@keyframes slideArrowNudge{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(3px)}
}
.slide-wrap.ready .slide-knob i{
  animation:slideArrowNudge 1.4s ease-in-out infinite;
}
@keyframes slideSuccessPop{
  0%{transform:scale(.5);opacity:0}
  50%{transform:scale(1.15);opacity:1}
  100%{transform:scale(1);opacity:1}
}
.slide-wrap.done .slide-hint{
  animation:slideSuccessPop 500ms var(--spring);
}

.page{animation:pageFadeIn 340ms var(--ease)}
@keyframes pageFadeIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

.cta-final .btn{
  transition:all 260ms var(--spring);
}
.cta-final .btn:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 18px 44px rgba(255,255,255,.28),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.spin{
  width:16px;height:16px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:spin 720ms cubic-bezier(.34,1.56,.64,1) infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

@media(max-width:520px){
  .top-inner{gap:8px;padding:8px var(--pad);min-height:56px}
  .brand .logo{width:34px;height:34px;border-radius:10px}
  .brand .txt .t{font-size:13px}
  .live{padding:6px 10px;font-size:9.5px;gap:5px}
  .live .dot{width:6px;height:6px}
}

@media(max-width:420px){
  .top-actions{gap:5px}
  .live{padding:6px 8px}
  .live .live-text{display:none}
}