/* ══════════════════════════════════════════════════════
   APXTrading Trader Dashboard Layout v1.0
   bot/assets/css/trader.css
   ══════════════════════════════════════════════════════ */

/* ── Auth screen (shown before login) ──────────────── */
#authScreen {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding: var(--sp-5);
  background:
    radial-gradient(ellipse at 20% 10%, rgba(201,168,76,.10), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(14,138,122,.10), transparent 55%),
    var(--color-navy);
}
.auth-box {
  width:100%; max-width: 420px;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-8) var(--sp-6);
}
.auth-brand { text-align:center; margin-bottom: var(--sp-6); }
.auth-logo {
  width:52px; height:52px; margin:0 auto var(--sp-3);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
  color: var(--color-navy);
  display:grid; place-items:center;
  font-weight:800; font-size:22px;
  box-shadow: var(--shadow-gold);
}
.auth-name { font-size: var(--fs-xl); font-weight:800; }
.auth-name span { color: var(--color-gold-dark); }
.auth-tag { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-1); }
.auth-switch { text-align:center; font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-4); }
.auth-switch button { background:none; color: var(--color-blue); font-weight:600; font-size:inherit; }
.auth-divider {
  display:flex; align-items:center; gap: var(--sp-3);
  margin: var(--sp-5) 0;
  color: var(--text-faint); font-size: var(--fs-xs); font-weight:700;
}
.auth-divider::before, .auth-divider::after {
  content:''; flex:1; height:1px; background: var(--border-subtle);
}

/* ── App shell ─────────────────────────────────────── */
#app { display:none; min-height:100vh; }
#app.ready { display:flex; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  position: fixed; top:0; left:0; bottom:0;
  z-index:60;
  background: var(--surface-sidebar);
  color: var(--text-on-dark);
  display:flex; flex-direction:column;
  overflow-y:auto;
  transition: transform .22s ease;
}
.sidebar-head {
  display:flex; align-items:center; gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom:1px solid rgba(255,255,255,.08);
  position:relative;
}
.sidebar-logo {
  width:34px; height:34px; flex-shrink:0;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
  color: var(--color-navy);
  display:grid; place-items:center;
  font-weight:800; font-size:15px;
}
.sidebar-name { font-size: var(--fs-base); font-weight:800; }
.sidebar-name span { color: var(--color-gold); }
.sidebar-close {
  display:none; position:absolute; right: var(--sp-3);
  background:none; color: var(--text-on-dark-mut); font-size:22px; line-height:1;
}

.sidebar-user {
  margin: var(--sp-3);
  padding: var(--sp-3);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius-md);
  display:flex; align-items:center; gap: var(--sp-2);
}
.sidebar-user-name {
  font-size: var(--fs-sm); font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sidebar-user-sub { font-size: var(--fs-xs); color: var(--text-on-dark-mut); }

.nav { flex:1; padding: var(--sp-2) var(--sp-3); }
.nav-section {
  display:block;
  padding: var(--sp-4) var(--sp-2) var(--sp-1);
  font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color: var(--text-on-dark-mut);
}
.nav-item {
  display:flex; align-items:center; gap: var(--sp-3);
  width:100%; text-align:left;
  padding: 10px var(--sp-3);
  margin-bottom: 2px;
  border-radius: var(--radius-md);
  background:none;
  color: var(--text-on-dark-mut);
  font-size: var(--fs-sm); font-weight:600;
  transition: var(--transition);
  position:relative;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: var(--text-on-dark); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(201,168,76,.22), rgba(201,168,76,.06));
  color:#fff;
}
.nav-item.active::before {
  content:''; position:absolute; left:calc(var(--sp-3) * -1); top:8px; bottom:8px;
  width:3px; border-radius:0 3px 3px 0;
  background: var(--color-gold);
}
.nav-icon { width:20px; text-align:center; flex-shrink:0; font-size:15px; }
.nav-lock { margin-left:auto; font-size:11px; opacity:.7; }
.nav-item.locked { opacity:.45; cursor:not-allowed; }

.sidebar-foot { padding: var(--sp-3); border-top:1px solid rgba(255,255,255,.08); }
.balance-box {
  background: rgba(201,168,76,.10);
  border:1px solid rgba(201,168,76,.22);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.balance-title {
  font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color: var(--color-gold);
  margin-bottom: var(--sp-2);
}
.balance-row {
  display:flex; justify-content:space-between;
  font-size: var(--fs-xs);
  margin-bottom: 3px;
}
.balance-row:last-child { margin-bottom:0; }
.balance-row .v { font-family: var(--font-mono); font-weight:700; }

.backdrop {
  display:none; position:fixed; inset:0; z-index:55;
  background: rgba(13,27,42,.6);
}
.backdrop.open { display:block; }

/* ── Main column ───────────────────────────────────── */
.main {
  flex:1; min-width:0;
  margin-left: var(--sidebar-w);
  display:flex; flex-direction:column;
}
.topbar {
  position:sticky; top:0; z-index:50;
  height: var(--topbar-h);
  display:flex; align-items:center; gap: var(--sp-3);
  padding: 0 var(--sp-5);
  background: var(--surface-card);
  border-bottom:1px solid var(--border-subtle);
}
.burger { display:none; flex-direction:column; gap:4px; background:none; padding:6px; }
.burger span { width:20px; height:2px; border-radius:2px; background: var(--text-primary); display:block; }
.topbar-title { font-size: var(--fs-lg); font-weight:700; flex:1; }
.topbar-addr { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }

.content { flex:1; padding: var(--sp-6) var(--sp-5) var(--sp-12); }
.content-inner { max-width: 1080px; margin:0 auto; }

.page { display:none; }
.page.active { display:block; animation: fadeIn .2s ease; }
.page-head { margin-bottom: var(--sp-5); }
.page-head h2 { font-size: var(--fs-2xl); font-weight:800; letter-spacing:-.02em; }
.page-head p  { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-1); }

/* ── Live earnings ticker ──────────────────────────── */
.earn-panel {
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-mid));
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  color: var(--text-on-dark);
  margin-bottom: var(--sp-5);
}
.earn-head {
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp-3); flex-wrap:wrap;
  margin-bottom: var(--sp-5);
}
.earn-head-title { font-size: var(--fs-base); font-weight:700; }
.earn-live {
  display:flex; align-items:center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color: var(--color-teal-light);
}
.earn-main { text-align:center; margin-bottom: var(--sp-5); }
.earn-label {
  font-size: var(--fs-xs); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color: var(--text-on-dark-mut);
  margin-bottom: var(--sp-2);
}
.earn-value {
  font-family: var(--font-mono);
  font-size: var(--fs-3xl); font-weight:800;
  letter-spacing:-.03em;
  color: var(--color-gold);
}
.earn-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.earn-cell {
  background: rgba(0,0,0,.22);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  text-align:center;
}
.earn-cell-label {
  display:block;
  font-size:10px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color: var(--text-on-dark-mut);
  margin-bottom: var(--sp-1);
}
.earn-cell-value { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight:700; }
@media (max-width: 620px) { .earn-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Packages ──────────────────────────────────────── */
.pkg-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-3); }
.pkg {
  background: var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  cursor:pointer;
  position:relative; overflow:hidden;
  transition: var(--transition);
}
.pkg::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: var(--gray-200); }
.pkg[data-tier="bronze"]::before   { background:#CD7F32; }
.pkg[data-tier="silver"]::before   { background:#9CA3AF; }
.pkg[data-tier="gold"]::before     { background: var(--color-gold); }
.pkg[data-tier="titanium"]::before { background:#7B8794; }
.pkg[data-tier="diamond"]::before  { background:#6FD3E8; }
.pkg[data-tier="platinum"]::before { background:#B8B8C0; }
.pkg[data-tier="vip"]::before      { background: linear-gradient(90deg,#FF6B35,var(--color-purple)); }
.pkg:hover { border-color: var(--color-gold); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pkg.selected { border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(201,168,76,.2); }
.pkg-tag {
  position:absolute; top: var(--sp-3); right: var(--sp-3);
  font-size:10px; font-weight:700; padding:2px 8px;
  border-radius: var(--radius-full);
  text-transform:uppercase; letter-spacing:.05em;
}
.pkg-name {
  font-size: var(--fs-sm); font-weight:800;
  text-transform:uppercase; letter-spacing:.06em;
  color: var(--text-muted);
}
.pkg-amount {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl); font-weight:800;
  letter-spacing:-.03em;
  margin: var(--sp-1) 0 var(--sp-3);
}
.pkg-daily {
  display:flex; align-items:center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--color-green-light);
  color: var(--color-green);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight:700;
  margin-bottom: var(--sp-3);
}
.pkg-row {
  display:flex; justify-content:space-between;
  font-size: var(--fs-xs);
  padding: var(--sp-1) 0;
}
.pkg-row .k { color: var(--text-muted); }
.pkg-row .v { font-family: var(--font-mono); font-weight:700; }

/* ── Referral plan grid ────────────────────────────── */
.refplan-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-2); }
.refplan-cell {
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  text-align:center;
  border:1px solid;
}
.refplan-cell.l1     { background: var(--color-gold-light); border-color: rgba(201,168,76,.4); color: var(--color-gold-dark); }
.refplan-cell.active { background: var(--color-blue-light); border-color: rgba(26,95,168,.3); color: var(--color-blue); }
.refplan-cell.off    { background: var(--gray-100); border-color: var(--border-subtle); color: var(--text-faint); }
.refplan-level {
  font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  opacity:.85; margin-bottom: var(--sp-1);
}
.refplan-pct { font-family: var(--font-mono); font-size: var(--fs-xl); font-weight:800; }
.refplan-earned { font-size:10px; font-weight:700; margin-top: var(--sp-1); min-height:14px; color: var(--color-green); }

/* ── Steps explainer ───────────────────────────────── */
.steps { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--sp-3); }
.step {
  background: var(--gray-50);
  border:1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
}
.step-num {
  display:grid; place-items:center;
  width:24px; height:24px;
  border-radius:50%;
  background: var(--color-gold); color: var(--color-navy);
  font-size: var(--fs-xs); font-weight:800;
  margin-bottom: var(--sp-2);
}
.step p { font-size: var(--fs-xs); color: var(--text-muted); line-height:1.6; }
.step b { color: var(--text-primary); }

/* ── Level badge in tables ─────────────────────────── */
.lvl-badge {
  display:inline-grid; place-items:center;
  width:28px; height:28px;
  border-radius:50%;
  font-size: var(--fs-xs); font-weight:800;
}
.lvl-badge.l1 { background: var(--color-gold-light);  color: var(--color-gold-dark); }
.lvl-badge.l2 { background: var(--color-blue-light);  color: var(--color-blue); }
.lvl-badge.ln { background: var(--gray-100);          color: var(--text-muted); }

/* ── Market rows ───────────────────────────────────── */
.market-row {
  display:grid;
  grid-template-columns: 2fr 1.4fr 1.1fr 1.1fr 1.1fr;
  gap: var(--sp-2);
  align-items:center;
  padding: var(--sp-3);
  border-bottom:1px solid var(--border-subtle);
}
.market-row:last-child { border-bottom:none; }
.market-head {
  font-size: var(--fs-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  color: var(--text-muted);
  border-bottom:2px solid var(--border-subtle);
}
.market-coin { display:flex; align-items:center; gap: var(--sp-3); }
.market-icon {
  width:32px; height:32px; flex-shrink:0;
  border-radius:50%;
  background: var(--gray-100);
  display:grid; place-items:center;
  font-size:17px;
}
.market-name { font-weight:700; font-size: var(--fs-sm); display:block; }
.market-pair { font-size: var(--fs-xs); color: var(--text-muted); display:block; }
.market-price { font-family: var(--font-mono); font-weight:700; font-size: var(--fs-sm); }
.market-chg {
  display:inline-block;
  font-family: var(--font-mono); font-weight:700; font-size: var(--fs-xs);
  padding: 3px 8px; border-radius: var(--radius-sm);
}
.market-chg.up { background: var(--color-green-light); color: var(--color-green); }
.market-chg.dn { background: var(--color-red-light);   color: var(--color-red); }
@media (max-width: 720px) {
  .market-row { grid-template-columns: 2fr 1.3fr 1fr; }
  .market-row > *:nth-child(n+4) { display:none; }
}

#chartBox { height: 460px; border-radius: var(--radius-md); overflow:hidden; }

/* ── Responsive shell ──────────────────────────────── */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close { display:block; }
  .main { margin-left:0; }
  .burger { display:flex; }
}
@media (max-width: 560px) {
  .content { padding: var(--sp-4) var(--sp-3) var(--sp-10); }
  .page-head h2 { font-size: var(--fs-xl); }
  .earn-value { font-size: var(--fs-2xl); }
}

@media print {
  .sidebar, .topbar, .busy-bar, .toast { display:none !important; }
  .main { margin-left:0; }
}