/* ============================================================
   NEXBIT – Premium Exchange UI
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ---------- Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

/* ---------- Design Tokens ---------- */
:root{
  --font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-display:'Space Grotesk',var(--font-family);

  /* Brand */
  --primary:#f7a600;
  --primary-hover:#ffb800;
  --primary-dim:rgba(247,166,0,.14);
  --primary-glow:rgba(247,166,0,.25);

  /* Semantic */
  --green:#0ecb81;
  --green-dim:rgba(14,203,129,.14);
  --red:#f6465d;
  --red-dim:rgba(246,70,93,.14);
  --blue:#627eea;
  --blue-dim:rgba(98,126,234,.14);
  --yellow:#f0b90b;
  --yellow-dim:rgba(240,185,11,.14);

  /* Sizing */
  --radius:8px;
  --radius-lg:14px;
  --radius-xl:20px;
  --radius-2xl:28px;
  --radius-pill:999px;

  /* Spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  --transition:all .25s cubic-bezier(.4,0,.2,1);
  --transition-fast:all .15s ease;
}

/* ---------- Dark theme (default) ---------- */
:root[data-theme="dark"],
:root:not([data-theme]){
  --bg-0:#050608;      /* page – deepest */
  --bg-1:#0c0e12;      /* card surface */
  --bg-2:#13161c;      /* elevated surface */
  --bg-3:#1a1f28;      /* input / hover */
  --text-1:#f5f6f8;
  --text-2:#8b92a0;
  --text-3:#5c6470;
  --border:rgba(255,255,255,.065);
  --border-hover:rgba(255,255,255,.14);
  --glass:rgba(10,12,16,.92);
  --glass-border:rgba(255,255,255,.07);
  --shadow-card:0 4px 24px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.3);
  --shadow-elevated:0 16px 48px rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.25);
  --shadow-glow:0 0 60px rgba(247,166,0,.12),0 0 120px rgba(247,166,0,.06);
  --gradient-hero:linear-gradient(135deg,#13161c,#050608);
  --gradient-primary:linear-gradient(135deg,#f7a600,#ffb800);
  --gradient-card:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,0));
}

/* ---------- Light theme ---------- */
:root[data-theme="light"]{
  --bg-0:#f5f5f5;
  --bg-1:#ffffff;
  --bg-2:#f8f9fa;
  --bg-3:#e9ecef;
  --text-1:#1a1a1a;
  --text-2:#6c757d;
  --text-3:#adb5bd;
  --border:rgba(0,0,0,.06);
  --border-hover:rgba(0,0,0,.12);
  --glass:rgba(255,255,255,.82);
  --glass-border:rgba(0,0,0,.06);
  --shadow-card:0 2px 12px rgba(0,0,0,.06);
  --shadow-elevated:0 8px 32px rgba(0,0,0,.1);
  --gradient-hero:linear-gradient(135deg,#fff,#f8f9fa);
  --gradient-primary:linear-gradient(135deg,#f7a600,#ffb800);
}

/* ---------- Base ---------- */
body{
  font-family:var(--font-family);
  background:var(--bg-0);
  color:var(--text-1);
  line-height:1.7;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

.container{max-width:1280px;margin:0 auto;padding:0 var(--sp-6);width:100%}

a{color:inherit;text-decoration:none}

/* smooth theme transition (exclude animations) */
*{transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.hero-gradient,.hero-particles,.stat-number,.market-card::before,.feature-card::before{transition:none}

/* Display font for headings */
h1,h2,h3,.section-title,.hero-title,.dashboard-title,.logo h1{font-family:var(--font-display)}

/* Custom scrollbar */
*{scrollbar-width:thin;scrollbar-color:var(--bg-3) var(--bg-2)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg-2);border-radius:var(--radius)}
::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:var(--radius)}
::-webkit-scrollbar-thumb:hover{background:rgba(247,166,0,.35)}

/* ============================================================
   HEADER
   ============================================================ */
.topbar{
  background:linear-gradient(180deg,rgba(8,10,14,.98),rgba(5,6,8,.99));
  border-bottom:1px solid var(--border);
  font-size:.78rem;color:var(--text-2);letter-spacing:.02em;
}
.topbar-content{
  min-height:36px;display:flex;align-items:center;justify-content:center;gap:var(--sp-8);flex-wrap:wrap
}
.topbar-content span{display:inline-flex;align-items:center;gap:6px}
.topbar-content strong{color:var(--text-1);font-weight:700}
.feed-status{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.75rem;color:var(--text-2);padding:4px 12px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.04);border:1px solid var(--border);
}
.feed-status::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(14,203,129,.6);animation:feedPulse 2s infinite;
}
.feed-status.offline::before{background:var(--red);box-shadow:none;animation:none}
@keyframes feedPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(14,203,129,.5)}
  50%{box-shadow:0 0 0 6px rgba(14,203,129,0)}
}

.header{
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(1.2);
  -webkit-backdrop-filter:blur(24px) saturate(1.2);
  border-bottom:1px solid var(--glass-border);
  padding:var(--sp-3) 0;
  position:sticky;top:0;z-index:100;
  box-shadow:0 1px 0 rgba(255,255,255,.04),0 8px 32px rgba(0,0,0,.35);
}
.header-content{display:flex;justify-content:space-between;align-items:center}

.logo{display:flex;align-items:center;flex-shrink:0}
.logo-img{height:28px;width:auto;display:block;filter:drop-shadow(0 0 12px rgba(247,166,0,.2));transition:transform .3s ease}
.logo h1{margin:0}
.logo h1 a{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo .logo-label, .logo .logo-suffix{display:inline-block;font-size:1.4rem;font-weight:800;color:var(--primary);letter-spacing:-0.5px;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo .logo-suffix{color:var(--text-1);background:none;-webkit-text-fill-color:var(--text-1)}

.nav{display:flex;gap:var(--sp-1);align-items:center}
.nav-link{
  color:var(--text-2);padding:var(--sp-2) var(--sp-4);
  border-radius:var(--radius-lg);font-weight:600;font-size:.9rem;
  transition:var(--transition);
}
.nav-link:hover{color:var(--text-1);background:rgba(255,255,255,.06)}
.nav-link.active{color:var(--primary);background:var(--primary-dim);border:1px solid rgba(247,166,0,.2)}

/* Language & Theme switchers */
.language-switcher,.theme-switcher{
  display:flex;gap:var(--sp-1);padding:var(--sp-1);
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);
}
.language-switcher{margin-left:var(--sp-4)}
.theme-switcher{margin-left:var(--sp-2)}
.language-switcher.has-select .lang-btn{display:none}

.lang-select{
  border:1px solid var(--border);
  background:var(--bg-2);
  color:var(--text-1);
  border-radius:var(--radius);
  padding:6px 10px;
  font-size:.82rem;
  font-weight:700;
  min-width:128px;
  font-family:var(--font-family);
  cursor:pointer;
}
.lang-select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(247,166,0,.15);
}

.lang-btn,.theme-btn{
  padding:6px 10px;background:transparent;border:none;
  color:var(--text-2);cursor:pointer;border-radius:var(--radius);
  font-weight:600;font-size:.82rem;transition:var(--transition);
  min-width:36px;text-align:center;display:flex;align-items:center;justify-content:center;gap:4px;
}
.lang-btn:hover,.theme-btn:hover{color:var(--text-1);background:var(--bg-3)}
.lang-btn.active,.theme-btn.active{color:var(--primary);background:var(--primary-dim)}
.theme-btn svg{width:14px;height:14px;fill:currentColor}
@media(max-width:768px){
  .theme-btn span{display:none}
  .theme-switcher{margin-left:var(--sp-2)}
  .lang-select{min-width:112px;font-size:.76rem;padding:5px 8px}
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-6);border-radius:var(--radius);
  font-weight:600;font-size:.95rem;cursor:pointer;border:none;
  transition:var(--transition);font-family:var(--font-family);
  pointer-events:auto!important;position:relative;z-index:10;
}
.btn-primary{background:var(--gradient-primary);color:#0a0c0f;box-shadow:0 4px 20px rgba(247,166,0,.35),0 0 24px rgba(247,166,0,.12),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-primary:hover{background:linear-gradient(135deg,#ffb800,#ffc933);transform:translateY(-2px);box-shadow:0 8px 28px rgba(247,166,0,.45),0 0 40px rgba(247,166,0,.18),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-secondary{background:var(--bg-2);color:var(--text-1);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--primary);background:var(--bg-3)}
.btn-large{padding:var(--sp-4) var(--sp-8);font-size:1rem;min-width:180px;border-radius:var(--radius-lg)}
.btn-small{padding:var(--sp-1) var(--sp-3);font-size:.82rem}
.btn-icon{font-size:1.3rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:focus-visible,.nav-link:focus-visible,.exchange-product-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.main{flex:1}

/* ============================================================
   DASHBOARD / CABINET
   ============================================================ */
.dashboard{padding:var(--sp-8) 0}
.dashboard-header{margin-bottom:var(--sp-6)}
.dashboard-title{font-size:1.8rem;font-weight:800;letter-spacing:-.3px;margin-bottom:var(--sp-1)}
.dashboard-subtitle{color:var(--text-2);font-size:.95rem}
.dashboard.container{max-width:1280px}

.dashboard-header{
  background:
    radial-gradient(circle at 10% 10%,rgba(247,166,0,.16),transparent 40%),
    linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,0)),
    var(--bg-1);
  border:1px solid rgba(247,166,0,.24);
  border-radius:var(--radius-xl);
  padding:var(--sp-6);
  box-shadow:var(--shadow-card);
}

.cabinet-premium-meta{
  margin-top:var(--sp-4);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-3);
}

.premium-meta-item{
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:10px 12px;
}

.premium-meta-label{
  display:block;
  color:var(--text-3);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:4px;
}

.premium-meta-value{
  color:var(--text-1);
  font-size:.92rem;
  font-weight:800;
}

/* User ID badge */
.user-id-display{
  margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-4);
  background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-lg);
  display:inline-flex;align-items:center;gap:var(--sp-2);font-size:.9rem;
}
.user-id-display strong{color:var(--text-2)}
.user-id-value{color:var(--primary);font-family:'Courier New',monospace;font-size:1.1rem;font-weight:700;letter-spacing:1px}

/* Action buttons */
.action-buttons{display:flex;gap:var(--sp-3);margin:var(--sp-6) 0;flex-wrap:wrap}
.action-buttons{
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:var(--sp-3);
}

/* ============================================================
   TABS
   ============================================================ */
.tabs{
  display:flex;gap:var(--sp-1);margin-bottom:var(--sp-6);
  border-bottom:1px solid var(--border);overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.tabs{
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:6px;
}
.tabs::-webkit-scrollbar{display:none}
.tab-btn{
  padding:var(--sp-3) var(--sp-4);background:transparent;border:none;
  border-bottom:2px solid transparent;color:var(--text-2);
  font-size:.9rem;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:var(--transition);touch-action:manipulation;
  min-height:44px;pointer-events:auto!important;position:relative;z-index:100;
  font-family:var(--font-family);
}
.tab-btn:hover{color:var(--text-1)}
.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}
.tab-btn.active{
  background:var(--primary-dim);
  border-bottom-color:transparent;
  border-radius:var(--radius);
}
.tab-content{display:none;animation:fadeIn .3s ease-out}
.tab-content.active{display:block}

/* ============================================================
   STAT CARDS (glass)
   ============================================================ */
.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--sp-4);margin-bottom:var(--sp-6);
}
.stats-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.stat-card{
  background:var(--bg-1);padding:var(--sp-5);
  border-radius:var(--radius-xl);border:1px solid var(--border);
  transition:var(--transition);position:relative;overflow:hidden;
  box-shadow:var(--shadow-card);
}
.stat-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(247,166,0,.04),transparent 60%);
  pointer-events:none;opacity:0;transition:opacity .3s;
}
.stat-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-elevated)}
.stat-card:hover::before{opacity:1}
.stat-label{color:var(--text-2);font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--sp-2)}
.stat-value{font-size:1.6rem;font-weight:800;color:var(--text-1);letter-spacing:-.3px}
.stat-change{font-size:.82rem;margin-top:var(--sp-1);font-weight:600}
.stat-change.positive{color:var(--green)}
.stat-change.negative{color:var(--red)}

/* ============================================================
   VERIFICATION BADGE
   ============================================================ */
.verification-badge{
  margin-top:var(--sp-2);padding:6px 10px;border-radius:var(--radius);
  font-size:.72rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  text-align:center;border:1px solid var(--border);background:var(--bg-2);
}
.verification-badge.unverified{color:var(--red);border-color:rgba(246,70,93,.5);background:var(--red-dim)}
.verification-badge.verified{color:var(--green);border-color:rgba(14,203,129,.45);background:var(--green-dim)}

/* ============================================================
   STAGE BANNERS (Premium High-Trust Redesign)
   ============================================================ */
/* --- Base Banner Style --- */
.limit-banner, .conversion-banner, .transferfee-banner {
  margin-top: var(--sp-4);
  padding: var(--sp-6);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.limit-banner::before, .conversion-banner::before, .transferfee-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
}

/* --- Stage 3: Limit --- */
.limit-banner {
  background: linear-gradient(160deg, var(--bg-1), var(--bg-2));
  border: 1px solid rgba(240,185,11,0.2);
}
.limit-banner::before { background: var(--yellow); }
.limit-banner .limit-title {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.1rem; font-weight: 800; color: var(--text-1);
  letter-spacing: -0.3px; margin: 0;
}
.limit-banner .limit-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(240,185,11,0.15); color: var(--yellow);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(240,185,11,0.3); box-shadow: 0 0 15px rgba(240,185,11,0.2);
}
.limit-banner .limit-text {
  color: var(--text-2); font-size: 0.95rem; line-height: 1.6;
  border-left: 2px solid rgba(240,185,11,0.3); padding-left: 14px;
}
.limit-banner .limit-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
  background: var(--bg-0); padding: var(--sp-4); border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.limit-banner .metric-label {
  color: var(--text-3); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.5px; font-weight: 600; margin-bottom: 4px;
}
.limit-banner .metric-value {
  color: var(--text-1); font-size: 1.1rem; font-weight: 800; font-family: var(--font-display);
}

/* --- Stage 4: Conversion --- */
.conversion-banner {
  background: linear-gradient(160deg, var(--bg-1), var(--bg-2));
  border: 1px solid rgba(14,203,129,0.2);
}
.conversion-banner::before { background: var(--green); }
.conversion-banner .conv-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.conversion-banner .conv-title {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.1rem; font-weight: 800; color: var(--text-1); letter-spacing: -0.3px;
}
.conversion-banner .conv-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(14,203,129,0.15); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(14,203,129,0.3); box-shadow: 0 0 15px rgba(14,203,129,0.2);
}
.conversion-banner .conv-badge {
  background: rgba(14,203,129,0.1); color: var(--green);
  padding: 4px 10px; border-radius: var(--radius-pill); font-size: 0.75rem;
  font-weight: 700; border: 1px solid rgba(14,203,129,0.2);
}
.conversion-banner .conv-text {
  color: var(--text-2); font-size: 0.95rem; line-height: 1.6;
  border-left: 2px solid rgba(14,203,129,0.3); padding-left: 14px;
}
.conversion-banner .conv-steps {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
}
.conversion-banner .conv-step {
  background: var(--bg-0); padding: var(--sp-4); border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.conversion-banner .conv-step-label {
  color: var(--text-3); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.5px; font-weight: 600; margin-bottom: 4px;
}
.conversion-banner .conv-step-value {
  color: var(--text-1); font-size: 1.1rem; font-weight: 800;
}

/* --- Stage 5: Transfer fee --- */
.transferfee-banner {
  background: linear-gradient(160deg, var(--bg-1), var(--bg-2));
  border: 1px solid rgba(98,126,234,0.2);
}
.transferfee-banner::before { background: var(--blue); }
.transferfee-banner .tf-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.transferfee-banner .tf-title {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.1rem; font-weight: 800; color: var(--text-1); letter-spacing: -0.3px;
}
.transferfee-banner .tf-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(98,126,234,0.15); color: #8aa0ff;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(98,126,234,0.3); box-shadow: 0 0 15px rgba(98,126,234,0.2);
}
.transferfee-banner .tf-badge {
  background: rgba(98,126,234,0.1); color: #8aa0ff;
  padding: 4px 10px; border-radius: var(--radius-pill); font-size: 0.75rem;
  font-weight: 700; border: 1px solid rgba(98,126,234,0.2);
}
.transferfee-banner .tf-text {
  color: var(--text-2); font-size: 0.95rem; line-height: 1.6;
  border-left: 2px solid rgba(98,126,234,0.3); padding-left: 14px;
}
.transferfee-banner .tf-steps {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
}
.transferfee-banner .tf-step {
  background: var(--bg-0); padding: var(--sp-4); border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.transferfee-banner .tf-step-label {
  color: var(--text-3); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.5px; font-weight: 600; margin-bottom: 4px;
}
.transferfee-banner .tf-step-value {
  color: var(--text-1); font-size: 1.1rem; font-weight: 800;
}
.transferfee-banner .tf-note {
  margin-top: var(--sp-2); padding: var(--sp-4); border-radius: var(--radius-lg);
  background: rgba(14,203,129,0.08); border: 1px dashed rgba(14,203,129,0.3);
  color: var(--text-1); font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 10px;
}
.transferfee-banner .tf-note::before {
  content: '✓'; color: var(--green); font-weight: 900; font-size: 1.2rem;
}

@media(max-width:520px){
  .limit-banner .limit-metrics, .conversion-banner .conv-steps, .transferfee-banner .tf-steps { grid-template-columns: 1fr; }
}

/* ============================================================
   SECTION CARD (glass)
   ============================================================ */
.section-card{
  background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-xl);
  padding:var(--sp-6);margin-bottom:var(--sp-5);box-shadow:var(--shadow-card);
}
.section-card{
  background:
    linear-gradient(140deg,rgba(255,255,255,.03),rgba(255,255,255,0) 58%),
    var(--bg-1);
}
.section-card:hover{
  border-color:rgba(247,166,0,.28);
  box-shadow:var(--shadow-elevated);
}
.section-card-title{
  font-size:1.1rem;font-weight:700;color:var(--text-1);
  margin-bottom:var(--sp-4);padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--border);
}

/* ============================================================
   ASSETS LIST
   ============================================================ */
.assets-list{display:flex;flex-direction:column;gap:var(--sp-2)}
.asset-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--sp-3);background:var(--bg-2);border-radius:var(--radius-lg);
  transition:var(--transition);cursor:pointer;border:1px solid transparent;
}
.asset-item:hover{background:var(--bg-3);border-color:var(--primary);transform:translateX(4px)}
.asset-info{display:flex;align-items:center;gap:var(--sp-3)}
.asset-icon{width:36px;height:36px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;transition:var(--transition)}
.asset-item:hover .asset-icon{transform:scale(1.08)}
.asset-details{display:flex;flex-direction:column}
.asset-name{font-weight:600;color:var(--text-1);font-size:.9rem}
.asset-symbol{font-size:.8rem;color:var(--text-2)}
.asset-balance{text-align:right}
.asset-amount{font-weight:700;color:var(--text-1);font-size:.95rem}
.asset-value{font-size:.8rem;color:var(--text-2)}
.asset-item-row{display:flex;justify-content:space-between;align-items:center;width:100%;gap:12px;min-width:0}
.asset-main-col{display:flex;align-items:center;gap:var(--sp-4);min-width:0;flex:1}
.asset-main-col > div:last-child{min-width:0}
.asset-profit-col{text-align:right;flex:0 1 auto;min-width:0;max-width:52%}
.asset-profit-value-mobile-safe{line-height:1.2;overflow-wrap:anywhere;word-break:break-word}

/* ============================================================
   CHART
   ============================================================ */
.chart-wrapper{position:relative;width:100%;height:300px;margin:var(--sp-4) 0}

/* ============================================================
   TRADING CONTAINER
   ============================================================ */
.trading-container{display:grid;grid-template-columns:280px 1fr;gap:var(--sp-5)}
.trading-left .section-card{margin-bottom:0}
.markets-list{display:flex;flex-direction:column;gap:var(--sp-1);max-height:600px;overflow-y:auto;scrollbar-width:thin}
.market-item{
  padding:var(--sp-3);background:var(--bg-2);border-radius:var(--radius);
  cursor:pointer;transition:var(--transition);border:1px solid transparent;
}
.market-item:hover{background:var(--bg-3);border-color:var(--primary)}
.market-item.active{background:var(--primary-dim);border-color:var(--primary)}
.market-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-1)}
.market-item-symbol{font-weight:600;color:var(--text-1);font-size:.9rem}
.market-item-price{font-weight:700;color:var(--text-1);font-size:.9rem}
.market-item-change{font-size:.8rem;font-weight:600}
@media(max-width:1024px){.trading-container{grid-template-columns:1fr}.markets-list{max-height:300px}}

/* ============================================================
   ORDERBOOK
   ============================================================ */
.orderbook{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.orderbook-side{display:flex;flex-direction:column}
.orderbook-title{font-size:.82rem;font-weight:600;color:var(--text-2);margin-bottom:var(--sp-3);text-transform:uppercase;letter-spacing:.5px}
.orderbook-title.bids{color:var(--green)}
.orderbook-title.asks{color:var(--red)}
.orderbook-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-1);padding:var(--sp-1) 0;font-size:.82rem;border-bottom:1px solid var(--border)}
.orderbook-price{color:var(--text-1);font-weight:600}
.orderbook-amount{color:var(--text-2);text-align:center}
.orderbook-total{color:var(--text-2);text-align:right}
@media(max-width:1024px){.orderbook{grid-template-columns:1fr}}

/* ============================================================
   ORDERS TABLE
   ============================================================ */
.orders-table-container{overflow-x:auto}
.orders-table{width:100%;border-collapse:collapse}
.orders-table th,.orders-table td{padding:var(--sp-3);text-align:left;border-bottom:1px solid var(--border);font-size:.85rem}
.orders-table th{background:var(--bg-2);color:var(--text-2);font-weight:600;text-transform:uppercase;font-size:.75rem;position:sticky;top:0;letter-spacing:.4px}
.orders-table td{color:var(--text-1)}
.orders-table tr:nth-child(even){background:rgba(255,255,255,.015)}
.orders-table tr:hover{background:var(--bg-3)}

.order-type{padding:4px 8px;border-radius:var(--radius);font-size:.8rem;font-weight:600;display:inline-block}
.order-type.buy{background:var(--green-dim);color:var(--green)}
.order-type.sell{background:var(--red-dim);color:var(--red)}
.order-status{padding:4px 8px;border-radius:var(--radius);font-size:.8rem;font-weight:600;display:inline-block}
.order-status.active{background:var(--primary-dim);color:var(--primary)}
.order-status.filled{background:var(--green-dim);color:var(--green)}
.pnl{font-weight:700}
.pnl.positive{color:var(--green)}
.pnl.negative{color:var(--red)}

/* ============================================================
   MODALS (glass morphism)
   ============================================================ */
.modal{
  display:none!important;position:fixed;z-index:-1;inset:0;
  overflow:auto;background:rgba(11,14,17,.85);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  pointer-events:none!important;visibility:hidden!important;opacity:0;
  transition:opacity .3s ease;
}
.modal.show,.modal[style*="display: block"]{
  display:flex!important;z-index:1000!important;
  pointer-events:auto!important;visibility:visible!important;opacity:1!important;
  align-items:center;justify-content:center;
}
.modal-content{
  background:var(--bg-1);border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);width:90%;max-width:560px;
  padding:var(--sp-8);position:relative;
  box-shadow:var(--shadow-elevated);animation:modalIn .35s ease-out;
}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.modal-close{color:var(--text-3);float:right;font-size:1.8rem;font-weight:bold;cursor:pointer;line-height:1;transition:var(--transition)}
.modal-close:hover{color:var(--text-1)}
.modal-body{margin-top:var(--sp-4)}
.modal-body h2{margin-bottom:var(--sp-4);color:var(--text-1);font-size:1.5rem;font-weight:800}
.modal-image{margin:var(--sp-4) 0;text-align:center}
.modal-image img{max-width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--border)}
#errorDocumentImage{max-width:100%;width:100%;height:auto;border-radius:var(--radius-lg);border:2px solid var(--red);box-shadow:0 4px 12px rgba(246,70,93,.25);margin-bottom:var(--sp-4)}
#errorMessageText{font-size:1.1rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin:var(--sp-4) 0;line-height:1.4;color:var(--red)!important}
.modal-text{color:var(--text-2);line-height:1.8;margin:var(--sp-4) 0;font-size:.95rem}
.modal-form{margin-top:var(--sp-5)}
.modal-form .form-group{margin-bottom:var(--sp-4)}
.modal-form .form-label{color:var(--text-2);font-size:.85rem;margin-bottom:var(--sp-1)}
.modal-form .form-input,.modal-form select{width:100%;padding:var(--sp-3);background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-1);font-size:.95rem;transition:var(--transition);font-family:var(--font-family)}
.modal-form .form-input:focus,.modal-form select:focus{outline:none;border-color:var(--primary);background:var(--bg-1);box-shadow:0 0 0 3px var(--primary-dim)}
.modal-form .amount-display{background:var(--bg-2);padding:var(--sp-3);border-radius:var(--radius);border:1px solid var(--border);color:var(--primary);font-weight:700;font-size:1.2rem;text-align:center}
.modal-body .btn{margin-top:var(--sp-4);width:100%}
.deposit-info{text-align:center;padding:var(--sp-6) 0}
.deposit-icon{font-size:3.5rem;margin-bottom:var(--sp-4)}
.deposit-text{font-size:1.1rem;color:var(--text-1);margin-bottom:var(--sp-4);line-height:1.6}
.deposit-text-secondary{font-size:.95rem;color:var(--text-2);line-height:1.6;margin-top:var(--sp-4)}

/* Withdrawal modal on desktop: keep content fully visible */
#stageModal.modal.show,#stageModal.modal[style*="display: block"]{
  align-items:center;
  padding:16px 0;
}
#stageModal .modal-content{
  width:min(700px,90vw);
  max-width:700px;
  max-height:82vh;
  overflow-y:auto;
  padding:var(--sp-5);
}
#stageModal .modal-body{
  margin-top:var(--sp-2);
}

/* ============================================================
   TOP TRADERS & REVIEWS
   ============================================================ */
.traders-list{
  margin-top:var(--sp-4);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.trader-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--border);
  background:var(--bg-2);
  border-radius:var(--radius-lg);
  transition:var(--transition);
}
.trader-item:hover{
  border-color:rgba(247,166,0,.35);
  background:var(--bg-3);
  transform:translateY(-1px);
}
.trader-rank{
  min-width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:var(--primary);
  background:var(--primary-dim);
  border:1px solid rgba(247,166,0,.22);
}
.trader-main{flex:1;min-width:0}
.trader-name{
  font-size:.95rem;
  font-weight:700;
  color:var(--text-1);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.trader-meta{font-size:.8rem;color:var(--text-2);margin-top:2px}
.trader-right{text-align:right}
.trader-stars{line-height:1}
.trader-star{font-size:.85rem}
.trader-star-active{color:#f7a600}
.trader-star-muted{color:var(--text-3)}
.trader-rating{font-size:.78rem;color:var(--text-2);font-weight:700;margin-top:2px}

.reviews-list{
  margin-top:var(--sp-4);
  max-height:500px;
  overflow-y:auto;
  scrollbar-width:thin;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.review-item{
  border:1px solid var(--border);
  background:var(--bg-2);
  border-radius:var(--radius-lg);
  padding:14px;
  transition:var(--transition);
  animation:fadeIn .5s ease-out;
}
.review-item:hover{
  border-color:rgba(247,166,0,.3);
  background:var(--bg-3);
  transform:translateY(-1px);
}
.review-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.review-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#0b0e11;
  background:var(--primary);
}
.review-author{min-width:0}
.review-name{
  font-size:.9rem;
  font-weight:700;
  color:var(--text-1);
}
.review-stars{
  color:#f7a600;
  font-size:.78rem;
  letter-spacing:1px;
}
.review-body p{
  margin:0;
  font-size:.88rem;
  line-height:1.55;
  color:var(--text-2);
}

/* ============================================================
   FORMS
   ============================================================ */
.form-container{
  max-width:440px;margin:var(--sp-10) auto;padding:var(--sp-10);
  background:linear-gradient(145deg,var(--bg-1),var(--bg-2));border-radius:var(--radius-2xl);border:1px solid var(--border);
  box-shadow:var(--shadow-elevated),0 0 0 1px rgba(255,255,255,.02);
}
.form-title{font-size:1.75rem;font-weight:700;text-align:center;margin-bottom:var(--sp-6);color:var(--text-1);letter-spacing:-.02em}
.form-group{margin-bottom:var(--sp-4)}
.form-label{display:block;margin-bottom:var(--sp-1);color:var(--text-2);font-weight:500;font-size:.9rem}
.form-input{
  width:100%;padding:var(--sp-4);background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius-lg);color:var(--text-1);font-size:1rem;transition:var(--transition);
  font-family:var(--font-family);
}
.form-input:focus{outline:none;border-color:var(--primary);background:var(--bg-1);box-shadow:0 0 0 3px var(--primary-dim),0 0 20px rgba(247,166,0,.1)}
.form-input::placeholder{color:var(--text-3)}
.checkbox-label{display:flex;align-items:center;gap:var(--sp-2);color:var(--text-2);cursor:pointer;font-size:.9rem}
.checkbox-label input[type="checkbox"]{width:18px;height:18px;cursor:pointer;accent-color:var(--primary)}
.form-footer{text-align:center;margin-top:var(--sp-4);color:var(--text-2);font-size:.88rem}
.form-footer a{color:var(--primary)}

/* Light theme form overrides */
:root[data-theme="light"] .form-container{box-shadow:0 4px 20px rgba(0,0,0,.08)}
:root[data-theme="light"] .form-input{background:#fff;border-color:#dee2e6}
:root[data-theme="light"] .form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(247,166,0,.1)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:linear-gradient(180deg,var(--bg-1),var(--bg-0));border-top:1px solid var(--border);
  padding:var(--sp-12) 0 var(--sp-6);margin-top:auto;font-size:.875rem;
  position:relative;
}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(247,166,0,.2) 50%,transparent);opacity:.6}
.footer-col h4{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-2);margin-bottom:var(--sp-2)}
.footer-col a{color:var(--text-2);font-size:.95rem;transition:var(--transition)}
.footer-col a:hover{color:var(--primary)}
.footer-logo{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--primary);margin-bottom:var(--sp-2)}
.footer-tagline{color:var(--text-2);font-size:1rem;line-height:1.65;max-width:320px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--sp-10);margin-bottom:var(--sp-10)}
.footer-col{display:flex;flex-direction:column;gap:var(--sp-3)}
.footer-bottom{padding-top:var(--sp-6);border-top:1px solid var(--border);text-align:center;color:var(--text-3);font-size:.8rem}

.footer-socials{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:var(--sp-4);
  margin-bottom:var(--sp-6);
  flex-wrap:wrap;
}
.footer .container > .footer-socials{margin-bottom:var(--sp-8)}

.footer-socials-title{
  color:var(--text-2);
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.footer-socials-list{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  flex-wrap:wrap;
}

.footer-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  color:var(--text-2);
  font-size:.78rem;
  font-weight:700;
  background:var(--bg-2);
}

.footer-social-link:hover{
  color:var(--primary);
  border-color:rgba(247,166,0,.35);
  background:var(--primary-dim);
}

/* ============================================================
   HERO SECTION (landing page)
   ============================================================ */
.hero{
  background:var(--bg-0);padding:var(--sp-12) 0;text-align:center;position:relative;overflow:hidden;min-height:780px;display:flex;align-items:center;
  background-image:
    linear-gradient(rgba(0,0,0,.15) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.15) 1px,transparent 1px),
    radial-gradient(ellipse 80% 50% at 50% 0%,rgba(247,166,0,.12),transparent 55%),
    radial-gradient(ellipse 60% 40% at 80% 80%,rgba(247,166,0,.06),transparent 50%),
    radial-gradient(ellipse 50% 30% at 20% 60%,rgba(98,126,234,.05),transparent 45%);
  background-size:60px 60px,60px 60px,100% 100%,100% 100%,100% 100%;
}
.hero-background{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-gradient{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 30%,rgba(247,166,0,.2),transparent 40%),radial-gradient(circle at 70% 70%,rgba(247,166,0,.08),transparent 50%);animation:rotate 30s linear infinite;filter:blur(80px);opacity:.9}
.hero-particles{position:absolute;width:100%;height:100%;background-image:radial-gradient(2px 2px at 15% 25%,rgba(247,166,0,.3),transparent),radial-gradient(2px 2px at 75% 65%,rgba(247,166,0,.2),transparent),radial-gradient(1px 1px at 50% 50%,rgba(255,255,255,.15),transparent);background-size:250% 250%;animation:particles 20s ease-in-out infinite}
@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes particles{0%,100%{background-position:0 0}50%{background-position:100% 100%}}
.hero-content{position:relative;z-index:1;max-width:920px;margin:0 auto}
.hero-badge{display:inline-block;padding:var(--sp-2) var(--sp-5);background:var(--primary-dim);border:1px solid rgba(247,166,0,.4);border-radius:var(--radius-pill);margin-bottom:var(--sp-5);animation:fadeInDown .8s ease-out;box-shadow:0 0 24px rgba(247,166,0,.15),inset 0 1px 0 rgba(255,255,255,.08)}
.badge-text{color:var(--primary);font-size:.8rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.hero-title{font-size:4rem;font-weight:700;margin-bottom:var(--sp-5);line-height:1.05;animation:fadeInUp .8s ease-out .2s both;letter-spacing:-.04em}
.title-line{display:block;font-size:1.35rem;font-weight:500;color:var(--text-2);margin-bottom:var(--sp-2);letter-spacing:.02em}
.title-main{display:block;background:var(--gradient-primary);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:5rem;animation:gradientShift 4s ease infinite;filter:drop-shadow(0 0 40px rgba(247,166,0,.3));letter-spacing:-.05em}
@keyframes gradientShift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.hero-subtitle{font-size:1.25rem;color:var(--text-2);margin-bottom:var(--sp-8);animation:fadeInUp .8s ease-out .4s both;line-height:1.6;max-width:560px;margin-left:auto;margin-right:auto}
.hero-stats{display:flex;justify-content:center;gap:var(--sp-12);margin-bottom:var(--sp-8);flex-wrap:wrap;animation:fadeInUp .8s ease-out .6s both}
.hero-stat{text-align:center;padding:var(--sp-5) var(--sp-6);background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:var(--radius-2xl);min-width:120px;transition:var(--transition)}
.hero-stat:hover{background:rgba(255,255,255,.04);border-color:rgba(247,166,0,.25);transform:translateY(-2px)}
.stat-number{font-size:2.4rem;font-weight:700;color:var(--primary);margin-bottom:var(--sp-1);font-variant-numeric:tabular-nums;transition:all .3s;letter-spacing:-.02em}
.hero-stat:hover .stat-number{transform:scale(1.05)}
.stat-label{font-size:.75rem;color:var(--text-2);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.hero-buttons{display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap;animation:fadeInUp .8s ease-out .8s both}
.btn-hero{display:inline-flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-10);font-size:1rem;font-weight:600;position:relative;overflow:hidden;border-radius:var(--radius-xl)}
.btn-hero::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.25);transform:translate(-50%,-50%);transition:width .5s,height .5s}
.btn-hero:hover::before{width:400px;height:400px}
.btn-hero svg{transition:transform .3s;flex-shrink:0}
.btn-hero:hover svg{transform:translateX(4px)}

/* Light theme hero */
:root[data-theme="light"] .hero{background-image:radial-gradient(circle at 20% 50%,rgba(247,166,0,.04),transparent 50%),radial-gradient(circle at 80% 80%,rgba(247,166,0,.02),transparent 50%)}
:root[data-theme="light"] .hero-gradient{background:radial-gradient(circle at 30% 30%,rgba(247,166,0,.06),transparent 50%),radial-gradient(circle at 70% 70%,rgba(247,166,0,.04),transparent 50%)}

/* ============================================================
   FEATURES SECTION
   ============================================================ */
.features{padding:var(--sp-12) 0}
.section-title{font-size:3rem;font-weight:700;text-align:center;margin-bottom:var(--sp-4);background:linear-gradient(135deg,var(--text-1) 0%,var(--text-1) 40%,var(--primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.04em;line-height:1.2}
.section-subtitle{text-align:center;color:var(--text-2);font-size:1.1rem;margin-bottom:var(--sp-10);max-width:560px;margin-left:auto;margin-right:auto;line-height:1.6}
.section-header{text-align:center;margin-bottom:var(--sp-12)}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--sp-6)}
.feature-card{
  background:linear-gradient(145deg,var(--bg-1),var(--bg-2));padding:var(--sp-6);border-radius:var(--radius-2xl);
  border:1px solid var(--border);transition:all .35s cubic-bezier(.4,0,.2,1);
  text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-card);
}
.feature-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(247,166,0,.1),transparent 65%);opacity:0;transition:opacity .35s;animation:rotate 25s linear infinite}
.feature-card:hover::before{opacity:1}
.feature-card:hover{transform:translateY(-8px);border-color:rgba(247,166,0,.45);box-shadow:0 20px 48px rgba(0,0,0,.4),var(--shadow-glow),0 1px 0 rgba(255,255,255,.05)}
.feature-card>*{position:relative;z-index:2}
.feature-icon{font-size:3rem;margin-bottom:var(--sp-3);transition:all .4s;display:inline-block}
.feature-card:hover .feature-icon{transform:scale(1.12) rotate(5deg)}
.feature-card h3{font-size:1.4rem;margin-bottom:var(--sp-2);color:var(--text-1);letter-spacing:-.02em}
.feature-card p{color:var(--text-2);line-height:1.7;font-size:.95rem}
:root[data-theme="light"] .feature-card{background:#fff;border-color:#e9ecef}
:root[data-theme="light"] .feature-card:hover{box-shadow:0 12px 36px rgba(247,166,0,.12)}

/* ============================================================
   MARKETS SECTION (landing page)
   ============================================================ */
.markets-section{padding:var(--sp-10) 0;position:relative}
.markets-section::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--primary) 50%,transparent);box-shadow:0 0 8px rgba(247,166,0,.4)}
.markets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-4)}
.market-card{
  background:linear-gradient(145deg,var(--bg-1),var(--bg-2));border:1px solid var(--border);border-radius:var(--radius-2xl);
  padding:var(--sp-5);transition:all .35s cubic-bezier(.4,0,.2,1);cursor:pointer;position:relative;overflow:hidden;box-shadow:var(--shadow-card);
}
.market-card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(247,166,0,.08),transparent);transition:left .6s}
.market-card:hover::before{left:100%}
.market-card:hover{border-color:rgba(247,166,0,.4);transform:translateY(-5px);box-shadow:0 16px 40px rgba(0,0,0,.35),var(--shadow-glow)}
.market-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--sp-4)}
.market-info{display:flex;align-items:center;gap:var(--sp-3)}
.market-icon{
  width:44px;height:44px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;
  overflow:hidden;flex-shrink:0;transition:var(--transition);background:var(--bg-2);border:1px solid var(--border);
}
.market-icon img{width:100%;height:100%;object-fit:contain;}
.market-card:hover .market-icon{transform:scale(1.08)}
.market-details{display:flex;flex-direction:column}
.market-symbol{font-size:1rem;font-weight:700;color:var(--text-1)}
.market-symbol{font-size:1.05rem;font-weight:700;color:var(--text-1)}
.market-name{font-size:.85rem;color:var(--text-2)}
.price-value{font-size:1.4rem;font-weight:700;color:var(--text-1);margin-bottom:var(--sp-1);font-variant-numeric:tabular-nums;transition:color .3s;letter-spacing:-.02em}
.price-change{font-size:.9rem;font-weight:600}
.price-change.positive{color:var(--green)}
.price-change.negative{color:var(--red)}
.market-chart{height:120px;margin:var(--sp-3) 0;position:relative;background:rgba(0,0,0,.15);border-radius:var(--radius);padding:var(--sp-1)}
.market-chart-canvas{width:100%!important;height:100%!important}
.market-footer{display:flex;justify-content:space-between;align-items:center;padding-top:var(--sp-3);border-top:1px solid var(--border)}
.market-volume{display:flex;align-items:center;gap:var(--sp-1);font-size:.82rem}
.volume-label{color:var(--text-2)}
.volume-value{color:var(--text-1);font-weight:600}

:root[data-theme="light"] .market-card{background:#fff;border-color:#e9ecef}
:root[data-theme="light"] .market-card:hover{box-shadow:0 8px 28px rgba(247,166,0,.1)}
:root[data-theme="light"] .market-chart{background:rgba(0,0,0,.02);border:1px solid var(--border)}

/* ============================================================
   STATS SECTION (landing page)
   ============================================================ */
.stats-section{padding:var(--sp-10) 0;background:var(--bg-1);border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.stats-section::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(247,166,0,.04),transparent 50%),radial-gradient(circle at 80% 50%,rgba(247,166,0,.04),transparent 50%);pointer-events:none}
.stats-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--sp-6)}
.stat-card-large{
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);
  padding:var(--sp-6);display:flex;align-items:center;gap:var(--sp-4);
  transition:var(--transition);position:relative;overflow:hidden;
}
.stat-card-large::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(247,166,0,.06),transparent);transition:left .5s}
.stat-card-large:hover::before{left:100%}
.stat-card-large:hover{border-color:rgba(247,166,0,.4);transform:translateY(-4px);box-shadow:var(--shadow-elevated),0 0 28px rgba(247,166,0,.08)}
.stat-icon{font-size:3rem;width:72px;height:72px;display:flex;align-items:center;justify-content:center;background:var(--primary-dim);border-radius:var(--radius-xl);flex-shrink:0;transition:var(--transition)}
.stat-card-large:hover .stat-icon{transform:scale(1.08)}
.stat-content{flex:1}
.stat-value-large{font-size:2.4rem;font-weight:800;color:var(--primary);margin-bottom:var(--sp-1);font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.stat-label-large{font-size:.9rem;color:var(--text-2)}
:root[data-theme="light"] .stat-card-large{background:#fff;border-color:#e9ecef}

/* ============================================================
   IOS BUTTONS (legacy compat)
   ============================================================ */
.ios-action-buttons{display:flex;gap:12px;justify-content:center;margin:var(--sp-6) 0;flex-wrap:wrap;padding:0 var(--sp-4)}
.ios-btn{flex:1;min-width:160px;max-width:220px;height:56px;border-radius:var(--radius-xl);border:none;font-size:17px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:var(--transition);-webkit-tap-highlight-color:transparent;user-select:none;touch-action:manipulation;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.ios-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.15),transparent);pointer-events:none;border-radius:var(--radius-xl)}
.btn:active{transform:scale(.98);transition:transform .1s ease-out}
.ios-btn-primary{background:linear-gradient(180deg,#007AFF,#0051D5);color:#fff;box-shadow:0 4px 12px rgba(0,122,255,.25)}
.ios-btn-primary:hover{background:linear-gradient(180deg,#0051D5,#003D9E);transform:translateY(-1px)}
.ios-btn-secondary{background:linear-gradient(180deg,#2C2C2E,#1C1C1E);color:#fff}
.ios-btn-secondary:hover{background:linear-gradient(180deg,#3A3A3C,#2C2C2E);transform:translateY(-1px)}
.ios-btn-icon{font-size:24px;display:flex;align-items:center;justify-content:center}
.ios-btn-text{font-size:17px;font-weight:600;letter-spacing:-.2px}

/* ============================================================
   ADMIN TABLE
   ============================================================ */
.admin-table-container{background:var(--bg-1);border-radius:var(--radius-xl);border:1px solid var(--border);overflow-x:auto;margin-bottom:var(--sp-6);width:100%;max-width:100%;box-shadow:var(--shadow-card)}
.admin-table{width:100%;min-width:980px;border-collapse:collapse;table-layout:fixed}
.admin-table th,.admin-table td{padding:6px 4px;text-align:left;border-bottom:1px solid var(--border);overflow:hidden;text-overflow:ellipsis}
.admin-table th{background:var(--bg-2);color:var(--text-1);font-weight:600;position:sticky;top:0;font-size:.78rem;z-index:10;white-space:nowrap}
.admin-table td{color:var(--text-2);font-size:.78rem;white-space:normal;word-wrap:break-word;vertical-align:top}
.admin-table td:last-child,.admin-table th:last-child{position:sticky;right:0;background:var(--bg-1);z-index:5;box-shadow:-2px 0 4px rgba(0,0,0,.1)}
.admin-table th:last-child{background:var(--bg-2);z-index:15}
.admin-table td:last-child{white-space:normal;overflow:visible}
.admin-table td:last-child .btn{white-space:nowrap;font-size:.72rem;padding:4px 8px;margin:2px 0}
.admin-table tr:hover{background:var(--bg-3)}
.admin-table-container::-webkit-scrollbar{height:6px}
.admin-table-container::-webkit-scrollbar-track{background:var(--bg-2);border-radius:var(--radius)}
.admin-table-container::-webkit-scrollbar-thumb{background:var(--primary);border-radius:var(--radius)}
.stage-select{padding:var(--sp-1) var(--sp-3);background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-1);font-size:.85rem;cursor:pointer}
.stage-select:hover{border-color:var(--primary)}
.stage-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-dim)}
.lead-id{font-family:'Courier New',monospace;color:var(--primary);font-weight:600}
.stage-badge{display:inline-block;padding:var(--sp-1) var(--sp-3);border-radius:var(--radius);background:var(--primary);color:var(--bg-0);font-weight:600;font-size:.82rem}
.admin-search{display:flex;gap:var(--sp-3);margin-top:var(--sp-4);align-items:center}
.admin-search-input{padding:var(--sp-3);background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-1);font-size:.95rem;width:300px;transition:var(--transition);font-family:var(--font-family)}
.admin-search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-dim)}

/* ============================================================
   STAGE STYLES (cabinet)
   ============================================================ */
.stage-section{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--sp-6)}
.stage-card-current{margin-top:var(--sp-4)}
.stage-card-content{display:flex;flex-direction:column;gap:var(--sp-4)}
.stage-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-3)}
.stage-title{font-size:1.3rem;font-weight:700;color:var(--primary);margin:0}
.stage-number{font-size:.9rem;font-weight:600;color:var(--text-2);background:var(--bg-2);padding:var(--sp-1) var(--sp-3);border-radius:var(--radius)}
.stage-description{color:var(--text-2);line-height:1.6;margin:0}
.stage-status-warning,.stage-status-success{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--radius);margin-top:var(--sp-3);font-weight:600}
.stage-status-warning{background:rgba(240,185,11,.1);color:var(--yellow);border:1px solid rgba(240,185,11,.25)}
.stage-status-success{background:var(--green-dim);color:var(--green);border:1px solid rgba(14,203,129,.3)}
.stage-status-icon{font-size:1.1rem}
.stage-trades-progress{margin-left:auto;font-weight:700;background:var(--bg-0);padding:var(--sp-1) var(--sp-3);border-radius:var(--radius)}
.stage-image{max-width:100%;height:auto;border-radius:var(--radius);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.stages-timeline{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-6)}
.stage-item{display:flex;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-4);border-radius:var(--radius);background:var(--bg-2);border:2px solid transparent;transition:var(--transition)}
.stage-item:hover{transform:translateX(4px);border-color:var(--border-hover)}
.stage-item-icon{font-size:1.3rem;font-weight:700;min-width:28px;text-align:center;line-height:1}
.stage-completed{background:var(--green-dim);border-color:rgba(14,203,129,.3)}
.stage-completed .stage-item-icon{color:var(--green)}
.stage-current{background:var(--primary-dim);border-color:var(--primary);box-shadow:0 0 0 3px rgba(247,166,0,.08)}
.stage-current .stage-item-icon{color:var(--primary);font-size:1.5rem}
.stage-pending{opacity:.5}
.stage-pending .stage-item-icon{color:var(--text-3)}
.stage-item-content{flex:1}
.stage-item-title{font-size:1rem;font-weight:600;color:var(--text-1);margin:0 0 var(--sp-1)}
.stage-item-description{font-size:.85rem;color:var(--text-2);margin:0;line-height:1.5}
.stage-card-mobile-hidden{display:block}
@media(max-width:768px){.stage-card-mobile-hidden{display:none!important}}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fadeInContent{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.feature-card,.stat-card,.market-card{animation:fadeIn .6s ease-out}
.stat-card-large{animation:fadeInUp .8s ease-out}
.market-card:nth-child(1){animation-delay:.05s}
.market-card:nth-child(2){animation-delay:.1s}
.market-card:nth-child(3){animation-delay:.15s}
.market-card:nth-child(4){animation-delay:.2s}
.market-card:nth-child(5){animation-delay:.25s}
.market-card:nth-child(6){animation-delay:.3s}
.market-card:nth-child(7){animation-delay:.35s}

/* ============================================================
   ADVANCED LANDING BLOCKS
   ============================================================ */
.ticker-section{padding:var(--sp-4) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-1)}
.ticker-wrap{display:flex;gap:var(--sp-3);overflow:auto;scrollbar-width:none;padding-bottom:4px}
.ticker-wrap::-webkit-scrollbar{display:none}
.ticker-item{min-width:180px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.ticker-symbol{font-size:.78rem;color:var(--text-2)}
.ticker-price{font-weight:700;font-variant-numeric:tabular-nums}
.ticker-change{font-size:.78rem;font-weight:700}

.trade-hub-section{padding:var(--sp-10) 0}
.trade-hub-card{
  background:linear-gradient(145deg,var(--bg-1),var(--bg-2));border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:var(--sp-6);box-shadow:var(--shadow-card);
}
.trade-hub-tabs{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-4);flex-wrap:wrap}
.trade-tab{background:var(--bg-2);border:1px solid var(--border);color:var(--text-2);padding:8px 12px;border-radius:var(--radius);font-weight:600;font-size:.82rem;cursor:pointer}
.trade-tab.active{background:var(--primary-dim);border-color:rgba(247,166,0,.35);color:var(--primary)}
.trade-table-head,.trade-row{display:grid;grid-template-columns:1.2fr 1fr .6fr .8fr .7fr;gap:var(--sp-2);align-items:center}
.trade-table-head{color:var(--text-3);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:0 4px var(--sp-2);border-bottom:1px solid var(--border)}
.trade-table-body{display:flex;flex-direction:column}
.trade-row{padding:12px 4px;border-bottom:1px solid var(--border);font-size:.88rem}
.trade-row:last-child{border-bottom:none}
.trade-row strong{font-size:.92rem}
.trade-action{justify-self:end;background:var(--primary-dim);color:var(--primary);border:1px solid rgba(247,166,0,.25);border-radius:var(--radius);padding:6px 10px;font-size:.76rem;font-weight:700}

.copy-trading-section{padding:var(--sp-10) 0}
.copy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-4)}
.copy-card{
  background:linear-gradient(145deg,var(--bg-1),var(--bg-2));border:1px solid var(--border);border-radius:var(--radius-2xl);padding:var(--sp-5);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--sp-3);transition:all .3s ease
}
.copy-card:hover{border-color:rgba(247,166,0,.35);box-shadow:0 8px 28px rgba(247,166,0,.12),var(--shadow-glow)}
.copy-top{display:flex;align-items:center;gap:var(--sp-3)}
.copy-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--primary-dim);color:var(--primary);font-weight:800}
.copy-top h3{font-size:1rem;margin:0}
.copy-top p{font-size:.78rem;color:var(--text-2)}
.copy-metric{font-size:1.5rem;font-weight:800}
.copy-stats{display:flex;justify-content:space-between;color:var(--text-2);font-size:.8rem}

.products-section{padding:var(--sp-12) 0;background:var(--bg-1);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-4)}
.product-card{
  background:linear-gradient(145deg,var(--bg-2),var(--bg-1));border:1px solid var(--border);
  border-radius:var(--radius-2xl);padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);
  transition:var(--transition);position:relative;overflow:hidden;
}
.product-card:hover{border-color:rgba(247,166,0,.35);box-shadow:0 8px 32px rgba(0,0,0,.3),var(--shadow-glow)}
.product-card h3{font-size:1.2rem;font-weight:700;letter-spacing:-.02em}
.product-card p{font-size:.92rem;color:var(--text-2);line-height:1.6}
.product-tag{align-self:flex-start;background:var(--primary-dim);border:1px solid rgba(247,166,0,.25);color:var(--primary);font-size:.72rem;font-weight:700;padding:6px 12px;border-radius:var(--radius-pill);letter-spacing:.3px}

.cta-section{padding:var(--sp-12) 0}
.cta-card{
  background:linear-gradient(145deg,rgba(247,166,0,.14),rgba(247,166,0,.06),transparent);
  border:1px solid rgba(247,166,0,.3);border-radius:var(--radius-2xl);
  padding:var(--sp-10);text-align:center;position:relative;overflow:hidden;
  box-shadow:0 0 60px rgba(247,166,0,.08),inset 0 1px 0 rgba(255,255,255,.06);
}
.cta-card::before{content:'';position:absolute;top:-50%;right:-20%;width:60%;height:200%;background:radial-gradient(circle,rgba(247,166,0,.08),transparent 60%);pointer-events:none}
.cta-card h2{font-size:2.25rem;font-weight:700;margin-bottom:var(--sp-3);letter-spacing:-.03em}
.cta-card p{color:var(--text-2);margin-bottom:var(--sp-6);font-size:1.05rem;line-height:1.6}

/* legacy sections in index */
.ticker-track{display:flex;gap:var(--sp-3);overflow:auto;scrollbar-width:none}
.ticker-track::-webkit-scrollbar{display:none}
.ticker-chip{
  min-width:170px;background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:8px 10px;font-size:.82rem;
}

.exchange-highlights{padding:var(--sp-10) 0}
.highlights-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-4)}
.highlight-card{
  background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-xl);
  padding:var(--sp-4);box-shadow:var(--shadow-card);
}
.highlight-kicker{font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--primary);font-weight:700;margin-bottom:6px}
.highlight-card h3{font-size:1.05rem;margin-bottom:8px}
.highlight-card p{font-size:.88rem;color:var(--text-2)}

.leaders-section{padding:0 0 var(--sp-10)}
.leaders-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-4)}
.leaders-card{background:linear-gradient(145deg,var(--bg-1),var(--bg-2));border:1px solid var(--border);border-radius:var(--radius-2xl);padding:var(--sp-5);transition:all .3s ease}
.leaders-card:hover{border-color:rgba(247,166,0,.25);box-shadow:0 6px 24px rgba(247,166,0,.08),var(--shadow-glow)}
.leaders-card h3{margin-bottom:var(--sp-3)}
.leaders-list{display:flex;flex-direction:column;gap:10px}
.leaders-item{
  display:flex;justify-content:space-between;align-items:center;background:var(--bg-2);
  border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;font-size:.85rem;
}

.trust-section{padding:var(--sp-12) 0;background:var(--bg-1);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-4)}
.trust-card{
  background:linear-gradient(145deg,var(--bg-2),var(--bg-1));border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:var(--sp-5);transition:var(--transition);
}
.trust-card:hover{border-color:rgba(247,166,0,.3);box-shadow:0 6px 24px rgba(0,0,0,.25)}
.trust-card h3{font-size:1.1rem;font-weight:700;margin-bottom:8px}
.trust-card p{font-size:.875rem;color:var(--text-2);line-height:1.55}

.sentiment-section{padding:var(--sp-10) 0}
.sentiment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-4)}
.sentiment-card{
  background:linear-gradient(145deg,var(--bg-1),var(--bg-2));border:1px solid var(--border);border-radius:var(--radius-2xl);
  padding:var(--sp-5);text-align:center;box-shadow:var(--shadow-card);
  transition:all .3s ease
}
.sentiment-card:hover{border-color:rgba(247,166,0,.3);box-shadow:0 6px 24px rgba(247,166,0,.1),var(--shadow-glow)}
.sentiment-label{display:block;color:var(--text-2);font-size:.78rem;margin-bottom:6px}
.sentiment-value{font-size:1.45rem;color:var(--primary)}

.faq-section{padding:var(--sp-10) 0}
.faq-list{display:flex;flex-direction:column;gap:var(--sp-3);max-width:820px;margin:0 auto}
.faq-item{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.faq-question{
  width:100%;text-align:left;background:transparent;color:var(--text-1);border:none;
  padding:14px 16px;font-weight:700;cursor:pointer;font-family:var(--font-family);
}
.faq-answer{
  display:none;padding:0 16px 14px;color:var(--text-2);font-size:.9rem;line-height:1.55;
}
.faq-item.open .faq-answer{display:block}
.faq-ver-mas{text-align:center;margin-top:var(--sp-4)}
.faq-ver-mas a{color:var(--primary);font-weight:600;text-decoration:none}
.faq-ver-mas a:hover{text-decoration:underline}

.mobile-bottom-nav{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:1200;
  background:var(--bg-1);border-top:1px solid var(--border);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  grid-template-columns:repeat(4,1fr);gap:6px;
}
.mobile-nav-item{
  text-align:center;background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:8px 4px;font-size:.75rem;font-weight:700;color:var(--text-2);
}
.mobile-nav-item.active{color:var(--primary);border-color:rgba(247,166,0,.3);background:var(--primary-dim)}

/* Auth page (OKX-inspired structure) */
.auth-shell{padding:var(--sp-10) 0}
.telegram-banner{
  background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-xl);
  padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:var(--sp-5)
}
.telegram-banner strong{font-size:.95rem}
.telegram-banner span{font-size:.85rem;color:var(--text-2)}
.auth-layout{
  display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-6);align-items:stretch;
}
.auth-left{
  background:linear-gradient(135deg,rgba(247,166,0,.12),rgba(247,166,0,.04),transparent);
  border:1px solid rgba(247,166,0,.2);border-radius:var(--radius-xl);padding:var(--sp-8);
}
.auth-left h2{font-size:2rem;line-height:1.2;margin-bottom:10px}
.auth-left p{color:var(--text-2);margin-bottom:14px}
.auth-points{list-style:none;display:flex;flex-direction:column;gap:8px}
.auth-points li{
  padding:8px 10px;background:var(--bg-1);border:1px solid var(--border);
  border-radius:var(--radius);font-size:.88rem
}
.auth-card{
  background:linear-gradient(145deg,var(--bg-1),var(--bg-2));border:1px solid var(--border);
  border-radius:var(--radius-2xl);padding:var(--sp-8);box-shadow:var(--shadow-card)
}
.auth-divider{
  margin-top:var(--sp-4);display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:.82rem;
}
.auth-divider span{padding:0 10px;background:var(--bg-1)}
.auth-methods{
  margin-top:var(--sp-3);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px
}
.auth-method-btn{
  border:1px solid var(--border);background:var(--bg-2);color:var(--text-1);
  border-radius:var(--radius);padding:10px 8px;font-size:.84rem;font-weight:600;cursor:pointer
}
.auth-method-btn:hover{border-color:var(--primary);background:var(--primary-dim);color:var(--primary)}
.auth-security-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.auth-security-item{
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:9px 10px;
  font-size:.82rem;
  color:var(--text-2);
  font-weight:700;
}

.guest-deposit-card .form-title{
  margin-bottom:var(--sp-4);
}

.guest-deposit-info-box{
  margin-bottom:var(--sp-4);
}

.guest-deposit-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:var(--sp-4);
}

.guest-deposit-actions .btn{
  width:100%;
  text-align:center;
}

/* Global mobile width safety:
   prevents accidental horizontal page overflow on narrow screens. */
@media (max-width: 768px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .main {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .container,
  .dashboard.container,
  .dashboard {
    width: 100%;
    max-width: 100%;
  }

  img, svg, canvas, video {
    max-width: 100%;
    height: auto;
  }

  .asset-item-row {
    align-items: flex-start;
    gap: 10px;
  }

  .asset-main-col {
    gap: 10px;
  }

  .asset-profit-col {
    max-width: 58%;
  }

  .asset-profit-value-mobile-safe {
    font-size: 1.02rem !important;
  }

  #depositAmount.stat-value-mobile-safe {
    font-size: clamp(1rem, 5vw, 1.22rem) !important;
    gap: 4px;
  }

  #depositAmount .stat-amount-code {
    flex-basis: 100%;
    margin-top: 2px;
    font-size: 0.58em;
    line-height: 1.1;
  }
}

/* Premium trust strip (landing + cabinet) */
.premium-trust-line{
  border-top:1px solid rgba(247,166,0,.2);
  border-bottom:1px solid var(--border);
  background:radial-gradient(circle at 10% 10%,rgba(247,166,0,.1),transparent 45%),var(--bg-1);
}
.premium-trust-line-content{
  min-height:38px;display:flex;align-items:center;justify-content:center;gap:var(--sp-6);
  color:var(--text-2);font-size:.78rem;font-weight:700;flex-wrap:wrap;
}

.exchange-product-nav{
  border-bottom:1px solid var(--border);
  background:rgba(8,10,14,.9);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.exchange-product-nav-inner{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  overflow:auto;
  scrollbar-width:none;
}
.exchange-product-nav-inner::-webkit-scrollbar{display:none}
.exchange-product-link{
  white-space:nowrap;
  color:var(--text-2);
  font-size:.8125rem;
  font-weight:600;
  padding:10px 14px;
  border-radius:var(--radius-lg);
  transition:var(--transition);
}
.exchange-product-link:hover{
  color:var(--primary);
  background:rgba(255,255,255,.06);
}

.trust-top-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
  margin-bottom:var(--sp-5);
  justify-content:center;
}
.trust-status-chip{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  color:var(--text-2);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.4px;
  padding:8px 14px;
  transition:var(--transition);
}
.trust-status-chip:hover{border-color:rgba(247,166,0,.3);color:var(--primary)}
.hero-trust-row{
  display:flex;justify-content:center;gap:var(--sp-2);margin:0 0 var(--sp-5);flex-wrap:wrap;
}
.hero-trust-chip{
  border:1px solid rgba(247,166,0,.35);
  background:var(--primary-dim);
  color:var(--text-1);
  padding:6px 12px;border-radius:var(--radius-pill);font-size:.78rem;font-weight:700;
  transition:all .25s ease;
}
.hero-trust-chip:hover{border-color:rgba(247,166,0,.5);box-shadow:0 0 20px rgba(247,166,0,.18);transform:translateY(-1px)}
.hero-trust-chip .chip-icon{opacity:.95;margin-right:5px;font-size:.75em;color:var(--green)}
.hero-app-download{margin-top:var(--sp-4);animation:fadeInUp .8s ease-out .5s both}
.app-download-label{display:block;color:var(--text-2);font-size:.78rem;font-weight:700;margin-bottom:var(--sp-2);text-transform:uppercase;letter-spacing:.5px}
.app-download-btns{display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap}
.btn-app{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);
  color:var(--text-1);font-weight:600;font-size:.9rem;transition:all .25s ease;
}
.btn-app:hover{border-color:rgba(247,166,0,.4);background:var(--primary-dim);color:var(--primary)}
.btn-app svg{flex-shrink:0}

/* Depositar section (OKX-style) */
.depositar-card h3{font-size:1.2rem;font-weight:700;margin:0;letter-spacing:-.02em}
.depositar-card p{color:var(--text-2);font-size:.92rem;line-height:1.6;flex:1}
.depositar-card:hover{border-color:rgba(247,166,0,.35);box-shadow:0 8px 32px rgba(0,0,0,.25),var(--shadow-glow);transform:translateY(-4px)}
.depositar-icon{font-size:2.5rem;margin-bottom:var(--sp-2)}
.depositar-card h3{font-size:1.2rem;margin:0}
.depositar-card p{color:var(--text-2);font-size:.92rem;line-height:1.5;flex:1}

/* Academia section (OKX-style) */
.academia-card h3{font-size:1.2rem;font-weight:700;margin-bottom:8px;color:var(--text-1);letter-spacing:-.02em}
.academia-card p{font-size:.92rem;color:var(--text-2);margin:0;line-height:1.6}
.academia-card:hover{border-color:rgba(247,166,0,.4);box-shadow:0 8px 32px rgba(0,0,0,.25),var(--shadow-glow);transform:translateY(-4px)}
.academia-card h3{font-size:1.05rem;margin-bottom:8px;color:var(--text-1)}
.academia-card p{font-size:.88rem;color:var(--text-2);margin:0;line-height:1.5}
.account-trust-strip{
  margin-top:var(--sp-3);display:flex;gap:var(--sp-2);flex-wrap:wrap;
}
.trust-pill{
  background:var(--green-dim);
  border:1px solid rgba(32,178,108,.35);
  color:var(--text-1);
  border-radius:var(--radius-pill);
  padding:6px 10px;
  font-size:.72rem;
  font-weight:800;
}
.cabinet-status-board{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp-3);
  margin:-4px 0 var(--sp-5);
}
.cabinet-status-card{
  background:linear-gradient(140deg,var(--bg-1),var(--bg-2));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:12px;
}
.cabinet-status-label{
  display:block;
  color:var(--text-2);
  font-size:.74rem;
  font-weight:700;
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.cabinet-status-value{
  font-size:1rem;
  font-weight:800;
  color:var(--text-1);
}

/* ============================================================
   LIGHT THEME OVERRIDES (global)
   ============================================================ */
:root[data-theme="light"] .header{background:rgba(255,255,255,.92);border-bottom-color:#e9ecef;box-shadow:0 1px 4px rgba(0,0,0,.04)}
:root[data-theme="light"] .exchange-product-nav{background:rgba(255,255,255,.9);border-bottom-color:#e9ecef}
:root[data-theme="light"] .footer{background:#fff;border-top-color:#e9ecef}
:root[data-theme="light"] .stat-card{background:#fff;border-color:#e9ecef}
:root[data-theme="light"] .section-card{background:#fff;border-color:#e9ecef}
:root[data-theme="light"] .auth-security-item{background:#fff;border-color:#e9ecef}
:root[data-theme="light"] .cabinet-status-card{background:linear-gradient(140deg,#fff,#f9fafb);border-color:#e9ecef}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:768px){
  .container{padding:0 14px}
  .hero{min-height:500px;padding:var(--sp-6) 0}
  .hero-title{font-size:2.2rem}
  .title-main{font-size:2.8rem}
  .title-line{font-size:1.1rem}
  .hero-stats{gap:var(--sp-4)}
  .topbar-content{justify-content:flex-start;gap:var(--sp-3);padding:6px 0}
  .stat-number{font-size:1.8rem}
  .stats-cards{grid-template-columns:1fr}
  .header-content{flex-wrap:wrap;gap:var(--sp-2)}
  .logo{order:1;width:100%;justify-content:center;margin-bottom:var(--sp-1)}
  .logo-img{height:24px}
  .logo h1{font-size:1.15rem}
  .nav{
    order:3;width:100%;justify-content:center;display:flex;flex-wrap:wrap;
    background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:var(--sp-2);margin-top:var(--sp-1);
  }
  .nav-link{font-size:.8rem;padding:var(--sp-1) var(--sp-2)}
  .trade-hub-card{padding:var(--sp-3)}
  .trade-row{font-size:.8rem}
  .copy-grid,.products-grid,.trust-grid,.sentiment-grid,.depositar-grid,.academia-grid{grid-template-columns:1fr}
  .copy-card,.product-card,.trust-card,.sentiment-card,.depositar-card,.academia-card{padding:var(--sp-3)}
  .comprar-grid,.institutional-grid,.web3-grid{grid-template-columns:1fr}
  .comprar-card,.institutional-card,.web3-card{padding:var(--sp-3)}
  .footer-grid{grid-template-columns:1fr;gap:var(--sp-6);text-align:center}
  .footer-tagline{margin:0 auto}
  .footer-socials{justify-content:center}
  .exchange-product-nav-inner{gap:var(--sp-3);min-height:40px}
  .exchange-product-link{font-size:.8rem}
  .premium-trust-line-content{justify-content:flex-start;gap:var(--sp-3);padding:6px 0}
  .trust-top-row{margin-bottom:var(--sp-3)}
  .cabinet-status-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
  .auth-layout{grid-template-columns:1fr}
  .auth-left{padding:var(--sp-5)}
  .auth-left h2{font-size:1.5rem}
  .telegram-banner{flex-direction:column;align-items:flex-start}
  .login-page .auth-card{order:1}
  .login-page .auth-left{order:2}
  .login-page .telegram-banner{order:3}
  .register-page .auth-card{order:1}
  .register-page .auth-left{order:2}
  .features-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)!important;gap:var(--sp-2)}
  .cabinet-premium-meta{grid-template-columns:1fr;gap:var(--sp-2)}
  .stat-card{padding:var(--sp-3)}
  .stat-value{font-size:1.3rem}
  .action-buttons{flex-direction:column;gap:var(--sp-2)}
  .btn-large{width:100%;min-width:auto;padding:var(--sp-3) var(--sp-4)}
  .guest-deposit-actions{grid-template-columns:1fr}
  .tabs{overflow-x:auto}
  .tab-btn{flex-shrink:0;padding:var(--sp-2) var(--sp-3);font-size:.82rem;min-width:70px;text-align:center;min-height:44px}
  .dashboard-header{text-align:center}
  .user-id-display{display:flex;justify-content:center;width:100%;margin:var(--sp-2) auto}
  .modal-content{width:95%;padding:var(--sp-5);max-height:90vh;overflow-y:auto}
  #stageModal.modal.show,#stageModal.modal[style*="display: block"]{padding:8px 0}
  #stageModal .modal-content{max-height:90vh}
  .modal-body h2{font-size:1.3rem}
  .section-card{padding:var(--sp-4)}
  .section-card-title{font-size:1rem}
  .orders-table{font-size:.78rem}
  .orders-table th,.orders-table td{padding:var(--sp-2)}
  .chart-wrapper{height:240px}
  .markets-grid{grid-template-columns:1fr;gap:var(--sp-3)}
  .market-card{padding:var(--sp-3)}
  .market-card-header{flex-direction:column;gap:var(--sp-2)}
  .market-price{text-align:left;width:100%}
  .market-chart{height:90px}
  .price-value{font-size:1rem}
  .ios-action-buttons{flex-direction:column;gap:10px;padding:0}
  .ios-btn{width:100%;max-width:100%;min-width:auto}
  .footer{padding-bottom:70px}
  .mobile-bottom-nav{display:grid}
  .deposit-banks-grid{grid-template-columns:1fr}
  .deposit-line-row{grid-template-columns:1fr}
  .admin-deposit-line-actions{justify-content:flex-start}
}
@media(max-width:480px){
  .container{padding:0 12px}
  .hero-title{font-size:1.6rem}
  .section-title{font-size:1.6rem}
  .hero-subtitle{font-size:1rem;margin-bottom:var(--sp-6)}
  .hero-stats{gap:var(--sp-2);margin-bottom:var(--sp-6)}
  .hero-stat{min-width:92px}
  .stat-number{font-size:1.2rem}
  .market-icon{width:36px;height:36px;}
  .market-symbol{font-size:.92rem}
  .price-value{font-size:.92rem}
  .market-chart{height:70px}
  .trade-table-head,.trade-row{grid-template-columns:1.1fr .9fr .6fr .8fr}
  .trade-action{display:none}
  .trade-table-head{font-size:.66rem}
  .section-subtitle{font-size:.92rem;margin-bottom:var(--sp-6)}
  .cta-card{padding:var(--sp-5)}
  .cta-card h2{font-size:1.4rem}
  .auth-card{padding:var(--sp-4)}
  .auth-methods{grid-template-columns:1fr}
  .dashboard-header{padding:var(--sp-4)}
}

/* ============================================================
   COMPRAR SECTION (OKX-style)
   ============================================================ */
.comprar-section{padding:var(--sp-12) 0;background:var(--bg-0);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.comprar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-4)}
.comprar-card{
  background:linear-gradient(145deg,var(--bg-1),var(--bg-2));border:1px solid var(--border);border-radius:var(--radius-2xl);
  padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);transition:var(--transition);box-shadow:var(--shadow-card);
}
.comprar-card:hover{border-color:rgba(247,166,0,.4);box-shadow:0 8px 32px rgba(0,0,0,.25);transform:translateY(-4px)}
.comprar-icon{font-size:2.5rem;margin-bottom:var(--sp-2);color:var(--primary)}
.comprar-card h3{font-size:1.2rem;font-weight:700;margin:0;letter-spacing:-.02em}
.comprar-card p{color:var(--text-2);font-size:.92rem;line-height:1.6;flex:1}

/* ============================================================
   INSTITUTIONAL SECTION (OKX-style)
   ============================================================ */
.institutional-section{padding:var(--sp-12) 0;background:var(--bg-0);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.institutional-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-4)}
.institutional-card{
  background:linear-gradient(145deg,var(--bg-1),var(--bg-2));border:1px solid var(--border);border-radius:var(--radius-2xl);
  padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);transition:var(--transition);box-shadow:var(--shadow-card);
}
.institutional-card:hover{border-color:rgba(98,126,234,.4);box-shadow:0 8px 32px rgba(0,0,0,.25),var(--shadow-glow);transform:translateY(-4px)}
.institutional-icon{font-size:2.5rem;margin-bottom:var(--sp-2);color:var(--blue)}
.institutional-card h3{font-size:1.2rem;font-weight:700;margin:0;letter-spacing:-.02em}
.institutional-card p{color:var(--text-2);font-size:.92rem;line-height:1.6;flex:1}

/* ============================================================
   WEB3 SECTION (OKX-style)
   ============================================================ */
.web3-section{padding:var(--sp-12) 0;background:var(--bg-0);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.web3-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-4)}
.web3-card{
  background:linear-gradient(145deg,var(--bg-1),var(--bg-2));border:1px solid var(--border);border-radius:var(--radius-2xl);
  padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);transition:var(--transition);box-shadow:var(--shadow-card);
}
.web3-card:hover{border-color:rgba(98,126,234,.4);box-shadow:0 8px 32px rgba(0,0,0,.25),var(--shadow-glow);transform:translateY(-4px)}
.web3-icon{font-size:2.5rem;margin-bottom:var(--sp-2);color:var(--blue)}
.web3-card h3{font-size:1.2rem;font-weight:700;margin:0;letter-spacing:-.02em}
.web3-card p{color:var(--text-2);font-size:.92rem;line-height:1.6;flex:1}

/* ============================================================
   ULTRA PREMIUM VISUAL REFRESH
   ============================================================ */
:root{
  /* Legacy aliases for old inline styles/pages */
  --primary-color:var(--primary);
  --primary-light:var(--primary-hover);
  --text-primary:var(--text-1);
  --text-secondary:var(--text-2);
  --bg-primary:var(--bg-0);
  --bg-secondary:var(--bg-1);
  --bg-tertiary:var(--bg-2);
  --border-color:var(--border);
  --border-radius:var(--radius);
  --border-radius-lg:var(--radius-lg);
  --border-radius-xl:var(--radius-xl);
  --spacing-xs:var(--sp-1);
  --spacing-sm:var(--sp-2);
  --spacing-md:var(--sp-4);
  --spacing-lg:var(--sp-6);
  --spacing-xl:var(--sp-10);
}

body{
  position:relative;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 12% 10%,rgba(247,166,0,.11),transparent 36%),
    radial-gradient(circle at 88% 24%,rgba(98,126,234,.11),transparent 34%),
    radial-gradient(circle at 54% 84%,rgba(32,178,108,.08),transparent 40%);
}

.header{box-shadow:0 4px 28px rgba(0,0,0,.3)}
.nav-link{border-radius:10px;font-weight:600}
.btn{border-radius:11px}
.btn-primary{background:var(--gradient-primary);box-shadow:0 8px 24px rgba(247,166,0,.26)}
.btn-secondary{background:linear-gradient(135deg,var(--bg-2),var(--bg-3))}
.form-container{background:linear-gradient(150deg,rgba(247,166,0,.07),transparent 30%),var(--bg-1);border-radius:18px}
.form-input{border-radius:10px}
.section-card{border-radius:18px}
.stat-card{border-radius:14px}
.footer{background:linear-gradient(170deg,rgba(255,255,255,.02),transparent),var(--bg-1)}
.admin-table th,.admin-table td{padding:10px 8px}
.admin-table th{background:linear-gradient(180deg,var(--bg-2),rgba(255,255,255,.02));font-weight:700}
.admin-table td{font-size:.8rem}

.admin-shell{padding:var(--sp-8) 0 var(--sp-10)}
.panel-elevated{
  background:linear-gradient(160deg,rgba(247,166,0,.06),transparent 36%),var(--bg-1);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-card);
}
.page-kicker{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;
  border:1px solid rgba(247,166,0,.25);border-radius:var(--radius-pill);
  background:var(--primary-dim);color:var(--primary);font-size:.76rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;
}

.legal-shell{max-width:980px;margin:0 auto;padding:var(--sp-8) var(--sp-4) var(--sp-10)}
.legal-card{
  background:linear-gradient(145deg,rgba(247,166,0,.06),transparent 32%),var(--bg-1);
  border:1px solid var(--border);border-radius:20px;padding:var(--sp-8);box-shadow:var(--shadow-card);
}
.legal-title{font-size:2rem;margin-bottom:var(--sp-5);color:var(--text-1);letter-spacing:-.4px}
.legal-updated{color:var(--text-2);font-size:.88rem;margin-bottom:var(--sp-6)}
.legal-section{margin-bottom:var(--sp-6)}
.legal-section h2{color:var(--primary);margin-bottom:10px;font-size:1.2rem}
.legal-section p,.legal-section li{color:var(--text-2);line-height:1.75}
.legal-section ul{margin-top:6px;padding-left:22px;display:grid;gap:4px}
.legal-actions{margin-top:var(--sp-6);text-align:center}

:root[data-theme="light"] body::before{
  background:
    radial-gradient(circle at 14% 8%,rgba(247,166,0,.08),transparent 38%),
    radial-gradient(circle at 90% 20%,rgba(98,126,234,.06),transparent 34%),
    radial-gradient(circle at 54% 84%,rgba(32,178,108,.05),transparent 38%);
}

/* ============================================================
   CABINET PREMIUM RE-STYLE (Logic-Safe)
   ============================================================ */
.dashboard {
    max-width: 1400px;
    padding-top: var(--sp-6);
}

.dashboard-header {
    background: linear-gradient(145deg, var(--bg-1), var(--bg-2));
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--sp-6);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    margin-bottom: var(--sp-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    align-items: center;
}

.dashboard-header::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(247, 166, 0, 0.08), transparent 70%);
    pointer-events: none;
}

.dashboard-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.5px;
    width: 100%;
    margin-bottom: var(--sp-2);
}

.dashboard-subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-2);
}

.user-id-display {
    background: var(--bg-3);
    border: 1px solid rgba(247,166,0,0.2);
    color: var(--primary);
    padding: 6px 12px;
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.account-trust-strip {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    width: 100%;
}

.trust-pill {
    background: rgba(14,203,129,0.1);
    color: var(--green);
    border: 1px solid rgba(14,203,129,0.2);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.cabinet-premium-meta {
    display: flex;
    gap: var(--sp-4);
    width: 100%;
    margin-top: var(--sp-2);
    border-top: 1px solid var(--border);
    padding-top: var(--sp-4);
}

.premium-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cabinet-status-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.cabinet-status-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.cabinet-status-label {
    color: var(--text-3);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.cabinet-status-value {
    color: var(--text-1);
    font-size: 1.1rem;
    font-weight: 700;
}

.action-buttons {
    display: flex;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}

.action-buttons .btn {
    flex: 1;
    padding: 16px;
    font-size: 1.1rem;
    border-radius: var(--radius-lg);
    justify-content: center;
}

.tabs {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--border);
    border-radius: 0;
    padding: 0;
    margin-bottom: var(--sp-6);
    gap: var(--sp-4);
}

.tab-btn {
    background: transparent;
    border: none;
    color: var(--text-2);
    font-size: 1.05rem;
    font-weight: 600;
    padding: var(--sp-3) 4px;
    border-radius: 0;
    position: relative;
}

.tab-btn.active {
    color: var(--text-1);
    background: transparent;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--primary);
    border-radius: 3px 3px 0 0;
}

.stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--sp-4);
}

.stat-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--sp-6);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-2);
    font-weight: 600;
}

.stat-value {
    font-size: 2.5rem;
    font-family: var(--font-display);
    letter-spacing: -0.5px;
    color: var(--text-1);
}

/* --- Portfolio Header (Persistent Top Section) --- */
.portfolio-overview {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    margin-bottom: var(--sp-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
}

.portfolio-overview::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(247, 166, 0, 0.08), transparent 70%);
    pointer-events: none;
}

.portfolio-main {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.user-info-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-dim);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(247,166,0,0.3);
}

.user-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.2;
}

.user-uid {
    font-size: 0.8rem;
    color: var(--text-3);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 6px;
    margin-top: 2px;
}

.uid-label {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-2);
}

.uid-value-large {
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: 0.2px;
}

.uid-copy-btn {
    min-height: 24px;
    line-height: 1;
    padding: 4px 9px;
}

.telegram-link-code-hint {
    margin-top: 7px;
    opacity: 0.95;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-basis: 100%;
}

.telegram-link-code-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.telegram-link-code-label {
    font-size: 0.78rem;
    color: var(--text-3);
}

.telegram-link-code-value {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: 0.3px;
}

.telegram-link-code-copy-btn {
    min-height: 24px;
    line-height: 1;
    padding: 4px 9px;
}

.telegram-link-code-expires {
    font-size: 0.72rem;
    color: var(--text-3);
}

.vip-badge {
    background: linear-gradient(135deg, #f0b90b, #f7a600);
    color: #000;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.portfolio-balance {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.portfolio-label {
    color: var(--text-2);
    font-size: 0.85rem;
    font-weight: 500;
}

.portfolio-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.5px;
    line-height: 1;
    font-family: var(--font-display);
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.portfolio-value-mobile-safe {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
}

.stat-value-mobile-safe {
    max-width: 100%;
    line-height: 1.2;
}

#depositAmount.stat-value-mobile-safe {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

#depositAmount .stat-amount-main {
    white-space: nowrap;
}

#depositAmount .stat-amount-code {
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0.3px;
    opacity: 0.95;
    white-space: nowrap;
}

.portfolio-value .currency {
    color: var(--text-1);
    font-size: 1rem;
    font-weight: 600;
}

.portfolio-pnl {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    margin-top: 4px;
}

.pnl-label {
    color: var(--text-3);
}

.pnl-value.positive {
    color: var(--green);
}

.pnl-value.negative {
    color: var(--red);
}

/* --- Action Buttons (Integrated) --- */
.portfolio-actions {
    display: flex;
    gap: var(--sp-3);
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-deposit {
    background: var(--primary);
    color: #0b0e11;
}

.btn-deposit:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(247, 166, 0, 0.25);
}

.btn-withdraw {
    background: var(--bg-3);
    color: var(--text-1);
}

.btn-withdraw:hover {
    background: rgba(255,255,255,0.1);
}


/* --- Modern Tabs --- */
.tabs-modern {
    display: flex;
    gap: var(--sp-5);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--sp-6);
    padding-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs-modern::-webkit-scrollbar {
    display: none;
}

.tab-link {
    background: transparent;
    border: none;
    color: var(--text-2);
    font-size: 1rem;
    font-weight: 600;
    padding: var(--sp-3) 4px;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
    white-space: nowrap;
}

.tab-link:hover {
    color: var(--text-1);
}

.tab-link.active {
    color: var(--text-1);
}

.tab-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--primary);
    border-radius: 3px 3px 0 0;
}

@media (max-width: 980px) {
    .portfolio-overview {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-5);
    }

    .portfolio-value {
        font-size: clamp(1.3rem, 7vw, 2rem);
        line-height: 1.15;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 4px;
    }
    
    .portfolio-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Deposit Premium Modal --- */
.premium-modal-content {
    background: linear-gradient(145deg, var(--bg-1), var(--bg-2));
    border: 1px solid var(--border);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    overflow-x: hidden;
    overflow-y: auto;
}

.premium-deposit-modal {
    padding: var(--sp-2) 0;
}

.deposit-header {
    text-align: center;
    margin-bottom: var(--sp-6);
}

.deposit-header h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.5px;
    margin-bottom: var(--sp-2);
}

.tg-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0088cc, #005f8f);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--sp-4);
    box-shadow: 0 4px 15px rgba(0, 136, 204, 0.4);
}

.deposit-info-box {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--sp-5);
    margin-bottom: var(--sp-6);
}

.deposit-main-text {
    font-size: 0.95rem;
    color: var(--text-1);
    line-height: 1.6;
    margin-bottom: var(--sp-5);
    text-align: center;
}

.deposit-main-text strong {
    color: var(--primary);
}

.deposit-steps {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.d-step {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-1);
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.d-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary-dim);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.d-step-text {
    font-size: 0.9rem;
    color: var(--text-2);
    line-height: 1.4;
}

.d-step-text b {
    color: var(--text-1);
}

.deposit-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: var(--sp-5);
    margin-bottom: var(--sp-3);
    background: rgba(246, 70, 93, 0.1);
    border: 1px solid rgba(246, 70, 93, 0.2);
    padding: 12px;
    border-radius: var(--radius-lg);
    color: var(--red);
    font-size: 0.85rem;
    line-height: 1.4;
}

.deposit-warning svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.deposit-requisites-timer {
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 2px solid rgba(247, 166, 0, 0.55);
    background: linear-gradient(135deg, rgba(247, 166, 0, 0.22), rgba(247, 166, 0, 0.08));
    color: var(--text-1);
    font-size: 1.02rem;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.2px;
    box-shadow: 0 10px 24px rgba(247, 166, 0, 0.18);
    animation: requisitesTimerPulse 1.6s ease-in-out infinite;
}

.deposit-requisites-timer.is-expired {
    border-color: rgba(246, 70, 93, 0.35);
    background: rgba(246, 70, 93, 0.12);
    color: var(--red);
    box-shadow: 0 10px 24px rgba(246, 70, 93, 0.2);
    animation: requisitesTimerExpiredPulse 1.2s ease-in-out infinite;
}

@keyframes requisitesTimerPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.01); }
    100% { transform: scale(1); }
}

@keyframes requisitesTimerExpiredPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.015); }
    100% { transform: scale(1); }
}

@media (max-width: 768px) {
    .deposit-requisites-timer {
        font-size: 0.96rem;
        padding: 11px 12px;
    }
}

.btn-tg-action {
    width: 100%;
    padding: 16px;
    font-size: 1.1rem;
    font-weight: 700;
    background: linear-gradient(135deg, #0088cc, #005f8f);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
}

.btn-tg-action:hover {
    background: linear-gradient(135deg, #0099e6, #0077b3);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 136, 204, 0.4);
    color: white;
}

.deposit-bank-icon {
    background: linear-gradient(135deg, #3c8f5b, #23653e);
    box-shadow: 0 4px 15px rgba(35, 101, 62, 0.35);
}

/* Desktop: keep deposit modal visually close to mobile layout */
@media (min-width: 769px) {
    #depositModal .modal-content.premium-modal-content {
        width: min(460px, 95vw);
        max-width: 460px;
        padding: var(--sp-5);
        max-height: 90vh;
        overflow-y: auto;
    }

    #depositModal .premium-deposit-modal {
        padding: var(--sp-1) 0;
    }

    #depositModal .deposit-header {
        margin-bottom: var(--sp-5);
    }

    #depositModal .tg-icon-wrapper {
        width: 56px;
        height: 56px;
        margin-bottom: var(--sp-3);
    }

    #depositModal .deposit-header h2 {
        font-size: 1.3rem;
    }

    #depositModal .deposit-info-box {
        padding: var(--sp-4);
        margin-bottom: var(--sp-5);
    }

    #depositModal .deposit-country-label {
        font-size: 0.9rem;
    }

    #depositModal .btn-tg-action {
        padding: 14px;
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    #depositModal.modal.show,
    #depositModal.modal[style*="display: block"] {
        align-items: flex-start;
        padding: 10px 0;
    }

    #depositModal .modal-content.premium-modal-content {
        width: min(96vw, 560px);
        max-height: 92vh;
        margin: 0 auto;
        overflow-y: auto;
    }
}

.deposit-country-label {
    margin: 0;
    color: var(--text-2);
    font-size: 0.95rem;
}

.deposit-country-flag {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    font-size: 1.05rem;
    line-height: 1;
}

.deposit-country-label strong {
    color: var(--text-1);
}

.deposit-status-text {
    margin-top: var(--sp-3);
    font-size: 0.9rem;
    color: var(--text-2);
}

.deposit-requisites-list {
    margin-top: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.deposit-requisite-item {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 10px 12px;
}

.deposit-requisite-label {
    font-size: 0.78rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.deposit-requisite-value {
    font-size: 0.95rem;
    color: var(--text-1);
    line-height: 1.45;
    word-break: break-word;
}

.deposit-requisite-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.deposit-copy-btn {
    white-space: nowrap;
    min-width: 66px;
}

.deposit-bank-dropdown {
  position: relative;
  margin-top: 8px;
}

.deposit-bank-dropdown-trigger {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-1);
  padding: 10px 12px;
  cursor: pointer;
}

.deposit-bank-dropdown-trigger-content {
  flex: 1;
  text-align: left;
}

.deposit-bank-dropdown-caret {
  color: var(--text-3);
  font-size: 0.9rem;
}

.deposit-bank-dropdown-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 6px;
  z-index: 1100;
  display: none;
}

.deposit-bank-dropdown.is-open .deposit-bank-dropdown-menu {
  display: block;
}

.deposit-bank-dropdown-option {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}

.deposit-bank-dropdown-option:hover {
  background: var(--bg-2);
  border-color: var(--border);
}

.deposit-bank-dropdown-option.is-selected {
  background: rgba(247,166,0,0.12);
  border-color: rgba(247,166,0,0.32);
}

.deposit-bank-dropdown-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.deposit-bank-dropdown-logo--placeholder {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.deposit-bank-dropdown-option-name {
  flex: 1;
}

.geo-selector {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: linear-gradient(150deg, rgba(247,166,0,.08), transparent 34%), var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
}

.geo-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(255,255,255,.02));
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.84rem;
    font-weight: 700;
}

.geo-btn:hover {
    background: var(--primary-color);
    color: #0b0e11;
    border-color: var(--primary-color);
}

.geo-btn.active {
    background: var(--primary-color);
    color: #0b0e11;
    border-color: var(--primary-color);
}

.deposit-banks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.deposit-bank-card {
    background: linear-gradient(145deg, rgba(247,166,0,.06), transparent 38%), var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-card);
}

.deposit-bank-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.deposit-bank-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.deposit-line-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: center;
}

.admin-deposit-line-actions {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.deposit-admin-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
}

.stage-form-group {
    margin-bottom: var(--spacing-md);
}

.stage-form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.stage-form-input {
    width: 100%;
    padding: var(--spacing-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.stage-form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(247, 166, 0, 0.12);
}

.stage-form-textarea {
    width: 100%;
    min-height: 80px;
    padding: var(--spacing-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 0.9rem;
    resize: vertical;
}

.stage-form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(247, 166, 0, 0.12);
}

.empty-state-card {
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    color: var(--text-secondary);
    text-align: center;
}