/* ==========================================================================
   QFS PREMIUM BRIDGE — compatibility layer for the user dashboard area
   --------------------------------------------------------------------------
   Loads AFTER qfs-premium.css on all USER pages (via includes/page_chrome.php).
   Maps the legacy component classes (.glass-card, .badge-*, .qfs-modal, ...)
   onto the QFS PREMIUM light-mode design tokens so every user page gets the
   premium look without touching its markup.
   REBUILT 2026-09: LIGHT MODE ONLY — plain solid surfaces (no glassmorphism),
   high-contrast text. ADMIN keeps css/aurora.css — never loaded there.
   ========================================================================== */

/* ---------- legacy aliases over premium tokens ---------- */
:root {
  --qfs-radius: 22px;
}

/* aurora backdrop alias -> soft light aurora
   (legacy markup: <div class="aurora-bg"><span class="aurora-blob b3"></span>...) */
.aurora-bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(90% 70% at 100% 10%, rgba(16,185,129,.08), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 45%, var(--bg) 100%);
}
.aurora-blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: var(--blob-op); will-change: transform;
}
.aurora-blob.b1 { width:46vw; height:46vw; min-width:340px; min-height:340px; top:-14vw; left:-8vw;
  background: radial-gradient(circle at 30% 30%, #0ea5e9, transparent 68%); animation: drift1 26s ease-in-out infinite; }
.aurora-blob.b2 { width:40vw; height:40vw; min-width:300px; min-height:300px; top:22vh; right:-12vw;
  background: radial-gradient(circle at 60% 40%, #10b981, transparent 68%); animation: drift2 32s ease-in-out infinite; }
.aurora-blob.b3 { width:44vw; height:44vw; min-width:320px; min-height:320px; bottom:-16vw; left:16vw;
  background: radial-gradient(circle at 50% 50%, #0284c7, transparent 66%); animation: drift3 38s ease-in-out infinite; }
.aurora-blob.b4 { width:28vw; height:28vw; min-width:220px; min-height:220px; top:52vh; left:-6vw;
  background: radial-gradient(circle at 50% 50%, #22d3ee, transparent 66%); animation: drift2 30s ease-in-out infinite reverse; }
.aurora-bg::before, .aurora-bg::after { content: none; }

/* card system — plain solid surfaces (no glass) */
.glass, .glass-card, .glass-hi, .glass-pill {
  background: #ffffff;
  border: 1px solid var(--stroke);
  border-radius: var(--qfs-radius);
  box-shadow: var(--shadow-soft);
  position: relative;
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s var(--ease);
}
.glass-card { padding: 1.5rem; overflow: hidden; }
.glass-hi {
  background: linear-gradient(150deg, rgba(56,189,248,.08), rgba(16,185,129,.05) 55%, #ffffff);
  border-color: var(--stroke-2);
}
.glass-pill { border-radius: 999px; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; }
.glass-card:hover, .glass:hover { border-color: var(--stroke-2); }
a.glass-card:hover { transform: translateY(-3px); box-shadow: var(--glow); }

/* typography helpers — dark-ink safe on light surfaces */
.text-mute { color: var(--mute) !important; }
.text-dim  { color: var(--mute) !important; opacity: .9; }
.text-emerald { color: #059669; }
.text-teal    { color: #0891b2; }
.text-mint    { color: #047857; }
.font-mono, .counter { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.gradient-emerald-teal {
  background: linear-gradient(100deg, var(--blu-600), #059669 55%, #0891b2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* buttons */
.btn-primary {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: linear-gradient(135deg, var(--blu-400), var(--emerald) 65%, var(--cyan));
  color: #04283d; font-weight: 700; font-size: .92rem;
  padding: .72rem 1.35rem; border-radius: 16px; border: none; cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s ease; text-decoration: none;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -18px rgba(14,165,233,.65); color: #04283d; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: #ffffff; border: 1px solid var(--stroke-2); color: var(--text);
  font-weight: 600; font-size: .92rem; padding: .72rem 1.35rem; border-radius: 16px; cursor: pointer;
  transition: transform .35s var(--ease), border-color .35s ease, color .35s ease; text-decoration: none;
}
.btn-ghost:hover { transform: translateY(-3px); border-color: var(--blu-400); color: var(--blu-700); box-shadow: var(--glow); }
.btn-danger {
  display: inline-flex; align-items: center; gap: .6rem;
  background: linear-gradient(135deg, #f87171, #ef4444); color: #ffffff;
  font-weight: 700; padding: .72rem 1.35rem; border-radius: 16px; border: none; cursor: pointer;
  transition: transform .35s var(--ease); text-decoration: none;
}
.btn-danger:hover { transform: translateY(-3px); }

/* badges — light tints with dark readable text */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .68rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(11,42,74,.06); border: 1px solid rgba(11,42,74,.14); color: #33455c;
}
.badge-success { background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.35); color: #047857; }
.badge-warning { background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.38); color: #92400e; }
.badge-danger  { background: rgba(244,63,94,.12);  border-color: rgba(244,63,94,.32);  color: #be123c; }
.badge-info    { background: rgba(56,189,248,.14); border-color: rgba(56,189,248,.38); color: #0369a1; }
.badge-violet  { background: rgba(139,92,246,.12); border-color: rgba(139,92,246,.32); color: #6d28d9; }

/* forms */
.qfs-label { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: .45rem; font-weight: 600; }
.qfs-input {
  width: 100%; background: #ffffff; color: var(--text);
  border: 1px solid var(--stroke-2); border-radius: 14px;
  padding: .8rem 1rem; font-size: .95rem; outline: none;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.qfs-input:focus { border-color: var(--blu-400); box-shadow: 0 0 0 3px rgba(56,189,248,.20); }
.qfs-input::placeholder { color: #7d97ad; }
select.qfs-input option { background: #ffffff; color: #0b2239; }

/* passcode keypad */
.passcode-row { display: flex; gap: .65rem; justify-content: center; }
.passcode-row input {
  width: 52px; height: 62px; text-align: center; font-size: 1.6rem; font-weight: 700;
  font-family: var(--font-mono); color: var(--text);
  background: #ffffff; border: 1px solid var(--stroke-2); border-radius: 14px; outline: none;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.passcode-row input:focus { border-color: var(--blu-400); box-shadow: 0 0 0 3px rgba(56,189,248,.20); }

/* toasts — solid white, readable text */
.qfs-toast {
  display: flex; align-items: center; gap: .8rem;
  background: #ffffff; border: 1px solid var(--stroke-2);
  border-radius: 16px; padding: .9rem 1.1rem; margin-top: .6rem;
  color: var(--text); font-size: .9rem; max-width: 380px;
  box-shadow: var(--shadow);
  animation: qfsToastIn .45s var(--ease) both;
}
.qfs-toast.is-success { border-left: 3px solid var(--emerald); }
.qfs-toast.is-error   { border-left: 3px solid #ef4444; }
.qfs-toast.is-warning { border-left: 3px solid #f59e0b; }
.qfs-toast.is-info    { border-left: 3px solid var(--blu-500); }
.qfs-toast.is-leaving { opacity: 0; transform: translateX(24px); transition: all .35s ease; }
@keyframes qfsToastIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* modals — solid white */
.qfs-modal-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(8, 25, 42, .45);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
}
.qfs-modal {
  position: relative; width: 100%; max-width: 520px;
  background: #ffffff;
  border: 1px solid var(--stroke-2); border-radius: var(--r-lg, 22px);
  box-shadow: var(--shadow);
  padding: 1.6rem; color: var(--text);
  animation: qfsModalIn .45s var(--ease) both;
}
@keyframes qfsModalIn { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }

/* ticker tape (dashboard + homepage) */
.ticker-tape {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke);
  background: #ffffff; border-radius: 14px; padding: 10px 0;
}
.ticker-tape__track { display: flex; width: max-content; animation: qfsTicker 46s linear infinite; }
.ticker-tape:hover .ticker-tape__track { animation-play-state: paused; }
@keyframes qfsTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-item {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: 0 1.4rem; font-size: .82rem; white-space: nowrap;
  border-right: 1px solid var(--stroke); font-family: var(--font-mono);
}
.ticker-item .coin-symbol { font-weight: 600; letter-spacing: .06em; color: var(--text-soft); }
.ticker-item .price { color: var(--text); }
.ticker-item .change-up   { color: #059669; font-size: .74rem; font-weight: 600; }
.ticker-item .change-down { color: #dc2626; font-size: .74rem; font-weight: 600; }

/* animations */
.fade-up { animation: qfsFadeUp .8s var(--ease) both; }
@keyframes qfsFadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.fade-in { animation: qfsFadeIn .7s ease both; }
@keyframes qfsFadeIn { from { opacity: 0; } to { opacity: 1; } }
.pulse-glow { animation: qfsPulseGlow 2.4s ease-in-out infinite; }
@keyframes qfsPulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56,189,248,.35); }
  50%      { box-shadow: 0 0 22px 4px rgba(16,185,129,.25); }
}
.glow-emerald { filter: drop-shadow(0 0 14px rgba(16,185,129,.30)); }
.glow-teal    { filter: drop-shadow(0 0 14px rgba(34,211,238,.30)); }
.float-y { animation: qfsFloatY 5s ease-in-out infinite; }
@keyframes qfsFloatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* misc legacy bits */
.skeleton { position: relative; overflow: hidden; background: #eaf2f9; border-radius: 10px; }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(125,211,252,.18), transparent);
  animation: qfsShimmer 1.6s infinite;
}
@keyframes qfsShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--stroke-2); border-top-color: var(--blu-500);
  animation: qfsSpin .8s linear infinite;
}
@keyframes qfsSpin { to { transform: rotate(360deg); } }
.tilt-hover { transition: transform .4s var(--ease), box-shadow .4s ease; }
.tilt-hover:hover { transform: perspective(700px) rotateX(3deg) rotateY(-3deg) translateY(-4px); box-shadow: var(--glow); }
.qfs-avatar { border-radius: 50%; object-fit: cover; border: 2px solid var(--stroke-2); }

/* scrollbar */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(11,42,74,.22); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(11,42,74,.38); border: 2px solid transparent; background-clip: content-box; }

/* ---------- app sidebar (user chrome) ---------- */
.qfs-side {
  background: #ffffff;
  border-right: 1px solid var(--stroke);
}
.qfs-side-link {
  display: flex; align-items: center; padding: .62rem .8rem;
  border-radius: 14px; font-size: .875rem; font-weight: 500;
  color: var(--mute); border: 1px solid transparent;
  transition: color .3s ease, background .3s ease, border-color .3s ease;
}
.qfs-side-link:hover { color: var(--text); background: var(--glass-3); }
.qfs-side-link.is-active {
  color: var(--text);
  background: linear-gradient(135deg, rgba(56,189,248,.16), rgba(16,185,129,.08));
  border-color: rgba(56,189,248,.35);
}
.qfs-side-link.is-active i { color: var(--blu-600); }

/* mobile top bar */
.qfs-nav {
  background: #ffffff;
  border-bottom: 1px solid var(--stroke);
  box-shadow: 0 10px 30px -20px rgba(11,42,74,.30);
}

/* ==========================================================================
   A) #qfs-toast-wrap — top-right positioning BELOW the user-area header
   ========================================================================== */
#qfs-toast-wrap {
  position: fixed !important;
  top: 5rem !important;
  right: 1rem !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  pointer-events: none !important;
  max-width: 380px !important;
  width: max-content !important;
}
@media (max-width: 768px) {
  #qfs-toast-wrap {
    top: 4.5rem !important;
    right: 0.75rem !important;
    max-width: calc(100vw - 1.5rem) !important;
    width: auto !important;
  }
}
#qfs-toast-wrap .qfs-toast { pointer-events: auto; }

/* ==========================================================================
   B) Force-render badges as styled pills (guard against Tailwind preflight)
   ========================================================================== */
.badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0.3rem 0.68rem !important;
  border-radius: 999px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
  background: rgba(11, 42, 74, 0.06) !important;
  border: 1px solid rgba(11, 42, 74, 0.14) !important;
  color: #33455c !important;
  white-space: nowrap !important;
}
.badge-success {
  background: rgba(16, 185, 129, 0.14) !important;
  border-color: rgba(16, 185, 129, 0.38) !important;
  color: #047857 !important;
}
.badge-warning {
  background: rgba(245, 158, 11, 0.16) !important;
  border-color: rgba(245, 158, 11, 0.40) !important;
  color: #92400e !important;
}
.badge-danger {
  background: rgba(244, 63, 94, 0.12) !important;
  border-color: rgba(244, 63, 94, 0.34) !important;
  color: #be123c !important;
}
.badge-info {
  background: rgba(56, 189, 248, 0.14) !important;
  border-color: rgba(56, 189, 248, 0.40) !important;
  color: #0369a1 !important;
}
.badge-violet {
  background: rgba(139, 92, 246, 0.12) !important;
  border-color: rgba(139, 92, 246, 0.34) !important;
  color: #6d28d9 !important;
}
.badge.text-xs { font-size: 0.65rem !important; padding: 0.22rem 0.5rem !important; }

/* ==========================================================================
   C) LIGHT-MODE UTILITY REMAPS (2026-09)
   --------------------------------------------------------------------------
   The user pages were written for the old dark theme and scatter dark-era
   Tailwind utilities (text-white, text-emerald-400, bg-white/5, ...). On the
   light-only design those render light-on-light / low-contrast. This remap
   turns them into readable light-theme equivalents WITHOUT touching markup.
   Loaded last on every user page, !important wins over the CDN sheet.
   ========================================================================== */

/* white text was only ever used on surfaces — now dark ink */
.text-white { color: var(--text) !important; }

/* pale accent text -> darker accent of the same hue */
.text-emerald-300, .text-emerald-400 { color: #059669 !important; }
.hover\:text-emerald-300:hover, .hover\:text-emerald-400:hover { color: #047857 !important; }
.text-yellow-300, .text-yellow-400 { color: #a16207 !important; }
.text-red-300, .text-red-400 { color: #dc2626 !important; }
.text-sky-300, .text-sky-400, .text-skyx-300, .text-skyx-400 { color: #0284c7 !important; }
.text-teal-400 { color: #0d9488 !important; }
.text-cyan-400 { color: #0891b2 !important; }
.text-violet-400 { color: #7c3aed !important; }
.text-pink-400 { color: #db2777 !important; }
.text-violet-300 { color: #6d28d9 !important; }

/* faint white overlays -> light neutral tints */
.bg-white\/5   { background-color: rgba(11, 42, 74, 0.04) !important; }
.bg-white\/10  { background-color: rgba(11, 42, 74, 0.07) !important; }
.hover\:bg-white\/5:hover { background-color: rgba(11, 42, 74, 0.05) !important; }
.hover\:bg-white\/10:hover { background-color: rgba(11, 42, 74, 0.08) !important; }
.bg-black\/20 { background-color: rgba(11, 42, 74, 0.06) !important; }
.bg-black\/30 { background-color: rgba(11, 42, 74, 0.07) !important; }

/* legacy dark surface helpers kept alive in page_chrome <style> */
.bg-dark-700 { background: #f1f7fc; }
.bg-dark-800 { background: #ffffff; }
.bg-dark-900 { background: #e9f3fb; }
.dark\:bg-dark-800:is(.dark *) { background: #ffffff; }
.dark\:bg-dark-700:is(.dark *) { background: #f1f7fc; }
.dark\:bg-dark-900:is(.dark *) { background: #e9f3fb; }
.dark\:hover\:bg-dark-700:is(.dark *):hover { background: #f1f7fc; }
.dark\:hover\:bg-dark-800:is(.dark *):hover { background: #ffffff; }
.dark\:text-white:is(.dark *) { color: #0b2239; }
.dark\:text-gray-400:is(.dark *) { color: #486a87; }
.dark\:text-gray-200:is(.dark *) { color: #1f3c56; }
.dark\:bg-gray-800:is(.dark *) { background: rgba(11,42,74,0.05); }
.dark\:bg-gray-700:is(.dark *), .dark\:bg-gray-700\/50:is(.dark *) { background: rgba(11,42,74,0.04); }
.dark\:border-gray-700:is(.dark *), .dark\:border-gray-600:is(.dark *) { border-color: #d8e7f3; }

/* =====================================================================
   SECTION D — WEB 3 CARD (AURORA) + DASHBOARD QUICK CTAs
   Card requests are "Web 3 Card" only (Aurora brand). The card visual is
   intentionally a dark iridescent object on the light UI — it reads as a
   physical premium card, so its internal text stays light for contrast.
   ===================================================================== */
.w3card{position:relative;border-radius:22px;overflow:hidden;isolation:isolate;
  color:#eaf4ff;background:#060d1d;
  border:1px solid rgba(125,211,252,.38);
  box-shadow:0 26px 60px -26px rgba(14,165,233,.55),0 8px 22px -12px rgba(139,92,246,.38)}
.w3card::before{content:"";position:absolute;inset:-45%;z-index:-2;
  background:conic-gradient(from 140deg at 50% 50%,#0284c7,#22d3ee,#34d399,#a78bfa,#f472b6,#38bdf8,#0284c7);
  filter:blur(52px);opacity:.55;animation:w3spin 16s linear infinite}
.w3card::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(115% 85% at 88% 8%,rgba(167,139,250,.38),transparent 55%),
    radial-gradient(115% 85% at 8% 95%,rgba(52,211,153,.32),transparent 55%),
    linear-gradient(165deg,rgba(6,13,29,.10) 0%,rgba(6,13,29,.88) 62%)}
@keyframes w3spin{to{transform:rotate(360deg)}}
.w3card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.w3card-brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.92rem;letter-spacing:.02em;color:#fff}
.w3card-sub{font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:#7dd3fc;margin-top:.3rem}
.w3card-ctl{color:rgba(234,244,255,.85);font-size:1.15rem;transform:rotate(90deg)}
.w3card-chip{display:flex;align-items:center;gap:.7rem;margin:1.35rem 0 .9rem}
.w3card-chip .chip{width:42px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,#f7e8a4,#d8b458 55%,#f2dc8c);
  box-shadow:inset 0 0 0 1px rgba(120,84,10,.35),0 4px 10px -4px rgba(0,0,0,.6);position:relative}
.w3card-chip .chip::after{content:"";position:absolute;inset:5px 8px;border-radius:4px;
  border:1px solid rgba(120,84,10,.4)}
.w3card-net{font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(234,244,255,.75);border:1px solid rgba(125,211,252,.45);border-radius:999px;padding:.28rem .65rem}
.w3card-num{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:clamp(1.05rem,4.6vw,1.3rem);
  letter-spacing:.14em;color:#fff;text-shadow:0 2px 10px rgba(56,189,248,.45)}
.w3card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-top:1.1rem}
.w3card-lab{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(186,215,240,.75)}
.w3card-val{font-size:.82rem;font-weight:600;color:#fff;margin-top:.2rem}
.w3card-tag{font-size:.62rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  background:linear-gradient(90deg,#7dd3fc,#34d399,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
/* compact variant used inside modals / small previews */
.w3card--mini{border-radius:16px;max-width:330px}
.w3card--mini .w3card-num{font-size:.95rem;letter-spacing:.12em}
@media (prefers-reduced-motion:reduce){.w3card::before{animation:none}}

/* --- Dashboard: KYC + Wallet Connect quick buttons --- */
.dash-cta{display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;border-radius:16px;
  background:#ffffff;border:1px solid var(--stroke, #d8e7f3);
  box-shadow:0 10px 26px -18px rgba(11,42,74,.28);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.dash-cta:hover{transform:translateY(-3px);border-color:#7dd3fc;box-shadow:0 18px 38px -20px rgba(14,165,233,.45)}
.dash-cta__ic{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;font-size:1.05rem}
.dash-cta--kyc .dash-cta__ic{background:rgba(16,185,129,.14);color:#047857}
.dash-cta--wc  .dash-cta__ic{background:rgba(14,165,233,.14);color:#0369a1}
.dash-cta__tx{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.dash-cta__tx strong{font-size:.92rem;font-weight:700;color:#0b2239}
.dash-cta__tx small{font-size:.74rem;color:#486a87}
.dash-cta__ar{margin-left:auto;color:#94a9bd;font-size:.85rem;transition:transform .3s ease,color .3s ease}
.dash-cta:hover .dash-cta__ar{transform:translateX(4px);color:#0284c7}

/* --- Web 3 Card: flip interaction + card BACK face -------------------
   Click the issued card to rotate it (3D flip) and reveal the signature
   strip, CVV, holder / expiry row and the issuer disclaimer. ---------- */
.w3flip{perspective:1400px;max-width:430px;cursor:pointer;outline:none;
  border-radius:22px;-webkit-tap-highlight-color:transparent}
.w3flip:focus-visible{box-shadow:0 0 0 3px rgba(56,189,248,.45)}
.w3flip-inner{position:relative;transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.35,.15,.2,1)}
.w3flip.is-flipped .w3flip-inner{transform:rotateY(180deg)}
.w3flip-face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.w3flip-back{position:absolute;inset:0;transform:rotateY(180deg)}
@media (prefers-reduced-motion:reduce){.w3flip-inner{transition:none}}
.w3flip-hint{display:inline-flex;align-items:center;gap:.5rem;margin-top:.85rem;
  padding:.45rem .9rem;border-radius:999px;font-size:.78rem;font-weight:600;
  color:#0369a1;background:rgba(14,165,233,.10);border:1px solid rgba(14,165,233,.25)}
.w3flip-hint i{font-size:.72rem;color:#0284c7}
@media (prefers-reduced-motion:reduce){.w3flip-hint{transition:none}}

/* Card back anatomy (magnetic stripe → signature + CVV → details → disclaimer) */
.w3card--back{display:flex;flex-direction:column;justify-content:flex-start}
.w3card-stripe{height:42px;flex:none;margin:.4rem -1.5rem 1.15rem;
  background:linear-gradient(90deg,#01040a,#0a1424 55%,#01040a);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045)}
.w3card-sig{display:flex;align-items:center;gap:.75rem;
  background:linear-gradient(90deg,#eef3fa,#ccd8e6);
  border-radius:6px;padding:.5rem .45rem .5rem .85rem;min-height:42px}
.w3card-sig-name{flex:1;min-width:0;font-family:'JetBrains Mono',monospace;
  font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:#12263d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w3card-cvv{flex:none;display:inline-flex;align-items:center;gap:.4rem;
  background:#ffffff;border-radius:5px;padding:.34rem .6rem;
  font-family:'JetBrains Mono',monospace;font-size:.76rem;font-weight:700;color:#12263d;
  box-shadow:0 2px 6px rgba(2,10,20,.28)}
.w3card--back .w3card-foot{margin-top:1.05rem}
.w3card-disclaimer{margin-top:1.05rem;font-size:.6rem;line-height:1.6;
  color:rgba(186,215,240,.62);text-align:justify}

/* =====================================================================
   SECTION E — MOBILE BOTTOM NAVIGATION (dashboard footer)
   Fixed 5-tab bar: Home · Cards · Swap · Bots · Profile.
   Hidden ≥768px (paired with the Tailwind `md:hidden` marker class).
   ===================================================================== */
.mfoot-nav{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
  align-items:stretch;justify-content:space-around;
  background:#ffffff;border-top:1px solid var(--stroke, #d8e7f3);
  box-shadow:0 -10px 30px -18px rgba(11,42,74,.35);
  padding:.35rem .25rem calc(.35rem + env(safe-area-inset-bottom, 0px))}
.mfoot-link{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.18rem;padding:.42rem .25rem;border-radius:12px;
  text-decoration:none;color:#486a87;font-size:.64rem;font-weight:600;
  letter-spacing:.01em;transition:color .25s ease,background .25s ease}
.mfoot-link i{font-size:1.02rem;line-height:1;transition:transform .25s ease}
.mfoot-link span{white-space:nowrap}
.mfoot-link:hover{color:#0b2239}
.mfoot-link.is-active{color:#0284c7;background:rgba(14,165,233,.10)}
.mfoot-link.is-active i{transform:translateY(-1px)}
/* Belt-and-braces: hide on desktop even if the Tailwind CDN hiccups */
@media (min-width:768px){.mfoot-nav{display:none}}
/* Keep page content clear of the fixed bar on phones
   (this stylesheet only loads on user pages, which all render the bar) */
@media (max-width:767.98px){
  main{padding-bottom:calc(5.4rem + env(safe-area-inset-bottom, 0px))}
}