/* ══════════════════════════════════════════════════════════════
   VARIABLES & RESET
══════════════════════════════════════════════════════════════ */
:root{--bg:#08040f;--bg2:#0f0820;--card:#110926;--border:rgba(37,99,235,0.15);
  --border2:rgba(37,99,235,0.35);
  --purple:#1d4ed8;--purple2:#2563eb;--purple3:#60a5fa;--pink:#06b6d4;--pink2:#22d3ee;--gold:#f59e0b; --blue:#1d4ed8;--blue2:#2563eb;--blue3:#93c5fd;
  --gold2:#fbbf24;--green:#10b981;--green2:#34d399;--teal:#06b6d4;--red:#f43f5e;--text:#ede9fe;
  --text2:#c4b5fd;--muted:#6b5b8a;--muted2:#9580b8;--sidebar:240px;
  --topbar:64px;--zoombar:48px;--r:14px;--rs:9px;}

  *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
  body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 0% 0%,rgba(29,78,216,0.18) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 100% 100%,rgba(6,182,212,0.10) 0%,transparent 60%);}
  .layout{display:flex;min-height:100vh;position:relative;z-index:1;}
  .sidebar{width:var(--sidebar);background:rgba(15,8,32,0.96);border-right:1px solid var(--border);backdrop-filter:blur(20px);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:200;transition:transform 0.32s cubic-bezier(0.4,0,0.2,1);overflow-y:auto;overflow-x:hidden;}
  .sidebar-overlay{display:none;position:fixed;inset:0;z-index:190;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);}
  .sidebar-overlay.open{display:block;}
  .sidebar-logo{padding:22px 20px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-shrink:0;}
  
  .logo-text{font-weight:800;font-size:18px;letter-spacing:0.08em;color:#fff;}
  .sidebar-close{display:none;margin-left:auto;background:transparent;border:none;color:var(--muted2);cursor:pointer;padding:4px;}
  .nav-section{padding:18px 14px 6px;}
  .nav-label{font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);padding:0 8px 10px;font-weight:600;}
  .nav-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--rs);color:var(--muted2);font-size:13.5px;font-weight:400;cursor:pointer;transition:all 0.18s;margin-bottom:2px;text-decoration:none;position:relative;}
  .nav-item:hover{background:rgba(37,99,235,0.1);color:var(--text);}
  .nav-item.active{background:linear-gradient(90deg,rgba(29,78,216,0.22),rgba(29,78,216,0.05));color:#fff;}
  .nav-item.active::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--purple2),var(--pink));}
  .nav-icon{width:16px;height:16px;opacity:0.6;flex-shrink:0;}
  .nav-item.active .nav-icon{opacity:1;}
  .nav-badge{margin-left:auto;font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:0.04em;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;}
  .nav-badge.hot{background:linear-gradient(135deg,#f59e0b,#f97316);}
  .sidebar-bottom{margin-top:auto;padding:14px;border-top:1px solid var(--border);flex-shrink:0;}
  .user-card{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:var(--rs);background:rgba(255,255,255,0.03);border:1px solid var(--border);cursor:pointer;transition:all 0.18s;}
  .user-card:hover{background:rgba(37,99,235,0.1);}
  .avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--purple),var(--pink));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;color:#fff;}
  .user-name{font-size:13px;font-weight:600;color:var(--text);}
  .user-email{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .main{margin-left:var(--sidebar);flex:1;min-height:100vh;display:flex;flex-direction:column;}
  .topbar{display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:var(--topbar);background:rgba(8,4,15,1);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);position:fixed;top:var(--zoombar);left:var(--sidebar);right:0;z-index:100;flex-shrink:0;gap:16px;}
  .topbar-left{display:flex;align-items:center;gap:14px;}
  .menu-btn{display:none;background:transparent;border:none;color:var(--muted2);cursor:pointer;padding:7px;border-radius:var(--rs);transition:all 0.18s;}
  .menu-btn:hover{background:rgba(37,99,235,0.14);color:var(--text);}
  .page-heading h1{font-size:20px;font-weight:700;color:#fff;letter-spacing:-0.025em;}
  .page-heading p{font-size:12px;color:var(--muted2);margin-top:2px;}
  .topbar-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
  .icon-btn{width:36px;height:36px;border-radius:var(--rs);background:rgba(255,255,255,0.04);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.18s;color:var(--muted2);position:relative;}
  .icon-btn:hover{background:rgba(37,99,235,0.14);color:var(--text);}
  .notif-dot{width:7px;height:7px;background:var(--pink);border-radius:50%;position:absolute;top:7px;right:7px;border:1.5px solid var(--bg);}
  .btn-outline{text-decoration:none;background:transparent;border:1px solid var(--border2);color:var(--text2);padding:8px 16px;border-radius:var(--rs);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.18s;font-family:'Outfit',sans-serif;white-space:nowrap;}
  .btn-outline:hover{background:rgba(37,99,235,0.14);}
  .btn-primary{text-decoration:none;background:linear-gradient(135deg,var(--purple),#a855f7);border:none;color:#fff;padding:9px 20px;border-radius:var(--rs);font-size:13.5px;font-weight:600;cursor:pointer;font-family:'Outfit',sans-serif;white-space:nowrap;box-shadow:0 4px 20px rgba(29,78,216,0.4);display:flex;align-items:center;gap:7px;transition:all 0.2s;}
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(29,78,216,0.55);}
  .content{padding:28px 32px;flex:1;padding-top:calc(var(--zoombar) + var(--topbar) + 28px);}

.success-list {
  list-style: none;
  margin: 0 0 15px;
  padding: 10px;
  color: var(--green2);
  background: rgba(16,185,129,0.16);
  border-radius: 10px;
  font-size: 12px;
}
.errors-list {
  list-style: none;
  margin: 0 0 15px;
  padding: 10px;
  color: var(--red2);
  background: rgba(244,63,94,0.16);
  border-radius: 10px;
  font-size: 12px;
}
/* ─── ZOOM BANNER ──────────────────────────────────────────── */
.zoom-bar{
  position:fixed;top:0;left:var(--sidebar);right:0;z-index:200;
  height:var(--zoombar);display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:0 28px;
  background:linear-gradient(90deg,rgba(29,78,216,.22),rgba(6,182,212,.12));
  border-bottom:1px solid rgba(37,99,235,.32);
  backdrop-filter: blur(20px);
  overflow-x:hidden;
  box-sizing:border-box;
}
.zoom-bar.live{background:linear-gradient(90deg,rgba(16,185,129,.2),rgba(6,182,212,.12));border-bottom-color:rgba(52,211,153,.35);}
.zoom-bar-left{display:flex;align-items:center;gap:9px;min-width:0;flex:1;}
.zoom-bar-text{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px;min-width:0;flex:1;}
.zoom-dot{width:7px;height:7px;border-radius:50%;background:#2563eb;box-shadow:0 0 7px #2563eb;flex-shrink:0;animation:zdot 1.8s infinite;}
.zoom-bar.live .zoom-dot{background:#34d399;box-shadow:0 0 7px #34d399;}
@keyframes zdot{0%,100%{opacity:1}50%{opacity:.25}}
.zoom-title{font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap;min-width:0;}
.zoom-sub{font-size:11px;color:rgba(255,255,255,.38);white-space:nowrap;}
.zoom-bar-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-shrink:0;flex-wrap:wrap;}
.zoom-timer{display:flex;align-items:center;gap:2px;flex-shrink:0;max-width:100%;}
.zoom-seg{display:flex;flex-direction:column;align-items:center;background:rgba(0,0,0,.3);border:1px solid rgba(37,99,235,.25);border-radius:6px;padding:3px 8px;min-width:36px;}
.zoom-seg-n{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:#fff;line-height:1;}
.zoom-seg-l{font-size:7px;font-weight:600;color:rgba(255,255,255,.3);letter-spacing:.07em;text-transform:uppercase;margin-top:1px;}
.zoom-colon{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:rgba(37,99,235,.5);margin-bottom:9px;}
.zoom-join{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 15px;border-radius:7px;background:#2563eb;color:#fff;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap;transition:all .18s;flex-shrink:0;}
.zoom-join:hover{background:#1d4ed8;transform:translateY(-1px);box-shadow:0 4px 14px rgba(37,99,235,.5);}
.zoom-bar.live .zoom-join{background:#10b981;}
@media(max-width:860px){
  .zoom-bar{left:0;padding:0 14px;gap:10px;}
  .zoom-sub{display:none;}
  .zoom-title{overflow:hidden;text-overflow:ellipsis;}
  .zoom-seg{padding:2px 5px;min-width:30px;}
  .zoom-seg-n{font-size:12px;}
  .zoom-colon{margin-bottom:6px;font-size:12px;}
  .trade-ticker{left:0;}
}
@media(max-width:640px){
  :root{--zoombar:128px;}
  .zoom-bar{
    flex-direction:column;
    align-items:stretch;
    height:auto;
    min-height:0;
    padding:10px 14px;
    gap:10px;
  }
  .zoom-bar-left{width:100%;align-items:flex-start;}
  .zoom-bar-text{width:100%;}
  .zoom-title{white-space:normal;line-height:1.35;font-size:12px;font-weight:600;}
  .zoom-bar-right{width:100%;justify-content:space-between;gap:10px;}
  .zoom-timer{flex-wrap:wrap;justify-content:center;}
}
@media(max-width:480px){
  .zoom-seg--days,.zoom-colon--after-days{display:none!important;}
  .zoom-seg{padding:2px 4px;min-width:26px;}
  .zoom-seg-n{font-size:11px;}
  .zoom-seg-l{font-size:6px;}
  .zoom-join{position:relative;padding:7px 8px;}
  .zoom-join-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
}
@media(max-width:380px){
  .zoom-bar{padding:10px 12px;}
  :root{--zoombar:132px;}
}


/* ambient layers */
#particles{position:fixed;inset:0;z-index:0;pointer-events:none;}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 70% at 0% 0%,rgba(37,99,235,0.18) 0%,transparent 55%),
             radial-gradient(ellipse 60% 60% at 100% 100%,rgba(6,182,212,0.09) 0%,transparent 55%);}

section{position:relative;z-index:1;}
.container{max-width:1400px; width:100%; margin:0 auto;padding:0 5%;}


/* ─── FOOTER ──────────────────────────── */
footer{position:relative;z-index:2;background:var(--bg2);border-top:1px solid var(--border);padding:60px 0 32px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;}
.footer-desc{font-size:13px;color:var(--muted2);line-height:1.7;max-width:280px;margin:14px 0 18px;}
.footer-contact{display:flex;flex-direction:column;gap:8px;}
.footer-ci{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted2);text-decoration:none;transition:color 0.18s;}
.footer-ci:hover{color:var(--text2);}
.footer-col-title{font-size:11px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:16px;}
.footer-links{display:flex;flex-direction:column;gap:9px;}
.footer-link{font-size:13px;color:var(--muted2);text-decoration:none;transition:color 0.18s;}
.footer-link:hover{color:var(--text2);}
.footer-btm{display:flex;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid var(--border);flex-wrap:wrap;gap:12px;}
.footer-copy{font-size:12px;color:var(--muted);}
.footer-disc{font-size:11px;color:var(--muted);max-width:600px;line-height:1.5;text-align:right;}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}.footer-disc{text-align:left;}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr;}}


/* ── Telegram icon buttons ── */
.tg-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,0.07);
  border:1.5px solid rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.75);
  text-decoration:none;transition:all 0.18s;flex-shrink:0;
  position:relative;
}
.tg-icon-btn:hover{
  background:rgba(41,182,246,0.18);
  border-color:rgba(41,182,246,0.55);
  color:#29b6f6;
  box-shadow:0 0 14px rgba(41,182,246,0.30);
  transform:translateY(-1px);
}
.footer-tg-row{display:flex;gap:8px;margin-top:10px;}


/* ── Floating Telegram sidebar ── */
.tg-float{
  position:fixed;
  right:0;
  top:50%;
  transform:translateY(-50%);
  z-index:500;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.tg-float-btn{
  display:flex;
  align-items:center;
  gap:0;
  background:rgba(41,182,246,0.15);
  border:1px solid rgba(41,182,246,0.30);
  border-right:none;
  border-radius:10px 0 0 10px;
  color:rgba(255,255,255,0.80);
  text-decoration:none;
  padding:10px 12px;
  transition:all 0.22s ease;
  overflow:hidden;
  width:46px;
  backdrop-filter:blur(10px);
  box-shadow:-2px 0 20px rgba(41,182,246,0.10);
}
.tg-float-btn svg{flex-shrink:0;color:#29b6f6;}
.tg-float-label{
  font-family:'Outfit',sans-serif;
  font-size:12px;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
  opacity:0;
  max-width:0;
  overflow:hidden;
  transition:all 0.22s ease;
  letter-spacing:0.04em;
}
.tg-float-btn:hover{
  width:110px;
  background:rgba(41,182,246,0.25);
  border-color:rgba(41,182,246,0.55);
  box-shadow:-4px 0 24px rgba(41,182,246,0.25);
  padding-right:14px;
}
.tg-float-btn:hover .tg-float-label{
  opacity:1;
  max-width:80px;
  margin-left:8px;
}
@media(max-width:560px){.tg-float{display:none;}}


.tg-float-fb{
  background:rgba(59,89,152,0.15);
  border-color:rgba(59,89,152,0.30);
  box-shadow:-2px 0 20px rgba(59,89,152,0.10);
}
.tg-float-fb svg{color:#4267b2;}
.tg-float-fb:hover{
  background:rgba(59,89,152,0.28);
  border-color:rgba(59,89,152,0.60);
  box-shadow:-4px 0 24px rgba(59,89,152,0.28);
}


.tg-float-dc{
  background:rgba(88,101,242,0.15);
  border-color:rgba(88,101,242,0.30);
  box-shadow:-2px 0 20px rgba(88,101,242,0.10);
}
.tg-float-dc svg{color:#5865f2;}
.tg-float-dc:hover{
  background:rgba(88,101,242,0.28);
  border-color:rgba(88,101,242,0.60);
  box-shadow:-4px 0 24px rgba(88,101,242,0.28);
}





/* ─── NAV ─── */
nav{position:fixed;top:0;left:0;right:0;z-index:200;height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:rgba(5,12,24,.88);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:box-shadow .3s;}
.nav-logo{display:flex;align-items:center;gap:8px;text-decoration:none;}
.nav-wordmark{font-size:20px;font-weight:800;color:#fff;letter-spacing:.02em;}
.nav-links{display:flex;align-items:center;position:absolute;left:50%;transform:translateX(-50%);}
.nav-link{padding:8px 16px;font-size:14px;color:var(--muted);text-decoration:none;transition:color .18s;white-space:nowrap;}
.nav-link:hover,.nav-link.active{color:#fff;}
.nav-right{display:flex;align-items:center;gap:8px;}
.nav-tg{width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);text-decoration:none;transition:all .18s;}
.nav-tg:hover{background:rgba(41,182,246,.15);border-color:rgba(41,182,246,.5);color:#29b6f6;}
.btn-nav{padding:8px 20px;border-radius:24px;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;border:2px solid rgba(255,255,255,.55);background:transparent;color:#fff;transition:all .18s;}
.btn-nav:hover{background:rgba(255,255,255,.08);border-color:#fff;}
.mob-btn{display:none;background:transparent;border:none;color:var(--muted);cursor:pointer;padding:6px;}
.mob-nav{display:none;position:fixed;inset:0;z-index:190;background:rgba(5,12,24,.97);backdrop-filter:blur(20px);flex-direction:column;align-items:center;justify-content:center;gap:22px;}
.mob-nav.open{display:flex;}
.mob-nav .nav-link{font-size:20px;color:#fff;}
@media(max-width:860px){.nav-links{display:none;}.mob-btn{display:block;}}

/* ─── LIVE TRADE FEED (bottom fixed) ─── */
.trade-ticker{position:fixed;bottom:0;left:var(--sidebar);right:0;z-index:90;background:rgba(4,8,16,.97);border-top:1px solid rgba(37,99,235,.2);padding:7px 20px;display:grid;grid-template-columns:130px 1fr;gap:20px;align-items:center;}
.ticker-label{display:flex;flex-direction:column;gap:5px;}
.ticker-live-dot{width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 6px #34d399;animation:zblink 1.6s infinite;flex-shrink:0;}
.ticker-label-txt{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#34d399;}
.ticker-label-sub{font-size:10.5px;color:rgba(255,255,255,.28);line-height:1.4;}
.feed-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;}
.f-card{background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.06);border-radius:7px;padding:7px 10px;display:flex;align-items:center;gap:8px;transition:background .15s;}
.f-card:hover{background:rgba(255,255,255,.055);}
.f-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.f-pair{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;color:#fff;flex:1;}
.f-dir{font-size:8px;font-weight:800;padding:2px 6px;border-radius:3px;letter-spacing:.05em;flex-shrink:0;}
.f-buy{background:rgba(52,211,153,.14);color:#34d399;}
.f-sell{background:rgba(248,113,113,.12);color:#f87171;}
.f-pnl{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;flex-shrink:0;}
.f-age{font-family:'JetBrains Mono',monospace;font-size:9px;color:rgba(255,255,255,.28);flex-shrink:0;}
.content{padding-bottom:calc(28px + 56px)!important;}
@media(max-width:1200px){.feed-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto;}}

@media(max-width:768px){.trade-ticker{left:0;}.feed-grid{grid-template-columns:repeat(2,1fr);}}

.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:11px;background:transparent;color:var(--text);font-family:'Outfit',sans-serif;font-size:15px;font-weight:500;text-decoration:none;border:1.5px solid rgba(255,255,255,.25);cursor:pointer;transition:all .18s;}
.btn-ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.45);}

/* Scroll reveal helpers (used on guide, about, faq, home) */
.av{opacity:0;transform:translateY(22px);transition:opacity 0.7s ease,transform 0.7s ease;}
.av.in{opacity:1;transform:none;}

/* Floating social sidebar */
.social-float{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:500;display:flex;flex-direction:column;gap:6px;}
.sf-btn{display:flex;align-items:center;width:44px;padding:10px 11px;border-radius:10px 0 0 10px;border:1px solid rgba(255,255,255,.15);border-right:none;background:rgba(7,16,31,.85);backdrop-filter:blur(10px);color:rgba(255,255,255,.7);text-decoration:none;transition:all .22s;overflow:hidden;}
.sf-btn svg{flex-shrink:0;}
.sf-lbl{font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;white-space:nowrap;max-width:0;overflow:hidden;opacity:0;transition:all .22s;letter-spacing:.04em;}
.sf-btn:hover{width:108px;padding-right:14px;}
.sf-btn:hover .sf-lbl{max-width:80px;opacity:1;margin-left:8px;}
.sf-tg:hover{background:rgba(41,182,246,.2);border-color:rgba(41,182,246,.4);color:#29b6f6;}
.sf-fb:hover{background:rgba(59,89,152,.2);border-color:rgba(59,89,152,.4);color:#4267b2;}
.sf-dc:hover{background:rgba(88,101,242,.2);border-color:rgba(88,101,242,.4);color:#5865f2;}
@media(max-width:560px){.social-float{display:none;}}



/* ── ANIMATIONS ───────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── MAIN GRID (account area — all variants) ─────────────────── */
.main-grid {
  display: grid;
  align-items: start;
  gap: 18px;
  margin-bottom: 18px;
}
.main-grid--dashboard,
.main-grid--refer {
  grid-template-columns: 1fr 320px;
}
.main-grid--withdraw {
  grid-template-columns: 1fr 340px;
  gap: 20px;
  margin-bottom: 24px;
}
.main-grid--security {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

/* ── CARD (account / deposit shared) ─────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.card-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--border);
}
.card-hdr:has(.card-status) { align-items: flex-start; }
.card-title { font-family:'Outfit',sans-serif; font-size:14px; font-weight:700; color:#fff; letter-spacing:-0.01em; }
.card-sub   { font-size:11px; color:var(--muted2); margin-top:2px; }
.card-link  { font-size:11.5px; color:var(--blue2); cursor:pointer; font-weight:500; transition:color 0.18s; }
.card-link:hover { color: var(--teal); }
.card-body  { padding: 20px 22px; }
.card-status{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;flex-shrink:0;}
.cs-enabled {background:rgba(16,185,129,0.14);color:var(--green2);border:1px solid rgba(16,185,129,0.22);}
.cs-disabled{background:rgba(244,63,94,0.12);color:var(--red2);border:1px solid rgba(244,63,94,0.22);}
.cs-dot{width:5px;height:5px;border-radius:50%;background:currentColor;}

/* Tab chips — deposit + deposit list */
.filter-tabs{
  display:flex;gap:3px;
  background:rgba(255,255,255,0.025);
  border:1px solid var(--border);
  border-radius:11px;padding:4px;
}
.f-tab{
  padding:7px 18px;border-radius:8px;
  font-size:12.5px;font-weight:500;cursor:pointer;
  transition:all 0.18s;color:var(--muted2);white-space:nowrap;
}
.f-tab:hover{color:var(--text2);}
.f-tab.active{
  background:linear-gradient(135deg,var(--blue),#1d4ed8)!important;
  color:#fff;
  box-shadow:0 2px 14px rgba(37,99,235,0.40);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET  (≤1100px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .main-grid--dashboard,
  .main-grid--refer { grid-template-columns: 1fr; }
  .right-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .referral-card { margin-bottom:0; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL TABLET / LARGE PHONE  (≤860px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  :root { --sidebar: 240px; }

  /* Sidebar slides off screen */
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 32px rgba(0,0,0,0.5); }
  .sidebar-close { display:flex; }

  .main { margin-left: 0; }
  .menu-btn { display:flex; }

  .content { padding: 18px 16px; }
  .topbar {
    left: 0;
    min-height: var(--topbar);
    height: auto;
    padding: 10px 16px;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: center;
    top: 73px;
  }
  .topbar-left { min-width: 0; flex: 1; }
  .page-heading { min-width: 0; }
  .page-heading h1 {
    font-size: clamp(16px, 4.2vw, 20px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-actions { flex-shrink: 0; }

  .stat-grid { grid-template-columns: repeat(2, 1fr); gap:12px; }
  .bottom-grid { grid-template-columns: 1fr; }
  .right-col { grid-template-columns: 1fr; }

  /* Hide some topbar items to save space */
  .topbar .btn-ghost { display:none; }
  .page-title p,
  .page-heading p { display:none; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — PHONE  (≤560px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap:10px; }
  .stat-value { font-size: 20px; }
  .stat-card { padding: 14px; }
  .content { padding: 14px 12px; }

  /* Hide cycle progress column on very small screens */
  .pkg-table .hide-sm { display:none; }

  /* Stack credit banner */
  .credit-banner { flex-direction:column; align-items:flex-start; gap:10px; }
  .credit-countdown { font-size:22px; }

  .btn-primary span.btn-label { display:none; }

  /* Withdraw meta 1 col */
  .wd-meta { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — VERY SMALL  (≤380px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .stat-grid { grid-template-columns: 1fr; }
  .topbar-right .icon-btn:first-child { display:none; }
}

/* ══════════════════════════════════════════════════════════════
   STEP INDICATOR
══════════════════════════════════════════════════════════════ */
.steps-bar {
  display:flex; align-items:center; gap:0;
  margin-bottom:28px;
}
.step {
  display:flex; align-items:center; gap:10px;
  flex:1; position:relative;
}
.step:not(:last-child)::after {
  content:'';
  position:absolute; left:calc(50% + 18px); top:50%;
  width:calc(100% - 36px); height:2px;
  background:var(--border);
  transform:translateY(-50%);
  z-index:0;
}
.step.done:not(:last-child)::after { background:var(--blue2); }

.step-circle {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-weight:700; font-size:13px;
  border:2px solid var(--border); background:var(--card);
  color:var(--muted2); position:relative; z-index:1; transition:all 0.3s;
}
.step.active .step-circle {
  background:linear-gradient(135deg,var(--blue),var(--teal));
  border-color:transparent; color:#fff;
  box-shadow:0 0 18px rgba(124,58,237,0.45);
}
.step.done .step-circle {
  background:rgba(16,185,129,0.2); border-color:var(--green2); color:var(--green2);
}
.step-info { display:flex; flex-direction:column; }
.step-num  { font-size:9.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.1em; }
.step-name { font-family:'Outfit',sans-serif; font-size:12px; font-weight:600; color:var(--muted2); }
.step.active .step-name { color:#fff; }
.step.done  .step-name  { color:var(--green2); }