/* ── Coinxonen Trading — Frontend v5 ── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

:root {
  --cx-bg:        #07090d;
  --cx-surface:   #0d1117;
  --cx-surface2:  #121820;
  --cx-surface3:  #18212e;
  --cx-border:    #1c2738;
  --cx-border2:   #243044;
  --cx-green:     #00e676;
  --cx-green2:    #00c853;
  --cx-green-dim: rgba(0,230,118,.07);
  --cx-green-glow:rgba(0,230,118,.2);
  --cx-blue:      #448aff;
  --cx-red:       #ff5252;
  --cx-yellow:    #ffd740;
  --cx-text:      #e8f0f8;
  --cx-muted:     #5a6e85;
  --cx-muted2:    #8fa3be;
  --cx-radius:    12px;
  --cx-radius-lg: 18px;
  --cx-font:      'Poppins', sans-serif;
  --nav-h:        68px;
  --dash-top-h:   60px;
}

/* ════════════════════════════════
   HARD RESET — overrides everything
════════════════════════════════ */
.cx-wrap, .cx-wrap *, .cx-wrap *::before, .cx-wrap *::after {
  box-sizing: border-box;
}
.cx-wrap { 
  font-family: var(--cx-font);
  font-size: 14px;
  color: var(--cx-text);
  background: var(--cx-bg);
  -webkit-font-smoothing: antialiased;
  /* Force edge-to-edge */
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
/* Reset margin/padding that theme might've set on descendants */
.cx-wrap h1,.cx-wrap h2,.cx-wrap h3,.cx-wrap h4,.cx-wrap h5,.cx-wrap h6,
.cx-wrap p,.cx-wrap ul,.cx-wrap ol,.cx-wrap li,.cx-wrap figure,.cx-wrap blockquote {
  margin: 0; padding: 0;
}
/* Link base — IMPORTANT: this must not override .cx-btn colors */
.cx-wrap a { color: var(--cx-green); text-decoration: none; }
.cx-wrap a:hover { opacity: .82; }
.cx-wrap img { max-width: 100%; display: block; }

/* ════════════════════════════════
   LAYOUT
════════════════════════════════ */
.cx-container  { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.cx-section    { padding: 90px 0; }
.cx-section-sm { padding: 54px 0; }

/* ════════════════════════════════
   ANIMATIONS
════════════════════════════════ */
@keyframes cx-fade-up   { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes cx-fade-in   { from { opacity:0; } to { opacity:1; } }
@keyframes cx-ticker    { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
@keyframes cx-spin      { to { transform:rotate(360deg); } }
@keyframes cx-pulse     { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes cx-glow-pulse{ 0%,100%{box-shadow:0 0 20px var(--cx-green-glow)} 50%{box-shadow:0 0 40px rgba(0,230,118,.35)} }
@keyframes cx-underline { to { transform:scaleX(1); } }

.cx-anim-fade-up { animation: cx-fade-up .6s ease both; }
.cx-anim-d1 { animation-delay:.1s; }
.cx-anim-d2 { animation-delay:.2s; }
.cx-anim-d3 { animation-delay:.3s; }
.cx-anim-d4 { animation-delay:.4s; }
.cx-anim-d5 { animation-delay:.5s; }
.cx-anim-d6 { animation-delay:.6s; }

/* ════════════════════════════════
   NAV — PUBLIC (sitewide)
════════════════════════════════ */
.cx-nav {
  position: sticky; top: 0; z-index: 200;
  height: var(--nav-h);
  background: rgba(7,9,13,.96);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--cx-border);
}
.cx-nav::after {
  content: ''; position: absolute; bottom:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg,transparent 0%,var(--cx-green) 40%,var(--cx-green2) 60%,transparent 100%);
  opacity:.22;
}
.cx-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h); max-width: 1160px; margin: 0 auto; padding: 0 28px; gap: 16px;
}
.cx-logo { 
  font-family: var(--cx-font); font-size: 21px; font-weight: 800; 
  color: var(--cx-green); letter-spacing: -.5px; flex-shrink:0; line-height:1;
  /* Prevent link color override */
  color: var(--cx-green) !important;
}
.cx-logo span { color: var(--cx-text) !important; }
.cx-logo img  { max-height:36px; width:auto; }
.cx-nav-links { display:flex; align-items:center; gap:2px; list-style:none; flex:1; justify-content:center; }
.cx-nav-links a { display:block; padding:7px 13px; color:var(--cx-muted2); font-size:13px; font-weight:500; border-radius:8px; transition:color .18s,background .18s; }
.cx-nav-links a:hover, .cx-nav-links a.active { color:var(--cx-text) !important; background:var(--cx-surface2); opacity:1; }
.cx-nav-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }

/* Hamburger button */
.cx-nav-toggle {
  display:none; flex-direction:column; justify-content:center; align-items:center;
  width:42px; height:42px; background:var(--cx-surface2); border:1px solid var(--cx-border2);
  border-radius:10px; cursor:pointer; gap:5px; flex-shrink:0; transition:background .18s;
  /* reset any inherited styles */
  padding: 0; line-height: 1;
}
.cx-nav-toggle:hover { background:var(--cx-surface3); }
.cx-nav-toggle span { display:block; width:20px; height:2px; background:var(--cx-text); border-radius:2px; transition:transform .26s ease,opacity .26s ease,width .26s ease; transform-origin:center; }
.cx-nav-open .cx-nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.cx-nav-open .cx-nav-toggle span:nth-child(2) { opacity:0; width:0; }
.cx-nav-open .cx-nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.cx-nav-drawer {
  display:none; flex-direction:column; gap:4px;
  position:fixed; inset:var(--nav-h) 0 0 0;
  background:rgba(7,9,13,.98); backdrop-filter:blur(24px);
  z-index:199; padding:24px 20px 48px; overflow-y:auto;
  transform:translateY(-10px); opacity:0; transition:transform .26s ease,opacity .26s ease;
  pointer-events:none;
}
.cx-nav-open .cx-nav-drawer { display:flex; transform:translateY(0); opacity:1; pointer-events:all; }
.cx-nav-drawer a { display:flex; align-items:center; gap:12px; padding:13px 16px; color:var(--cx-muted2) !important; font-size:15px; font-weight:500; border-radius:10px; border:1px solid transparent; transition:background .18s,color .18s; }
.cx-nav-drawer a:hover { color:var(--cx-text) !important; background:var(--cx-surface2); border-color:var(--cx-border2); opacity:1; }
.cx-nav-drawer a i { width:18px; color:var(--cx-muted); }
.cx-drawer-divider { height:1px; background:var(--cx-border); margin:8px 0; }
.cx-nav-drawer .cx-btn { color:#fff !important; }

@media (max-width:860px) {
  .cx-nav-links, .cx-nav-actions { display:none; }
  .cx-nav-toggle { display:flex; }
}

/* ════════════════════════════════
   BUTTONS — explicit !important to win over .cx-wrap a
════════════════════════════════ */
.cx-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 22px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--cx-font);
  transition: all .2s;
  letter-spacing: .01em;
  text-decoration: none !important;
  /* Reset opacity that .cx-wrap a:hover sets */
  opacity: 1 !important;
  line-height: 1.4;
}
/* Green primary — white text, always */
.cx-btn-primary,
.cx-wrap a.cx-btn-primary,
.cx-wrap button.cx-btn-primary {
  background: var(--cx-green) !important;
  color: #fff !important;
  box-shadow: 0 0 22px var(--cx-green-glow);
}
.cx-btn-primary:hover,
.cx-wrap a.cx-btn-primary:hover {
  background: var(--cx-green2) !important;
  color: #fff !important;
  box-shadow: 0 0 32px rgba(0,230,118,.35);
  transform: translateY(-1px);
  opacity: 1 !important;
}
/* Outline */
.cx-btn-outline,
.cx-wrap a.cx-btn-outline {
  background: transparent !important;
  color: var(--cx-text) !important;
  border: 1px solid var(--cx-border2) !important;
}
.cx-btn-outline:hover,
.cx-wrap a.cx-btn-outline:hover {
  border-color: var(--cx-green) !important;
  color: var(--cx-green) !important;
  opacity: 1 !important;
}
/* Ghost */
.cx-btn-ghost,
.cx-wrap a.cx-btn-ghost {
  background: var(--cx-surface2) !important;
  color: var(--cx-muted2) !important;
  border: 1px solid var(--cx-border) !important;
}
.cx-btn-ghost:hover,
.cx-wrap a.cx-btn-ghost:hover { background:var(--cx-surface3) !important; color:var(--cx-text) !important; opacity:1 !important; }
/* Explicit green (same as primary) */
.cx-btn-green,
.cx-wrap a.cx-btn-green { background: var(--cx-green) !important; color: #fff !important; }
.cx-btn-green:hover,
.cx-wrap a.cx-btn-green:hover { background:var(--cx-green2) !important; color:#fff !important; opacity:1 !important; }
/* Danger */
.cx-btn-danger,
.cx-wrap a.cx-btn-danger { background:rgba(255,82,82,.1) !important; color:var(--cx-red) !important; border:1px solid rgba(255,82,82,.25) !important; }
.cx-btn-danger:hover,
.cx-wrap a.cx-btn-danger:hover { background:rgba(255,82,82,.18) !important; opacity:1 !important; }

.cx-btn-full { width:100%; }
.cx-btn:disabled { opacity:.45 !important; cursor:not-allowed; pointer-events:none; }
.cx-btn-sm { padding:6px 13px; font-size:12px; }
.cx-btn-lg { padding:14px 32px; font-size:15px; border-radius:11px; }

/* ════════════════════════════════
   TICKER
════════════════════════════════ */
.cx-ticker { background:var(--cx-surface); border-bottom:1px solid var(--cx-border); padding:11px 0; overflow:hidden; }
.cx-ticker-inner { display:flex; gap:48px; animation:cx-ticker 32s linear infinite; width:max-content; }
.cx-ticker-item { display:flex; align-items:center; gap:9px; font-size:12px; white-space:nowrap; }
.cx-ticker-item .sym   { font-weight:700; color:var(--cx-text); letter-spacing:.04em; }
.cx-ticker-item .price { color:var(--cx-muted2); }
.cx-ticker-item .chg   { font-weight:600; }
.cx-ticker-item .chg.up   { color:var(--cx-green); }
.cx-ticker-item .chg.down { color:var(--cx-red); }

/* ════════════════════════════════
   HERO
════════════════════════════════ */
.cx-hero {
  position:relative; overflow:hidden;
  padding:112px 0 92px; text-align:center; background:var(--cx-bg);
}
.cx-hero-bg {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 90% 65% at 50% -5%, rgba(0,230,118,.08) 0%,transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(68,138,255,.05) 0%,transparent 60%),
    radial-gradient(ellipse 40% 30% at 15% 70%, rgba(0,200,83,.04) 0%,transparent 60%);
}
.cx-hero-dots { position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(circle,rgba(255,255,255,.03) 1px,transparent 1px); background-size:28px 28px; }
.cx-hero-svg  { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.cx-hero > .cx-container { position:relative; z-index:1; }

.cx-hero-badge { display:inline-flex; align-items:center; gap:7px; background:var(--cx-green-dim); border:1px solid rgba(0,230,118,.2); padding:6px 16px; border-radius:99px; font-size:11.5px; font-weight:500; color:var(--cx-green); margin-bottom:28px; letter-spacing:.02em; animation:cx-fade-up .6s ease both; }
.cx-hero-badge .dot { width:6px; height:6px; border-radius:50%; background:var(--cx-green); animation:cx-pulse 2s ease-in-out infinite; display:inline-block; }

.cx-hero h1 { font-size:clamp(32px,6vw,64px); font-weight:800; line-height:1.08; margin-bottom:22px; letter-spacing:-.03em; animation:cx-fade-up .7s ease .1s both; }
.cx-hero h1 .hl { color:var(--cx-green); position:relative; display:inline-block; }
.cx-hero h1 .hl::after { content:''; position:absolute; bottom:-4px; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--cx-green),var(--cx-blue)); border-radius:2px; transform:scaleX(0); transform-origin:left; animation:cx-underline 1s .6s ease forwards; }
.cx-hero p { font-size:clamp(14px,1.8vw,17px); color:var(--cx-muted2); max-width:560px; margin:0 auto 40px; line-height:1.78; font-weight:300; animation:cx-fade-up .7s ease .2s both; }
.cx-hero-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; animation:cx-fade-up .7s ease .3s both; }
.cx-hero-stats { display:flex; gap:0; justify-content:center; margin:72px auto 0; flex-wrap:wrap; border:1px solid var(--cx-border); border-radius:var(--cx-radius-lg); overflow:hidden; max-width:680px; background:var(--cx-surface); animation:cx-fade-up .8s ease .4s both; }
.cx-hero-stat { flex:1; min-width:140px; text-align:center; padding:22px 16px; border-right:1px solid var(--cx-border); transition:background .2s; }
.cx-hero-stat:last-child { border-right:none; }
.cx-hero-stat:hover { background:var(--cx-surface2); }
.cx-hero-stat .num { font-size:24px; font-weight:800; color:var(--cx-green); letter-spacing:-.02em; }
.cx-hero-stat .lbl { font-size:10px; color:var(--cx-muted); margin-top:4px; letter-spacing:.06em; text-transform:uppercase; }

/* ════════════════════════════════
   SECTION HEADERS
════════════════════════════════ */
.cx-section-header { text-align:center; margin-bottom:56px; }
.cx-section-header .tag { display:inline-block; font-size:10.5px; font-weight:600; color:var(--cx-green); text-transform:uppercase; letter-spacing:3px; margin-bottom:14px; padding:5px 14px; background:var(--cx-green-dim); border:1px solid rgba(0,230,118,.18); border-radius:99px; }
.cx-section-header h2 { font-size:clamp(24px,3.5vw,38px); font-weight:700; margin-bottom:14px; letter-spacing:-.02em; line-height:1.15; }
.cx-section-header p  { color:var(--cx-muted2); font-size:14px; max-width:480px; margin:0 auto; line-height:1.75; font-weight:300; }

/* ════════════════════════════════
   CARDS & GRIDS
════════════════════════════════ */
.cx-card { background:var(--cx-surface); border:1px solid var(--cx-border); border-radius:var(--cx-radius); padding:24px; }
.cx-card-hover { transition:border-color .2s,transform .25s,box-shadow .25s; }
.cx-card-hover:hover { border-color:rgba(0,230,118,.35); transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,0,0,.4); }
.cx-grid-3 { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.cx-grid-4 { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }
.cx-grid-2 { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:20px; }

/* ════════════════════════════════
   STEPS
════════════════════════════════ */
.cx-steps { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
.cx-step { text-align:center; padding:36px 24px; background:var(--cx-surface); border:1px solid var(--cx-border); border-radius:var(--cx-radius); transition:border-color .2s,transform .25s; }
.cx-step:hover { border-color:rgba(0,230,118,.3); transform:translateY(-3px); }
.cx-step-num { width:52px; height:52px; border-radius:14px; background:var(--cx-green-dim); border:1px solid rgba(0,230,118,.22); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; color:var(--cx-green); margin:0 auto 18px; }
.cx-step h3 { font-size:14px; font-weight:700; margin-bottom:10px; }
.cx-step p  { font-size:12.5px; color:var(--cx-muted2); line-height:1.65; font-weight:300; }

/* ════════════════════════════════
   PLAN CARDS
════════════════════════════════ */
.cx-plan { border-radius:var(--cx-radius-lg); border:1px solid var(--cx-border); padding:32px 26px; background:var(--cx-surface); transition:all .25s; position:relative; overflow:hidden; }
.cx-plan::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--cx-border2),transparent); transition:background .25s; }
.cx-plan:hover { border-color:rgba(0,230,118,.35); transform:translateY(-4px); }
.cx-plan:hover::before { background:linear-gradient(90deg,transparent,var(--cx-green),transparent); }
.cx-plan.featured { border-color:rgba(0,230,118,.45); background:linear-gradient(160deg,rgba(0,230,118,.05) 0%,var(--cx-surface) 55%); box-shadow:0 0 48px rgba(0,230,118,.07); }
.cx-plan.featured::before { background:linear-gradient(90deg,transparent,var(--cx-green),transparent); }
.cx-plan.featured::after { content:'Most Popular'; position:absolute; top:18px; right:-28px; background:var(--cx-green); color:#fff; font-size:9.5px; font-weight:700; padding:4px 36px; letter-spacing:.1em; text-transform:uppercase; transform:rotate(45deg); }
.cx-plan-tier { font-size:9.5px; font-weight:700; color:var(--cx-green); text-transform:uppercase; letter-spacing:3px; margin-bottom:12px; }
.cx-plan-price { font-size:36px; font-weight:800; margin-bottom:2px; letter-spacing:-.03em; line-height:1; }
.cx-plan-price span { font-size:12px; color:var(--cx-muted); font-weight:400; }
.cx-plan-return { color:var(--cx-green); font-size:12.5px; font-weight:600; margin-top:8px; margin-bottom:24px; }
.cx-plan-features { list-style:none; margin:0 0 28px; }
.cx-plan-features li { padding:9px 0; font-size:13px; color:var(--cx-muted2); display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--cx-border); }
.cx-plan-features li:last-child { border-bottom:none; }
.cx-plan-features li::before { content:''; width:16px; height:16px; flex-shrink:0; border-radius:50%; background:var(--cx-green-dim) url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.8 7L9 1' stroke='%2300e676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; border:1px solid rgba(0,230,118,.3); }

/* ════════════════════════════════
   AUTH
════════════════════════════════ */
.cx-auth-wrap { min-height:85vh; display:flex; align-items:center; justify-content:center; padding:48px 20px; background:var(--cx-bg); }
.cx-auth-box { background:var(--cx-surface); border:1px solid var(--cx-border); border-radius:18px; padding:44px 40px; width:100%; max-width:460px; box-shadow:0 28px 80px rgba(0,0,0,.45); animation:cx-fade-up .6s ease both; }
.cx-auth-logo { text-align:center; font-family:var(--cx-font); font-size:24px; font-weight:800; color:var(--cx-green) !important; margin-bottom:8px; }
.cx-auth-logo span { color:var(--cx-text) !important; }
.cx-auth-logo img  { max-height:40px; margin:0 auto; }
.cx-auth-sub { text-align:center; color:var(--cx-muted); font-size:13px; margin-bottom:28px; font-weight:300; }
.cx-auth-box h2 { font-size:20px; font-weight:700; margin-bottom:6px; text-align:center; }

/* ════════════════════════════════
   FORMS
════════════════════════════════ */
.cx-form-group { margin-bottom:16px; }
.cx-form-group label { display:block; font-size:12px; color:var(--cx-muted2); margin-bottom:6px; font-weight:500; letter-spacing:.02em; }
.cx-form-group input,
.cx-form-group select,
.cx-form-group textarea { width:100%; background:var(--cx-bg); border:1px solid var(--cx-border2); border-radius:9px; padding:11px 14px; color:var(--cx-text); font-size:13.5px; font-family:var(--cx-font); transition:border-color .18s,box-shadow .18s; }
.cx-form-group input:focus,
.cx-form-group select:focus,
.cx-form-group textarea:focus { outline:none; border-color:var(--cx-green); box-shadow:0 0 0 3px rgba(0,230,118,.1); }
.cx-form-group input::placeholder { color:#2e3f52; }
.cx-form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cx-form-note  { font-size:11.5px; color:var(--cx-muted); margin-top:5px; }

/* ════════════════════════════════
   DASHBOARD WRAP — full viewport
════════════════════════════════ */
/* The cx-wrap for dash pages must be full height */
.cx-wrap:has(.cx-dash-wrap) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cx-bg);
}
.cx-dash-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--cx-bg);
}

/* Dashboard top navbar */
.cx-dash-topbar {
  height: var(--dash-top-h);
  background: var(--cx-surface);
  border-bottom: 1px solid var(--cx-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
  gap: 12px;
}
.cx-dash-topbar-left { display:flex; align-items:center; gap:12px; flex:1; min-width:0; overflow:hidden; }
.cx-dash-topbar-brand { font-family:var(--cx-font); font-size:17px; font-weight:800; color:var(--cx-green) !important; white-space:nowrap; flex-shrink:0; }
.cx-dash-topbar-brand span { color:var(--cx-text) !important; }
.cx-dash-topbar-brand img { max-height:28px; }
.cx-dash-topbar-sep { width:1px; height:22px; background:var(--cx-border); flex-shrink:0; }
.cx-dash-topbar-nav { display:flex; align-items:center; gap:2px; list-style:none; overflow-x:auto; scrollbar-width:none; }
.cx-dash-topbar-nav::-webkit-scrollbar { display:none; }
.cx-dash-topbar-nav a { display:flex; align-items:center; gap:6px; padding:6px 11px; color:var(--cx-muted2) !important; font-size:12px; font-weight:500; border-radius:8px; transition:all .18s; white-space:nowrap; }
.cx-dash-topbar-nav a i { font-size:12px; }
.cx-dash-topbar-nav li.active a,
.cx-dash-topbar-nav a:hover { color:var(--cx-green) !important; background:var(--cx-green-dim); opacity:1; }
.cx-dash-topbar-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.cx-dash-topbar-user { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500; }
.cx-dash-topbar-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--cx-green),var(--cx-blue)); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; flex-shrink:0; }
.cx-dash-mobile-toggle { display:none; background:var(--cx-surface2); border:1px solid var(--cx-border); border-radius:8px; padding:7px 10px; cursor:pointer; color:var(--cx-muted2); font-size:14px; line-height:1; }

/* Dashboard body = sidebar + content */
.cx-dash-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Sidebar */
.cx-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--cx-surface);
  border-right: 1px solid var(--cx-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Fixed height to fill from topbar down */
  height: calc(100vh - var(--dash-top-h));
  position: sticky;
  top: var(--dash-top-h);
}
.cx-sidebar-logo { padding:20px 20px 16px; font-size:17px; font-weight:800; color:var(--cx-green) !important; border-bottom:1px solid var(--cx-border); margin-bottom:8px; display:none; }
.cx-sidebar-logo span { color:var(--cx-text) !important; }
.cx-sidebar-logo img { max-height:28px; }
.cx-sidebar-nav { list-style:none; padding:8px 0; flex:1; }
.cx-sidebar-nav li a { display:flex; align-items:center; gap:10px; padding:10px 18px; font-size:12.5px; color:var(--cx-muted2) !important; transition:all .18s; border-left:3px solid transparent; }
.cx-sidebar-nav li a i { font-size:13px; width:15px; flex-shrink:0; }
.cx-sidebar-nav li a:hover { color:var(--cx-text) !important; background:var(--cx-surface2); opacity:1; }
.cx-sidebar-nav li.active a { color:var(--cx-green) !important; background:var(--cx-green-dim); border-left-color:var(--cx-green); opacity:1; }

/* KYC badge in sidebar */
.cx-kyc-badge { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; padding:2px 7px; border-radius:99px; margin-left:auto; }
.cx-kyc-badge.pending  { background:rgba(255,215,64,.15);  color:var(--cx-yellow); }
.cx-kyc-badge.approved { background:rgba(0,230,118,.15);   color:var(--cx-green);  }
.cx-kyc-badge.rejected { background:rgba(255,82,82,.15);   color:var(--cx-red);    }
.cx-kyc-badge.none     { background:rgba(107,126,150,.12); color:var(--cx-muted2); }

.cx-sidebar-user { padding:14px 18px; border-top:1px solid var(--cx-border); margin-top:auto; }
.cx-sidebar-user .name { font-size:12px; font-weight:600; color:var(--cx-text); }
.cx-sidebar-user .role { font-size:10.5px; color:var(--cx-muted); margin-top:2px; }

/* Main content area */
.cx-dash-content {
  flex: 1;
  padding: 28px 32px;
  overflow-y: auto;
  min-width: 0;
  background: var(--cx-bg);
  /* Height fills remaining space */
  height: calc(100vh - var(--dash-top-h));
}
.cx-dash-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.cx-dash-header h1 { font-size:20px; font-weight:700; }

/* ════════════════════════════════
   STATS / TABLES / BADGES
════════════════════════════════ */
.cx-stats-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; margin-bottom:24px; }
.cx-stat-card { background:var(--cx-surface); border:1px solid var(--cx-border); border-radius:var(--cx-radius); padding:20px; transition:border-color .2s; }
.cx-stat-card:hover { border-color:rgba(0,230,118,.25); }
.cx-stat-card .val { font-size:24px; font-weight:700; color:var(--cx-green); }
.cx-stat-card .lbl { font-size:11px; color:var(--cx-muted); margin-top:4px; text-transform:uppercase; letter-spacing:.04em; }
.cx-stat-card .change { font-size:11.5px; margin-top:8px; }
.cx-stat-card .change.up   { color:var(--cx-green); }
.cx-stat-card .change.down { color:var(--cx-red); }
.cx-table-wrap { overflow-x:auto; }
.cx-table { width:100%; border-collapse:collapse; font-size:13px; }
.cx-table th { background:var(--cx-surface2); color:var(--cx-muted2); padding:11px 14px; text-align:left; font-weight:500; border-bottom:1px solid var(--cx-border); font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
.cx-table td { padding:12px 14px; border-bottom:1px solid var(--cx-border); vertical-align:middle; }
.cx-table tr:hover td { background:var(--cx-surface2); }
.cx-table-empty { text-align:center; padding:40px; color:var(--cx-muted); }
.cx-badge { display:inline-flex; padding:3px 10px; border-radius:99px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.cx-badge-pending  { background:rgba(255,215,64,.12);  color:var(--cx-yellow);  }
.cx-badge-approved { background:rgba(0,230,118,.12);   color:var(--cx-green);   }
.cx-badge-rejected { background:rgba(255,82,82,.12);   color:var(--cx-red);     }
.cx-badge-open     { background:rgba(68,138,255,.12);  color:var(--cx-blue);    }
.cx-badge-closed   { background:rgba(107,126,150,.1);  color:var(--cx-muted2);  }
.cx-badge-active   { background:rgba(0,230,118,.12);   color:var(--cx-green);   }
.cx-badge-buy      { background:rgba(0,230,118,.12);   color:var(--cx-green);   }
.cx-badge-sell     { background:rgba(255,82,82,.12);   color:var(--cx-red);     }

/* ════════════════════════════════
   WALLET / DEPOSIT / ALERTS / MISC
════════════════════════════════ */
.cx-wallet-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-bottom:24px; }
.cx-wallet-card { background:var(--cx-surface2); border:1px solid var(--cx-border); border-radius:var(--cx-radius); padding:20px; transition:border-color .2s; }
.cx-wallet-card:hover { border-color:rgba(0,230,118,.25); }
.cx-wallet-card .coin { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.cx-wallet-card .coin img { width:30px; height:30px; border-radius:50%; }
.cx-wallet-card .coin .sym  { font-weight:700; font-size:14px; }
.cx-wallet-card .coin .name { font-size:10.5px; color:var(--cx-muted); }
.cx-wallet-card .balance    { font-size:18px; font-weight:700; }
.cx-wallet-card .usd-val    { font-size:11.5px; color:var(--cx-muted); margin-top:3px; }
.cx-deposit-methods { display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:12px; margin-bottom:24px; }
.cx-method-card { background:var(--cx-surface2); border:2px solid var(--cx-border); border-radius:var(--cx-radius); padding:16px; text-align:center; cursor:pointer; transition:all .18s; }
.cx-method-card:hover,.cx-method-card.selected { border-color:var(--cx-green); background:var(--cx-green-dim); }
.cx-method-card img { width:38px; height:38px; border-radius:50%; margin:0 auto 8px; }
.cx-method-card .m-name { font-size:12.5px; font-weight:600; }
.cx-method-card .m-net  { font-size:10.5px; color:var(--cx-muted); }
.cx-deposit-step { display:none; }
.cx-deposit-step.active { display:block; }
.cx-address-box { background:var(--cx-bg); border:1px solid var(--cx-border2); border-radius:10px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; margin:14px 0; }
.cx-address-box code { font-family:monospace; font-size:12.5px; color:var(--cx-green); word-break:break-all; }
.cx-qr { text-align:center; margin:18px 0; }
.cx-alert { padding:12px 16px; border-radius:10px; font-size:13px; margin-bottom:16px; }
.cx-alert-success { background:rgba(0,230,118,.07);  border:1px solid rgba(0,230,118,.2);  color:var(--cx-green);  }
.cx-alert-error   { background:rgba(255,82,82,.07);  border:1px solid rgba(255,82,82,.2);  color:var(--cx-red);    }
.cx-alert-info    { background:rgba(68,138,255,.07); border:1px solid rgba(68,138,255,.2); color:var(--cx-blue);   }
.cx-alert-warning { background:rgba(255,215,64,.07); border:1px solid rgba(255,215,64,.2); color:var(--cx-yellow); }
.cx-active-plan { background:linear-gradient(135deg,rgba(0,230,118,.06),rgba(68,138,255,.04)); border:1px solid rgba(0,230,118,.18); border-radius:var(--cx-radius); padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:24px; }
.cx-active-plan .plan-name { font-size:17px; font-weight:700; color:var(--cx-green); }
.cx-active-plan .plan-meta { font-size:12px; color:var(--cx-muted); margin-top:4px; }
.cx-active-plan .plan-stat .v { font-size:18px; font-weight:700; }
.cx-active-plan .plan-stat .l { font-size:10.5px; color:var(--cx-muted); }
.cx-spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.15); border-top-color:currentColor; border-radius:50%; animation:cx-spin .5s linear infinite; }

/* ════════════════════════════════
   FOOTER
════════════════════════════════ */
.cx-footer { background:var(--cx-surface); border-top:1px solid var(--cx-border); padding:64px 0 0; position:relative; overflow:hidden; }
.cx-footer::before { content:''; position:absolute; top:-80px; left:-80px; width:400px; height:400px; background:radial-gradient(circle,rgba(0,230,118,.04) 0%,transparent 70%); pointer-events:none; }
.cx-footer-top { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:48px; padding-bottom:52px; border-bottom:1px solid var(--cx-border); }
.cx-footer-brand .cx-logo { font-size:20px; font-weight:800; color:var(--cx-green) !important; }
.cx-footer-brand .cx-logo span { color:var(--cx-text) !important; }
.cx-footer-tagline { font-size:13px; color:var(--cx-muted2); line-height:1.75; margin-top:14px; max-width:280px; font-weight:300; }
.cx-footer-social { display:flex; gap:10px; margin-top:20px; }
.cx-footer-social a { width:36px; height:36px; border-radius:9px; background:var(--cx-surface2); border:1px solid var(--cx-border2); display:flex; align-items:center; justify-content:center; color:var(--cx-muted2) !important; font-size:13px; transition:all .18s; }
.cx-footer-social a:hover { background:var(--cx-green-dim); border-color:rgba(0,230,118,.35); color:var(--cx-green) !important; opacity:1; }
.cx-footer-col h4 { font-size:11px; font-weight:700; color:var(--cx-text); margin-bottom:16px; letter-spacing:.1em; text-transform:uppercase; }
.cx-footer-col ul { list-style:none; }
.cx-footer-col li { margin-bottom:10px; }
.cx-footer-col a  { color:var(--cx-muted2) !important; font-size:13px; font-weight:300; transition:color .18s; }
.cx-footer-col a:hover { color:var(--cx-green) !important; opacity:1; }
.cx-footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:22px 0; font-size:12px; color:var(--cx-muted); }
.cx-footer-bottom .live { display:flex; align-items:center; gap:7px; }
.cx-footer-bottom .live-dot { width:5px; height:5px; border-radius:50%; background:var(--cx-green); display:inline-block; animation:cx-pulse 2s ease-in-out infinite; }
.cx-footer-bottom-links { display:flex; gap:18px; flex-wrap:wrap; }
.cx-footer-bottom-links a { color:var(--cx-muted) !important; font-size:11.5px; transition:color .18s; }
.cx-footer-bottom-links a:hover { color:var(--cx-green) !important; opacity:1; }


/* ════════════════════════════════
   DASHBOARD SEMANTIC HELPERS
════════════════════════════════ */
.cx-section-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cx-text);
}
.cx-section-title i { color: var(--cx-green); font-size: 14px; }

.cx-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cx-card-title {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}
.cx-card-title i { color: var(--cx-green); }
.cx-card-link {
  font-size: 11.5px;
  color: var(--cx-muted) !important;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cx-card-link:hover { color: var(--cx-green) !important; opacity: 1; }

/* Balance Banner */
.cx-balance-banner {
  background: linear-gradient(135deg,#091a12 0%,#0a1322 100%);
  border: 1px solid rgba(0,230,118,.18);
  border-radius: 16px;
  padding: 28px 30px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.cx-balance-svg {
  position: absolute;
  right: 0; top: 0;
  opacity: .08;
  pointer-events: none;
  width: 220px; height: 120px;
}
.cx-balance-left { position: relative; z-index: 1; }
.cx-balance-label {
  font-size: 11px;
  color: var(--cx-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cx-balance-amount {
  font-size: 36px;
  font-weight: 800;
  color: var(--cx-green);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.cx-balance-sub { font-size: 11.5px; color: var(--cx-muted); margin-top: 4px; }
.cx-balance-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* Two-column dash grid */
.cx-dash-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 700px) {
  .cx-dash-two-col { grid-template-columns: 1fr; }
  .cx-balance-banner { padding: 20px 18px; }
  .cx-balance-amount { font-size: 28px; }
}

/* Sidebar visible on desktop, ensure no duplicate */
@media (min-width: 861px) {
  .cx-sidebar {
    display: flex !important;
    transform: none !important;
  }
}

/* Force dash content area background */
.cx-dash-content > * { position: relative; }

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media (max-width:1080px) {
  .cx-footer-top { grid-template-columns:1fr 1fr; gap:32px; }
  .cx-footer-brand { grid-column:1/-1; }
  .cx-dash-topbar-nav { display:none; }
  .cx-dash-mobile-toggle { display:block; }
}
@media (max-width:860px) {
  .cx-hero { padding:80px 0 60px; }
  .cx-hero-stat { min-width:50%; border-right:none !important; border-bottom:1px solid var(--cx-border); }
  .cx-hero-stat:nth-child(odd) { border-right:1px solid var(--cx-border) !important; }
  .cx-hero-stat:last-child, .cx-hero-stat:nth-last-child(2):nth-child(odd) { border-bottom:none !important; }
  .cx-steps { grid-template-columns:1fr 1fr; }
  .cx-plan.featured::after { display:none; }
  .cx-plan.featured { border-top:3px solid var(--cx-green); }
  /* Sidebar off-canvas */
  .cx-sidebar {
    position: fixed;
    top: var(--dash-top-h);
    left: 0;
    bottom: 0;
    z-index: 150;
    transform: translateX(-100%);
    width: 240px;
    height: calc(100vh - var(--dash-top-h));
    transition: transform .26s ease;
  }
  .cx-dash-body.sidebar-open .cx-sidebar { transform: translateX(0); }
  .cx-dash-content { padding:20px 16px; height:calc(100vh - var(--dash-top-h)); }
  .cx-dash-mobile-toggle { display:block; }
}
@media (max-width:700px) {
  .cx-dash-topbar { padding:0 14px; }
  .cx-dash-topbar-sep { display:none; }
  .cx-dash-content { padding:16px 12px; }
}
@media (max-width:600px) {
  .cx-container { padding:0 16px; }
  .cx-section   { padding:64px 0; }
  .cx-hero      { padding:64px 0 48px; }
  .cx-hero-stat { min-width:50%; }
  .cx-hero-actions { flex-direction:column; align-items:stretch; padding:0 16px; }
  .cx-hero-actions .cx-btn { width:100%; justify-content:center; }
  .cx-steps     { grid-template-columns:1fr; }
  .cx-grid-3    { grid-template-columns:1fr; }
  .cx-footer-top { grid-template-columns:1fr; gap:28px; }
  .cx-footer-brand { grid-column:auto; }
  .cx-footer-bottom { flex-direction:column; text-align:center; }
  .cx-footer-bottom-links { justify-content:center; }
  .cx-auth-box  { padding:28px 20px; }
  .cx-form-row-2 { grid-template-columns:1fr; }
}
@media (max-width:440px) {
  .cx-hero h1   { font-size:28px; }
  .cx-hero-stat { min-width:100%; border-right:none !important; }
  .cx-hero-stats { border-radius:10px; }
}

/* ════════════════════════════════
   BREAKOUT — force .cx-wrap to fill viewport width
   regardless of theme container
════════════════════════════════ */
body.cx-full-width-page {
  overflow-x: hidden;
}
/* Push cx-wrap to full bleed */
body.cx-full-width-page .cx-wrap {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  width: 100vw !important;
  max-width: 100vw !important;
}
/* Undo for Elementor canvas / hello theme where the above is unneeded */
body.elementor-page .cx-wrap,
body.elementor-editor-active .cx-wrap {
  left: auto; right: auto;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}