/* ============================================================
   NexTrade — style.css
   ============================================================ */
:root {
  --bg:        #060a14;
  --surface:   #0d1424;
  --surface2:  #131d32;
  --surface3:  #1a2540;
  --border:    #1c2c4e;
  --border2:   #243558;
  --gold:      #f0b429;
  --gold-dim:  #c48e1a;
  --gold-glow: #f0b42930;
  --green:     #05d492;
  --red:       #f0374b;
  --accent:    #3e6ef5;
  --text:      #dce4f5;
  --text2:     #98a8cc;
  --muted:     #5b6e99;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 12px #00000040;
  --shadow-md: 0 8px 32px #00000060;
  --shadow-lg: 0 24px 64px #00000088;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{font-size:16px;scroll-behavior:smooth;}
body{font-family:'Syne',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;line-height:1.6;}
a{color:inherit;text-decoration:none;}
button{font-family:'Syne',sans-serif;cursor:pointer;}
input,select,textarea{font-family:'Syne',sans-serif;}
.mono{font-family:'Space Mono',monospace;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}

/* ── TICKER ─────────────────────────────────────────────── */
.ticker-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:7px 0;overflow:hidden;white-space:nowrap;position:sticky;top:0;z-index:200;}
.ticker-inner{display:inline-flex;gap:52px;padding:0 26px;animation:ticker-scroll 28s linear infinite;}
.ticker-inner:hover{animation-play-state:paused;}
.ticker-item{display:inline-flex;align-items:center;gap:9px;font-family:'Space Mono',monospace;font-size:11.5px;}
.t-sym{color:var(--gold);font-weight:700;}
.t-val{color:var(--text);}
.t-chg{font-size:10.5px;padding:1px 6px;border-radius:4px;}
.t-chg.up{color:var(--green);background:#05d49218;}
.t-chg.down{color:var(--red);background:#f0374b18;}
@keyframes ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ── NAVBAR ─────────────────────────────────────────────── */
.navbar{position:sticky;top:35px;z-index:100;height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:rgba(6,10,20,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);}
.nav-left{display:flex;align-items:center;gap:28px;}
.nav-right{display:flex;align-items:center;gap:14px;}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;}
.brand-icon{width:34px;height:34px;background:linear-gradient(135deg,var(--gold),#b87100);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:0 3px 14px var(--gold-glow);flex-shrink:0;}
.brand-name{font-size:20px;font-weight:800;letter-spacing:-0.5px;color:var(--text);}
.brand-name em{font-style:normal;color:var(--gold);}
.nav-links{display:flex;gap:2px;}
.nav-link{padding:7px 15px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;color:var(--muted);transition:color .2s,background .2s;white-space:nowrap;}
.nav-link:hover{color:var(--text);background:var(--surface2);}
.nav-link.active{color:var(--gold);background:var(--gold-glow);}
.nav-wallet{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 14px;line-height:1.3;}
.wallet-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;}
.wallet-amount{font-family:'Space Mono',monospace;font-size:14px;font-weight:700;color:var(--gold);}
.nav-user-wrap{position:relative;}
.nav-avatar{width:35px;height:35px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#6d28d9);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;cursor:pointer;border:2px solid transparent;transition:border-color .2s;}
.nav-user-wrap:hover .nav-avatar{border-color:var(--gold);}
.nav-dropdown{position:absolute;top:calc(100% + 10px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;width:200px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transform:translateY(8px);transition:all .2s;z-index:300;}
.nav-user-wrap:hover .nav-dropdown{opacity:1;pointer-events:all;transform:translateY(0);}
.nd-name{font-size:14px;font-weight:700;}
.nd-email{font-size:11px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nd-hr{border:none;border-top:1px solid var(--border);margin:10px 0;}
.nd-link{display:block;padding:8px 10px;border-radius:var(--radius-sm);font-size:13px;color:var(--text2);transition:all .15s;}
.nd-link:hover{background:var(--surface2);color:var(--text);}
.nd-logout:hover{color:var(--red);}

/* ── PAGE ───────────────────────────────────────────────── */
.page-wrap{max-width:1320px;margin:0 auto;padding:32px 28px 60px;}
.page-hdr{margin-bottom:28px;}
.page-title{font-size:28px;font-weight:800;letter-spacing:-0.6px;line-height:1.2;}
.page-sub{color:var(--muted);font-size:14px;margin-top:4px;}

/* ── STAT CARDS ─────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;transition:border-color .2s,transform .2s;}
.stat-card:hover{border-color:var(--border2);transform:translateY(-2px);}
.stat-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:10px;}
.stat-val{font-family:'Space Mono',monospace;font-size:21px;font-weight:700;color:var(--text);}
.stat-meta{font-size:12px;margin-top:5px;font-family:'Space Mono',monospace;}
.up{color:var(--green);}
.down{color:var(--red);}

/* ── CARD ───────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:24px;}
.card-title{font-size:15px;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:10px;color:var(--text);}
.card-title::after{content:'';flex:1;height:1px;background:var(--border);}

/* ── GRIDS ──────────────────────────────────────────────── */
.two-col{display:grid;grid-template-columns:1fr 340px;gap:24px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}

/* ── FORM ───────────────────────────────────────────────── */
.form-group{margin-bottom:18px;}
.form-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:7px;}
.form-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 15px;color:var(--text);font-family:'Space Mono',monospace;font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s;}
.form-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow);}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border:none;border-radius:var(--radius-sm);font-family:'Syne',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .15s;line-height:1;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;}
.btn-full{width:100%;}
.btn-gold{background:linear-gradient(135deg,var(--gold),#b87100);color:#000;box-shadow:0 4px 18px var(--gold-glow);}
.btn-gold:hover{box-shadow:0 8px 28px #f0b42950;}
.btn-green{background:linear-gradient(135deg,var(--green),#039e6a);color:#000;box-shadow:0 4px 18px #05d49230;}
.btn-green:hover{box-shadow:0 8px 26px #05d49240;}
.btn-red{background:linear-gradient(135deg,var(--red),#b02738);color:#fff;box-shadow:0 4px 18px #f0374b30;}
.btn-red:hover{box-shadow:0 8px 26px #f0374b40;}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text2);}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);}

/* ── BADGES ─────────────────────────────────────────────── */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:.6px;}
.badge-buy{background:#05d49218;color:var(--green);border:1px solid #05d49233;}
.badge-sell{background:#f0374b18;color:var(--red);border:1px solid #f0374b33;}
.badge-dep{background:#3e6ef518;color:var(--accent);border:1px solid #3e6ef533;}
.badge-wd{background:#f0b42918;color:var(--gold);border:1px solid var(--gold-glow);}

/* ── TABLE ──────────────────────────────────────────────── */
.data-table{width:100%;border-collapse:collapse;}
.data-table th{text-align:left;padding:10px 14px;font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);border-bottom:1px solid var(--border);font-weight:600;}
.data-table td{padding:14px;font-size:13px;border-bottom:1px solid rgba(28,44,78,.4);vertical-align:middle;}
.data-table tr:last-child td{border:none;}
.data-table tr:hover td{background:rgba(255,255,255,.02);}

/* ── EMPTY STATE ────────────────────────────────────────── */
.empty-state{text-align:center;padding:48px 20px;color:var(--muted);}
.es-icon{font-size:42px;margin-bottom:14px;}
.es-title{font-size:16px;font-weight:700;color:var(--text2);margin-bottom:6px;}
.es-text{font-size:13px;}

/* ── TOAST ──────────────────────────────────────────────── */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:999;display:flex;flex-direction:column;gap:10px;}
.toast{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 18px;font-size:13px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-lg);animation:toast-in .3s ease;max-width:340px;backdrop-filter:blur(8px);}
.toast.success{border-color:#05d49244;}
.toast.error{border-color:#f0374b44;}
.toast.info{border-color:#3e6ef544;}
.toast-icon{font-size:16px;flex-shrink:0;}
.toast-close{margin-left:auto;cursor:pointer;color:var(--muted);font-size:16px;}
@keyframes toast-in{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}

/* ── FOOTER ─────────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--border);margin-top:60px;background:var(--surface);}
.footer-inner{max-width:1320px;margin:0 auto;padding:28px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.footer-brand p{font-size:12px;color:var(--muted);margin-top:4px;}
.footer-links{display:flex;gap:20px;font-size:13px;color:var(--muted);}
.footer-links a{color:var(--muted);transition:color .2s;}
.footer-links a:hover{color:var(--gold);}
.footer-copy{font-size:12px;color:var(--muted);}

/* ── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
.fade-up{animation:fadeUp .4s ease both;}
.fade-up-1{animation-delay:.05s;}
.fade-up-2{animation-delay:.1s;}
.fade-up-3{animation-delay:.15s;}
.fade-up-4{animation-delay:.2s;}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:1100px){.two-col{grid-template-columns:1fr;}}
@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr);}.grid-2{grid-template-columns:1fr;}.page-wrap{padding:20px 16px 48px;}}
@media(max-width:640px){.nav-links{display:none;}.stats-grid{grid-template-columns:1fr 1fr;}}