/* ============================================================
   BitGainx – Design System v4.0
   Professional fintech UI — single source of truth
   ============================================================ */

/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;max-width:100vw;}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:#080e1a;color:#e2e8f0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;overflow-x:hidden;max-width:100vw;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
button,input,select,textarea{font-family:inherit;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:#080e1a;}
::-webkit-scrollbar-thumb{background:#1e293b;border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:#334155;}
/* ── Design Tokens ── */
:root{
  /* Brand */
  --blue:#2563eb;--blue-dark:#1d4ed8;--blue-light:#3b82f6;--blue-glow:rgba(37,99,235,.35);
  --green:#10b981;--green-dark:#059669;--green-glow:rgba(16,185,129,.3);
  --red:#ef4444;--red-dark:#dc2626;
  --yellow:#f59e0b;--purple:#8b5cf6;--orange:#f7931a;
  /* Surfaces */
  --bg:#080e1a;--bg-2:#0d1526;--bg-3:#111827;
  --surface:#131f35;--surface-2:#1a2744;--surface-3:#1e293b;
  --border:rgba(255,255,255,.06);--border-2:rgba(255,255,255,.1);--border-3:#1e293b;
  /* Text */
  --text:#e2e8f0;--text-2:#94a3b8;--text-3:#64748b;--text-4:#475569;
  /* Radius */
  --r-sm:8px;--r:12px;--r-lg:16px;--r-xl:20px;--r-2xl:24px;
  /* Sidebar */
  --sidebar-w:260px;
  /* Transitions */
  --t:.2s ease;--t-slow:.4s ease;
}

/* ============================================================
   LANDING PAGE
   ============================================================ */

/* Navbar */
.nav-blur{
  background:rgba(8,14,26,.88);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border-bottom:1px solid var(--border);
}
.nav-link-landing{
  font-size:.875rem;font-weight:500;color:var(--text-2);
  transition:color var(--t);position:relative;padding:4px 0;
}
.nav-link-landing::after{
  content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;
  background:var(--blue);border-radius:2px;transition:width var(--t);
}
.nav-link-landing:hover{color:var(--text);}
.nav-link-landing:hover::after{width:100%;}

/* Hero */
.hero-bg{
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%,rgba(37,99,235,.18) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 80%,rgba(16,185,129,.09) 0%,transparent 55%),
    radial-gradient(ellipse 40% 30% at 10% 70%,rgba(139,92,246,.07) 0%,transparent 50%),
    var(--bg);
}
.hero-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%);
}

/* Orbs */
.orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;will-change:transform;}
.orb-1{width:800px;height:800px;background:rgba(37,99,235,.1);top:-300px;left:-200px;animation:orbFloat 14s ease-in-out infinite;}
.orb-2{width:600px;height:600px;background:rgba(16,185,129,.07);bottom:-150px;right:-150px;animation:orbFloat 18s ease-in-out infinite reverse;}
.orb-3{width:400px;height:400px;background:rgba(139,92,246,.06);top:40%;left:60%;animation:orbFloat 10s ease-in-out infinite 2s;}
@keyframes orbFloat{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-50px) scale(1.04);}}

/* Hero badge */
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.25);
  border-radius:100px;padding:6px 16px;
  font-size:.8rem;font-weight:600;color:#93c5fd;
  backdrop-filter:blur(8px);
}
.hero-badge-dot{
  width:7px;height:7px;border-radius:50%;background:#10b981;
  box-shadow:0 0 8px rgba(16,185,129,.8);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1;box-shadow:0 0 8px rgba(16,185,129,.8);}50%{opacity:.7;box-shadow:0 0 16px rgba(16,185,129,.5);}}

/* Buttons */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  color:#fff;font-weight:700;font-size:.9rem;
  padding:14px 28px;border-radius:var(--r-lg);border:none;cursor:pointer;
  transition:transform var(--t),box-shadow var(--t),filter var(--t);
  box-shadow:0 4px 20px var(--blue-glow);
  position:relative;overflow:hidden;
}
.btn-primary::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
  opacity:0;transition:opacity var(--t);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px var(--blue-glow);filter:brightness(1.08);}
.btn-primary:hover::before{opacity:1;}
.btn-primary:active{transform:translateY(0);}

.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(255,255,255,.05);color:var(--text);
  font-weight:600;font-size:.9rem;
  padding:14px 28px;border-radius:var(--r-lg);
  border:1px solid var(--border-2);cursor:pointer;
  transition:background var(--t),border-color var(--t),transform var(--t);
  backdrop-filter:blur(8px);
}
.btn-outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);transform:translateY(-2px);}

.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:transparent;color:var(--text-2);
  font-weight:500;font-size:.875rem;
  padding:10px 18px;border-radius:var(--r);
  border:1px solid var(--border);cursor:pointer;
  transition:all var(--t);
}
.btn-ghost:hover{background:rgba(255,255,255,.06);color:var(--text);border-color:var(--border-2);}

/* Dashboard preview card */
.hero-preview{
  background:rgba(19,31,53,.85);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-2xl);
  padding:24px;
  backdrop-filter:blur(24px);
  box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05) inset;
}

/* Feature cards */
.feature-card{
  background:rgba(19,31,53,.7);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:28px;
  backdrop-filter:blur(12px);
  transition:border-color var(--t-slow),transform var(--t-slow),box-shadow var(--t-slow);
  position:relative;overflow:hidden;
}
.feature-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(37,99,235,.06),transparent);
  opacity:0;transition:opacity var(--t-slow);
}
.feature-card:hover{border-color:rgba(37,99,235,.4);transform:translateY(-6px);box-shadow:0 20px 60px rgba(37,99,235,.12);}
.feature-card:hover::before{opacity:1;}

.feature-icon{
  width:56px;height:56px;border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;margin-bottom:18px;
  position:relative;
}

/* Stats bar */
.stats-bar{
  background:rgba(13,21,38,.8);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(12px);
}
.stat-item{text-align:center;padding:28px 16px;}
.stat-value{font-size:2rem;font-weight:900;color:var(--text);letter-spacing:-1px;line-height:1;}
.stat-label{font-size:.8rem;color:var(--text-3);margin-top:6px;font-weight:500;}

/* Transfer method pills */
.method-pill{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:14px 10px;
  text-align:center;
  transition:all var(--t);
  cursor:default;
}
.method-pill:hover{background:rgba(255,255,255,.08);border-color:var(--border-2);transform:translateY(-3px);}

/* CTA section */
.cta-section{
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%,rgba(37,99,235,.15) 0%,transparent 70%),
    rgba(13,21,38,.6);
  border:1px solid rgba(37,99,235,.2);
  border-radius:var(--r-2xl);
  position:relative;overflow:hidden;
}
.cta-section::before{
  content:'';position:absolute;
  top:-100px;left:50%;transform:translateX(-50%);
  width:600px;height:300px;
  background:rgba(37,99,235,.12);
  filter:blur(80px);border-radius:50%;
  pointer-events:none;
}

/* Section labels */
.section-label{
  display:inline-block;
  padding:5px 14px;border-radius:100px;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:16px;
}
.label-blue{background:rgba(37,99,235,.12);color:#93c5fd;border:1px solid rgba(37,99,235,.25);}
.label-green{background:rgba(16,185,129,.12);color:#6ee7b7;border:1px solid rgba(16,185,129,.25);}
.label-yellow{background:rgba(245,158,11,.12);color:#fcd34d;border:1px solid rgba(245,158,11,.25);}
.label-purple{background:rgba(139,92,246,.12);color:#c4b5fd;border:1px solid rgba(139,92,246,.25);}

/* ============================================================
   AUTH PAGES (Login / Register)
   ============================================================ */
.auth-page{min-height:100vh;display:flex;background:var(--bg);}
.auth-left{
  flex:1;
  background:
    radial-gradient(ellipse 80% 60% at 30% 40%,rgba(37,99,235,.15) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%,rgba(16,185,129,.08) 0%,transparent 50%),
    linear-gradient(160deg,#080e1a 0%,#0d1a35 50%,#080e1a 100%);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:48px;
}
.auth-right{
  width:500px;flex-shrink:0;
  background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  padding:48px;overflow-y:auto;
  border-left:1px solid var(--border);
}
.auth-card{width:100%;max-width:400px;}

/* Auth form fields */
.auth-field{
  width:100%;padding:13px 16px 13px 46px;
  background:rgba(255,255,255,.04);
  border:1.5px solid var(--border-3);
  border-radius:var(--r-lg);
  color:var(--text);font-size:.9rem;font-family:inherit;
  outline:none;transition:border-color var(--t),background var(--t);
}
.auth-field:focus{border-color:var(--blue);background:rgba(37,99,235,.06);}
.auth-field::placeholder{color:var(--text-4);}
.auth-field.no-icon{padding-left:16px;}
.auth-field.error{border-color:var(--red);background:rgba(239,68,68,.05);}
input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px #131f35 inset !important;-webkit-text-fill-color:#e2e8f0 !important;}

/* Password strength */
.strength-bar{height:3px;border-radius:3px;background:var(--border-3);overflow:hidden;margin-top:8px;}
.strength-fill{height:100%;border-radius:3px;transition:width .4s ease,background .4s ease;}

/* ============================================================
   DASHBOARD LAYOUT
   ============================================================ */

/* Sidebar */
.sidebar{
  background:var(--bg-3);
  border-right:1px solid var(--border);
  width:var(--sidebar-w);min-height:100vh;
  position:fixed;top:0;left:0;z-index:50;
  display:flex;flex-direction:column;
  transition:transform var(--t-slow);
  box-shadow:4px 0 24px rgba(0,0,0,.3);
}
.sidebar-logo{
  padding:20px 20px 16px;
  border-bottom:1px solid var(--border);
}
.sidebar-logo-icon{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px var(--blue-glow);
  flex-shrink:0;
}
.sidebar-nav{flex:1;padding:12px 10px;overflow-y:auto;}
.sidebar-section-label{
  font-size:.62rem;font-weight:800;color:var(--text-4);
  text-transform:uppercase;letter-spacing:.12em;
  padding:14px 10px 6px;
}
.nav-link{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:var(--r);
  color:var(--text-2);font-size:.84rem;font-weight:500;
  transition:background var(--t),color var(--t),border-color var(--t);
  text-decoration:none;margin-bottom:1px;
  border-left:2px solid transparent;
}
.nav-link:hover{background:rgba(255,255,255,.05);color:var(--text);}
.nav-link.active{
  background:rgba(37,99,235,.12);color:#60a5fa;
  border-left-color:var(--blue);
  font-weight:600;
}
.nav-link svg{flex-shrink:0;opacity:.65;transition:opacity var(--t);}
.nav-link:hover svg,.nav-link.active svg{opacity:1;}
.nav-badge{
  margin-left:auto;background:var(--red);color:#fff;
  font-size:.6rem;font-weight:800;
  padding:2px 6px;border-radius:20px;
  min-width:18px;text-align:center;
}

/* Topbar */
.topbar{
  background:rgba(8,14,26,.95);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  height:62px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
  position:sticky;top:0;z-index:40;
}
.topbar-btc{
  background:rgba(16,185,129,.1);
  border:1px solid rgba(16,185,129,.2);
  border-radius:var(--r-sm);
  padding:5px 12px;
  font-size:.78rem;font-weight:700;color:#10b981;
  display:flex;align-items:center;gap:6px;
}
.topbar-icon-btn{
  width:36px;height:36px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background var(--t);
  position:relative;text-decoration:none;
}
.topbar-icon-btn:hover{background:rgba(255,255,255,.1);}
.notif-dot{
  position:absolute;top:8px;right:8px;
  width:7px;height:7px;border-radius:50%;
  background:var(--red);border:2px solid var(--bg);
}

/* Main content area */
#mainWrap{
  margin-left:var(--sidebar-w);
  min-height:100vh;
  display:flex;flex-direction:column;
  background:var(--bg);
  overflow-x:hidden;
  width:calc(100% - var(--sidebar-w));
}
.page-content{flex:1;padding:28px;overflow-x:hidden;min-height:0;}

/* Sidebar user footer */
.sidebar-user{
  padding:12px 10px;
  border-top:1px solid var(--border);
}
.sidebar-user-card{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--r);
  background:rgba(255,255,255,.03);
  margin-bottom:6px;
}
.sidebar-avatar{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.85rem;color:#fff;flex-shrink:0;
}

/* ============================================================
   CARDS & COMPONENTS
   ============================================================ */

/* Base cards */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:24px;
}
.card-sm{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:18px;
}
.card-hover{transition:border-color var(--t),box-shadow var(--t),transform var(--t);}
.card-hover:hover{border-color:rgba(37,99,235,.3);box-shadow:0 8px 32px rgba(37,99,235,.08);transform:translateY(-2px);}

/* Balance cards */
.balance-card-usd{
  background:linear-gradient(135deg,#1e3a8a 0%,#1e40af 50%,#1d4ed8 100%);
  border:1px solid rgba(59,130,246,.25);
  border-radius:var(--r-xl);padding:28px;
  position:relative;overflow:hidden;
}
.balance-card-btc{
  background:linear-gradient(135deg,#064e3b 0%,#065f46 50%,#047857 100%);
  border:1px solid rgba(16,185,129,.25);
  border-radius:var(--r-xl);padding:28px;
  position:relative;overflow:hidden;
}
.balance-card-portfolio{
  background:linear-gradient(135deg,#1c1c3a 0%,#2d1b69 100%);
  border:1px solid rgba(139,92,246,.25);
  border-radius:var(--r-xl);padding:28px;
  position:relative;overflow:hidden;
}

/* Balance amount — responsive font size */
.balance-amount {
  font-size: clamp(1.25rem, 4vw, 1.875rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  word-break: break-all;
}
.balance-card-usd::before,
.balance-card-btc::before,
.balance-card-portfolio::before{
  content:'';position:absolute;
  top:-60px;right:-60px;
  width:220px;height:220px;
  background:rgba(255,255,255,.05);
  border-radius:50%;pointer-events:none;
}
.balance-card-usd::after,
.balance-card-btc::after,
.balance-card-portfolio::after{
  content:'';position:absolute;
  bottom:-80px;left:-40px;
  width:200px;height:200px;
  background:rgba(255,255,255,.03);
  border-radius:50%;pointer-events:none;
}

/* Quick action cards */
.quick-action{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:20px 16px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  cursor:pointer;transition:all var(--t);
  text-align:center;text-decoration:none;
}
.quick-action:hover{
  border-color:rgba(37,99,235,.35);
  background:rgba(37,99,235,.06);
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(37,99,235,.1);
}
.quick-action-icon{
  width:50px;height:50px;border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;
  transition:transform var(--t);
}
.quick-action:hover .quick-action-icon{transform:scale(1.1);}

/* Virtual card */
.virtual-card{
  background:linear-gradient(135deg,#1e3a8a,#1e40af,#1d4ed8);
  border-radius:var(--r-xl);padding:28px;
  position:relative;overflow:hidden;min-height:200px;
  box-shadow:0 20px 60px rgba(37,99,235,.35);
}
.virtual-card::before{content:'';position:absolute;top:-60px;right:-60px;width:250px;height:250px;background:rgba(255,255,255,.06);border-radius:50%;}
.virtual-card::after{content:'';position:absolute;bottom:-80px;left:-40px;width:280px;height:280px;background:rgba(255,255,255,.03);border-radius:50%;}
.virtual-card.frozen{filter:grayscale(.6);opacity:.85;}

/* Admin stat cards */
.admin-stat{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:22px;
  position:relative;overflow:hidden;
}
.admin-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--r-xl) var(--r-xl) 0 0;}
.stat-blue::before{background:linear-gradient(90deg,#2563eb,#3b82f6);}
.stat-green::before{background:linear-gradient(90deg,#10b981,#34d399);}
.stat-yellow::before{background:linear-gradient(90deg,#f59e0b,#fbbf24);}
.stat-red::before{background:linear-gradient(90deg,#ef4444,#f87171);}
.stat-purple::before{background:linear-gradient(90deg,#8b5cf6,#a78bfa);}
.stat-teal::before{background:linear-gradient(90deg,#0891b2,#22d3ee);}
.stat-orange::before{background:linear-gradient(90deg,#f7931a,#fbbf24);}

/* ============================================================
   FORM SYSTEM
   ============================================================ */
.form-field{
  width:100%;padding:12px 16px;
  background:rgba(255,255,255,.04);
  border:1.5px solid var(--border-3);
  border-radius:var(--r-lg);
  color:var(--text);font-size:.875rem;font-family:inherit;
  outline:none;
  transition:border-color var(--t),background var(--t),box-shadow var(--t);
}
.form-field:focus{
  border-color:var(--blue);
  background:rgba(37,99,235,.05);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.form-field::placeholder{color:var(--text-4);}
.form-field.no-icon{padding-left:16px;}
.form-field.error{border-color:var(--red);background:rgba(239,68,68,.04);}
.form-field.error:focus{box-shadow:0 0 0 3px rgba(239,68,68,.12);}
select.form-field{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
  padding-right:40px;
}
textarea.form-field{resize:vertical;min-height:80px;padding-top:12px;}
input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px #131f35 inset !important;-webkit-text-fill-color:#e2e8f0 !important;}

/* Field icon wrapper */
.field-wrap{position:relative;}
.field-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-4);pointer-events:none;}
.field-icon-right{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text-4);cursor:pointer;background:none;border:none;padding:4px;transition:color var(--t);}
.field-icon-right:hover{color:var(--text-2);}
.field-wrap .form-field{padding-left:44px;}
.field-wrap .form-field.has-right{padding-right:44px;}

/* Toggle switch */
.toggle-wrap{position:relative;display:inline-flex;align-items:center;cursor:pointer;}
.toggle-wrap input{position:absolute;opacity:0;width:0;height:0;}
.toggle-track{
  width:44px;height:24px;border-radius:12px;
  background:var(--border-3);
  transition:background var(--t);
  position:relative;
}
.toggle-track::after{
  content:'';position:absolute;
  top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;
  background:#fff;
  transition:transform var(--t);
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.toggle-wrap input:checked + .toggle-track{background:var(--blue);}
.toggle-wrap input:checked + .toggle-track::after{transform:translateX(20px);}

/* ============================================================
   BADGES, ALERTS, TOASTS, MODALS
   ============================================================ */

/* Badges */
.badge-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:20px;
  font-size:.72rem;font-weight:700;
  white-space:nowrap;
}
.badge-pill::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.badge-pending{background:rgba(245,158,11,.12);color:#f59e0b;border:1px solid rgba(245,158,11,.2);}
.badge-pending::before{background:#f59e0b;}
.badge-completed,.badge-approved{background:rgba(16,185,129,.12);color:#10b981;border:1px solid rgba(16,185,129,.2);}
.badge-completed::before,.badge-approved::before{background:#10b981;}
.badge-rejected,.badge-failed{background:rgba(239,68,68,.12);color:#ef4444;border:1px solid rgba(239,68,68,.2);}
.badge-rejected::before,.badge-failed::before{background:#ef4444;}
.badge-verified{background:rgba(37,99,235,.12);color:#60a5fa;border:1px solid rgba(37,99,235,.2);}
.badge-verified::before{background:#60a5fa;}
.badge-info{background:rgba(59,130,246,.12);color:#93c5fd;border:1px solid rgba(59,130,246,.2);}
.badge-info::before{background:#93c5fd;}

/* Alerts */
.alert-box{
  padding:13px 16px;border-radius:var(--r-lg);
  font-size:.875rem;margin-bottom:16px;
  display:flex;align-items:flex-start;gap:10px;
  line-height:1.5;
}
.alert-success{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);color:#10b981;}
.alert-error{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:#ef4444;}
.alert-info{background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.2);color:#60a5fa;}
.alert-warning{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);color:#f59e0b;}

/* Toast */
#toast-container{
  position:fixed;top:20px;right:20px;z-index:9999;
  display:flex;flex-direction:column;gap:10px;
  pointer-events:none;max-width:360px;
}
.toast{
  background:var(--surface-3);
  border:1px solid var(--border-2);
  border-radius:var(--r-lg);
  padding:14px 16px;width:100%;
  display:flex;align-items:center;gap:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04) inset;
  animation:toastIn .35s cubic-bezier(.34,1.56,.64,1);
  pointer-events:all;
}
.toast-success{border-left:3px solid #10b981;}
.toast-error{border-left:3px solid #ef4444;}
.toast-info{border-left:3px solid #3b82f6;}
.toast-warning{border-left:3px solid #f59e0b;}

/* Modal */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  z-index:100;display:flex;align-items:center;justify-content:center;
  padding:16px;
  animation:fadeIn .2s ease;
}
.modal-box{
  background:var(--surface);
  border:1px solid var(--border-2);
  border-radius:var(--r-2xl);
  padding:28px;width:100%;max-width:520px;
  max-height:90vh;overflow-y:auto;
  box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05) inset;
  animation:slideUp .3s cubic-bezier(.34,1.56,.64,1);
}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;}
.modal-title{font-size:1.1rem;font-weight:700;color:var(--text);}
.modal-close{
  background:rgba(255,255,255,.06);border:none;color:var(--text-2);
  cursor:pointer;width:32px;height:32px;border-radius:var(--r-sm);
  font-size:1rem;display:flex;align-items:center;justify-content:center;
  transition:background var(--t),color var(--t);flex-shrink:0;
}
.modal-close:hover{background:rgba(255,255,255,.12);color:var(--text);}

/* Spinner */
.spinner{
  display:inline-block;width:16px;height:16px;
  border:2px solid rgba(255,255,255,.25);border-top-color:#fff;
  border-radius:50%;animation:spin .6s linear infinite;
  vertical-align:middle;margin-right:6px;flex-shrink:0;
}

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.data-table{width:100%;border-collapse:collapse;min-width:500px;}
.data-table th{
  padding:11px 14px;text-align:left;
  font-size:.7rem;font-weight:800;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.08em;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
.data-table td{
  padding:13px 14px;font-size:.85rem;
  border-bottom:1px solid rgba(255,255,255,.03);
  vertical-align:middle;color:var(--text-2);
}
.data-table tr:hover td{background:rgba(255,255,255,.02);}
.data-table tr:last-child td{border-bottom:none;}
.tx-amount-val{font-size:.9rem;font-weight:700;}
.tx-amount-val.credit{color:#10b981;}
.tx-amount-val.debit{color:#ef4444;}

/* ============================================================
   TRANSFER METHOD CARDS
   ============================================================ */
.method-card{
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:var(--r-lg);
  padding:12px 8px;text-align:center;
  cursor:pointer;
  transition:border-color var(--t),background var(--t),transform var(--t),box-shadow var(--t);
  user-select:none;
}
.method-card:hover:not(.disabled){
  border-color:rgba(37,99,235,.4);
  background:rgba(37,99,235,.06);
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(37,99,235,.1);
}
.method-card.selected{
  border-color:var(--blue);
  background:rgba(37,99,235,.1);
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.method-card.disabled{opacity:.35;cursor:not-allowed;pointer-events:none;}
.method-logo{width:40px;height:40px;object-fit:contain;margin:0 auto 6px;}
.method-name{font-size:.72rem;font-weight:600;color:var(--text-2);}
.method-card.selected .method-name{color:#60a5fa;}

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.admin-sidebar{
  background:#0a0f1e;
  border-right:1px solid var(--border);
  width:240px;min-height:100vh;
  flex-shrink:0;display:flex;flex-direction:column;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes slideUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-16px);}to{opacity:1;transform:translateX(0);}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes toastIn{from{opacity:0;transform:translateX(100%);}to{opacity:1;transform:translateX(0);}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
@keyframes shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
@keyframes countUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

.animate-fade-in{animation:fadeIn .6s ease forwards;}
.animate-slide-up{animation:slideUp .6s ease forwards;}
.animate-count{animation:countUp .5s ease forwards;}
.delay-100{animation-delay:.1s;opacity:0;}
.delay-200{animation-delay:.2s;opacity:0;}
.delay-300{animation-delay:.3s;opacity:0;}
.delay-400{animation-delay:.4s;opacity:0;}
.delay-500{animation-delay:.5s;opacity:0;}

/* Skeleton loader */
.skeleton{
  background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--r);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  :root{--sidebar-w:240px;}
  .auth-left{padding:36px;}
  .auth-right{width:440px;padding:36px 40px;}
}

@media(max-width:768px){
  :root{--sidebar-w:260px;}
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  #mainWrap{margin-left:0 !important;}
  .page-content{padding:16px;}
  .auth-left{display:none;}
  .auth-right{width:100%;padding:28px 20px;}
  .card{padding:16px;}
  .card-sm{padding:14px;}
  .balance-card-usd,.balance-card-btc,.balance-card-portfolio{padding:20px;}
  .data-table{min-width:600px;}
  .modal-overlay{padding:12px;}
  .modal-box{padding:20px;border-radius:var(--r-lg);}
  #toast-container{left:12px;right:12px;top:12px;max-width:unset;}
  .toast{min-width:unset;width:100%;}
  .admin-sidebar{position:fixed;z-index:50;transform:translateX(-100%);transition:transform .3s ease;height:100vh;overflow-y:auto;}
  .admin-sidebar.open{transform:translateX(0);}
}

@media(max-width:480px){
  .card{padding:14px;border-radius:var(--r-lg);}
  .balance-card-usd,.balance-card-btc,.balance-card-portfolio{padding:16px;border-radius:var(--r-lg);}
  .virtual-card{padding:20px;}
  .badge-pill{font-size:.65rem;padding:2px 7px;}
  .data-table th{font-size:.65rem;}
  .data-table td{font-size:.78rem;padding:9px 8px;}
  .modal-box{padding:16px;}
  .alert-box{font-size:.82rem;padding:11px 14px;}
  .feature-card{padding:20px !important;}
}

@media print{
  .sidebar,.admin-sidebar,#toast-container,#sidebarOverlay{display:none !important;}
  #mainWrap{margin-left:0 !important;}
  body{background:#fff;color:#000;}
}


/* ============================================================
   MOBILE BANKING APP — Complete Responsive System v5.0
   Covers: Mobile, Tablet, Desktop, Admin, User Dashboard
   ============================================================ */

/* ── Bottom Navigation Bar (mobile only) ── */
.bottom-nav {
  display: none;
  position: fixed !important;  /* Always fixed — overlays content, never pushes it */
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(8, 14, 26, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255,255,255,.1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 24px rgba(0,0,0,.5);
  /* Ensure it sits above ALL page content */
  isolation: isolate;
}
.bottom-nav-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-around !important;
  height: 58px;
  padding: 0 4px;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}
.bottom-nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px;
  padding: 6px 8px;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(255,255,255,.4);
  font-size: .57rem;
  font-weight: 600;
  letter-spacing: .02em;
  transition: color .2s;
  min-width: 44px;
  position: relative;
  flex: 1 1 0% !important;
  max-width: 70px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.bottom-nav-item svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  flex-shrink: 0;
  transition: transform .2s;
}
.bottom-nav-item span.bottom-nav-label {
  display: block !important;
  font-size: .57rem;
  font-weight: 600;
  margin-top: 2px;
  white-space: nowrap;
}
.bottom-nav-item:hover, .bottom-nav-item.active { color: #60a5fa; }
.bottom-nav-item.active svg { transform: scale(1.1); }
.bottom-nav-item.active::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 2px;
  background: #3b82f6;
  border-radius: 0 0 3px 3px;
}
.bottom-nav-deposit {
  background: linear-gradient(135deg, var(--blue, #1a56db), var(--blue-dark, #1245b5)) !important;
  border-radius: 50% !important;
  width: 46px !important; height: 46px !important;
  min-width: 46px !important; max-width: 46px !important;
  margin-top: -10px;
  box-shadow: 0 4px 16px var(--blue-glow, rgba(26,86,219,.5));
  color: #fff !important;
  padding: 0 !important;
  flex: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.bottom-nav-deposit svg { width: 22px !important; height: 22px !important; }
.bottom-nav-deposit::after { display: none !important; }
.bottom-nav-badge {
  position: absolute;
  top: 3px; right: 3px;
  min-width: 15px; height: 15px;
  background: #ef4444;
  border-radius: 8px;
  font-size: .52rem;
  font-weight: 800;
  color: #fff;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 2px solid #080e1a;
  padding: 0 2px;
  pointer-events: none;
}

/* ── More Menu Sheet ── */
.more-menu-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 198;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.more-menu-overlay.open { display: block; }
.bottom-nav-more-menu {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #0f172a;
  border-top: 1px solid rgba(255,255,255,.1);
  border-radius: 20px 20px 0 0;
  padding: 16px 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 199;
  max-height: 78vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 -8px 40px rgba(0,0,0,.6);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: block;
}
.bottom-nav-more-menu.open { transform: translateY(0); }
.more-menu-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  margin-top: 4px;
  width: 100%;
}
.more-menu-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px;
  padding: 11px 6px;
  border-radius: 12px;
  text-decoration: none;
  color: #94a3b8;
  font-size: .63rem;
  font-weight: 600;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  transition: all .15s;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
}
.more-menu-item:hover, .more-menu-item:active {
  background: rgba(37,99,235,.12);
  color: #60a5fa;
  border-color: rgba(37,99,235,.3);
}
.more-menu-item-icon { font-size: 1.25rem; line-height: 1; }

/* ── Awaiting approval badge ── */
.badge-awaiting {
  background: rgba(245,158,11,.12);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,.3);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.badge-awaiting::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  animation: pulse 1.5s ease-in-out infinite;
}

/* ── Admin silent badge ── */
.admin-silent-badge {
  font-size: .6rem; font-weight: 700;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(139,92,246,.15); color: #a78bfa;
  border: 1px solid rgba(139,92,246,.25); margin-left: 6px;
}

/* ── Sticky action bar ── */
.sticky-action-bar {
  position: sticky; bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  margin: 0 -16px -16px;
  z-index: 10;
}

/* ── Mobile number inputs ── */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

/* ── Ripple animation ── */
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* ── iOS-style list ── */
.ios-list { border-radius: var(--r-lg); overflow: hidden; }
.ios-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--text);
  transition: background var(--t);
}
.ios-list-item:last-child { border-bottom: none; }
.ios-list-item:hover, .ios-list-item:active { background: rgba(255,255,255,.05); }
.ios-list-chevron { margin-left: auto; color: var(--text-4); flex-shrink: 0; }

/* ── Skeleton ── */
.skeleton-text { height: 14px; border-radius: 4px; }
.skeleton-title { height: 20px; border-radius: 4px; width: 60%; }
.skeleton-amount { height: 32px; border-radius: 6px; width: 40%; }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ── Large Desktop (>1280px) ── */
@media (min-width: 1280px) {
  :root { --sidebar-w: 260px; }
  .page-content { padding: 32px; }
}

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
  :root { --sidebar-w: 240px; }
  #mainWrap { width: calc(100% - 240px); }
  .auth-left { padding: 32px; }
  .auth-right { width: 420px; padding: 32px 36px; }
  .admin-content { padding: 20px; }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
  /* ── Show bottom nav ── */
  .bottom-nav { display: block; }

  /* ── Hide desktop sidebar completely ── */
  .sidebar { display: none !important; }
  #sidebarToggle { display: none !important; }

  /* ── Full-width main content ── */
  #mainWrap {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* ── Page padding: ALWAYS account for fixed bottom nav ──
     This ensures content is never hidden behind the nav bar.
     Applied to ALL pages on mobile. ── */
  .page-content {
    padding: 14px 14px calc(72px + env(safe-area-inset-bottom, 0px)) 14px !important;
    overflow-x: hidden !important;
  }

  /* ── Compact topbar ── */
  .topbar {
    height: 52px !important;
    padding: 0 14px !important;
  }
  /* Hide BTC rate text on very small screens */
  .topbar-btc span:last-child { display: none; }

  /* ── Cards ── */
  .card { padding: 14px !important; border-radius: 14px !important; }
  .card-sm { padding: 12px !important; border-radius: 12px !important; }

  /* ── Balance cards ── */
  .balance-card-usd,
  .balance-card-btc,
  .balance-card-portfolio { padding: 18px !important; border-radius: 16px !important; }

  /* ── Balance card text sizes ── */
  .balance-card-usd .text-3xl,
  .balance-card-btc .text-3xl,
  .balance-card-portfolio .text-3xl { font-size: 1.5rem !important; }

  /* ── Auth pages ── */
  .auth-left { display: none !important; }
  .auth-right { width: 100% !important; padding: 24px 16px !important; }

  /* ── Tables: horizontal scroll ── */
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -14px !important;
    padding: 0 14px !important;
    width: calc(100% + 28px) !important;
  }
  .data-table { min-width: 540px; }

  /* ── Modals: slide up from bottom ── */
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-box {
    border-radius: 20px 20px 0 0 !important;
    max-height: 90vh !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 16px !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── Toast ── */
  #toast-container {
    left: 10px !important;
    right: 10px !important;
    top: 58px !important;
    max-width: unset !important;
  }
  .toast { min-width: unset !important; width: 100% !important; }

  /* ── Admin sidebar: off-canvas ── */
  .admin-sidebar {
    position: fixed !important;
    z-index: 300 !important;
    transform: translateX(-100%) !important;
    transition: transform .3s ease !important;
    height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 280px !important;
  }
  .admin-sidebar.open { transform: translateX(0) !important; }

  /* ── Admin main: full width ── */
  .admin-main { margin-left: 0 !important; width: 100% !important; overflow-x: hidden !important; }
  .admin-topbar { padding: 0 14px !important; }
  .admin-content { padding: 14px !important; overflow-x: hidden !important; }

  /* ── Show admin hamburger ── */
  .menu-btn { display: flex !important; }

  /* ── Prevent iOS zoom on inputs ── */
  input, select, textarea, .form-field { font-size: 16px !important; }

  /* ── Touch-friendly buttons ── */
  .btn { min-height: 44px !important; }
  button[type="submit"] { min-height: 44px !important; }

  /* ── Tailwind grid overrides ── */
  .grid.md\:grid-cols-5 { grid-template-columns: 1fr !important; }
  .md\:col-span-3, .md\:col-span-2 { grid-column: span 1 !important; }
  .grid.md\:grid-cols-3 { grid-template-columns: 1fr !important; }
  .grid.md\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid.lg\:grid-cols-2 { grid-template-columns: 1fr !important; }
  .grid.lg\:grid-cols-3 { grid-template-columns: 1fr !important; }
  .grid.lg\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Inline style grid overrides (dashboard) ── */
  [id="dashMainGrid"] { grid-template-columns: 1fr !important; }
  [id="quickActionsGrid"] { grid-template-columns: repeat(2, 1fr) !important; }
  [id="statsGrid"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Profile grid: stack columns ── */
  [id="profileGrid"] { grid-template-columns: 1fr !important; }

  /* ── Transfer page: stack columns ── */
  .grid.md\:grid-cols-5 { grid-template-columns: 1fr !important; }

  /* ── Deposit method grid: 3 cols on mobile ── */
  [id="methodGrid"] { grid-template-columns: repeat(3, 1fr) !important; }

  /* ── Transfer method cards: 4 cols → 4 cols (keep, they're small) ── */
  .grid.grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

  /* ── Stats bar on landing ── */
  .stat-item { padding: 18px 10px !important; }
  .stat-value { font-size: 1.5rem !important; }

  /* ── Feature cards on landing ── */
  .feature-card { padding: 20px !important; }

  /* ── Max-width containers: full width ── */
  .max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl {
    max-width: 100% !important;
  }

  /* ── Wire/ACH info rows: stack on mobile ── */
  .wire-info-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .wire-info-row span:first-child { min-width: unset !important; }

  /* ── Topbar profile name: hide on mobile ── */
  .topbar .hidden.sm\:inline { display: none !important; }
}

/* ── Small Mobile (≤480px) ── */
@media (max-width: 480px) {
  .page-content {
    padding: 12px 12px calc(66px + env(safe-area-inset-bottom, 0px)) 12px !important;
  }
  .topbar { height: 48px !important; padding: 0 12px !important; }
  .card { padding: 12px !important; border-radius: 12px !important; }
  .card-sm { padding: 10px !important; }
  .balance-card-usd,
  .balance-card-btc,
  .balance-card-portfolio { padding: 14px !important; border-radius: 14px !important; }

  /* ── Balance amounts: smaller on tiny screens ── */
  .balance-card-usd .text-3xl,
  .balance-card-btc .text-3xl,
  .balance-card-portfolio .text-3xl { font-size: 1.3rem !important; }

  .badge-pill { font-size: .62rem !important; padding: 2px 7px !important; }
  .data-table th { font-size: .62rem !important; }
  .data-table td { font-size: .75rem !important; padding: 8px !important; }
  .modal-box { padding: 14px 12px !important; }
  .alert-box { font-size: .8rem !important; padding: 10px 12px !important; }

  /* ── Stack all 2-col grids ── */
  .grid.grid-cols-2 { grid-template-columns: 1fr !important; }
  .grid.sm\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid.md\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  [id="statsGrid"] { grid-template-columns: 1fr !important; }
  [id="quickActionsGrid"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Deposit method grid: 2 cols on tiny screens ── */
  [id="methodGrid"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Transfer method cards: 4 → 4 (keep compact) ── */
  .grid.grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

  /* ── Profile grid ── */
  [id="profileGrid"] { grid-template-columns: 1fr !important; }

  /* ── Bottom nav ── */
  .bottom-nav-item { font-size: .54rem !important; }
  .bottom-nav-inner { height: 54px !important; }
  .more-menu-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
  .more-menu-item { padding: 10px 4px !important; font-size: .6rem !important; }
  .more-menu-item-icon { font-size: 1.1rem !important; }

  /* ── Admin ── */
  .admin-content { padding: 12px !important; }
  .admin-topbar { height: 52px !important; padding: 0 12px !important; }

  /* ── Form grids: stack on small screens ── */
  .grid.grid-cols-2[style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* ── Address 3-col grid: stack ── */
  [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* ── Card number font ── */
  [style*="letter-spacing:.18em"] { font-size: .9rem !important; letter-spacing: .1em !important; }
  [style*="letter-spacing:.15em"] { font-size: .85rem !important; letter-spacing: .08em !important; }

  /* ── Stat value on landing ── */
  .stat-value { font-size: 1.3rem !important; }
}

/* ── Very Small (≤360px) ── */
@media (max-width: 360px) {
  .page-content {
    padding: 10px 10px calc(64px + env(safe-area-inset-bottom, 0px)) 10px !important;
  }
  .card { padding: 10px !important; }
  .bottom-nav-item { font-size: .5rem !important; min-width: 36px !important; }
  .more-menu-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* ── Balance amounts: very compact ── */
  .balance-card-usd .text-3xl,
  .balance-card-btc .text-3xl,
  .balance-card-portfolio .text-3xl { font-size: 1.15rem !important; }

  /* ── Transfer method cards: 4 → 2 rows of 4 ── */
  .grid.grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ── Landscape Mobile ── */
@media (max-width: 768px) and (orientation: landscape) {
  .bottom-nav-inner { height: 50px !important; }
  .page-content {
    padding: 10px 14px calc(58px + env(safe-area-inset-bottom, 0px)) 14px !important;
  }
  .modal-box { max-height: 85vh !important; }
  .bottom-nav-more-menu { max-height: 85vh !important; }
}

/* ── Print ── */
@media print {
  .sidebar, .admin-sidebar, #toast-container, #sidebarOverlay,
  .bottom-nav, .more-menu-overlay, .bottom-nav-more-menu,
  .topbar, .admin-topbar { display: none !important; }
  #mainWrap, .admin-main { margin-left: 0 !important; width: 100% !important; }
  body { background: #fff !important; color: #000 !important; }
  .card { border: 1px solid #ddd !important; background: #fff !important; }
}