/* =========================================================
   GLOBAL INVESTMENT — Fintech Admin Design System
   Palette : Pitch-dark base (#0A0C10 / #0B0F19), neon purple + cyan
             glow, glassmorphism cards
   Type    : Sora (display) / Inter (body) / JetBrains Mono (data)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:            #0A0C10;
  --bg-soft:       #0B0F19;
  --surface:       #121726;
  --surface-2:     #1A2038;
  --border:        #2A3354;
  --border-soft:   rgba(255,255,255,0.08);

  /* glassmorphism tokens */
  --glass-bg:      linear-gradient(180deg, rgba(9,12,22,0.74) 0%, rgba(7,10,18,0.66) 100%);
  --glass-solid:   rgba(9,12,22,0.92);
  --glass-border:  rgba(255,255,255,0.10);
  --glass-blur:    blur(16px) saturate(150%);

  /* neon accents */
  --violet:        #A855F7;
  --violet-dim:    #7C3AED;
  --violet-glow:   rgba(168,85,247,0.18);
  --cyan:          #22D3EE;

  --blue-glow:     rgba(168,85,247,0.20);
  --blue-deep:     #0B0F19;
  --sapphire:      #A855F7;
  --ice:           #C4B5FD;

  /* primary accent = neon cyan (kept under the old --mint name so every
     existing page picks it up automatically) */
  --mint:          #22D3EE;
  --mint-dim:      #0E9FBD;
  --mint-glow:     rgba(34,211,238,0.16);
  --gold-hi:       #A5F3FC;

  /* secondary accent = warm amber (pending / earnings / notices) */
  --gold:          #FFAE45;
  --gold-glow:     rgba(255,174,69,0.16);

  --emerald:       #3FD9A3;
  --emerald-glow:  rgba(63,217,163,0.16);

  --danger:        #FF5C77;
  --danger-glow:   rgba(255,92,119,0.16);

  --text-hi:       #EEF2FF;
  --text-mid:      #A9B2CC;
  --text-low:      #7681A3;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-lift: 0 22px 60px -22px rgba(0,0,0,0.85);
  --ease: cubic-bezier(.16,1,.3,1);
}

@property --angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ overflow-x:clip; width:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text-hi);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-display{ font-family:'Sora',sans-serif; letter-spacing:-0.01em; }
.mono{ font-family:'JetBrains Mono',monospace; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--mint); color:#0A1030; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--border),var(--mint-dim)); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--mint); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ---------- Reveal animations ---------- */
@keyframes fadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes pulseGlow{ 0%,100%{ box-shadow:0 0 0 0 var(--mint-glow);} 50%{ box-shadow:0 0 0 8px transparent;} }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes shimmer{ 0%{ background-position:-400px 0;} 100%{ background-position:400px 0;} }
@keyframes floatSlow{ 0%,100%{ transform:translateY(0) translateX(0);} 50%{ transform:translateY(-14px) translateX(6px);} }
@keyframes tickerFlicker{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.reveal{ animation:fadeUp .7s var(--ease) both; }
.reveal-d1{ animation-delay:.06s; } .reveal-d2{ animation-delay:.12s; } .reveal-d3{ animation-delay:.18s; }
.reveal-d4{ animation-delay:.24s; } .reveal-d5{ animation-delay:.3s; } .reveal-d6{ animation-delay:.36s; }

/* ---------- Backdrop orbs (signature ambient motion) ---------- */
.orb{
  position:fixed; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0;
  animation:floatSlow 14s ease-in-out infinite;
}
.orb-mint{ width:420px; height:420px; background:var(--mint-glow); top:-120px; right:-100px; }
.orb-gold{ width:360px; height:360px; background:var(--gold-glow); bottom:-140px; left:-80px; animation-delay:-6s; }

/* ---------- Ambient particle field (live, behind all content) ---------- */
#particlesCanvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}
@media (prefers-reduced-motion: reduce){
  #particlesCanvas{ display:none; }
}

/* ---------- Gold hover glow ---------- */
@keyframes lightningFlicker{
  0%, 100%{ box-shadow:0 0 0 1px rgba(34,211,238,0.30), 0 10px 28px -10px rgba(34,211,238,0.30), 0 0 26px 0 rgba(168,85,247,0.16); }
  50%{ box-shadow:0 0 0 1px rgba(34,211,238,0.45), 0 12px 34px -10px rgba(34,211,238,0.42), 0 0 36px 2px rgba(168,85,247,0.26); }
}
@media (prefers-reduced-motion: reduce){
  .btn-primary:hover, .card-hover:hover, .method-card:hover:not(.disabled){ animation:none !important; }
}

/* ---------- Buttons ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Sora',sans-serif; font-weight:600; font-size:14.5px;
  padding:13px 22px; border-radius:12px; border:1px solid transparent;
  cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  user-select:none;
}
.btn:active{ transform:scale(.97); }
.btn-primary{
  background:linear-gradient(115deg, #7C3AED 0%, #9333EA 28%, #0891B2 55%, #9333EA 80%, #7C3AED 100%);
  background-size:240% 100%;
  color:#fff; box-shadow:0 10px 30px -10px rgba(168,85,247,0.55);
  animation:goldFlow 14s linear infinite;
}
.btn-primary:hover{
  transform:translateY(-2px);
  animation:goldFlow 7s linear infinite, lightningFlicker 2.6s ease-in-out infinite;
}
.btn-ghost{
  background:var(--surface); color:var(--text-hi); border-color:var(--border);
}
.btn-ghost:hover{
  border-color:var(--mint); background:var(--surface-2);
  box-shadow:0 0 18px 1px rgba(34,211,238,0.22), 0 0 8px 1px rgba(34,211,238,0.16);
}
.btn-block{ width:100%; }
.btn-sm{ padding:8px 14px; font-size:13px; border-radius:9px; }
.btn::after{
  content:''; position:absolute; inset:0; background:rgba(255,255,255,0.28);
  transform:translateX(-120%) skewX(-15deg); transition:transform .5s var(--ease);
}
.btn:hover::after{ transform:translateX(120%) skewX(-15deg); }

/* ---------- Cards / Surfaces ---------- */
.card{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift), 0 0 44px -22px rgba(168,85,247,0.38), inset 0 1px 0 rgba(255,255,255,0.06);
}
.card-hover{ transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.card-hover:hover{
  transform:translateY(-4px);
  border-color:rgba(34,211,238,0.45);
  animation:lightningFlicker 2.6s ease-in-out infinite;
}

/* ---------- Forms ---------- */
.field{ margin-bottom:18px; }
.label{
  display:block; font-size:13px; font-weight:600; color:var(--text-mid);
  margin-bottom:8px; letter-spacing:.02em;
}
.input, select.input, textarea.input{
  width:100%; background:rgba(10,12,16,0.55); border:1px solid var(--glass-border);
  color:var(--text-hi); font-family:'Inter',sans-serif; font-size:14.5px;
  padding:13px 15px; border-radius:11px; outline:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.input::placeholder{ color:var(--text-low); }
.input:focus, select.input:focus, textarea.input:focus{
  border-color:var(--mint); background:var(--surface);
  box-shadow:0 0 0 4px var(--mint-glow);
}
.input-wrap{ position:relative; }
.input-icon{ position:absolute; right:15px; top:50%; transform:translateY(-50%); color:var(--text-low); pointer-events:none; }
.input-with-icon{ padding-right:44px; }
textarea.input{ resize:vertical; min-height:110px; }

.checkbox-row{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text-mid); }
.checkbox-row input{ accent-color:var(--mint); width:16px; height:16px; }

/* method select cards */
.method-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(max-width:640px){ .method-grid{ grid-template-columns:1fr; } }
.method-card{
  border:1.5px solid var(--border); background:var(--bg-soft); border-radius:14px;
  padding:16px 14px; text-align:center; cursor:pointer; transition:all .25s var(--ease);
  position:relative;
}
.method-card:hover{
  border-color:var(--mint-dim); transform:translateY(-3px);
  animation:lightningFlicker 2.6s ease-in-out infinite;
}
.method-card.active{
  border-color:var(--mint); background:linear-gradient(180deg, var(--mint-glow), transparent);
  box-shadow:0 0 0 1px var(--mint) inset;
}
.method-card .m-icon{ font-size:26px; margin-bottom:8px; display:flex; align-items:center; justify-content:center; }
.method-card .m-icon img{ width:34px; height:34px; object-fit:contain; }
.method-card .m-label{ font-family:'Sora',sans-serif; font-weight:600; font-size:13.5px; }
.method-card.disabled{
  cursor:not-allowed; opacity:.5; position:relative;
}
.method-card.disabled:hover{ border-color:var(--border); transform:none; }
.method-card .soon-badge{
  position:absolute; top:8px; right:8px; font-size:9.5px; font-weight:700; letter-spacing:.03em;
  background:var(--gold-glow); color:var(--gold); padding:2px 7px; border-radius:20px;
  font-family:'Sora',sans-serif;
}

/* dropzone */
.dropzone{
  border:1.5px dashed var(--border); border-radius:14px; padding:28px 16px;
  text-align:center; color:var(--text-mid); cursor:pointer; transition:all .25s var(--ease);
  background:rgba(0,0,0,0.28);
}
.dropzone:hover, .dropzone.drag{ border-color:var(--mint); background:var(--mint-glow); color:var(--text-hi); }

/* ---------- Badges / status pills ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding:5px 11px; border-radius:20px; font-family:'Sora',sans-serif; letter-spacing:.02em;
}
.badge::before{ content:''; width:6px; height:6px; border-radius:50%; }
.badge-success, .badge-ok{ background:var(--emerald-glow); color:var(--emerald); }
.badge-success::before, .badge-ok::before{ background:var(--emerald); box-shadow:0 0 8px var(--emerald); }
.badge-pending{ background:var(--gold-glow); color:var(--gold); }
.badge-pending::before{ background:var(--gold); box-shadow:0 0 8px var(--gold); animation:pulseGlow 1.8s infinite; }
.badge-failed, .badge-danger{ background:var(--danger-glow); color:var(--danger); }
.badge-failed::before, .badge-danger::before{ background:var(--danger); box-shadow:0 0 8px var(--danger); }
.badge:not([class*="badge-"]){ background:var(--surface-2); color:var(--text-mid); }
.badge:not([class*="badge-"])::before{ background:var(--text-low); }

/* ---------- Table ---------- */
.table-wrap{ overflow-x:auto; border-radius:var(--radius-md); border:1px solid var(--border-soft); }
table.data{ width:100%; border-collapse:collapse; min-width:640px; }
table.data thead th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-low); font-weight:600; padding:14px 18px; background:rgba(0,0,0,0.28);
  border-bottom:1px solid var(--border-soft); white-space:nowrap;
}
table.data tbody td{
  padding:16px 18px; font-size:14px; border-bottom:1px solid var(--border-soft); color:var(--text-hi);
  white-space:nowrap;
}
table.data tbody tr{ transition:background .2s var(--ease); }
table.data tbody tr:hover{ background:var(--surface-2); }
table.data tbody tr:last-child td{ border-bottom:none; }

/* ---------- Sidebar / Admin shell ---------- */
.shell{ display:flex; align-items:stretch; min-height:100vh; position:relative; z-index:1; }

/* Outer .sidebar has NO fixed height of its own on desktop — it stretches
   naturally (via flexbox align-items:stretch) to match the height of
   .main's actual content. This is what makes the dark background colour
   run all the way down the page, no matter how long the page is, instead
   of stopping short at 100vh and leaving a colour mismatch underneath. */
.sidebar{
  width:260px; flex-shrink:0; background:rgba(8,11,19,0.74); border-right:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  transition:transform .35s var(--ease);
}

/* .sidebar-inner is the part that actually holds the logo/nav/logout. It
   sticks to the top of the viewport and is capped to the viewport height,
   so it always stays fully visible on screen while scrolling — with
   Logout pinned to its bottom edge via margin-top:auto below. */
.sidebar-inner{
  position:sticky; top:0; height:100vh; height:100dvh;
  display:flex; flex-direction:column; gap:6px;
  padding:26px 18px; overflow-y:auto;
}

.side-logo{ display:flex; align-items:center; gap:10px; padding:6px 10px 26px; }
.side-logo .mark{
  width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--mint),var(--mint-dim));
  display:flex; align-items:center; justify-content:center; font-weight:800; color:#0A1030; font-family:'Sora',sans-serif;
}
img.mark{
  background:#06102E; object-fit:cover; object-position:center; flex-shrink:0;
  box-shadow:0 0 0 1px rgba(34,211,238,0.35), 0 6px 18px -6px rgba(34,211,238,0.45);
}
.side-logo .name{ font-family:'Sora',sans-serif; font-weight:700; font-size:14.5px; line-height:1.15; }
.side-link{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px;
  color:var(--text-mid); font-size:14px; font-weight:500; transition:all .2s var(--ease); position:relative;
}
.side-link .ic{ width:18px; text-align:center; }
.side-link:hover{ background:var(--surface); color:var(--text-hi); }
.side-link.active{ background:linear-gradient(90deg, var(--mint-glow), transparent); color:var(--mint); font-weight:600; }
.side-link.active::before{
  content:''; position:absolute; left:-18px; top:50%; transform:translateY(-50%);
  width:3px; height:60%; background:var(--mint); border-radius:2px;
  box-shadow:0 0 14px 2px rgba(34,211,238,0.7); animation:pulseBar 2.6s ease-in-out infinite;
}
.side-foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--border-soft); }

.main{ flex:1; min-width:0; }
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 28px; border-bottom:1px solid var(--border-soft); background:rgba(8,10,16,0.72);
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); position:sticky; top:0; z-index:5;
}
.burger{ display:none; background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:9px 11px; cursor:pointer; color:var(--text-hi); }
.content{ padding:28px; max-width:1400px; }

@media(max-width:920px){
  .sidebar{ background:rgba(11,15,25,0.94); position:fixed; left:0; top:0; height:100vh; height:100dvh; z-index:50; transform:translateX(-100%); box-shadow:30px 0 60px rgba(0,0,0,.5); }
  .sidebar.open{ transform:translateX(0); }
  .burger{ display:inline-flex; }
  .content{ padding:18px; }
  .topbar{ padding:14px 18px; }
  .scrim{ display:none; position:fixed; inset:0; background:rgba(5,6,10,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); z-index:40; }
  .scrim.show{ display:block; animation:fadeIn .2s ease; }
}

/* ---------- Stat cards ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:18px; }
@media(max-width:1100px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .stat-grid{ grid-template-columns:1fr; } }
.stat-card{ padding:22px; position:relative; overflow:hidden; }
.stat-card .s-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.stat-card .s-icon{
  width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:18px;
}
.stat-card .s-label{ color:var(--text-mid); font-size:13px; margin-top:14px; }
.stat-card .s-value{ font-family:'Sora',sans-serif; font-size:30px; font-weight:700; margin-top:4px; }
.stat-card .s-delta{ font-size:12.5px; margin-top:8px; display:inline-flex; gap:5px; align-items:center; font-weight:600; }
.stat-pkr{
  display:block; font-family:'JetBrains Mono',monospace; font-weight:500;
  font-size:12.5px; color:var(--text-low); margin-top:2px; letter-spacing:.2px;
}
.up{ color:var(--emerald); } .down{ color:var(--danger); }

/* ---------- Detail rows (deposit/withdrawal detail pages) ---------- */
.detail-row{ display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid var(--border-soft); gap:20px; }
.detail-row:last-child{ border-bottom:none; }
.detail-row .d-label{ color:var(--text-mid); font-size:13.5px; }
.detail-row .d-value{ font-weight:600; font-size:14.5px; text-align:right; }

/* ---------- Auth page ---------- */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; position:relative; z-index:1; }
.auth-card{ width:100%; max-width:440px; padding:38px 34px; }
.auth-brand{ display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:22px; }
.auth-title{ font-size:25px; font-weight:700; text-align:center; }
.auth-sub{ color:var(--text-mid); font-size:14px; text-align:center; margin-top:6px; margin-bottom:30px; }
.divider{ display:flex; align-items:center; gap:12px; color:var(--text-low); font-size:12.5px; margin:22px 0; }
.divider::before,.divider::after{ content:''; flex:1; height:1px; background:var(--border-soft); }

/* skeleton loading shimmer (used for empty/loading states) */
.skel{
  background:linear-gradient(90deg, var(--surface) 0px, var(--surface-2) 40px, var(--surface) 80px);
  background-size:600px 100%; animation:shimmer 1.6s infinite linear; border-radius:8px;
}

/* ---------- Toggle switch (Settings page) ---------- */
.switch{ position:relative; display:inline-block; width:44px; height:25px; flex-shrink:0; cursor:pointer; }
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.switch-track{
  position:absolute; inset:0; background:var(--border); border-radius:999px;
  transition:background .25s var(--ease);
}
.switch-track::before{
  content:''; position:absolute; width:19px; height:19px; left:3px; top:3px;
  background:var(--text-hi); border-radius:50%; transition:transform .25s var(--ease);
}
.switch input:checked + .switch-track{ background:var(--mint); }
.switch input:checked + .switch-track::before{ transform:translateX(19px); background:#0A1030; }

/* ---------- Investment plan cards ---------- */
.plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:920px){ .plan-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .plan-grid{ grid-template-columns:1fr; } }
.plan-card{ padding:22px; text-align:center; position:relative; }
.plan-card.featured{ border-color:transparent; box-shadow:var(--shadow-lift), 0 0 44px -14px rgba(34,211,238,0.45); }
.plan-badge{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--mint),var(--gold-hi)); color:#0A1030;
  font-family:'Sora',sans-serif; font-size:11px; font-weight:700; letter-spacing:.03em;
  padding:4px 12px; border-radius:20px; box-shadow:0 6px 16px -4px rgba(34,211,238,0.6);
}
.plan-name{ font-family:'Sora',sans-serif; font-weight:600; font-size:14px; color:var(--text-mid); }
.plan-amount{ font-family:'Sora',sans-serif; font-weight:700; font-size:24px; margin-top:8px; }
.plan-usd, .plan-pkr{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--mint); margin-top:4px; }
.plan-daily{
  font-family:'JetBrains Mono',monospace; font-size:13.5px; font-weight:600; color:var(--gold);
  margin-top:6px; padding-top:6px; border-top:1px dashed var(--border-soft);
}
.plan-daily .demo-tag{
  display:inline-block; margin-left:4px; padding:2px 7px; border-radius:6px;
  background:var(--danger-glow); color:var(--danger); font-weight:700;
  font-size:10px; letter-spacing:.3px; text-transform:uppercase; vertical-align:1px;
}

/* utility */
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; }
.mt-8{ margin-top:8px;} .mt-16{ margin-top:16px;} .mt-24{ margin-top:24px;} .mt-28{margin-top:28px;}
.avatar{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:700; font-size:14px; color:#0A1030;
  background:linear-gradient(135deg,var(--gold-hi),var(--mint) 55%,var(--mint-dim));
  box-shadow:0 0 0 1px rgba(34,211,238,0.4);
}
/* ---------- Account switcher ---------- */
.acct-trigger{ position:relative; cursor:pointer; display:flex; align-items:center; }
.acct-menu{
  position:absolute; top:calc(100% + 10px); right:0; width:260px; z-index:80;
  background:var(--glass-solid); border:1px solid var(--glass-border); border-radius:var(--radius-md);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--shadow-lift), 0 0 30px -14px rgba(168,85,247,0.4); padding:8px; display:none; flex-direction:column; gap:2px;
}
.acct-menu.open{ display:flex; }
.acct-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; cursor:pointer;
  transition:background .15s var(--ease);
}
.acct-item:hover{ background:var(--surface-2); }
.acct-item.current{ background:var(--mint-glow); }
.acct-item .avatar{ width:30px; height:30px; font-size:11px; flex-shrink:0; }
.acct-info{ min-width:0; flex:1; }
.acct-name{ font-size:13px; font-weight:600; color:var(--text-hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acct-role{ font-size:11px; color:var(--text-low); }
.acct-check{ color:var(--mint); font-size:14px; }
.acct-divider{ height:1px; background:var(--border-soft); margin:6px 4px; }
.acct-add-btn{
  display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:10px; cursor:pointer;
  color:var(--mint); font-size:13px; font-weight:600; background:none; border:none; width:100%; text-align:left;
  font-family:'Inter',sans-serif; box-sizing:border-box;
}
.acct-add-btn:hover{ background:var(--surface-2); }
.acct-empty-hint{ padding:6px 10px 2px; font-size:12px; color:var(--text-low); line-height:1.5; }

.switch-notice{
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px;
  background:var(--mint-glow); border:1px solid var(--mint-dim); margin-bottom:20px;
}

/* ---------- Dashboard growth chart ---------- */
.chart-range-btn{ padding:6px 12px; font-size:12px; }
.chart-range-btn.active{ background:var(--mint-glow); border-color:var(--mint-dim); color:var(--mint); }

/* ---------- Password strength meter ---------- */
.pw-rules{ list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; }
.pw-rules li{ font-size:11.5px; color:var(--text-low); display:flex; align-items:center; gap:6px; transition:color .2s; }
.pw-rules li .dot{ width:6px; height:6px; border-radius:50%; background:var(--border); flex-shrink:0; transition:background .2s; }
.pw-rules li.met{ color:var(--emerald); }
.pw-rules li.met .dot{ background:var(--emerald); box-shadow:0 0 6px var(--emerald); }
.pw-strength-label{ font-size:11px; margin-top:6px; color:var(--text-low); font-weight:600; }

.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:70;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff; font-size:28px;
  box-shadow:0 10px 30px -8px rgba(37,211,102,0.55), 0 4px 12px -2px rgba(0,0,0,0.4);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  text-decoration:none;
}
.wa-float:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 14px 36px -8px rgba(37,211,102,0.65), 0 6px 16px -2px rgba(0,0,0,0.45); }
.wa-float svg{ width:28px; height:28px; }
@media(max-width:560px){ .wa-float{ right:16px; bottom:16px; width:50px; height:50px; font-size:24px; } }

.tg-float{
  position:fixed; right:22px; bottom:90px; z-index:70;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#229ED9; color:#fff; font-size:28px;
  box-shadow:0 10px 30px -8px rgba(34,158,217,0.55), 0 4px 12px -2px rgba(0,0,0,0.4);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  text-decoration:none;
}
.tg-float:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 14px 36px -8px rgba(34,158,217,0.65), 0 6px 16px -2px rgba(0,0,0,0.45); }
.tg-float svg{ width:26px; height:26px; }
@media(max-width:560px){ .tg-float{ right:16px; bottom:78px; width:50px; height:50px; font-size:24px; } }

.section-title{ font-size:20px; font-weight:700; margin:0; }
.section-sub{ color:var(--text-mid); font-size:13.5px; margin-top:4px; }
.pageHead{ margin-bottom:24px; }
.copy-btn{ background:var(--surface); border:1px solid var(--border); color:var(--text-mid); border-radius:8px; padding:6px 9px; cursor:pointer; font-size:12px; transition:all .2s; }
.copy-btn:hover{ color:var(--mint); border-color:var(--mint-dim); }

/* =========================================================
   FULL RESPONSIVE LAYER — applies on top of everything above
   Breakpoints: 1180 / 920 / 720 / 560 / 400 / 340
   ========================================================= */

/* ---- Large tablets / small laptops ---- */
@media(max-width:1180px){
  .content{ max-width:100%; }
  .stat-grid{ gap:14px; }
}

/* ---- Tablets (sidebar becomes drawer already handled at 920) ---- */
@media(max-width:920px){
  .content{ padding:20px; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .method-grid{ grid-template-columns:1fr 1fr; }
  .auth-card{ max-width:420px; padding:32px 26px; }
  table.data{ min-width:560px; }
  .orb-mint{ width:300px; height:300px; }
  .orb-gold{ width:260px; height:260px; }
}

/* ---- Small tablets / large phones ---- */
@media(max-width:720px){
  .topbar{ flex-wrap:wrap; gap:10px; padding:12px 16px; }
  .content{ padding:16px; }
  .pageHead{ margin-bottom:18px; }
  .section-title{ font-size:18px; }
  .stat-card .s-value{ font-size:25px; }
  .card{ border-radius:var(--radius-md); }
  .method-grid{ grid-template-columns:1fr; gap:10px; }
  .detail-row{ flex-wrap:wrap; gap:6px; padding:13px 0; }
  .detail-row .d-value{ text-align:left; width:100%; }
  .auth-wrap{ padding:16px; }
  .auth-card{ padding:28px 20px; max-width:100%; }
  #modalScrim > .card{ padding:22px 18px; }
}

/* ---- Phones ---- */
@media(max-width:560px){
  .stat-grid{ grid-template-columns:1fr; }
  .side-logo .name{ font-size:13.5px; }
  .sidebar{ width:82vw; max-width:300px; }
  table.data{ min-width:520px; }
  table.data thead th, table.data tbody td{ padding:12px 13px; font-size:13px; }
  .btn{ font-size:14px; padding:12px 18px; }
  .auth-title{ font-size:21px; }
  .auth-sub{ font-size:13px; margin-bottom:22px; }
  .divider{ margin:18px 0; }
  .field{ margin-bottom:15px; }
  .input, select.input, textarea.input{ padding:12px 13px; font-size:14px; }
  .content{ padding:14px; }
  .stat-card{ padding:18px; }
  .checkbox-row{ font-size:12.5px; }
  .dropzone{ padding:22px 12px; }
  .side-link{ font-size:13.5px; }
}

/* ---- Small phones ---- */
@media(max-width:400px){
  .content{ padding:12px; }
  .card{ border-radius:14px; }
  .auth-card{ padding:22px 16px; }
  .stat-card .s-value{ font-size:22px; }
  .section-title{ font-size:16.5px; }
  .side-logo .mark{ width:30px; height:30px; font-size:13px; }
  table.data thead th, table.data tbody td{ padding:10px 11px; font-size:12.5px; }
  .badge{ font-size:11px; padding:4px 9px; }
  .avatar{ width:32px; height:32px; font-size:12px; }
  .btn{ padding:11px 16px; font-size:13.5px; }
  .method-card{ padding:13px 10px; }
  .stat-grid{ gap:12px; }
}

/* ---- Very small / narrow phones ---- */
@media(max-width:340px){
  .auth-brand .name{ font-size:15px; }
  .section-title{ font-size:15.5px; }
  .stat-card .s-value{ font-size:20px; }
  .topbar{ padding:10px 12px; }
  .content{ padding:10px; }
  .sidebar{ width:88vw; }
}

/* ---- Height-constrained / landscape phones ---- */
@media(max-height:480px) and (orientation:landscape){
  .auth-wrap{ align-items:flex-start; padding-top:24px; padding-bottom:24px; }
  .sidebar-inner{ overflow-y:auto; }
}

/* ---- Ensure images / long words never overflow ---- */
img, .mono, .d-value, td{ max-width:100%; word-break:break-word; }

/* ----

/* =========================================================
   LIVE BACKGROUND — neon purple + cyan aurora on pitch dark
   Pure CSS, GPU-friendly (transform / opacity / background-position
   only). Slow on purpose (18-30s loops) so it stays calm and never
   competes with content. Everything switches off for
   prefers-reduced-motion.
   ========================================================= */

@keyframes goldFlow{ from{ background-position:0% 50%; } to{ background-position:-240% 50%; } }
@keyframes foil{ from{ background-position:0% 50%; } to{ background-position:-260% 50%; } }
@keyframes pulseBar{ 0%,100%{ opacity:.75; } 50%{ opacity:1; } }
@keyframes spinAngle{ to{ --angle:360deg; } }
@keyframes auroraSpin{ from{ transform:rotate(0deg) scale(1.15); } to{ transform:rotate(360deg) scale(1.15); } }
@keyframes auroraDrift{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  33%{ transform:translate3d(60px,-40px,0) scale(1.10); }
  66%{ transform:translate3d(-40px,36px,0) scale(0.95); }
}
@keyframes auroraDriftAlt{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  40%{ transform:translate3d(-70px,30px,0) scale(1.08); }
  75%{ transform:translate3d(36px,-44px,0) scale(0.96); }
}

/* Animated mesh: soft purple + cyan light fields that slowly turn */
body::before{
  content:''; position:fixed; inset:-35%; z-index:0; pointer-events:none;
  background:
    radial-gradient(34% 28% at 72% 24%, rgba(147,51,234,0.42), transparent 70%),
    radial-gradient(36% 30% at 24% 72%, rgba(14,165,233,0.45), transparent 70%),
    radial-gradient(30% 26% at 60% 84%, rgba(37,99,235,0.40), transparent 70%),
    radial-gradient(26% 22% at 18% 22%, rgba(239,68,68,0.34), transparent 70%);
  animation:auroraSpin 120s linear infinite, hueShift 50s linear infinite;
  will-change:transform, filter;
}

/* Floating gradient orbs (the two .orb divs already on every page) */
.orb{
  position:fixed; border-radius:50%; pointer-events:none; z-index:0;
  filter:blur(60px); mix-blend-mode:screen; will-change:transform, filter;
  animation:auroraDrift 26s ease-in-out infinite, orbHue 36s linear infinite;
}
.orb-mint{ width:460px; height:460px; top:-130px; right:-90px;
  background:radial-gradient(circle, rgba(147,51,234,0.85) 0%, rgba(147,51,234,0.30) 42%, transparent 68%); }
.orb-gold{ width:540px; height:540px; bottom:-170px; left:-110px; animation:auroraDriftAlt 32s ease-in-out -9s infinite, orbHue 44s linear -15s infinite;
  background:radial-gradient(circle, rgba(14,165,233,0.90) 0%, rgba(14,165,233,0.32) 46%, transparent 70%); }

/* ---- Live colour-shifting background ---- */
@keyframes hueShift{ 0%,100%{ filter:hue-rotate(0deg); } 33%{ filter:hue-rotate(-50deg); } 66%{ filter:hue-rotate(18deg); } }
@keyframes orbHue{ 0%,100%{ filter:blur(60px) hue-rotate(0deg); } 33%{ filter:blur(60px) hue-rotate(-45deg); } 66%{ filter:blur(60px) hue-rotate(30deg); } }
@keyframes meshShift{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }

/* A slow river of colour: purple -> cyan -> pink -> blue -> green -> purple */
body::after{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(120deg,
    rgba(147,51,234,0.34) 0%, rgba(14,165,233,0.36) 20%, rgba(239,68,68,0.30) 40%,
    rgba(37,99,235,0.38) 60%, rgba(16,185,129,0.28) 80%, rgba(147,51,234,0.34) 100%);
  background-size:400% 400%;
  animation:meshShift 36s ease-in-out infinite;
  mix-blend-mode:screen;
}

/* Brand wordmark: soft cyan/violet foil */
.side-logo .name{
  background:linear-gradient(100deg,#EEF2FF 0%,#A5F3FC 30%,#C4B5FD 50%,#A5F3FC 70%,#EEF2FF 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:foil 14s linear infinite;
}

/* A thin band of light travels around the login card and the
   featured plan — the only two places that glow constantly. */
.auth-card{ position:relative; }
.auth-card::before, .plan-card.featured::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1.6px;
  background:conic-gradient(from var(--angle), transparent 0deg, transparent 240deg, rgba(168,85,247,0.18) 285deg, var(--violet) 322deg, var(--cyan) 346deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spinAngle 10s linear infinite; pointer-events:none;
}
.auth-card{ box-shadow:var(--shadow-lift), 0 0 70px -26px rgba(168,85,247,0.55), 0 0 40px -24px rgba(34,211,238,0.35), inset 0 1px 0 rgba(255,255,255,0.08); }

/* Glass details */
#modalScrim{ -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
#modalScrim > .card{ background:var(--glass-solid); }
.stat-card .s-icon{ box-shadow:0 0 0 1px rgba(255,255,255,0.06) inset; }
.side-link.active{ box-shadow:inset 0 0 24px -12px rgba(34,211,238,0.45); }
.input:focus, select.input:focus, textarea.input:focus{ box-shadow:0 0 0 3px rgba(34,211,238,0.14), 0 0 18px -4px rgba(34,211,238,0.35); }
table.data thead th{ color:var(--text-mid); }
table.data tbody tr:hover{ background:linear-gradient(90deg, rgba(168,85,247,0.14), transparent 70%), rgba(0,0,0,0.30); }

@media(max-width:920px){
  .orb{ filter:blur(48px); }
}
@media (prefers-reduced-motion: reduce){
  body::before, body::after{ display:none; }
  .orb, .btn-primary, .side-logo .name,
  .auth-card::before, .plan-card.featured::before, .side-link.active::before{ animation:none !important; }
  .side-logo .name{ background-position:50% 50%; }
}

/* =========================================================
   MOBILE NAVIGATION — always-visible bottom icon bar
   On phones/tablets (<= 920px) the old slide-out menu (☰) is
   replaced by a permanent bar of round icon buttons, so every
   page (Deposit, Withdraw, ...) is one tap away with no menu
   to open. Desktop (> 920px) is completely unchanged.
   ========================================================= */
@media(max-width:920px){
  :root{ --mnav-h: 94px; }

  /* the old menu button + dimmer are no longer needed */
  .burger, .scrim, .scrim.show{ display:none !important; }

  /* the sidebar becomes a fixed bottom bar */
  .sidebar{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    width:100% !important; max-width:none !important; height:auto;
    transform:none !important; z-index:50;
    border-right:0; border-top:1px solid var(--glass-border);
    background:rgba(9,12,22,0.95); box-shadow:0 -14px 40px rgba(0,0,0,.55);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .sidebar-inner{
    position:static; height:auto; overflow:visible;
    flex-direction:row; align-items:flex-start; gap:0; padding:10px 4px 8px;
  }
  .side-logo{ display:none; }
  .sidebar-inner nav{ display:flex !important; flex-direction:row !important; flex:1 1 auto; gap:0 !important; min-width:0; }
  .side-foot{ margin:0; padding:0; border:0; display:flex; flex:0 0 auto; min-width:0; }

  /* each link = round gold-ring icon + small label underneath */
  .side-link{
    flex:1 1 0; min-width:0; flex-direction:column; align-items:center; justify-content:flex-start;
    gap:6px; padding:0 1px; border-radius:0; background:none !important;
    font-size:10px; font-weight:500; line-height:1.15; text-align:center; color:var(--text-mid);
    -webkit-tap-highlight-color:transparent;
  }
  .side-foot .side-link{ width:58px; flex:0 0 58px; }
  .side-link:hover{ background:none !important; color:var(--text-hi); }
  .side-link .ic{ display:none; }

  .side-link::before,
  .side-link.active::before{
    content:''; display:block; position:static; transform:none; left:auto; top:auto;
    width:42px; height:42px; border-radius:50%; flex:0 0 auto;
    border:1.5px solid rgba(34,211,238,.5); background-color:rgba(34,211,238,.04);
    background-repeat:no-repeat; background-position:center; background-size:22px 22px;
    box-shadow:none; animation:none; transition:all .2s var(--ease);
  }
  .side-link:active::before{ transform:scale(.92); }
  .side-link.active{ color:var(--mint); font-weight:600; box-shadow:none; }
  .side-link.active::before{
    border-color:var(--mint); background-color:rgba(34,211,238,.16);
    box-shadow:0 0 16px rgba(34,211,238,.45);
  }

  /* line icons (one per page, shared by user + admin pages) */
  .sidebar .side-link[href="user-dashboard.html"]::before,
  .sidebar .side-link[href="admin-dashboard.html"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v9.5h13V10'/%3E%3Cpath d='M10 19.5v-5h4v5'/%3E%3C/svg%3E"); }
  .sidebar .side-link[href="user-deposit.html"]::before,
  .sidebar .side-link[href="admin-deposit.html"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='m7.5 11 4.5 4.5L16.5 11'/%3E%3Cpath d='M5 19.5h14'/%3E%3C/svg%3E"); }
  .sidebar .side-link[href="user-withdrawal.html"]::before,
  .sidebar .side-link[href="admin-withdrawal.html"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V5'/%3E%3Cpath d='m7.5 9 4.5-4.5L16.5 9'/%3E%3Cpath d='M5 19.5h14'/%3E%3C/svg%3E"); }
  .sidebar .side-link[href="user-task.html"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='12' cy='12' r='.8' fill='%2322D3EE'/%3E%3C/svg%3E"); }
  .sidebar .side-link[href="contact-us.html"]::before,
  .sidebar .side-link[href="admin-contact-us.html"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E"); }
  .sidebar .side-link[href="settings.html"]::before,
  .sidebar .side-link[href="admin-settings.html"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3.5v2.2M12 18.3v2.2M3.5 12h2.2M18.3 12h2.2M6 6l1.6 1.6M16.4 16.4 18 18M18 6l-1.6 1.6M7.6 16.4 6 18'/%3E%3C/svg%3E"); }
  .sidebar .side-link[href="login.html"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v8'/%3E%3Cpath d='M7 6.8a7.5 7.5 0 1 0 10 0'/%3E%3C/svg%3E"); }
  .sidebar .side-link[href="admin-users.html"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='3'/%3E%3Cpath d='M3.5 19c.5-3.2 2.7-5 5.5-5s5 1.8 5.5 5'/%3E%3Cpath d='M16 6.2a3 3 0 0 1 0 5.6M17.5 14.3c1.7.6 2.7 2.2 3 4.7'/%3E%3C/svg%3E"); }
  .sidebar .side-link[href="admin-update-profit.html"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 16 5-5 3.5 3.5L20 7'/%3E%3Cpath d='M15 7h5v5'/%3E%3C/svg%3E"); }
  .sidebar .side-link[href="admin-update-investment.html"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19.5V12M10 19.5V6M15 19.5v-9M20 19.5V9'/%3E%3C/svg%3E"); }

  /* keep page content and floating chat buttons clear of the bar */
  .main{ padding-bottom:calc(var(--mnav-h) + env(safe-area-inset-bottom, 0px)); }
  .wa-float{ bottom:calc(var(--mnav-h) + 14px + env(safe-area-inset-bottom, 0px)); }
  .tg-float{ bottom:calc(var(--mnav-h) + 76px + env(safe-area-inset-bottom, 0px)); }
}
@media(max-width:400px){
  .side-link{ font-size:9px; }
  .side-link::before, .side-link.active::before{ width:38px; height:38px; background-size:20px 20px; }
  .side-foot .side-link{ width:48px; flex-basis:48px; }
}

/* =========================================================
   PLAN CARDS — premium look. The live particle canvas
   (.plan-fx) is added by user-dashboard.html.
   ========================================================= */
.plan-card{
  min-height:190px; padding:30px 22px 22px;
  display:flex; flex-direction:column; justify-content:center; isolation:isolate;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.plan-fx{ position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; pointer-events:none; z-index:0; }
.plan-card > :not(canvas):not(.plan-badge){ position:relative; z-index:1; }
.plan-name{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ice); }
.plan-amount{
  font-size:32px; letter-spacing:-.01em; margin-top:10px;
  background:linear-gradient(180deg,#FFFFFF 10%,#A5F3FC 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.plan-card:hover{
  border-color:rgba(34,211,238,.45);
  box-shadow:var(--shadow-lift), 0 0 38px -12px rgba(34,211,238,.55), inset 0 1px 0 rgba(255,255,255,.10);
}
.plan-card.featured .plan-amount{ background-image:linear-gradient(180deg,#FFFFFF 10%,#FFD79A 100%); }
.plan-card.featured{ box-shadow:var(--shadow-lift), 0 0 52px -14px rgba(34,211,238,.5), 0 0 40px -22px rgba(255,174,69,.45); }

/* =========================================================
   PHONES — cards shown two per row
   Dashboard stat cards (balance, invested, profit, ...) and the
   Deposit / Withdraw method cards. Desktop/tablet unchanged.
   ========================================================= */
@media(max-width:560px){
  .stat-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .stat-grid > .stat-card:last-child:nth-child(odd){ grid-column:1 / -1; }   /* odd one out spans the full row */
  .stat-card{ padding:14px; }
  .stat-card .s-icon{ width:34px; height:34px; font-size:16px; border-radius:10px; }
  .stat-card .s-label{ font-size:12px; margin-top:10px; }
  .stat-card .s-value{ font-size:19px; overflow-wrap:anywhere; }
  .stat-card .s-delta{ font-size:11px; margin-top:6px; }

  .method-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .method-card{ padding:12px 8px; }
  .method-card .m-icon{ margin-bottom:6px; }
  .method-card .m-label{ font-size:12px; line-height:1.25; }
}

/* Plan cards: daily profit line */
.plan-card{ min-height:214px; }
.plan-earn{ display:flex; flex-direction:column; align-items:center; gap:3px; margin-top:12px; }
.plan-earn-amt{
  display:inline-block; padding:4px 12px; border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:.01em;
  color:var(--mint); background:rgba(34,211,238,.10); border:1px solid rgba(34,211,238,.28);
}
.plan-earn-sub{ font-size:11px; color:var(--text-low); }
.plan-card.featured .plan-earn-amt{ color:#FFD79A; background:rgba(255,174,69,.10); border-color:rgba(255,174,69,.32); }