:root{
  /* -- palette -- */
  --bg:            #0A0E16;
  --bg-raised:     #10141F;
  --panel:         #12161F;
  --panel-2:       #161B27;
  --border:        #1F2532;
  --border-soft:   #191E2A;
  --text-1:        #E7EAF0;
  --text-2:        #9199A8;
  --text-3:        #5C6478;

  --buy:           #2FD980;
  --buy-dim:       #17331F;
  --buy-glow:      rgba(47,217,128,.14);
  --sell:          #F1495B;
  --sell-dim:      #331A1E;
  --sell-glow:     rgba(241,73,91,.14);
  --warn:          #E8A63D;
  --warn-dim:      #332A16;
  --neutral:       #7C8598;
  --neutral-dim:   #1C2130;
  --accent:        #4C8DFF;
  --accent-dim:    #12203E;

  --radius-s: 6px;
  --radius-m: 10px;
  --font-ui: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-num: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; /* sengaja sama dengan --font-ui: semua teks pakai Inter */
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--bg); color:var(--text-1); font-family:var(--font-ui); -webkit-font-smoothing:antialiased;}
body{font-size:13px; line-height:1.45; padding-bottom:48px;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--accent-dim); color:var(--text-1);}
::-webkit-scrollbar{height:8px; width:8px;}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

.num{font-family:var(--font-num); font-variant-numeric:tabular-nums;}
.up{color:var(--buy);}
.down{color:var(--sell);}
.warn-c{color:var(--warn);}
.neutral-c{color:var(--neutral);}

a, .link{color:var(--accent); text-decoration:none;}

/* ============ HEADER ============ */
header.topbar{
  display:flex; align-items:center; gap:22px;
  padding:0 20px; height:56px;
  background:var(--bg-raised); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
}
.brand{display:flex; align-items:center; gap:9px; flex-shrink:0;}
.brand-mark{
  width:26px; height:26px; border-radius:7px;
  background:linear-gradient(135deg,#2FD980,#1B8A50);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; color:#062012;
}
.brand-name{font-weight:700; font-size:15px; letter-spacing:.2px;}
.brand-sub{font-size:10px; color:var(--text-3); font-weight:600; padding:2px 6px; border:1px solid var(--border); border-radius:4px;}

.search-box{
  display:flex; align-items:center; gap:8px;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-s);
  padding:7px 10px; width:220px; color:var(--text-3);
}
.search-box input{background:none; border:none; outline:none; color:var(--text-1); font-size:12.5px; width:100%; font-family:inherit;}

.exchange-select, .tf-group{display:flex; align-items:center; gap:4px;}
select.pill{
  background:var(--panel); color:var(--text-1); border:1px solid var(--border);
  border-radius:var(--radius-s); padding:6px 9px; font-size:12px; font-family:inherit;
}
.tf-group{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-s); padding:3px;}
.tf-btn{
  background:none; border:none; color:var(--text-2); font-size:11.5px; font-weight:600;
  padding:5px 9px; border-radius:5px;
}
.tf-btn.active{background:var(--accent-dim); color:var(--accent);}
.ind-btn-group{display:inline-flex; align-items:center; gap:2px; margin-right:4px;}
.ind-gear{padding:6px 8px !important; font-size:11px; opacity:0.7;}
.ind-gear:hover{opacity:1;}
.ind-settings-panel{
  display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-end;
  padding:10px 12px; margin:0 0 8px; background:var(--panel-2,#171c27);
  border:1px solid #232a38; border-radius:6px; font-size:12px;
}
.ind-settings-panel .isp-field{display:flex; flex-direction:column; gap:4px;}
.ind-settings-panel label{color:var(--text-2,#8a94a6); font-size:11px;}
.ind-settings-panel input{
  width:80px; background:#0e121a; border:1px solid #2a3242; color:var(--text-1,#e6e9ef);
  border-radius:4px; padding:5px 6px; font-size:12px;
}
.ind-settings-panel .isp-actions{display:flex; gap:8px; margin-left:auto;}
.ind-settings-panel button{
  background:var(--accent-dim); color:var(--accent); border:none; border-radius:4px;
  padding:6px 12px; font-size:12px; cursor:pointer;
}
.ind-settings-panel button.isp-cancel{background:transparent; color:var(--text-2,#8a94a6); border:1px solid #2a3242;}

.header-stats{display:flex; align-items:center; gap:18px; margin-left:auto; flex-shrink:0;}
.hstat{display:flex; flex-direction:column; align-items:flex-end; gap:1px;}
.hstat .label{font-size:9.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.4px;}
.hstat .value{font-size:12.5px; font-weight:600; font-family:var(--font-num);}
.market-status{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-2);}
.dot-live{width:6px; height:6px; border-radius:50%; background:var(--buy); box-shadow:0 0 0 3px var(--buy-glow);}

.icon-btn{
  width:32px; height:32px; border-radius:var(--radius-s); border:1px solid var(--border);
  background:var(--panel); display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0;
}
.icon-btn svg{width:15px; height:15px; stroke:var(--text-2);}
.notif-dot{
  position:absolute; top:-4px; right:-4px; min-width:15px; height:15px; padding:0 3px;
  border-radius:8px; background:var(--sell); color:#fff; font-size:9.5px; font-weight:700;
  font-family:var(--font-num); line-height:15px; text-align:center; box-shadow:0 0 0 2px var(--panel);
}

/* ---- Bell alert dropdown ---- */
.notif-bell{position:relative;}
.notif-bell-dropdown{
  display:none; position:absolute; top:calc(100% + 8px); right:0; width:320px; z-index:60;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-m);
  box-shadow:0 12px 28px rgba(0,0,0,.45); max-height:360px; overflow-y:auto;
}
.notif-bell.open .notif-bell-dropdown{display:block;}
.notif-bell-head{
  padding:10px 14px; font-size:11px; font-weight:700; letter-spacing:.5px; color:var(--text-2);
  text-transform:uppercase; border-bottom:1px solid var(--border-soft); position:sticky; top:0; background:var(--panel);
}
.notif-bell-list .alert-feed-row{padding:9px 14px;}
.notif-bell-empty{padding:20px 14px; text-align:center; font-size:12px; color:var(--text-3);}
.avatar{width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#4C8DFF,#2451A8); flex-shrink:0;}

.demo-badge{
  font-size:9.5px; font-weight:700; letter-spacing:.5px; color:var(--warn);
  background:var(--warn-dim); border:1px solid #4a3a17; padding:3px 7px; border-radius:5px; flex-shrink:0;
}

/* ============ TICKER STRIP ============ */
.ticker-strip{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding:14px 20px; background:var(--panel); border-bottom:1px solid var(--border);
}
.ticker-pair{display:flex; align-items:center; gap:10px;}
.pair-icon{width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#F7931A,#C97213); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; color:#1a0f00; overflow:hidden;}
.pair-icon-fallback{display:none; align-items:center; justify-content:center; width:100%; height:100%;}
.pair-icon-fallback.visible{display:flex;}
.pair-name{font-weight:700; font-size:16px;}
.pair-full{font-size:10.5px; color:var(--text-3);}
.ticker-price{font-size:22px; font-weight:700; font-family:var(--font-num);}
.ticker-change{font-size:13px; font-weight:600; font-family:var(--font-num); display:flex; align-items:center; gap:3px;}
.badge-strongbuy{
  background:var(--buy-dim); color:var(--buy); border:1px solid #1b5c3a;
  padding:6px 14px; border-radius:var(--radius-s); font-weight:700; font-size:12px; letter-spacing:.3px;
  display:flex; align-items:center; gap:8px;
}
.badge-strongbuy .conf{font-family:var(--font-num); opacity:.85;}
.badge-strongbuy.sell{background:var(--sell-dim); color:var(--sell); border-color:#5c2027;}
.badge-strongbuy.neutral{background:var(--neutral-dim); color:var(--neutral); border-color:var(--border);}

/* ---- Pair select dropdown (replaces static ticker pair) ---- */
.pair-select{position:relative;}
.ticker-pair{
  display:flex; align-items:center; gap:10px; background:none; border:none; padding:4px 6px; margin:-4px -6px;
  border-radius:var(--radius-s); color:var(--text-1); font-family:inherit;
}
.ticker-pair:hover{background:var(--panel-2);}
.ticker-pair .chevron{width:14px; height:14px; stroke:var(--text-3); margin-left:2px;}
.pair-select.open .ticker-pair .chevron{transform:rotate(180deg);}
.pair-dropdown{
  display:none; position:absolute; top:calc(100% + 8px); left:0; width:280px; z-index:60;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-m);
  box-shadow:0 12px 28px rgba(0,0,0,.45); padding:0;
  max-height:min(680px, calc(100vh - 110px)); overflow:hidden;
}
.pair-select.open .pair-dropdown{display:block;}
#watchlistRows{
  max-height:min(615px, calc(100vh - 175px));
  overflow-y:auto;
  padding:0 14px 6px;
  scrollbar-width:thin;
}

/* ============ CHART CONTEXT MENU ============ */
.chart-ctx-menu{
  position:fixed; z-index:200; min-width:210px;
  background:#181d29; border:1px solid var(--border); border-radius:var(--radius-s);
  box-shadow:0 12px 28px rgba(0,0,0,.45);
  padding:5px; display:none; font-size:12.5px;
}
.chart-ctx-menu.open{display:block;}
.chart-ctx-menu button{
  display:flex; align-items:center; gap:9px; width:100%;
  background:none; border:none; color:var(--text-1); text-align:left;
  padding:8px 9px; border-radius:6px; font-size:12.5px; font-family:inherit;
}
.chart-ctx-menu button:hover{background:var(--panel-2);}
.chart-ctx-menu button svg{width:14px; height:14px; stroke:var(--text-2); flex-shrink:0;}
.chart-ctx-menu button .kbd{
  margin-left:auto; font-size:10.5px; color:var(--text-3);
  font-family:var(--font-num);
}
.ticker-mini{display:flex; gap:20px; margin-left:auto; flex-wrap:wrap;}

/* ============ LAYOUT GRID ============ */
.dashboard{
  display:grid;
  grid-template-columns: 260px minmax(0,1fr) 280px;
  gap:14px; padding:14px 20px;
}
.col-left, .col-right{display:flex; flex-direction:column; gap:14px; min-width:0;}
.col-center{display:flex; flex-direction:column; gap:14px; min-width:0;}

.panel{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-m);
  overflow:hidden;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 14px; border-bottom:1px solid var(--border-soft);
}
.panel-title{font-size:11px; font-weight:700; letter-spacing:.6px; color:var(--text-2); text-transform:uppercase;}
.panel-body{padding:12px 14px;}

/* ---- Tabbed panel ---- */
.tab-bar{display:flex; gap:2px; padding:6px 8px 0; border-bottom:1px solid var(--border-soft); overflow-x:auto; overflow-y:visible;}
.tab-btn{
  background:none; border:none; color:var(--text-2); font-size:11.5px; font-weight:600;
  line-height:1.4; padding:10px 13px; border-radius:6px 6px 0 0; white-space:nowrap; position:relative; flex-shrink:0;
}
.tab-btn:hover{color:var(--text-1);}
.tab-btn.active{color:var(--text-1);}
.tab-btn.active::after{content:''; position:absolute; left:8px; right:8px; bottom:-1px; height:2px; background:var(--accent); border-radius:2px;}
.tab-badge{
  display:none;
  position:absolute; top:3px; right:2px;
  min-width:15px; height:15px; padding:0 3px;
  align-items:center; justify-content:center;
  border-radius:999px;
  background:#EF4444; color:#fff;
  font:700 9px var(--font-num); line-height:1;
  box-shadow:0 0 0 2px var(--panel,#0B0E18);
}
.tab-badge.visible{display:inline-flex;}
.tab-content{display:none;}
.tab-content.active{display:block;}
.tab-pane-body{padding:14px;}

/* ---- Collapsible panel (dropdown) ---- */
.panel-head.collapsible-head{cursor:pointer; user-select:none;}
.panel-head-right{display:flex; align-items:center; gap:9px;}
.panel-summary{font-size:10.5px; color:var(--text-3); font-family:var(--font-num); white-space:nowrap;}
.chevron{width:14px; height:14px; flex-shrink:0; stroke:var(--text-3); transition:transform .2s ease;}
.panel-body-collapsible{max-height:900px; overflow:hidden; transition:max-height .3s ease;}
.panel.collapsed .panel-body-collapsible{max-height:0;}
.panel.collapsed .panel-head.collapsible-head{border-bottom-color:transparent;}
.panel.collapsed .chevron{transform:rotate(-90deg);}

/* ---- Signal Methods ---- */
.method-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 0; border-bottom:1px solid var(--border-soft);
}
.method-row:last-child{border-bottom:none;}
.method-name{font-size:12px; color:var(--text-1); font-weight:500;}
.method-right{display:flex; align-items:center; gap:8px;}
.status-chip{font-size:10px; font-weight:700; padding:3px 7px; border-radius:4px; letter-spacing:.3px;}
.status-chip.bullish{background:var(--buy-dim); color:var(--buy);}
.status-chip.bearish{background:var(--sell-dim); color:var(--sell);}
.status-chip.neutral{background:var(--neutral-dim); color:var(--neutral);}
.status-chip.strong{background:var(--accent-dim); color:var(--accent);}
.method-conf{font-size:11px; color:var(--text-2); font-family:var(--font-num); width:32px; text-align:right;}
.method-switch{width:28px; height:16px; margin-left:2px;}
.method-switch::after{width:11px; height:11px;}
.method-switch.on::after{left:14px;}
.method-row.method-disabled{opacity:.4;}

.methods-bulk-actions{display:flex; gap:8px; padding:8px 0 4px;}
.methods-bulk-btn{
  flex:1; background:var(--panel-2); color:var(--text-2); border:1px solid var(--border);
  border-radius:var(--radius-s); padding:6px 8px; font-size:11px; font-weight:600;
}
.methods-bulk-btn:hover{color:var(--text-1); border-color:var(--text-3);}

/* ---- P1-P5: Gate Filter (status + kontrol per gate) ---- */
.gate-status-list{display:flex; flex-direction:column; gap:2px; padding:4px 0;}
.gate-status-row{
  display:grid; grid-template-columns:86px auto 1fr; align-items:center;
  gap:8px; padding:7px 0; border-bottom:1px solid var(--border-soft);
}
.gate-status-row:last-child{border-bottom:none;}
.gate-status-label{font-size:11px; font-weight:700; color:var(--text-1);}
.gate-status-detail{font-size:10.5px; color:var(--text-3); text-align:right; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.gate-note{
  font-size:10.5px; color:var(--text-3); line-height:1.5;
  padding:8px 10px; margin:6px 0 2px; border:1px dashed var(--border);
  border-radius:var(--radius-s); background:var(--panel-2);
}
.gate-settings-list{display:flex; flex-direction:column;}
.gate-row{padding:9px 0; border-bottom:1px solid var(--border-soft);}
.gate-row:last-child{border-bottom:none;}
.gate-row.method-disabled{opacity:.4;}
.gate-row-main{display:flex; align-items:center; gap:8px;}
.gate-row-main .gate-name{flex:1; font-size:12px; color:var(--text-1); font-weight:500; min-width:0;}
.gate-row-main .gate-mode{width:auto; min-width:96px;}
.gate-params{display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:7px; padding-left:2px;}
.gate-param{display:inline-flex; align-items:center; gap:6px; font-size:10.5px; color:var(--text-3);}
.gate-param .gate-param-input{width:64px; padding:3px 6px; font-size:11px;}
.methods-bulk-btn.off:hover{color:var(--sell); border-color:#5c2027;}
.methods-bulk-btn:not(.off):hover{color:var(--buy); border-color:#1b5c3a;}

/* ---- Chart panel ---- */
.chart-toolbar{
  display:flex; align-items:center; gap:6px; padding:9px 14px; border-bottom:1px solid var(--border-soft);
  overflow-x:auto;
}
.chart-tf{background:none; border:1px solid transparent; color:var(--text-3); font-size:11.5px; font-weight:600; padding:4px 8px; border-radius:5px;}
.chart-tf.active{color:var(--text-1); background:var(--panel-2); border-color:var(--border);}
.tv-chart-wrap{position:relative; padding:6px; height:420px; min-height:200px;}
.tv-chart-wrap .tradingview-widget-container{height:100%; width:100%;}
.chart-resize-handle{
  height:14px; margin-top:-4px; display:flex; align-items:center; justify-content:center;
  cursor:ns-resize; touch-action:none; user-select:none; background:var(--panel);
  border-top:1px solid var(--border-soft);
}
.chart-resize-handle::before{
  content:''; width:36px; height:4px; border-radius:3px; background:var(--border);
}
.chart-resize-handle:hover::before, .chart-resize-handle.dragging::before{background:var(--accent);}
.chart-legend{display:flex; gap:12px; margin-left:auto; font-size:10.5px; flex-wrap:wrap;}
.legend-item{display:flex; align-items:center; gap:5px; color:var(--text-2);}
.legend-swatch{width:10px; height:2.5px; border-radius:2px;}
.chart-annot{
  position:absolute; font-size:10px; font-family:var(--font-num); font-weight:600;
  padding:2px 6px; border-radius:4px; pointer-events:none;
}

/* ---- Two-up row: pattern + score ---- */
.row-2up{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.pattern-name{font-size:18px; font-weight:700; margin:4px 0 2px;}
.pattern-meta{display:flex; gap:18px; margin-top:12px;}
.pm-item{display:flex; flex-direction:column; gap:2px;}
.pm-label{font-size:9.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.4px;}
.pm-value{font-size:13px; font-weight:700; font-family:var(--font-num);}
.status-pill{display:inline-block; font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; letter-spacing:.4px;}
.status-pill.confirmed{background:var(--buy-dim); color:var(--buy);}

/* Chip status Chart Pattern per timeframe (15m/1H/4H/1D/1W) — pindai semua TF */
.cp-tf-list{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;}
.cp-tf-chip{
  display:inline-block; font-size:10px; font-weight:700; font-family:var(--font-num);
  padding:3px 8px; border-radius:6px; letter-spacing:.4px;
  background:var(--panel-2); border:1px solid var(--border-soft); color:var(--text-3);
}
.cp-tf-chip.confirmed.bullish{background:var(--buy-dim); border-color:transparent; color:var(--buy);}
.cp-tf-chip.confirmed.bearish{background:var(--sell-dim); border-color:transparent; color:var(--sell);}

.score-wrap{display:flex; align-items:center; gap:18px;}
.gauge{position:relative; width:100px; height:100px; flex-shrink:0;}
.gauge svg{transform:rotate(-90deg);}
.gauge-track{fill:none; stroke:var(--border); stroke-width:9;}
.gauge-fill{fill:none; stroke:var(--buy); stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset 1s ease;}
.gauge-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.gauge-score{font-size:24px; font-weight:800; font-family:var(--font-num);}
.gauge-max{font-size:9.5px; color:var(--text-3);}
.score-info{flex:1;}
.score-label{font-size:13px; font-weight:700; color:var(--buy); margin-bottom:2px;}
.score-conf{font-size:11px; color:var(--text-2);}
.breakdown{margin-top:12px; display:flex; flex-direction:column; gap:7px;}
.bd-row{display:grid; grid-template-columns:78px 1fr 32px; align-items:center; gap:8px;}
.bd-label{font-size:10.5px; color:var(--text-2);}
.bd-bar{height:5px; background:var(--panel-2); border-radius:4px; overflow:hidden;}
.bd-fill{height:100%; background:var(--buy); border-radius:4px;}
.bd-val{font-size:10.5px; font-family:var(--font-num); text-align:right; color:var(--text-1);}

/* ---- badges row ---- */
.badges-row{display:flex; flex-wrap:wrap; gap:8px;}
.tag{
  display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
  padding:6px 11px; border-radius:20px; letter-spacing:.2px;
}
.tag-dot{width:6px; height:6px; border-radius:50%;}
.tag.g{background:var(--buy-dim); color:var(--buy); border:1px solid #1b5c3a;}
.tag.g .tag-dot{background:var(--buy);}
.tag.r{background:var(--sell-dim); color:var(--sell); border:1px solid #5c1c24;}
.tag.r .tag-dot{background:var(--sell);}
.tag.o{background:var(--warn-dim); color:var(--warn); border:1px solid #5c4818;}
.tag.o .tag-dot{background:var(--warn);}

/* ---- reasons ---- */
.reasons{display:flex; flex-direction:column; gap:7px;}
.reason-item{display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--text-2);}
.reason-check{color:var(--buy); font-weight:700; flex-shrink:0;}

/* ---- Market Condition tab ---- */
.mc-section{margin-top:22px;}
.mc-section:first-child{margin-top:0;}
.mc-section-title{font-size:11px; font-weight:700; letter-spacing:.5px; color:var(--text-2); text-transform:uppercase; margin-bottom:11px;}
.mtf-cell-trend{display:flex; align-items:center; gap:6px; font-family:var(--font-ui); font-weight:700;}
.mtf-dot{width:7px; height:7px; border-radius:50%; flex-shrink:0;}
.mtf-dot.bullish{background:var(--buy);}
.mtf-dot.bearish{background:var(--sell);}
.mtf-dot.neutral{background:var(--neutral);}
.mtf-strength-track{width:80px; height:5px; border-radius:3px; background:var(--panel-2); overflow:hidden; display:inline-block; vertical-align:middle;}
.mtf-strength-fill{display:block; height:100%; border-radius:3px; background:var(--buy);}
.mtf-strength-fill.bearish{background:var(--sell);}
.mtf-strength-fill.neutral{background:var(--neutral);}

.structure-box{background:var(--panel-2); border:1px solid var(--border-soft); border-radius:var(--radius-s); padding:13px 14px;}
.structure-narrative{font-size:12.5px; color:var(--text-2); line-height:1.6; margin-bottom:13px;}
.structure-narrative b{color:var(--text-1);}

.kl-row{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border-soft);}
.kl-row:last-child{border-bottom:none;}
.kl-left{display:flex; align-items:center; gap:9px;}
.kl-type{font-size:9.5px; font-weight:700; letter-spacing:.3px; padding:3px 8px; border-radius:4px;}
.kl-type.resistance{background:var(--sell-dim); color:var(--sell);}
.kl-type.support{background:var(--buy-dim); color:var(--buy);}
.kl-price{font-size:13px; font-weight:700; font-family:var(--font-num);}
.kl-dist{font-size:11px; font-family:var(--font-num); color:var(--text-3);}

/* ---- Top signals ---- */
.ts-row{
  display:flex; align-items:center; justify-content:space-between; padding:9px 0;
  border-bottom:1px solid var(--border-soft);
}
.ts-row:last-child{border-bottom:none;}
.ts-row:hover{background:var(--border-soft);}
.ts-left{display:flex; align-items:center; gap:9px;}
.ts-rank{font-size:10px; color:var(--text-3); font-family:var(--font-num); width:14px;}
.ts-icon{width:22px; height:22px; border-radius:50%; flex-shrink:0;}
.ts-pair{font-size:12px; font-weight:600;}
.ts-right{text-align:right;}
.ts-signal{font-size:10.5px; font-weight:700;}
.ts-conf{font-size:10px; color:var(--text-3); font-family:var(--font-num);}

/* ---- Sentiment ---- */
.sent-bars{display:flex; flex-direction:column; gap:10px; margin-bottom:14px;}
.sent-row{display:flex; align-items:center; gap:9px;}
.sent-label{font-size:11px; width:58px; color:var(--text-2); font-weight:600;}
.sent-bar{flex:1; height:8px; background:var(--panel-2); border-radius:4px; overflow:hidden;}
.sent-fill{height:100%; border-radius:4px;}
.sent-pct{font-size:11px; font-family:var(--font-num); width:32px; text-align:right;}
.sent-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:12px; border-top:1px solid var(--border-soft);}
.sg-item{display:flex; flex-direction:column; gap:2px;}
.sg-label{font-size:9.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.3px;}
.sg-val{font-size:12px; font-weight:700; font-family:var(--font-num);}

/* ---- Watchlist ---- */
.watchlist-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:5px 0; border-bottom:1px solid var(--border-soft); cursor:pointer;
}
.watchlist-row:last-child{border-bottom:none;}
.watchlist-row.active{background:var(--panel-2); margin:0 -14px; padding:5px 14px; border-radius:6px; border-bottom-color:transparent;}
.wl-left{display:flex; align-items:center; gap:6px; min-width:0;}
.wl-icon{width:22px; height:22px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; color:#fff;}
.wl-name{font-size:11px; font-weight:700;}
.wl-signal{font-size:9px; font-weight:700; letter-spacing:.2px;}
.wl-signal.buy{color:var(--buy);}
.wl-signal.sell{color:var(--sell);}
.wl-signal.neutral{color:var(--neutral);}
.wl-right{display:flex; flex-direction:row; align-items:center; gap:4px; flex-shrink:0;}
.wl-price{font-size:10px; font-weight:700; font-family:var(--font-num);}
.wl-change{font-size:9px; font-weight:700; letter-spacing:.2px; font-family:var(--font-num);}
.wl-change.up{color:var(--buy);}
.wl-change.down{color:var(--sell);}
.wl-change.neutral{color:var(--neutral);}

/* ---- Alerts ---- */
.alert-row{
  display:flex; align-items:center; justify-content:space-between; padding:8px 0;
  border-bottom:1px solid var(--border-soft); font-size:12px; color:var(--text-1);
}
.alert-row:last-child{border-bottom:none;}
.switch{position:relative; width:34px; height:19px; background:var(--panel-2); border:1px solid var(--border); border-radius:20px; flex-shrink:0;}
.switch::after{content:''; position:absolute; width:13px; height:13px; border-radius:50%; background:var(--text-3); top:2px; left:2px; transition:.2s;}
.switch.on{background:var(--buy-dim); border-color:#1b5c3a;}
.switch.on::after{background:var(--buy); left:17px;}

/* ---- Notification channels (Telegram / WhatsApp) ---- */
.notif-channel{padding:11px 0; border-bottom:1px solid var(--border-soft);}
.notif-channel:last-child{border-bottom:none;}
.notif-channel-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:2px;}
.notif-channel-name{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;}
.notif-ico{width:20px; height:20px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0;}
.notif-ico.tg{background:#12324f; color:#4C8DFF;}
.notif-ico.wa{background:#123a29; color:#2FD980;}
.notif-fields{display:none; flex-direction:column; gap:8px; margin-top:9px;}
.notif-channel.open .notif-fields{display:flex;}
.notif-field label{display:block; font-size:9.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.4px; font-weight:600; margin-bottom:4px;}
.notif-field .input-sm{width:100%; min-width:0;}
.notif-actions{display:flex; align-items:center; gap:8px; margin-top:2px;}
.notif-status{font-size:10.5px; color:var(--text-3); flex:1;}
.notif-status.ok{color:var(--buy);}
.notif-status.err{color:var(--sell);}
.notif-note{font-size:10px; color:var(--text-3); line-height:1.5;}
.notif-live-toggle{display:flex; align-items:center; justify-content:space-between; padding-top:10px; margin-top:2px; border-top:1px dashed var(--border-soft);}
.notif-live-toggle span{font-size:11.5px; color:var(--text-2);}

/* ---- History table ---- */
.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:12px;}
thead th{
  text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-3);
  padding:10px 14px; border-bottom:1px solid var(--border); white-space:nowrap; font-weight:600;
}
tbody td{padding:10px 14px; border-bottom:1px solid var(--border-soft); white-space:nowrap; font-family:var(--font-num); color:var(--text-1);}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--panel-2);}
.sig-buy{color:var(--buy); font-weight:700; font-family:var(--font-ui);}
.sig-sell{color:var(--sell); font-weight:700; font-family:var(--font-ui);}
.pill-result{font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:4px; font-family:var(--font-ui);}
.pill-win{background:var(--buy-dim); color:var(--buy);}
.pill-loss{background:var(--sell-dim); color:var(--sell);}
.pill-active{background:var(--accent-dim); color:var(--accent);}

/* ---- Volume Leaders ---- */
.vol-tabs{display:flex; gap:2px; padding:2px; background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-s); margin-bottom:11px;}
.vol-tab-btn{
  flex:1; background:none; border:none; color:var(--text-2); font-size:11px; font-weight:700;
  letter-spacing:.3px; padding:7px 6px; border-radius:5px; text-transform:uppercase;
}
.vol-tab-btn.active.buy{background:var(--buy-dim); color:var(--buy);}
.vol-tab-btn.active.sell{background:var(--sell-dim); color:var(--sell);}
.vol-list{display:flex; flex-direction:column; gap:10px;}
.vol-row{display:flex; flex-direction:column; gap:5px;}
.vol-row-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.vol-rank{
  width:16px; height:16px; border-radius:4px; background:var(--panel-2); color:var(--text-3);
  font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:var(--font-num);
}
.vol-pair{display:flex; align-items:center; gap:7px; min-width:0;}
.vol-pair-name{font-size:12px; font-weight:600; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.vol-figures{display:flex; flex-direction:column; align-items:flex-end; gap:0; flex-shrink:0;}
.vol-amount{font-size:12px; font-weight:700; font-family:var(--font-num);}
.vol-share{font-size:9.5px; color:var(--text-3); font-family:var(--font-num);}
.vol-bar-track{height:5px; border-radius:3px; background:var(--panel-2); overflow:hidden;}
.vol-bar-fill{height:100%; border-radius:3px;}
.vol-bar-fill.buy{background:linear-gradient(90deg,#1b5c3a,var(--buy));}
.vol-bar-fill.sell{background:linear-gradient(90deg,#7a2530,var(--sell));}
.vol-content{display:none;}
.vol-content.active{display:flex;}
.vol-tf-row{display:flex; gap:3px; margin-bottom:10px; overflow-x:auto;}
.vol-tf-btn{
  background:var(--panel-2); border:1px solid var(--border); color:var(--text-2); font-size:10.5px; font-weight:600;
  padding:5px 8px; border-radius:5px; flex-shrink:0; font-family:var(--font-num);
}
.vol-tf-btn.active{background:var(--accent-dim); border-color:#1f3a6e; color:var(--accent);}
.vol-refresh-btn{background:transparent; border:1px solid var(--border); border-radius:var(--radius-s); color:var(--text-3); width:22px; height:22px; line-height:1; cursor:pointer; font-size:13px;}
.vol-refresh-btn:hover{color:var(--text-1); border-color:var(--accent);}
.vol-refresh-btn.spinning{animation:volSpin 0.8s linear infinite;}
@keyframes volSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.vol-screen-meta{margin-top:9px; font-size:9.5px; color:var(--text-3); text-align:right;}
.vol-screen-empty{font-size:11px; color:var(--text-3); padding:14px 4px; text-align:center;}

/* ---- Order Book ---- */
.ob-wrap{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.ob-col-head{display:grid; grid-template-columns:1fr 1fr 1fr; font-size:9.5px; text-transform:uppercase; letter-spacing:.3px; color:var(--text-3); padding:0 2px 8px; border-bottom:1px solid var(--border-soft); margin-bottom:2px;}
.ob-col-head span:nth-child(2){text-align:right;}
.ob-col-head span:nth-child(3){text-align:right;}
.ob-row{position:relative; display:grid; grid-template-columns:1fr 1fr 1fr; font-size:12px; font-family:var(--font-num); padding:3.5px 2px; z-index:1;}
.ob-row .ob-bar{position:absolute; top:0; bottom:0; z-index:-1; opacity:.16;}
.ob-asks .ob-bar{right:0; background:var(--sell);}
.ob-bids .ob-bar{right:0; background:var(--buy);}
.ob-row .price{font-weight:700;}
.ob-asks .price{color:var(--sell);}
.ob-bids .price{color:var(--buy);}
.ob-row .size, .ob-row .total{text-align:right; color:var(--text-2);}
.ob-spread{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 0; margin-bottom:14px; border-top:1px dashed var(--border-soft); border-bottom:1px dashed var(--border-soft);
  font-size:11.5px; color:var(--text-2);
}
.ob-spread .num{color:var(--text-1); font-weight:700;}

footer.status-bar{
  position:fixed; bottom:0; left:0; right:0; height:26px;
  background:var(--bg-raised); border-top:1px solid var(--border);
  display:flex; align-items:center; gap:18px; padding:0 20px; font-size:10.5px; color:var(--text-3); z-index:50;
}

/* ============ STRATEGY: BACKTEST + BOT ============ */
.control-row{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; margin-bottom:14px;}
.control-field{display:flex; flex-direction:column; gap:4px;}
.control-field label{font-size:9.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.4px; font-weight:600;}
.select-sm, .input-sm{
  background:var(--panel-2); color:var(--text-1); border:1px solid var(--border);
  border-radius:var(--radius-s); padding:7px 9px; font-size:12px; font-family:inherit; min-width:120px;
}
.input-sm{min-width:70px; font-family:var(--font-num);}
.input-sm.date{min-width:118px;}
/* Total Modal mode Real: dikunci mengikuti Saldo Real (lihat setMode() di
   features.js) -- gaya visual biar kelihatan beda dari field yang bisa
   diketik bebas, bukan cuma soal fungsi. */
.input-sm:read-only{ opacity:.65; cursor:not-allowed; }

.btn-primary{
  background:var(--buy); color:#062012; border:none; border-radius:var(--radius-s);
  padding:8px 16px; font-size:12px; font-weight:700; letter-spacing:.2px;
  transition:opacity .15s;
}
.btn-primary:hover{opacity:.88;}
.btn-primary:disabled{opacity:.5; cursor:default;}
.btn-danger{
  background:var(--sell); color:#2b0409; border:none; border-radius:var(--radius-s);
  padding:8px 16px; font-size:12px; font-weight:700; letter-spacing:.2px;
}
.btn-ghost{
  background:none; color:var(--text-2); border:1px solid var(--border); border-radius:var(--radius-s);
  padding:8px 14px; font-size:12px; font-weight:600;
}
.positions-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px 10px; border-bottom:1px solid var(--border-soft);
}
.positions-title{font-size:12px; font-weight:700; color:var(--text-1);}
.positions-live-status{
  display:inline-flex; align-items:center; margin-left:6px; padding:2px 6px;
  border:1px solid var(--border); border-radius:999px; color:var(--text-3);
  font-size:8.5px; font-weight:700; letter-spacing:.35px; vertical-align:middle;
}
.positions-live-status.active{color:var(--buy); border-color:rgba(99,230,164,.35); background:var(--buy-dim);}
.positions-live-status.active::before{content:''; width:5px; height:5px; margin-right:4px; border-radius:50%; background:var(--buy); box-shadow:0 0 0 3px var(--buy-glow);}
.positions-count{font-size:10px; color:var(--text-3); margin-top:2px;}
.positions-active-symbol{font-size:10px; color:var(--text-2); margin-top:4px; font-family:var(--font-ui);}
.positions-table{font-size:11px;}
.positions-table thead th{padding:7px 8px; font-size:9px;}
.positions-table tbody td{padding:7px 8px;}
.position-timeframe{font-family:var(--font-ui); color:var(--text-2); font-weight:600;}
.positions-active-symbol .pill-running{color:#2FD980;}
.positions-active-symbol .pill-stopped{color:var(--text-3);}
.btn-close-all, .btn-close-position{
  color:var(--sell); border:1px solid rgba(241,73,91,.4); background:var(--sell-dim);
  border-radius:var(--radius-s); font-weight:700; white-space:nowrap;
}
.btn-close-all{padding:7px 11px; font-size:11px;}
.btn-close-position{padding:5px 8px; font-size:10px;}
.btn-close-all:hover, .btn-close-position:hover{
  background:rgba(241,73,91,.22); border-color:var(--sell);
}
.btn-close-all:disabled{opacity:.45; cursor:default;}
.position-action-cell{font-family:var(--font-ui); text-align:right; white-space:nowrap;}
.position-action-cell{display:flex; gap:6px; justify-content:flex-end; align-items:center;}
.btn-icon-view{
  width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-s); border:1px solid rgba(47,217,128,.4); background:rgba(47,217,128,.12);
  cursor:pointer; font-size:12px; line-height:1; color:#2FD980;
}
.btn-icon-view:hover{background:rgba(47,217,128,.22); border-color:#2FD980;}
.position-empty{color:var(--text-3); font-family:var(--font-ui); text-align:center;}
.position-row-clickable{cursor:pointer;}
.position-row-clickable:hover{background:rgba(140,150,180,0.08);}
.position-row-clickable .position-action-cell{cursor:default;}

/* Popup Bot Aktif (dipicu icon lihat di tabel Posisi Terbuka) */
.modal-overlay{
  position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
}
.modal-box{
  position:relative; width:min(360px, 92vw); background:#12141f;
  border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.modal-close{
  position:absolute; top:8px; right:10px; background:none; border:none;
  color:var(--text-3); font-size:20px; cursor:pointer; line-height:1;
}
.modal-close:hover{color:var(--text-1);}

/* Popup konfirmasi custom (pengganti window.confirm() browser bawaan) */
.confirm-modal-box{
  position:relative; width:min(380px, 92vw); background:#12141f;
  border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.5); font-family:var(--font-ui);
}
.confirm-modal-msg{font-size:14px; line-height:1.5; color:var(--text-1); white-space:pre-wrap; margin-bottom:18px;}
.confirm-modal-actions{display:flex; justify-content:flex-end; gap:8px;}
.confirm-modal-btn{
  padding:8px 16px; border-radius:8px; font-size:13px; font-weight:700;
  cursor:pointer; border:1px solid rgba(255,255,255,.14); background:var(--panel-2); color:var(--text-1);
}
.confirm-modal-btn:hover{filter:brightness(1.15);}
.confirm-modal-btn.confirm-modal-ok{background:#e5484d; border-color:#e5484d; color:#fff;}
.confirm-modal-btn.confirm-modal-ok:hover{background:#f2555a;}

.bot-info-symbol{font-size:15px; font-weight:800; margin-bottom:2px;}
.bot-info-meta{font-size:11px; color:var(--text-2); margin-bottom:14px;}
.bot-info-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;}
.bot-info-item{background:var(--panel-2); border-radius:8px; padding:8px 10px;}
.bot-info-item .label{font-size:9.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.4px;}
.bot-info-item .val{font-size:13px; font-weight:700; font-family:var(--font-num); margin-top:2px;}

.stat-mini-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:14px;}
.stat-card{background:var(--panel-2); border:1px solid var(--border-soft); border-radius:var(--radius-s); padding:9px 10px;}
.stat-card .sc-label{font-size:9.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.3px; margin-bottom:4px;}
.stat-card .sc-val{font-size:16px; font-weight:700; font-family:var(--font-num);}

.equity-wrap{margin-bottom:12px;}
#equityChart{width:100%; height:120px; display:block;}

.bt-table-wrap{overflow-x:auto;}
.bt-table{width:100%; border-collapse:collapse; font-size:11.5px;}
.bt-table th{text-align:left; font-size:9.5px; text-transform:uppercase; color:var(--text-3); padding:7px 8px; border-bottom:1px solid var(--border); white-space:nowrap; font-weight:600;}
.bt-table td{padding:7px 8px; border-bottom:1px solid var(--border-soft); font-family:var(--font-num); white-space:nowrap;}
.bt-table tr:last-child td{border-bottom:none;}

/* Multi-Bot Runner (P4) — daftar bot aktif per user, bebas berapapun coin */
.bot-list-wrap{margin-bottom:16px; padding:12px; background:var(--panel-2); border:1px solid var(--border-soft); border-radius:var(--radius-s);}
.bot-list-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; flex-wrap:wrap;}
.bot-list-head h4{margin:0; font-size:13px; color:var(--text-2); font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.04em;}
.bot-list-count{color:var(--text-3); font-weight:400; text-transform:none; letter-spacing:0;}
.bot-list-cards{display:flex; flex-direction:column; gap:8px;}
.bot-list-empty{color:var(--text-3); font-family:var(--font-ui); font-size:13px; padding:10px 4px;}
.bot-card{display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-s); cursor:pointer; flex-wrap:wrap;}
.bot-card:hover{border-color:var(--border-soft); filter:brightness(1.08);}
.bot-card.selected{border-color:#3B82F6;}
.bot-card .bc-dot{width:9px; height:9px; border-radius:50%; background:var(--text-3); flex:none;}
.bot-card .bc-dot.running{background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.18);}
.bot-card .bc-dot.paused{background:#F59E0B;}
.bot-card .bc-main{display:flex; flex-direction:column; gap:2px; min-width:120px;}
.bot-card .bc-symbol{font-family:var(--font-ui); font-weight:700; font-size:13px;}
.bot-card .bc-meta{font-size:11px; color:var(--text-3); font-family:var(--font-ui);}
.bot-card .bc-stats{display:flex; gap:14px; margin-left:auto; flex-wrap:wrap;}
.bot-card .bc-stat{display:flex; flex-direction:column; align-items:flex-end; font-family:var(--font-ui);}
.bot-card .bc-stat-label{font-size:10px; color:var(--text-3);}
.bot-card .bc-stat-val{font-size:12px; font-weight:600;}
.bot-card .bc-actions{display:flex; gap:6px; flex:none;}
.bot-card .bc-actions button{font-size:11px; padding:4px 9px;}
.bot-form-head{font-size:12px; color:var(--text-3); font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.04em; margin:4px 0 10px;}
.bot-status-row{display:flex; align-items:center; gap:10px; margin-bottom:14px; padding:10px 12px; background:var(--panel-2); border:1px solid var(--border-soft); border-radius:var(--radius-s);}
.status-dot-lg{width:9px; height:9px; border-radius:50%; background:var(--text-3); flex-shrink:0;}
.status-dot-lg.running{background:var(--buy); box-shadow:0 0 0 4px var(--buy-glow);}
.status-dot-lg.running::after{content:''; }
.bot-status-text{font-size:12.5px; font-weight:700; color:var(--text-2);}
.bot-status-text.running{color:var(--buy);}
.bot-uptime{margin-left:auto; font-size:11px; color:var(--text-3); font-family:var(--font-num);}

.risk-row{display:flex; gap:8px; margin-bottom:14px;}

.log-list{display:flex; flex-direction:column-reverse; gap:6px; max-height:170px; overflow-y:auto; padding-right:4px;}
.log-item{display:flex; gap:8px; font-size:11px; color:var(--text-2); align-items:flex-start;}
.log-time{color:var(--text-3); font-family:var(--font-num); flex-shrink:0; width:52px;}
.log-item.hl-buy{color:var(--buy);}
.log-item.hl-sell{color:var(--sell);}

/* ---- Alert feed tab ---- */
.alert-feed-row{
  display:flex; align-items:center; gap:11px; padding:10px 0;
  border-bottom:1px solid var(--border-soft); font-size:12px;
}
.alert-feed-row:last-child{border-bottom:none;}
.alert-time{font-size:10.5px; color:var(--text-3); font-family:var(--font-num); width:44px; flex-shrink:0;}
.alert-type{font-size:9.5px; font-weight:700; padding:3px 8px; border-radius:4px; letter-spacing:.3px; white-space:nowrap; flex-shrink:0;}
.alert-type.g{background:var(--buy-dim); color:var(--buy);}
.alert-type.r{background:var(--sell-dim); color:var(--sell);}
.alert-type.o{background:var(--warn-dim); color:var(--warn);}
.alert-type.b{background:var(--accent-dim); color:var(--accent);}
.alert-pair{font-weight:600; font-size:11.5px; width:76px; flex-shrink:0;}
.alert-msg{color:var(--text-2); flex:1;}

/* ============ RESPONSIVE: TABLET ============ */
@media (max-width: 1100px){
  .dashboard{grid-template-columns:minmax(0,1fr); padding:12px 14px;}
  .row-2up{grid-template-columns:1fr;}
  .header-stats{display:none;}
  /* Chart + tabs (the main content) first, then signal tools, then side info */
  .col-center{order:1;}
  .col-left{order:2;}
  .col-right{order:3;}
  .search-box{width:170px;}
}

@media (max-width: 900px){
  header.topbar{
    flex-wrap:wrap; height:auto; padding:8px 14px; row-gap:8px;
  }
  .search-box{order:5; width:100%;}
  .exchange-select{order:6;}
  .tf-group{order:7;}
  .header-stats{display:none;}
  .demo-badge{margin-left:auto;}
  .ticker-strip{padding:12px 14px;}
  .ticker-price{font-size:19px;}
  .ticker-mini{gap:16px; row-gap:8px;}
}

/* ============ RESPONSIVE: MOBILE ============ */
@media (max-width: 640px){
  body{font-size:12.5px; padding-bottom:60px;}
  .dashboard{gap:10px; padding:10px;}
  .col-left, .col-center, .col-right{gap:10px;}
  .tv-chart-wrap{height:300px;}
  header.topbar{gap:10px; padding:8px 12px;}
  .brand-sub{display:none;}
  .search-box, .exchange-select{display:none;}
  .tf-group{order:5; width:100%; justify-content:space-between;}
  .tf-btn{flex:1; padding:6px 4px; text-align:center;}
  .notif-bell{display:none;}
  .avatar{width:26px; height:26px;}

  .ticker-strip{gap:10px; padding:10px 12px;}
  .ticker-mini{gap:12px; margin-left:0; width:100%; justify-content:space-between;}
  .pair-name{font-size:14px;}
  .pair-full{display:block;}
  .ticker-price{font-size:17px;}
  .badge-strongbuy{padding:5px 10px; font-size:11px;}

  .panel-head{padding:10px 12px;}
  .panel-body{padding:10px 12px;}
  .tab-btn{padding:9px 11px; font-size:11px;}

  .stat-mini-grid{grid-template-columns:1fr 1fr;}
  .control-row{gap:6px;}
  .select-sm, .input-sm{min-width:100px; font-size:11.5px;}

  .ob-wrap{grid-template-columns:1fr; gap:10px;}

  footer.status-bar{overflow-x:auto; white-space:nowrap; gap:14px; -ms-overflow-style:none; scrollbar-width:none;}
  footer.status-bar::-webkit-scrollbar{display:none;}
}

@media (max-width: 400px){
  .ticker-price{font-size:15px;}
  .badge-strongbuy .conf{display:none;}
  .stat-mini-grid{grid-template-columns:1fr 1fr;}
}

/* ============ QUANTUM PULSE UI REFRESH ============ */
:root{
  --bg:#08090F;
  --bg-raised:#0D0F18;
  --panel:#111421;
  --panel-2:#171A2A;
  --border:#252A3C;
  --border-soft:#1B1F2E;
  --text-1:#F4F2FF;
  --text-2:#A6A8BD;
  --text-3:#6F738A;
  --accent:#F97316;
  --accent-dim:rgba(249,115,22,.14);
  --buy:#63E6A4;
  --buy-dim:rgba(99,230,164,.13);
  --buy-glow:rgba(99,230,164,.18);
  --sell:#FF7185;
  --sell-dim:rgba(255,113,133,.13);
  --warn:#FFD166;
  --warn-dim:rgba(255,209,102,.13);
  --radius-s:10px;
  --radius-m:16px;
}

html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(circle at 8% -8%, rgba(249,115,22,.12), transparent 28rem),
    radial-gradient(circle at 92% 4%, rgba(249,115,22,.07), transparent 24rem),
    var(--bg);
}
button, select, input{min-height:38px;}
button:focus-visible, select:focus-visible, input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

header.topbar{
  height:64px;
  padding:0 clamp(14px,2.5vw,32px);
  gap:16px;
  background:rgba(13,15,24,.86);
  border-bottom-color:rgba(249,115,22,.15);
  backdrop-filter:blur(18px);
}
.brand-mark{
  width:32px;
  height:32px;
  border-radius:11px;
  background:linear-gradient(135deg,#C4B5FD 0%,#8B5CF6 48%,#F97316 120%);
  box-shadow:0 0 24px rgba(249,115,22,.22);
  color:#110D25;
}
.brand-name{letter-spacing:.5px;}
.brand-sub{
  color:var(--accent);
  border-color:rgba(249,115,22,.25);
  background:rgba(249,115,22,.07);
  border-radius:999px;
}
.search-box, select.pill, .icon-btn{
  background:rgba(23,26,42,.75);
  border-color:var(--border);
  border-radius:12px;
}
.search-box{width:240px;}
.tf-group{background:rgba(23,26,42,.75); border-color:var(--border); border-radius:12px;}
.tf-btn{border-radius:8px; min-height:32px;}
.tf-btn.active{background:var(--accent-dim); color:#C4B5FD;}
.avatar{background:linear-gradient(135deg,#F97316,#F97316); box-shadow:0 0 0 3px rgba(249,115,22,.1);}
.demo-badge{border-radius:999px; background:var(--warn-dim); border-color:rgba(255,209,102,.28);}

.ticker-strip{
  gap:18px;
  padding:18px clamp(14px,2.5vw,32px);
  background:linear-gradient(110deg,rgba(17,20,33,.96),rgba(20,22,39,.72));
  border-bottom-color:rgba(249,115,22,.13);
}
.ticker-strip::before{
  content:"MARKET PULSE";
  color:var(--text-3);
  font-size:9px;
  font-weight:800;
  letter-spacing:1.3px;
  position:absolute;
  left:clamp(14px,2.5vw,32px);
  top:5px;
}
.ticker-strip{position:relative;}
.pair-icon{box-shadow:0 0 0 4px rgba(247,147,26,.1);}
.pair-name{font-size:17px;}
.ticker-price{font-size:26px; letter-spacing:-.8px;}
.ticker-change{font-size:13px;}
.badge-strongbuy{
  border-radius:999px;
  background:linear-gradient(100deg,rgba(99,230,164,.16),rgba(249,115,22,.14));
  border-color:rgba(99,230,164,.3);
  padding:8px 14px;
}
.ticker-mini{gap:24px;}

.dashboard{
  grid-template-columns:minmax(220px,260px) minmax(0,1fr) minmax(240px,280px);
  gap:18px;
  padding:20px clamp(14px,2.5vw,32px) 30px;
}
.col-left,.col-center,.col-right{gap:18px;}
.panel{
  background:linear-gradient(145deg,rgba(20,23,37,.98),rgba(15,17,28,.98));
  border-color:rgba(249,115,22,.14);
  border-radius:var(--radius-m);
  box-shadow:0 16px 40px rgba(0,0,0,.12);
}
.panel:hover{border-color:rgba(249,115,22,.26);}
.panel-head{padding:14px 16px; border-bottom-color:var(--border-soft);}
.panel-title{color:#B6B8CC; letter-spacing:.8px;}
.panel-body,.tab-pane-body{padding:16px;}
.stat-card{
  background:rgba(23,26,42,.82);
  border-color:rgba(249,115,22,.12);
  border-radius:12px;
  padding:12px;
}
.stat-card .sc-label{letter-spacing:.5px;}
.chart-toolbar{padding:10px 14px; background:rgba(13,15,24,.45);}
.chart-tf{min-height:34px; border-radius:8px;}
.chart-tf.active{background:var(--accent-dim); border-color:rgba(249,115,22,.2); color:#DDD6FE;}
.tab-bar{background:rgba(13,15,24,.35); padding:7px 9px 0;}
.tab-btn{min-height:42px; border-radius:10px 10px 0 0;}
.tab-btn.active{color:#E9D5FF;}
.tab-btn.active::after{background:linear-gradient(90deg,#F97316,#F97316); height:3px;}
.btn-primary{background:linear-gradient(100deg,#63E6A4,#F97316); border-radius:10px; min-height:42px;}
.btn-danger{border-radius:10px; min-height:42px;}
.btn-ghost{border-radius:10px; min-height:40px;}

/* ---- Clickable controls highlighted for clarity ---- */
#methodsToggle{
  cursor:pointer;
  background:linear-gradient(100deg,rgba(249,115,22,.09),rgba(249,115,22,.04));
  transition:background .2s ease, border-color .2s ease;
}
#methodsToggle:hover{
  background:linear-gradient(100deg,rgba(249,115,22,.17),rgba(249,115,22,.08));
  border-bottom-color:rgba(249,115,22,.32);
}
#methodsToggle .panel-title{color:#C4B5FD;}
#methodsToggle .panel-summary{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--text-3);
}
#volumeScreenToggle{
  cursor:pointer;
  background:linear-gradient(100deg,rgba(249,115,22,.08),rgba(249,115,22,.04));
  transition:background .2s ease, border-color .2s ease;
}
#volumeScreenToggle:hover{
  background:linear-gradient(100deg,rgba(249,115,22,.16),rgba(249,115,22,.08));
  border-bottom-color:rgba(249,115,22,.32);
}
#volumeScreenToggle .panel-title{color:#7DE7D0;}
#volumeScreenToggle .panel-summary{
  display:flex;
  align-items:center;
  gap:6px;
  color:#8A94A6;
}
#volumeScreenToggle .vol-summary-up{color:#63E6A4;}
#volumeScreenToggle .vol-summary-down{color:#FF7185;}
#volumeScreenToggle .vol-summary-sep{color:#687089;}
#volumeScreenToggle .vol-refresh-btn{color:#FACC15;}
#volumeScreenToggle .chevron{stroke:#7DD3FC;}
.vol-refresh-btn{min-height:22px;}
.section-dropdown-toggle{
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.section-dropdown-toggle:hover{
  background:linear-gradient(100deg,color-mix(in srgb, var(--section-accent) 14%, transparent),transparent);
  border-bottom-color:color-mix(in srgb, var(--section-accent) 38%, transparent);
}
.section-dropdown-toggle .panel-title{color:var(--section-accent);}
.section-dropdown-toggle .panel-summary{color:var(--section-accent);}
.section-dropdown-toggle .chevron{stroke:var(--section-accent);}
#alertsToggle{--section-accent:#FBBF24;}
#notificationsToggle{--section-accent:#60A5FA;}
#sentimentToggle{--section-accent:#34D399;}
#scoreToggle{--section-accent:#C084FC;}
#notificationsToggle .summary-telegram{color:#60A5FA;}
#notificationsToggle .summary-whatsapp{color:#34D399;}
#sentimentToggle .summary-bullish{color:#63E6A4;}
#sentimentToggle .summary-bearish{color:#FF7185;}
#sentimentToggle .summary-neutral{color:#A5B4FC;}
#scoreToggle .summary-score{color:#63E6A4;}
#scoreToggle .summary-max{color:#8A94A6;}
.summary-sep{color:#687089;}
.summary-bullish{color:#63E6A4;}
.summary-bearish{color:#FF7185;}
.summary-neutral{color:#A5B4FC;}

#chartTf{gap:4px;}
#chartTf .chart-tf{
  border-color:transparent;
  transition:color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
#chartTf .chart-tf:hover{
  background:rgba(255,255,255,.07);
  border-color:currentColor;
  transform:translateY(-1px);
}
#chartTf .chart-tf:nth-child(1){color:#60A5FA;}
#chartTf .chart-tf:nth-child(2){color:#22D3EE;}
#chartTf .chart-tf:nth-child(3){color:#34D399;}
#chartTf .chart-tf:nth-child(4){color:#FACC15;}
#chartTf .chart-tf:nth-child(5){color:#F97316;}
#chartTf .chart-tf:nth-child(6){color:#F472B6;}
#chartTf .chart-tf:nth-child(7){color:#C084FC;}
#chartTf .chart-tf.active{
  background:color-mix(in srgb, currentColor 16%, transparent);
  border-color:color-mix(in srgb, currentColor 42%, transparent);
  color:currentColor;
  box-shadow:0 0 0 1px color-mix(in srgb, currentColor 10%, transparent);
}

#mainTabs .tab-btn{
  transition:color .18s ease, background .18s ease, transform .18s ease;
}
#mainTabs .tab-btn:hover{
  background:rgba(255,255,255,.05);
  transform:translateY(-1px);
}
/* Keep the tab order consistent on desktop and mobile, regardless of
   where the buttons are placed in the markup. */
#mainTabs .tab-btn[data-tab="bot"]{order:1;color:#FBBF24;}          /* Live Bot Runner */
#mainTabs .tab-btn[data-tab="positions"]{order:2;color:#F472B6;}    /* Posisi Running */
#mainTabs .tab-btn[data-tab="backtest"]{order:3;color:#34D399;}     /* Backtest Strategy */
#mainTabs .tab-btn[data-tab="poshistory"]{order:4;color:#22D3EE;}   /* Posisi History */
#mainTabs .tab-btn[data-tab="history"]{order:5;color:#60A5FA;}      /* Signal History */
#mainTabs .tab-btn[data-tab="alerts"]{order:6;color:#FB7185;}       /* Alert Signal */
#mainTabs .tab-btn[data-tab="orderbook"]{order:7;color:#C084FC;}    /* Order Book */
#mainTabs .tab-btn[data-tab="market"]{order:8;color:#C4B5FD;}       /* Market Condition */
#mainTabs .tab-btn.active{
  background:rgba(249,115,22,.08);
  color:currentColor;
}
#mainTabs .tab-btn.active::after{
  background:currentColor;
}

#mainTabsPanel{
  display:flex;
  flex-direction:column;
  min-height:260px;
}
#mainTabsPanel .tab-content.active{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  scrollbar-color:var(--border) transparent;
}
.panel-resize-handle{
  height:16px;
  flex:0 0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:ns-resize;
  touch-action:none;
  user-select:none;
  background:linear-gradient(180deg,transparent,rgba(249,115,22,.035));
  border-top:1px solid var(--border-soft);
}
.panel-resize-handle::before{
  content:"";
  width:44px;
  height:4px;
  border-radius:99px;
  background:var(--border);
  transition:width .18s ease, background .18s ease, box-shadow .18s ease;
}
.panel-resize-handle::after{
  content:"";
  position:absolute;
  width:100%;
  height:16px;
}
.panel-resize-handle:hover::before,
.panel-resize-handle.dragging::before{
  width:64px;
  background:linear-gradient(90deg,#F97316,#F97316);
  box-shadow:0 0 16px rgba(249,115,22,.4);
}

.mobile-nav{
  display:none;
}

/* Tablet keeps the chart visible beside the most important context. */
@media (min-width:761px) and (max-width:1100px){
  .dashboard{
    grid-template-columns:minmax(0,1.55fr) minmax(260px,.85fr);
  }
  .col-center{grid-column:1; grid-row:1; order:initial;}
  .col-right{grid-column:2; grid-row:1; order:initial;}
  .col-left{
    grid-column:1 / -1;
    grid-row:2;
    order:initial;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
  }
  .col-left > .panel:first-child{grid-row:span 2;}
  .col-left > .panel:nth-child(3){grid-column:2;}
}

@media (max-width:760px){
  body{font-size:13px; padding-bottom:82px;}
  header.topbar{
    height:auto;
    min-height:58px;
    padding:9px 12px;
    gap:9px;
  }
  .brand-name{font-size:14px;}
  .brand-mark{width:29px; height:29px;}
  .demo-badge{margin-left:auto;}
  .ticker-strip{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px 12px;
    padding:23px 14px 15px;
  }
  .ticker-strip::before{left:14px; top:5px;}
  .pair-select{min-width:0;}
  .ticker-price{font-size:24px; align-self:end; text-align:right;}
  .ticker-change{grid-column:2; justify-self:end;}
  .badge-strongbuy{grid-column:1; grid-row:2; width:max-content; max-width:100%;}
  .ticker-mini{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin:2px 0 0;
    padding-top:12px;
    border-top:1px solid var(--border-soft);
  }
  .ticker-mini .hstat{align-items:flex-start; min-width:0;}
  .ticker-mini .label{font-size:8px;}
  .ticker-mini .value{font-size:10.5px;}
  .dashboard{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:12px 10px 18px;
  }
  .col-center{order:1;}
  .col-right{order:2;}
  .col-left{order:3;}
  .col-left,.col-center,.col-right{gap:12px;}
  .panel{border-radius:14px;}
  .panel-head{padding:12px 14px;}
  .panel-body,.tab-pane-body{padding:14px;}
  .tv-chart-wrap{height:330px;}
  .chart-toolbar{padding:8px 10px; gap:4px;}
  #chartIndicators{max-width:100%; overflow-x:auto; scrollbar-width:none;}
  #chartIndicators::-webkit-scrollbar{display:none;}
  .tab-bar{overflow-x:auto; scrollbar-width:none; padding:5px 6px 0;}
  .tab-bar::-webkit-scrollbar{display:none;}
  .tab-btn{padding:8px 12px; min-height:44px;}
  #mainTabsPanel{min-height:240px;}
  #mainTabsPanel .tab-content.active{overflow:auto;}
  .stat-mini-grid{gap:8px;}
  .stat-card .sc-val{font-size:15px;}
  .table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  footer.status-bar{display:none;}
  .mobile-nav{
    position:fixed;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    left:10px;
    right:10px;
    bottom:10px;
    height:64px;
    padding:5px;
    background:rgba(17,20,33,.92);
    border:1px solid rgba(249,115,22,.24);
    border-radius:20px;
    box-shadow:0 14px 38px rgba(0,0,0,.4);
    backdrop-filter:blur(18px);
    z-index:80;
  }
  .mobile-nav-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    min-height:52px;
    color:var(--text-3);
    background:transparent;
    border:0;
    border-radius:15px;
    font-size:10px;
    font-weight:700;
  }
  .mobile-nav-btn.active{
    color:#E9D5FF;
    background:linear-gradient(145deg,rgba(249,115,22,.2),rgba(249,115,22,.08));
  }
  .mobile-nav-icon{font-size:17px; line-height:1;}
  .col-left .panel{width:100%;}
}

@media (max-width:400px){
  .ticker-price{font-size:21px;}
  .ticker-mini{grid-template-columns:repeat(2,1fr); row-gap:10px;}
  .ticker-mini .hstat:nth-child(n+3){display:none;}
  .tv-chart-wrap{height:290px;}
}

/* Keep every main tab visible at every viewport width without making the
   header too tall. The compact 4-column grid keeps all tabs static while
   still leaving enough height for labels and touch/click targets. */
#mainTabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2px;
  overflow:visible;
  padding:3px 6px 0;
}
#mainTabs .tab-btn{
  width:100%;
  min-width:0;
  padding:5px 4px;
  min-height:32px;
  font-size:10.5px;
  white-space:normal;
  line-height:1.1;
  text-align:center;
}
@media (max-width:400px){
  #mainTabs{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ============ AUTH SCREEN ============ */
body.auth-locked{overflow:hidden;}
body.auth-locked > *:not(#authScreen){display:none !important;}
#authScreen{
  --auth-purple:#F97316;
  --auth-cyan:#F97316;
  --auth-bg:#090B13;
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 10%,rgba(249,115,22,.16),transparent 27rem),
    radial-gradient(circle at 84% 78%,rgba(249,115,22,.12),transparent 25rem),
    var(--auth-bg);
  color:#F4F2FF;
  font-family:var(--font-ui);
}
#authScreen::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.24;
  pointer-events:none;
  background-image:linear-gradient(rgba(249,115,22,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(249,115,22,.11) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(135deg,#000,transparent 72%);
}
.auth-market-visual{
  position:absolute;
  z-index:0;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  opacity:.72;
}
.auth-market-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(9,11,19,.05),rgba(9,11,19,.6) 72%),
    repeating-linear-gradient(90deg,transparent 0 72px,rgba(249,115,22,.045) 73px,transparent 74px),
    repeating-linear-gradient(0deg,transparent 0 54px,rgba(249,115,22,.035) 55px,transparent 56px);
  mask-image:linear-gradient(90deg,#000 0 56%,transparent 92%);
}
.auth-data-line{
  position:absolute;
  left:4%;
  bottom:9%;
  width:50%;
  height:34%;
  opacity:.27;
  animation:authDataDrift 7s ease-in-out infinite;
}
.auth-data-line svg{width:100%;height:100%;overflow:visible;}
.auth-data-line path{
  fill:none;
  stroke:url(#authBgLine);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:520;
  stroke-dashoffset:520;
  animation:authBgChartDraw 5s ease-out .3s forwards;
}
.auth-data-line .fill{
  fill:url(#authBgArea);
  opacity:.36;
}
@keyframes authBgChartDraw{to{stroke-dashoffset:0;}}
@keyframes authDataDrift{
  0%,100%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(16px,-8px,0);}
}
.auth-candle-field{
  position:absolute;
  left:14%;
  bottom:15%;
  display:flex;
  align-items:flex-end;
  gap:13px;
  height:160px;
  opacity:.32;
  transform:skewY(-7deg);
}
.auth-candle{
  position:relative;
  width:9px;
  height:var(--candle-height);
  border-radius:3px;
  background:linear-gradient(180deg,#F97316,#22A98F);
  box-shadow:0 0 14px rgba(249,115,22,.28);
  animation:authCandlePulse 2.8s ease-in-out infinite;
  animation-delay:var(--candle-delay);
}
.auth-candle::before,.auth-candle::after{
  content:"";
  position:absolute;
  left:50%;
  width:1px;
  background:currentColor;
  transform:translateX(-50%);
}
.auth-candle::before{bottom:100%;height:var(--wick-top);}
.auth-candle::after{top:100%;height:var(--wick-bottom);}
.auth-candle.red{
  background:linear-gradient(180deg,#FF7185,#B93C55);
  box-shadow:0 0 14px rgba(255,113,133,.2);
}
@keyframes authCandlePulse{
  0%,100%{transform:scaleY(1);opacity:.7;}
  50%{transform:scaleY(1.08);opacity:1;}
}
.auth-coin{
  position:absolute;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid rgba(196,181,253,.38);
  border-radius:50%;
  color:#E9E2FF;
  font-family:var(--font-num);
  font-size:14px;
  font-weight:800;
  background:linear-gradient(145deg,rgba(139,92,246,.62),rgba(249,115,22,.32));
  box-shadow:0 0 26px rgba(249,115,22,.2),inset 0 0 12px rgba(255,255,255,.08);
  animation:authCoinFloat 5s ease-in-out infinite;
}
.auth-coin::after{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
}
.auth-coin.btc{top:17%;left:47%;animation-delay:-1s;}
.auth-coin.eth{top:32%;left:57%;width:34px;height:34px;font-size:11px;animation-delay:-3s;}
.auth-coin.sol{top:12%;left:67%;width:28px;height:28px;font-size:9px;animation-delay:-4.2s;}
@keyframes authCoinFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-4deg);}
  50%{transform:translate3d(10px,-14px,0) rotate(7deg);}
}
.auth-market-ticker{
  position:absolute;
  top:10%;
  right:8%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 11px;
  border:1px solid rgba(249,115,22,.18);
  border-radius:9px;
  background:rgba(10,14,25,.52);
  color:#8E95AA;
  font-family:var(--font-num);
  font-size:9px;
  letter-spacing:.35px;
  box-shadow:0 12px 35px rgba(0,0,0,.18);
  animation:authTickerFloat 6s ease-in-out infinite;
}
.auth-market-ticker strong{color:#63E6A4;font-weight:700;}
.auth-market-ticker i{width:5px;height:5px;border-radius:50%;background:#63E6A4;box-shadow:0 0 9px #63E6A4;}
@keyframes authTickerFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(8px);}
}
.auth-transition-sweep{
  position:absolute;
  z-index:4;
  top:-22%;
  left:-66%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:67%;
  height:144%;
  padding-right:clamp(28px,5vw,90px);
  border-radius:0 54% 54% 0 / 0 50% 50% 0;
  background:
    radial-gradient(circle at 76% 48%,rgba(249,115,22,.28),transparent 24%),
    linear-gradient(135deg,#1A1734,#31266D 46%,#196E78);
  box-shadow:20px 0 60px rgba(249,115,22,.16),inset -1px 0 rgba(255,255,255,.18);
  opacity:0;
  pointer-events:none;
}
.auth-transition-sweep::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.7));
}
.auth-sweep-content{
  position:relative;
  z-index:1;
  width:180px;
  color:#F5F1FF;
  transform:translateY(-8px);
}
.auth-sweep-kicker{
  margin-bottom:7px;
  color:#8FF8E3;
  font-family:var(--font-num);
  font-size:9px;
  font-weight:700;
  letter-spacing:1.1px;
}
.auth-sweep-content strong{display:block;font-size:24px;letter-spacing:-.8px;}
.auth-sweep-content small{display:block;margin-top:7px;color:rgba(245,241,255,.68);font-size:10px;line-height:1.45;}
.auth-sweep-chart{height:52px;margin-top:16px;}
.auth-sweep-chart svg{width:100%;height:100%;}
.auth-sweep-chart path{fill:none;stroke:#8FF8E3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:210;stroke-dashoffset:210;animation:authSweepChart 1.1s ease-out .1s forwards;}
@keyframes authSweepChart{to{stroke-dashoffset:0;}}
.auth-sweep-candles{display:flex;align-items:flex-end;gap:6px;height:26px;margin-top:8px;}
.auth-sweep-candles span{position:relative;width:5px;height:var(--sweep-h);border-radius:2px;background:#8FF8E3;}
.auth-sweep-candles span::before{content:"";position:absolute;top:-5px;left:2px;width:1px;height:calc(var(--sweep-h) + 10px);background:rgba(255,255,255,.75);}
.auth-sweep-candles span.red{background:#FF91A1;}
#authScreen.is-transitioning .auth-transition-sweep{
  animation:authSweepRight .78s cubic-bezier(.68,0,.2,1) forwards;
}
#authScreen.is-transitioning:not(.is-register) .auth-transition-sweep{
  left:auto;
  right:-66%;
  justify-content:flex-start;
  padding:0 0 0 clamp(28px,5vw,90px);
  border-radius:54% 0 0 54% / 50% 0 0 50%;
  animation-name:authSweepLeft;
}
@keyframes authSweepRight{
  0%{left:-66%;opacity:0;}
  12%{opacity:1;}
  72%{opacity:1;}
  100%{left:105%;opacity:0;}
}
@keyframes authSweepLeft{
  0%{right:-66%;opacity:0;}
  12%{opacity:1;}
  72%{opacity:1;}
  100%{right:105%;opacity:0;}
}
#authScreen.is-transitioning .auth-market-visual{
  animation:authVisualShift .78s cubic-bezier(.2,.75,.25,1);
}
@keyframes authVisualShift{
  0%{filter:brightness(1);transform:scale(1);}
  38%{filter:brightness(1.42) saturate(1.25);transform:scale(1.035);}
  100%{filter:brightness(1);transform:scale(1);}
}
.auth-orb{
  position:absolute;
  width:360px;
  height:360px;
  border-radius:50%;
  filter:blur(3px);
  opacity:.22;
  pointer-events:none;
  animation:authFloat 12s ease-in-out infinite;
}
.auth-orb.one{top:-170px;left:25%;background:var(--auth-purple);}
.auth-orb.two{right:-150px;bottom:-130px;background:var(--auth-cyan);animation-delay:-5s;}
@keyframes authFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(28px,18px,0) scale(1.08);}
}
.auth-brand-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(32px,7vw,100px);
  overflow:hidden;
}
.auth-brand-panel::after{
  content:"";
  position:absolute;
  width:480px;
  height:480px;
  right:-210px;
  top:50%;
  border:1px solid rgba(249,115,22,.16);
  border-radius:50%;
  box-shadow:0 0 0 42px rgba(249,115,22,.035),0 0 0 84px rgba(249,115,22,.025);
  transform:translateY(-50%);
  pointer-events:none;
}
.auth-brand{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:34px;
}
.auth-brand-mark{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,#C4B5FD,#8B5CF6 48%,#F97316);
  color:#110D25;
  font-weight:900;
  font-size:20px;
  box-shadow:0 0 30px rgba(249,115,22,.25);
}
.auth-brand-name{font-size:17px;font-weight:800;letter-spacing:.8px;}
.auth-brand-sub{
  width:max-content;
  margin-top:2px;
  padding:3px 8px;
  border:1px solid rgba(249,115,22,.25);
  border-radius:99px;
  color:#C4B5FD;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.2px;
}
.auth-copy{position:relative;z-index:1;max-width:580px;}
.auth-eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  color:var(--auth-cyan);
  font-family:var(--font-num);
  font-size:11px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
}
.auth-pulse{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--auth-cyan);
  box-shadow:0 0 0 5px rgba(249,115,22,.12),0 0 18px rgba(249,115,22,.8);
  animation:authPulse 1.8s ease-in-out infinite;
}
@keyframes authPulse{50%{box-shadow:0 0 0 9px rgba(249,115,22,.03),0 0 24px rgba(249,115,22,.95);}}
.auth-copy h1{
  max-width:610px;
  margin:0;
  color:#FBFAFF;
  font-size:clamp(36px,5vw,68px);
  line-height:1.02;
  letter-spacing:-2.8px;
}
.auth-copy h1 span{
  background:linear-gradient(100deg,#C4B5FD,#8B5CF6 45%,#F97316);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.auth-copy p{
  max-width:465px;
  margin:22px 0 0;
  color:#A6A8BD;
  font-size:15px;
  line-height:1.7;
}
.auth-market-card{
  position:relative;
  z-index:1;
  width:min(100%,520px);
  margin-top:40px;
  padding:16px;
  border:1px solid rgba(249,115,22,.17);
  border-radius:18px;
  background:rgba(17,20,33,.58);
  box-shadow:0 20px 60px rgba(0,0,0,.2);
  backdrop-filter:blur(18px);
}
.auth-market-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;}
.auth-market-title{color:#B6B8CC;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;}
.auth-market-live{color:var(--auth-cyan);font-family:var(--font-num);font-size:10px;}
.auth-sparkline{height:82px;overflow:hidden;border-bottom:1px solid rgba(249,115,22,.11);}
.auth-sparkline svg{width:100%;height:100%;overflow:visible;}
.auth-sparkline .line{fill:none;stroke:url(#authLine);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:600;animation:authDraw 3.4s ease-out forwards;}
.auth-sparkline .area{fill:url(#authArea);opacity:.5;}
@keyframes authDraw{to{stroke-dashoffset:0;}}
.auth-market-stats{display:flex;gap:24px;margin-top:13px;}
.auth-market-stat{display:flex;flex-direction:column;gap:3px;}
.auth-market-stat small{color:#6F738A;font-size:9px;text-transform:uppercase;letter-spacing:.5px;}
.auth-market-stat strong{font-family:var(--font-num);font-size:12px;}
.auth-market-stat strong.up{color:#63E6A4;}
.auth-market-stat strong.purple{color:#C4B5FD;}
.auth-form-side{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px clamp(20px,6vw,88px) 32px 20px;
  perspective:1200px;
}
.auth-card-shell{
  display:grid;
  width:min(100%,430px);
  align-items:start;
}
.auth-card-shell.is-switching{
  animation:authShellSwitch 1.02s cubic-bezier(.22,.78,.25,1);
}
@keyframes authShellSwitch{
  0%{filter:brightness(1);}
  38%{filter:brightness(1.22) drop-shadow(0 0 24px rgba(249,115,22,.24));}
  100%{filter:brightness(1);}
}
.auth-view{
  grid-area:1 / 1;
  width:100%;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(34px) rotateY(-5deg) scale(.975);
  transition:
    opacity .56s cubic-bezier(.22,.61,.36,1),
    transform .92s cubic-bezier(.22,.78,.25,1),
    visibility 0s linear .92s;
  animation:none;
}
.auth-register-view{
  transform:translateX(-54px) rotateY(5deg) scale(.975);
}
.auth-view.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(0) rotateY(0) scale(1);
  transition-delay:0s;
}
.auth-form-side.is-register .auth-login-view:not(.is-active){
  transform:translateX(-54px) rotateY(5deg) scale(.975);
}
.auth-form-side.is-register .auth-register-view{
  transform:translateX(0) rotateY(0) scale(1);
}
.auth-form-side:not(.is-register) .auth-register-view:not(.is-active){
  transform:translateX(54px) rotateY(-5deg) scale(.975);
}
.auth-form-side::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:170px;
  height:170px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(249,115,22,.22),transparent 68%);
  opacity:0;
  pointer-events:none;
}
.auth-form-side.is-switching::after{
  animation:authTransitionGlow .62s ease-out;
}
@keyframes authTransitionGlow{
  0%{opacity:0;transform:scale(.3);}
  35%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(1.55);}
}
.auth-card{
  width:min(100%,430px);
  padding:clamp(25px,4vw,40px);
  border:1px solid rgba(249,115,22,.22);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(24,26,44,.94),rgba(13,15,25,.96));
  box-shadow:0 28px 90px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.015) inset;
  backdrop-filter:blur(24px);
  animation:authCardIn .75s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes authCardIn{from{opacity:0;transform:translateY(18px) scale(.98);}to{opacity:1;transform:none;}}
.auth-card-kicker{
  margin-bottom:8px;
  color:#F97316;
  font-family:var(--font-num);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
}
.auth-card h2{margin:0;color:#F8F7FF;font-size:30px;letter-spacing:-.8px;}
.auth-card-intro{margin:9px 0 28px;color:#8589A2;font-size:13px;line-height:1.55;}
.auth-field{margin-bottom:16px;}
.auth-field label{
  display:block;
  margin-bottom:7px;
  color:#B6B8CC;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2px;
}
.auth-input-wrap{position:relative;}
.auth-input-wrap svg{position:absolute;top:50%;left:14px;width:16px;height:16px;transform:translateY(-50%);stroke:#747991;pointer-events:none;}
.auth-input-wrap input{
  width:100%;
  min-height:48px;
  padding:0 14px 0 43px;
  border:1px solid #2B3044;
  border-radius:12px;
  outline:none;
  background:rgba(8,10,18,.62);
  color:#F4F2FF;
  font:inherit;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.auth-input-wrap input::placeholder{color:#595E74;}
.auth-input-wrap input:focus{
  border-color:#F97316;
  background:rgba(8,10,18,.84);
  box-shadow:0 0 0 4px rgba(249,115,22,.11);
}
.auth-password-toggle{
  position:absolute;
  top:50%;
  right:9px;
  width:32px;
  min-height:32px;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#777C93;
  transform:translateY(-50%);
}
.auth-password-toggle:hover{background:rgba(249,115,22,.1);color:#C4B5FD;}
.auth-password-toggle svg{position:static;transform:none;pointer-events:auto;}
.auth-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 22px;}
.auth-check{display:flex;align-items:center;gap:8px;color:#8589A2;font-size:11px;cursor:pointer;}
.auth-check input{width:14px;height:14px;accent-color:#F97316;}
.auth-link{border:0;background:none;color:#C4B5FD;font:inherit;font-size:11px;cursor:pointer;}
.auth-link:hover{text-decoration:underline;}
.auth-switch{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin:20px 0 0;
  color:#777C93;
  font-size:11px;
}
.auth-switch .auth-link{font-weight:700;}
.auth-register-view .auth-card-intro{margin-bottom:22px;}
.auth-register-view .auth-field{margin-bottom:13px;}
.auth-register-view .auth-submit{margin-top:4px;}
.auth-register-view .auth-security{margin-top:16px;}
.auth-submit{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  min-height:50px;
  overflow:hidden;
  border:1px solid rgba(196,181,253,.45);
  border-radius:12px;
  background:linear-gradient(100deg,#8B5CF6,#F97316 54%,#F97316);
  color:#100C22;
  font-size:13px;
  font-weight:800;
  letter-spacing:.2px;
  box-shadow:0 10px 26px rgba(139,92,246,.2);
  transition:transform .2s,box-shadow .2s,filter .2s;
}
.auth-submit::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.35) 48%,transparent 70%);
  transform:translateX(-120%);
  animation:authShimmer 3.2s ease-in-out infinite;
}
@keyframes authShimmer{55%,100%{transform:translateX(120%);}}
.auth-submit:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(139,92,246,.32);filter:saturate(1.1);}
.auth-submit:disabled{cursor:wait;filter:grayscale(.35);transform:none;}
.auth-submit span,.auth-submit svg{position:relative;z-index:1;}
.auth-submit svg{width:16px;height:16px;stroke:currentColor;}
.auth-error{
  display:none;
  margin:-7px 0 14px;
  padding:10px 12px;
  border:1px solid rgba(255,113,133,.25);
  border-radius:10px;
  background:rgba(255,113,133,.08);
  color:#FF9AA9;
  font-size:11px;
  line-height:1.45;
}
.auth-error.visible{display:block;animation:authShake .32s ease;}
@keyframes authShake{25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}
.auth-demo-note{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid rgba(249,115,22,.11);
  color:#6F738A;
  font-size:10px;
  line-height:1.6;
}
.auth-demo-note strong{color:#A6A8BD;font-family:var(--font-num);font-weight:500;}
.auth-security{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:18px;
  color:#62677D;
  font-size:10px;
}
.auth-security svg{width:13px;height:13px;stroke:#63E6A4;}
@media (max-width:900px){
  #authScreen{grid-template-columns:1fr;}
  .auth-brand-panel{justify-content:flex-start;padding:28px 24px 0;}
  .auth-copy h1{font-size:clamp(34px,8vw,52px);}
  .auth-copy p,.auth-market-card{display:none;}
  .auth-brand{margin-bottom:clamp(40px,13vh,110px);}
  .auth-form-side{align-items:flex-start;padding:0 24px 30px;}
  .auth-card-shell{width:min(100%,470px);}
  .auth-card{width:100%;}
}
@media (max-width:500px){
  .auth-brand-panel{padding:22px 18px 0;}
  .auth-form-side{padding:0 14px 20px;}
  .auth-card{padding:24px 20px;border-radius:20px;}
  .auth-card h2{font-size:27px;}
  .auth-meta{align-items:flex-start;flex-direction:column;gap:10px;}
  .auth-link{padding:0;}
}
@media (prefers-reduced-motion:reduce){
  .auth-orb,.auth-pulse,.auth-submit::before,.auth-card,.auth-sparkline .line,
  .auth-market-visual,.auth-data-line,.auth-candle,.auth-coin,
  .auth-transition-sweep,.auth-sweep-chart path,.auth-card-shell.is-switching{animation:none;}
  .auth-view{transition:none;}
}

/* Desktop transition follows the reference:
   the visual market panel and the auth form exchange sides. */
@media (min-width:901px){
  #authScreen{
    display:block;
  }
  #authScreen .auth-transition-sweep{
    display:none;
  }
  #authScreen .auth-brand-panel,
  #authScreen .auth-form-side{
    position:absolute;
    top:0;
    bottom:0;
    will-change:left,right,clip-path,filter;
    backface-visibility:hidden;
    transition:
      left 1.08s cubic-bezier(.22,.78,.25,1),
      right 1.08s cubic-bezier(.22,.78,.25,1),
      clip-path 1.08s cubic-bezier(.22,.78,.25,1),
      -webkit-clip-path 1.08s cubic-bezier(.22,.78,.25,1),
      border-radius 1.08s cubic-bezier(.22,.78,.25,1),
      filter .72s cubic-bezier(.22,.61,.36,1);
  }
  #authScreen .auth-brand-panel{
    left:0;
    width:56%;
    min-height:100%;
    justify-content:center;
    padding:clamp(32px,7vw,100px);
    overflow:hidden;
    z-index:3;
    border-radius:0;
    /*
      Let the panel end through opacity only. A geometric clip creates a
      second, hard edge before the gradient has a chance to blend.
    */
    clip-path:none;
    -webkit-clip-path:none;
    /* Wide feather: the visual dissolves into the dark base gradually. */
    mask-image:linear-gradient(90deg,
      #000 0%,
      #000 68%,
      rgba(0,0,0,.96) 76%,
      rgba(0,0,0,.74) 86%,
      rgba(0,0,0,.38) 95%,
      transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,
      #000 0%,
      #000 68%,
      rgba(0,0,0,.96) 76%,
      rgba(0,0,0,.74) 86%,
      rgba(0,0,0,.38) 95%,
      transparent 100%);
    mask-repeat:no-repeat;
    -webkit-mask-repeat:no-repeat;
    mask-size:100% 100%;
    -webkit-mask-size:100% 100%;
    background:
      radial-gradient(circle at 82% 42%,rgba(249,115,22,.24),transparent 25rem),
      linear-gradient(135deg,#16132F 0%,#302361 47%,#126A72 100%);
    /* Keep the curved edge clean; the old directional shadow created a
       visible vertical opacity band where the panels overlap. */
    box-shadow:inset -1px 0 rgba(255,255,255,.11);
  }
  #authScreen .auth-brand-panel::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.22;
    background-image:
      linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
    background-size:34px 34px;
    mask-image:linear-gradient(90deg,rgba(0,0,0,.9),transparent 92%);
    pointer-events:none;
  }
  #authScreen .auth-brand-panel::after{
    content:"₿";
    display:grid;
    place-items:center;
    right:auto;
    left:calc(131% - min(78vh,760px));
    top:50%;
    width:min(78vh,760px);
    height:min(78vh,760px);
    border:0;
    border-radius:0;
    color:rgba(229,222,255,.18);
    font-family:var(--font-num);
    font-size:clamp(180px,21vw,330px);
    font-weight:800;
    line-height:1;
    text-shadow:0 0 34px rgba(196,181,253,.2);
    background:radial-gradient(circle at 50% 50%,
      rgba(196,181,253,.17) 0%,
      rgba(249,115,22,.11) 38%,
      transparent 72%);
    filter:blur(.2px);
    transform:translateY(-50%);
    transition:left 1.08s cubic-bezier(.22,.78,.25,1);
    will-change:left;
    pointer-events:none;
  }
  #authScreen .auth-form-side{
    right:0;
    width:50%;
    min-height:100%;
    padding:32px clamp(24px,6vw,88px) 32px 20px;
    z-index:2;
    /* The auth screen already supplies the dark base. Keeping this layer
       transparent prevents a second translucent strip over the moving panel. */
    background:transparent;
  }
  #authScreen.is-register .auth-brand-panel{
    left:44%;
    border-radius:0;
    clip-path:none;
    -webkit-clip-path:none;
    mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.38) 5%,
      rgba(0,0,0,.74) 14%,
      rgba(0,0,0,.96) 24%,
      #000 32%,
      #000 100%);
    -webkit-mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.38) 5%,
      rgba(0,0,0,.74) 14%,
      rgba(0,0,0,.96) 24%,
      #000 32%,
      #000 100%);
    box-shadow:inset 1px 0 rgba(255,255,255,.11);
    z-index:2;
  }
  #authScreen.is-register .auth-brand-panel::after{
    right:auto;
    left:-31%;
  }
  #authScreen.is-register .auth-form-side{
    right:44%;
    z-index:3;
  }
  #authScreen.is-transitioning .auth-brand-panel{
    filter:brightness(1.18) saturate(1.15);
  }
  #authScreen.is-transitioning .auth-data-line{
    animation:authDataTransit .86s cubic-bezier(.2,.75,.25,1);
  }
  #authScreen.is-transitioning .auth-candle{
    animation:authCandleTransit .86s cubic-bezier(.2,.75,.25,1);
  }
  @keyframes authDataTransit{
    0%{transform:translateX(0) scale(1);}
    45%{transform:translateX(8%) scale(1.05);}
    100%{transform:translateX(0) scale(1);}
  }
  @keyframes authCandleTransit{
    0%{transform:skewY(-7deg) translateX(0);}
    45%{transform:skewY(-7deg) translateX(18px);}
    100%{transform:skewY(-7deg) translateX(0);}
  }
}

/* Mobile keeps the same idea, but exchanges the visual panel
   vertically so the transition is visible on a narrow screen. */
@media (max-width:900px){
  #authScreen{
    display:block;
    overflow:hidden;
    --mobile-panel-height:max(40vh,300px);
  }
  #authScreen .auth-transition-sweep{
    display:none;
  }
  #authScreen .auth-brand-panel,
  #authScreen .auth-form-side{
    position:absolute;
    left:0;
    right:0;
    width:100%;
    will-change:transform,filter;
    transition:
      transform 1.08s cubic-bezier(.22,.78,.25,1),
      filter .72s cubic-bezier(.22,.61,.36,1),
      border-radius 1.08s cubic-bezier(.22,.78,.25,1);
  }
  #authScreen .auth-brand-panel{
    top:0;
    bottom:auto;
    height:var(--mobile-panel-height);
    min-height:0;
    justify-content:flex-start;
    padding:25px 24px 22px;
    overflow:hidden;
    z-index:3;
    border-radius:0;
    clip-path:ellipse(130% 100% at 50% 0%);
    background:
      radial-gradient(circle at 82% 42%,rgba(249,115,22,.25),transparent 18rem),
      linear-gradient(135deg,#16132F 0%,#302361 47%,#126A72 100%);
    box-shadow:0 18px 45px rgba(10,8,27,.34),inset 0 -1px rgba(255,255,255,.16);
  }
  #authScreen .auth-brand-panel::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.18;
    background-image:
      linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
    background-size:27px 27px;
    mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 92%);
    pointer-events:none;
  }
  #authScreen .auth-brand-panel::after{
    content:"₿";
    display:grid;
    place-items:center;
    width:min(390px,92vw);
    height:min(390px,92vw);
    right:-170px;
    top:50%;
    border:1px solid rgba(255,255,255,.2);
    border-radius:50%;
    color:rgba(229,222,255,.2);
    font-family:var(--font-num);
    font-size:clamp(155px,38vw,230px);
    font-weight:800;
    line-height:1;
    text-shadow:0 0 26px rgba(196,181,253,.2);
    background:
      radial-gradient(circle at 38% 34%,rgba(196,181,253,.2),transparent 26%),
      radial-gradient(circle at 64% 70%,rgba(249,115,22,.2),transparent 54%),
      linear-gradient(145deg,rgba(249,115,22,.16),rgba(249,115,22,.08));
    box-shadow:
      0 0 0 11px rgba(255,255,255,.035),
      0 0 0 23px rgba(255,255,255,.025),
      inset 0 0 45px rgba(255,255,255,.08),
      0 0 55px rgba(249,115,22,.12);
    transform:translateY(-50%);
    pointer-events:none;
  }
  #authScreen .auth-brand{
    z-index:1;
    margin-bottom:10px;
  }
  #authScreen .auth-brand-mark{
    width:34px;
    height:34px;
    border-radius:10px;
    font-size:16px;
  }
  #authScreen .auth-brand-name{font-size:13px;}
  #authScreen .auth-brand-sub{font-size:7px;padding:2px 6px;}
  #authScreen .auth-copy{
    z-index:1;
    max-width:100%;
  }
  #authScreen .auth-eyebrow{
    margin-bottom:8px;
    font-size:8px;
  }
  #authScreen .auth-copy h1{
    max-width:310px;
    font-size:clamp(28px,8.6vw,42px);
    letter-spacing:-1.7px;
  }
  #authScreen .auth-copy p{
    display:none;
  }
  #authScreen .auth-market-card{
    display:block;
    width:min(100%,340px);
    margin-top:13px;
    padding:9px 11px;
    border-radius:12px;
    background:rgba(11,13,25,.42);
  }
  #authScreen .auth-market-head{margin-bottom:6px;}
  #authScreen .auth-market-title,
  #authScreen .auth-market-live{font-size:7px;}
  #authScreen .auth-sparkline{height:34px;}
  #authScreen .auth-market-stats{gap:11px;margin-top:7px;}
  #authScreen .auth-market-stat{gap:1px;}
  #authScreen .auth-market-stat small{font-size:6px;}
  #authScreen .auth-market-stat strong{font-size:8px;}
  #authScreen .auth-form-side{
    top:var(--mobile-panel-height);
    bottom:auto;
    height:calc(100vh - var(--mobile-panel-height));
    align-items:flex-start;
    justify-content:center;
    min-height:0;
    padding:20px 24px 28px;
    overflow-y:auto;
    z-index:2;
    background:linear-gradient(180deg,rgba(9,11,19,.08),rgba(9,11,19,.42));
  }
  #authScreen .auth-card-shell{
    width:min(100%,470px);
  }
  #authScreen .auth-card{
    width:100%;
  }
  #authScreen.is-register .auth-brand-panel{
    transform:translateY(calc(100vh - var(--mobile-panel-height)));
    border-radius:0;
    clip-path:ellipse(130% 100% at 50% 100%);
    box-shadow:0 -18px 45px rgba(10,8,27,.34),inset 0 1px rgba(255,255,255,.16);
    z-index:2;
  }
  #authScreen.is-register .auth-brand-panel::after{
    right:auto;
    left:-170px;
  }
  #authScreen.is-register .auth-form-side{
    transform:translateY(calc(-1 * var(--mobile-panel-height)));
    z-index:3;
  }
  #authScreen.is-transitioning .auth-brand-panel{
    filter:brightness(1.2) saturate(1.18);
  }
  #authScreen.is-transitioning .auth-data-line{
    animation:authMobileDataTransit .86s cubic-bezier(.2,.75,.25,1);
  }
  #authScreen.is-transitioning .auth-candle{
    animation:authMobileCandleTransit .86s cubic-bezier(.2,.75,.25,1);
  }
  @keyframes authMobileDataTransit{
    0%{transform:translateY(0) scale(1);}
    45%{transform:translateY(8px) scale(1.08);}
    100%{transform:translateY(0) scale(1);}
  }
  @keyframes authMobileCandleTransit{
    0%{transform:skewY(-7deg) translateY(0);}
    45%{transform:skewY(-7deg) translateY(-13px);}
    100%{transform:skewY(-7deg) translateY(0);}
  }
}
/* ============ GEN Z AURORA GATE ============ */
@keyframes authAuroraDrift{
  0%,100%{transform:translate3d(-2%,0,0) scale(1);}
  50%{transform:translate3d(3%,2%,0) scale(1.08);}
}
@keyframes authShellSwitch{
  0%{opacity:.88;transform:translateY(8px) scale(.985) rotateX(1.5deg);}
  42%{opacity:1;transform:translateY(-3px) scale(1.008) rotateX(0);}
  100%{opacity:1;transform:translateY(0) scale(1) rotateX(0);}
}
@keyframes authGateGlow{
  0%{opacity:0;transform:scale(.7);}
  35%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(1.35);}
}

#authScreen{isolation:isolate;}
#authScreen::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:-22%;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%,rgba(139,92,246,.28),transparent 24%),
    radial-gradient(circle at 72% 80%,rgba(249,115,22,.2),transparent 25%),
    radial-gradient(circle at 55% 42%,rgba(236,72,153,.1),transparent 27%);
  filter:blur(42px);
  opacity:.72;
  animation:authAuroraDrift 14s ease-in-out infinite;
}
#authScreen .auth-market-visual{opacity:.34;z-index:0;}
#authScreen .auth-orb{opacity:.12;filter:blur(30px);}

@media (min-width:901px){
  #authScreen{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(360px,460px);
    align-items:center;
    gap:clamp(30px,7vw,110px);
    padding:clamp(30px,6vw,88px);
    background:
      radial-gradient(circle at 8% 12%,rgba(139,92,246,.16),transparent 28rem),
      radial-gradient(circle at 92% 84%,rgba(249,115,22,.12),transparent 25rem),
      #090B13;
  }
  #authScreen .auth-brand-panel,
  #authScreen .auth-form-side{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:auto !important;
    min-height:0 !important;
    transform:none !important;
    clip-path:none !important;
    -webkit-clip-path:none !important;
    mask:none !important;
    -webkit-mask:none !important;
    border-radius:0 !important;
    transition:none !important;
  }
  #authScreen .auth-brand-panel{
    z-index:1;
    padding:0 !important;
    overflow:visible;
    background:none !important;
    box-shadow:none !important;
  }
  #authScreen .auth-brand-panel::before,
  #authScreen .auth-brand-panel::after{display:none !important;}
  #authScreen .auth-brand{margin-bottom:clamp(28px,4vw,48px);}
  #authScreen .auth-brand-mark{
    box-shadow:0 0 34px rgba(249,115,22,.35),0 0 0 7px rgba(249,115,22,.06);
  }
  #authScreen .auth-copy{max-width:650px;}
  #authScreen .auth-copy h1{
    font-size:clamp(48px,5.8vw,78px);
    line-height:.98;
    letter-spacing:-3.8px;
    text-wrap:balance;
  }
  #authScreen .auth-copy p{
    max-width:500px;
    margin-top:24px;
    color:#9EA3BB;
    font-size:14px;
  }
  #authScreen .auth-market-card{
    width:min(100%,500px);
    margin-top:32px;
    border-color:rgba(249,115,22,.2);
    background:rgba(17,20,33,.42);
    box-shadow:0 24px 70px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.02) inset;
  }
  #authScreen .auth-form-side{
    z-index:2;
    padding:0 !important;
    perspective:none;
    background:none !important;
  }
  #authScreen .auth-card-shell{width:100%;filter:none;}
  #authScreen .auth-card-shell.is-switching{
    animation:authShellSwitch .82s cubic-bezier(.22,.78,.25,1);
  }
  #authScreen .auth-form-side.is-switching::after{
    animation:authGateGlow .82s ease-out;
  }
  #authScreen .auth-card{
    position:relative;
    width:100%;
    padding:clamp(28px,3.2vw,42px);
    border:1px solid rgba(196,181,253,.2);
    border-radius:28px;
    background:linear-gradient(145deg,rgba(28,30,53,.88),rgba(12,15,27,.94));
    box-shadow:
      0 32px 100px rgba(0,0,0,.48),
      0 0 0 1px rgba(255,255,255,.025) inset,
      0 0 54px rgba(139,92,246,.08);
    backdrop-filter:blur(30px) saturate(1.15);
  }
  #authScreen .auth-card::before{
    content:"";
    position:absolute;
    top:0;
    left:14%;
    right:14%;
    height:2px;
    border-radius:99px;
    background:linear-gradient(90deg,transparent,#F97316,#F97316,transparent);
    opacity:.85;
  }
  #authScreen .auth-card h2{font-size:32px;letter-spacing:-1.1px;}
  #authScreen .auth-input-wrap input{
    min-height:50px;
    border-color:rgba(249,115,22,.18);
    border-radius:14px;
    background:rgba(5,8,16,.48);
  }
  #authScreen .auth-input-wrap input:focus{
    border-color:#F97316;
    box-shadow:0 0 0 4px rgba(249,115,22,.12),0 0 22px rgba(139,92,246,.12);
  }
  #authScreen .auth-submit{
    min-height:52px;
    border-radius:14px;
    box-shadow:0 12px 30px rgba(139,92,246,.24);
  }
  #authScreen .auth-view{
    transform:translateY(16px) scale(.985);
    transition:
      opacity .42s cubic-bezier(.22,.61,.36,1),
      transform .68s cubic-bezier(.22,.78,.25,1),
      visibility 0s linear .68s;
  }
  #authScreen .auth-view.is-active{transform:translateY(0) scale(1);}
  #authScreen .auth-form-side.is-register .auth-login-view:not(.is-active),
  #authScreen .auth-form-side:not(.is-register) .auth-register-view:not(.is-active){
    transform:translateY(-16px) scale(.985);
  }
}

@media (max-width:900px){
  #authScreen{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:24px;
    min-height:100dvh;
    height:auto;
    overflow-y:auto;
    padding:24px 16px 30px;
  }
  #authScreen .auth-brand-panel,
  #authScreen .auth-form-side{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    transform:none !important;
    clip-path:none !important;
    -webkit-clip-path:none !important;
    mask:none !important;
    -webkit-mask:none !important;
    border-radius:0 !important;
    transition:none !important;
  }
  #authScreen .auth-brand-panel{
    padding:6px 4px 0 !important;
    background:none !important;
    box-shadow:none !important;
  }
  #authScreen .auth-brand-panel::before,
  #authScreen .auth-brand-panel::after{display:none !important;}
  #authScreen .auth-brand{margin-bottom:28px;}
  #authScreen .auth-copy h1{
    font-size:clamp(34px,10vw,50px);
    letter-spacing:-2px;
  }
  #authScreen .auth-copy p{
    display:block;
    margin-top:14px;
    font-size:12px;
  }
  #authScreen .auth-market-card{margin-top:20px;}
  #authScreen .auth-form-side{
    padding:0 !important;
    overflow:visible;
    background:none !important;
  }
  #authScreen .auth-card-shell{width:100%;}
  #authScreen .auth-card{
    width:100%;
    border-radius:24px;
    background:linear-gradient(145deg,rgba(28,30,53,.88),rgba(12,15,27,.95));
  }
}
/* ============ AUTH CARD VIEW TRANSITION ============ */
@keyframes authPanelPulse{
  0%{filter:brightness(1);box-shadow:0 32px 100px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.025) inset,0 0 54px rgba(139,92,246,.08);}
  42%{filter:brightness(1.12) saturate(1.08);box-shadow:0 34px 110px rgba(0,0,0,.52),0 0 0 1px rgba(196,181,253,.16) inset,0 0 72px rgba(139,92,246,.2);}
  100%{filter:brightness(1);box-shadow:0 32px 100px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.025) inset,0 0 54px rgba(139,92,246,.08);}
}

#authScreen .auth-card-shell{
  perspective:1100px;
}
#authScreen .auth-card-shell.is-switching .auth-card{
  animation:authPanelPulse .82s cubic-bezier(.22,.78,.25,1);
}

@media (min-width:901px){
  #authScreen .auth-view{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateX(46px) rotateY(-2deg) scale(.975);
    transform-origin:50% 50%;
    will-change:opacity,transform;
    transition:
      opacity .42s cubic-bezier(.22,.61,.36,1),
      transform .72s cubic-bezier(.22,.78,.25,1),
      visibility 0s linear .72s;
  }
  #authScreen .auth-view.is-active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(0) rotateY(0) scale(1);
    transition-delay:0s;
  }
  #authScreen .auth-form-side.is-register .auth-login-view:not(.is-active){
    transform:translateX(-46px) rotateY(2deg) scale(.975);
  }
  #authScreen .auth-form-side:not(.is-register) .auth-register-view:not(.is-active){
    transform:translateX(46px) rotateY(-2deg) scale(.975);
  }
}

@media (max-width:900px){
  #authScreen .auth-view{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(18px) scale(.98);
    will-change:opacity,transform;
    transition:
      opacity .4s cubic-bezier(.22,.61,.36,1),
      transform .64s cubic-bezier(.22,.78,.25,1),
      visibility 0s linear .64s;
  }
  #authScreen .auth-view.is-active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
    transition-delay:0s;
  }
  #authScreen .auth-form-side.is-register .auth-login-view:not(.is-active),
  #authScreen .auth-form-side:not(.is-register) .auth-register-view:not(.is-active){
    transform:translateY(-18px) scale(.98);
  }
}
/* ============ CANDLE MORPH AUTH TRANSITION ============ */
@keyframes authCandlePanelMorph{
  0%{
    opacity:1;
    transform:translateY(0) scale(1,1) rotateX(0);
    filter:brightness(1);
  }
  30%{
    opacity:1;
    transform:translateY(3px) scale(.96,.9) rotateX(1deg);
    filter:brightness(1.05) saturate(1.04);
  }
  48%{
    opacity:.96;
    transform:translateY(0) scale(.84,.56) rotateX(4deg);
    filter:brightness(1.2) saturate(1.15);
  }
  62%{
    opacity:1;
    transform:translateY(-2px) scale(1.035,1.04) rotateX(0);
    filter:brightness(1.1) saturate(1.08);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1,1) rotateX(0);
    filter:brightness(1);
  }
}
@keyframes authCandleWick{
  0%,26%,76%,100%{
    opacity:0;
    transform:translateX(-50%) scaleY(.12);
  }
  38%{
    opacity:.65;
    transform:translateX(-50%) scaleY(.72);
  }
  52%{
    opacity:1;
    transform:translateX(-50%) scaleY(1);
  }
  68%{
    opacity:0;
    transform:translateX(-50%) scaleY(.32);
  }
}
@keyframes authCandleBody{
  0%,30%,74%,100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.2,.5);
  }
  40%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1,.8);
  }
  54%{
    opacity:.95;
    transform:translate(-50%,-50%) scale(1.35,1);
  }
  68%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.65,.55);
  }
}

#authScreen .auth-card-shell{
  position:relative;
  transform-style:preserve-3d;
}
#authScreen .auth-card-shell::before{
  content:"";
  position:absolute;
  z-index:8;
  top:9%;
  left:50%;
  width:2px;
  height:82%;
  border-radius:99px;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(180deg,transparent,#F97316 20%,#F97316 50%,#F97316 80%,transparent);
  box-shadow:0 0 18px rgba(249,115,22,.9),0 0 38px rgba(249,115,22,.55);
}
#authScreen .auth-card-shell::after{
  content:"";
  position:absolute;
  z-index:9;
  top:50%;
  left:50%;
  width:26px;
  height:46px;
  border:1px solid rgba(143,248,227,.72);
  border-radius:5px;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(180deg,rgba(249,115,22,.95),rgba(249,115,22,.9));
  box-shadow:0 0 18px rgba(249,115,22,.75),0 0 38px rgba(139,92,246,.52);
}
#authScreen .auth-card-shell.is-switching{
  animation:authCandlePanelMorph .92s cubic-bezier(.22,.78,.25,1);
}
#authScreen .auth-card-shell.is-switching::before{
  animation:authCandleWick .92s cubic-bezier(.22,.78,.25,1);
}
#authScreen .auth-card-shell.is-switching::after{
  animation:authCandleBody .92s cubic-bezier(.22,.78,.25,1);
}

@media (prefers-reduced-motion:reduce){
  #authScreen .auth-card-shell.is-switching,
  #authScreen .auth-card-shell.is-switching::before,
  #authScreen .auth-card-shell.is-switching::after{
    animation:none;
  }
}
/* ============ SOFT GLASS MORPH (NO FLASH / NO FLARE) ============ */
@keyframes authSoftPanelMorph{
  0%{
    transform:translateY(0) scale(1);
    filter:none;
  }
  34%{
    transform:translateY(2px) scale(.985,.98);
    filter:brightness(1.015);
  }
  56%{
    transform:translateY(0) scale(.975,.965);
    filter:brightness(1.025);
  }
  74%{
    transform:translateY(-1px) scale(1.008,1.01);
    filter:none;
  }
  100%{
    transform:translateY(0) scale(1);
    filter:none;
  }
}

/* Remove the previous candle/wick layer completely. */
#authScreen .auth-card-shell::before,
#authScreen .auth-card-shell::after{
  display:none !important;
}
#authScreen .auth-card-shell.is-switching{
  animation:authSoftPanelMorph .72s cubic-bezier(.22,.78,.25,1) !important;
}
#authScreen .auth-card-shell.is-switching .auth-card{
  animation:none !important;
  filter:none;
}
#authScreen .auth-form-side.is-switching::after{
  animation:none !important;
  opacity:0 !important;
}
/* ============ VIDEO-REFERENCE SPLIT AUTH GATE ============ */
@media (min-width:901px){
  #authScreen{
    --auth-gate-width:min(860px,calc(100vw - 44px));
    --auth-gate-height:min(650px,calc(100vh - 46px));
    display:block;
    overflow:hidden;
    background:
      radial-gradient(circle at 22% 50%,rgba(109,58,8,.18),transparent 28rem),
      radial-gradient(circle at 82% 22%,rgba(249,115,22,.06),transparent 22rem),
      #050608;
  }
  #authScreen::before{
    opacity:.14;
    background-size:34px 34px;
    mask-image:radial-gradient(ellipse at 50% 50%,#000 0%,transparent 72%);
  }
  #authScreen::after{
    opacity:.28;
    filter:blur(58px);
    background:
      radial-gradient(circle at 25% 45%,rgba(245,158,11,.2),transparent 27%),
      radial-gradient(circle at 76% 55%,rgba(249,115,22,.08),transparent 25%);
    animation:none;
  }
  #authScreen .auth-market-visual{opacity:.22;}
  #authScreen .auth-orb.one{
    top:20%;
    left:17%;
    background:#F59E0B;
    opacity:.08;
  }
  #authScreen .auth-orb.two{
    right:12%;
    bottom:15%;
    opacity:.07;
  }
  #authScreen .auth-brand-panel,
  #authScreen .auth-form-side{
    position:absolute !important;
    top:50% !important;
    bottom:auto !important;
    width:calc(var(--auth-gate-width) * .5) !important;
    height:var(--auth-gate-height) !important;
    min-height:0 !important;
    padding:0 !important;
    transform:translateY(-50%) !important;
    transition:
      left .86s cubic-bezier(.22,.78,.25,1),
      right .86s cubic-bezier(.22,.78,.25,1),
      filter .5s ease,
      box-shadow .5s ease !important;
  }
  #authScreen .auth-brand-panel{
    left:50% !important;
    right:auto !important;
    z-index:3;
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;
    border:1px solid rgba(245,158,11,.28);
    border-left:0;
    border-radius:0 26px 26px 0 !important;
    background:
      radial-gradient(circle at 78% 25%,rgba(245,158,11,.34),transparent 23rem),
      linear-gradient(145deg,#221306 0%,#4b2907 52%,#8D4E08 100%) !important;
    box-shadow:
      0 30px 80px rgba(0,0,0,.42),
      inset 0 0 0 1px rgba(255,255,255,.05) !important;
    clip-path:none !important;
    -webkit-clip-path:none !important;
    mask:none !important;
    -webkit-mask:none !important;
  }
  #authScreen .auth-brand-panel::before{
    display:block !important;
    content:"";
    position:absolute;
    inset:0;
    opacity:.18;
    background-image:
      linear-gradient(rgba(255,196,92,.22) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,196,92,.22) 1px,transparent 1px);
    background-size:28px 28px;
    mask-image:linear-gradient(135deg,#000,transparent 78%);
    pointer-events:none;
  }
  #authScreen .auth-brand-panel::after{
    display:block !important;
    content:"";
    position:absolute;
    z-index:0;
    width:320px;
    height:320px;
    right:-170px;
    top:50%;
    border:1px solid rgba(255,207,118,.2);
    border-radius:50%;
    background:radial-gradient(circle,rgba(245,158,11,.16),transparent 66%);
    transform:translateY(-50%);
    box-shadow:0 0 0 22px rgba(245,158,11,.035),0 0 0 44px rgba(245,158,11,.022);
    pointer-events:none;
  }
  #authScreen .auth-brand{
    position:relative;
    z-index:1;
    margin:0 0 28px;
    padding:0 42px;
  }
  #authScreen .auth-brand-mark{
    width:38px;
    height:38px;
    border-radius:11px;
    background:linear-gradient(135deg,#FFD27A,#F59E0B 56%,#C66A08);
    color:#241200;
    box-shadow:0 0 24px rgba(245,158,11,.3);
  }
  #authScreen .auth-brand-sub{
    color:#FBCB78;
    border-color:rgba(255,203,111,.28);
  }
  #authScreen .auth-copy{
    position:relative;
    z-index:1;
    max-width:none;
    padding:0 42px;
  }
  #authScreen .auth-eyebrow{
    color:#FFD27A;
    font-size:9px;
    letter-spacing:1px;
  }
  #authScreen .auth-pulse{
    background:#FFD27A;
    box-shadow:0 0 0 5px rgba(255,210,122,.1),0 0 15px rgba(245,158,11,.8);
  }
  #authScreen .auth-copy h1{
    max-width:330px;
    font-size:clamp(28px,3.2vw,46px);
    line-height:1.02;
    letter-spacing:-2px;
  }
  #authScreen .auth-copy h1 span{
    background:linear-gradient(100deg,#FFE0A0,#F59E0B 70%,#FFD27A);
    -webkit-background-clip:text;
    background-clip:text;
  }
  #authScreen .auth-copy p{
    max-width:300px;
    margin-top:16px;
    color:#E8C994;
    font-size:11px;
    line-height:1.6;
  }
  #authScreen .auth-market-card{
    position:relative;
    z-index:1;
    width:auto;
    margin:24px 42px 0;
    padding:11px;
    border-color:rgba(255,210,122,.18);
    border-radius:13px;
    background:rgba(35,19,5,.36);
    box-shadow:0 16px 40px rgba(0,0,0,.16);
    backdrop-filter:blur(10px);
  }
  #authScreen .auth-market-head{margin-bottom:7px;}
  #authScreen .auth-market-title,
  #authScreen .auth-market-live{font-size:7px;}
  #authScreen .auth-sparkline{height:40px;}
  #authScreen .auth-market-stats{gap:10px;margin-top:8px;}
  #authScreen .auth-market-stat{gap:1px;}
  #authScreen .auth-market-stat small{font-size:6px;}
  #authScreen .auth-market-stat strong{font-size:8px;}
  #authScreen .auth-form-side{
    left:calc(50% - var(--auth-gate-width) * .5) !important;
    right:auto !important;
    z-index:2;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    border-right:0;
    border-radius:26px 0 0 26px !important;
    background:linear-gradient(145deg,rgba(24,25,34,.98),rgba(8,10,15,.99)) !important;
    box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.025);
  }
  #authScreen .auth-card-shell{
    width:100%;
    height:100%;
    perspective:none;
  }
  #authScreen .auth-card-shell::before,
  #authScreen .auth-card-shell::after{display:none !important;}
  #authScreen .auth-card{
    width:100%;
    height:100%;
    overflow-y:auto;
    padding:clamp(28px,4vw,48px);
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
  }
  #authScreen .auth-card::before{display:none;}
  #authScreen .auth-card-kicker{color:#F59E0B;}
  #authScreen .auth-card h2{
    font-size:clamp(25px,3vw,34px);
    letter-spacing:-1px;
  }
  #authScreen .auth-card-intro{
    margin:8px 0 18px;
    font-size:11px;
  }
  #authScreen .auth-field{margin-bottom:11px;}
  #authScreen .auth-field label{
    margin-bottom:5px;
    font-size:10px;
  }
  #authScreen .auth-input-wrap input{
    min-height:42px;
    border-radius:9px;
    background:rgba(2,4,8,.58);
  }
  #authScreen .auth-input-wrap input:focus{
    border-color:#F59E0B;
    box-shadow:0 0 0 3px rgba(245,158,11,.11);
  }
  #authScreen .auth-submit{
    min-height:44px;
    border:1px solid rgba(255,210,122,.55);
    border-radius:8px;
    background:linear-gradient(100deg,#D97706,#F59E0B 56%,#FFCB66);
    box-shadow:0 10px 24px rgba(245,158,11,.2);
  }
  #authScreen .auth-meta{margin-bottom:16px;}
  #authScreen .auth-switch{margin-top:14px;}
  #authScreen .auth-demo-note{
    margin-top:12px;
    padding-top:10px;
    font-size:8.5px;
  }
  #authScreen .auth-security{
    margin-top:12px;
    font-size:9px;
  }
  #authScreen .auth-link{color:#FBCB78;}
  #authScreen .auth-check input{accent-color:#F59E0B;}
  #authScreen.is-register .auth-brand-panel{
    left:calc(50% - var(--auth-gate-width) * .5) !important;
    right:auto !important;
    border-left:1px solid rgba(245,158,11,.28);
    border-right:0;
    border-radius:26px 0 0 26px !important;
    z-index:2;
  }
  #authScreen.is-register .auth-brand-panel::after{
    right:auto;
    left:-170px;
  }
  #authScreen.is-register .auth-form-side{
    left:50% !important;
    right:auto !important;
    border-left:0;
    border-right:1px solid rgba(255,255,255,.12);
    border-radius:0 26px 26px 0 !important;
    z-index:3;
  }
  #authScreen.is-transitioning .auth-brand-panel,
  #authScreen.is-transitioning .auth-form-side{
    filter:brightness(1.06);
  }
  #authScreen .auth-card-shell.is-switching,
  #authScreen .auth-card-shell.is-switching .auth-card{
    animation:none !important;
  }
}
/* APP VISUAL OVERRIDE — keep the split motion, restore Quantum Trade palette */
@media (min-width:901px){
  #authScreen{
    background:
      radial-gradient(circle at 12% 18%,rgba(139,92,246,.16),transparent 28rem),
      radial-gradient(circle at 86% 80%,rgba(249,115,22,.1),transparent 25rem),
      #090B13;
  }
  #authScreen::after{
    opacity:.38;
    background:
      radial-gradient(circle at 22% 42%,rgba(139,92,246,.22),transparent 27%),
      radial-gradient(circle at 78% 58%,rgba(249,115,22,.12),transparent 25%);
  }
  #authScreen .auth-market-visual{opacity:.42;}
  #authScreen .auth-orb.one{
    background:#F97316;
    opacity:.12;
  }
  #authScreen .auth-orb.two{
    background:#F97316;
    opacity:.09;
  }
  #authScreen .auth-brand-panel{
    border-color:rgba(249,115,22,.28);
    background:
      radial-gradient(circle at 78% 25%,rgba(249,115,22,.2),transparent 23rem),
      linear-gradient(145deg,#16132F 0%,#302361 52%,#126A72 100%) !important;
    box-shadow:
      0 30px 80px rgba(0,0,0,.42),
      inset 0 0 0 1px rgba(255,255,255,.05) !important;
  }
  #authScreen .auth-brand-panel::before{
    background-image:
      linear-gradient(rgba(196,181,253,.14) 1px,transparent 1px),
      linear-gradient(90deg,rgba(249,115,22,.1) 1px,transparent 1px);
  }
  #authScreen .auth-brand-panel::after{
    border-color:rgba(196,181,253,.2);
    background:radial-gradient(circle,rgba(249,115,22,.16),transparent 66%);
    box-shadow:0 0 0 22px rgba(249,115,22,.035),0 0 0 44px rgba(249,115,22,.022);
  }
  #authScreen .auth-brand-mark{
    background:linear-gradient(135deg,#C4B5FD,#8B5CF6 48%,#F97316);
    color:#110D25;
    box-shadow:0 0 24px rgba(249,115,22,.3);
  }
  #authScreen .auth-brand-sub{
    color:#C4B5FD;
    border-color:rgba(249,115,22,.28);
  }
  #authScreen .auth-eyebrow{color:#F97316;}
  #authScreen .auth-pulse{
    background:#F97316;
    box-shadow:0 0 0 5px rgba(249,115,22,.1),0 0 15px rgba(249,115,22,.8);
  }
  #authScreen .auth-copy h1 span{
    background:linear-gradient(100deg,#C4B5FD,#8B5CF6 48%,#F97316);
    -webkit-background-clip:text;
    background-clip:text;
  }
  #authScreen .auth-copy p{color:#A6A8BD;}
  #authScreen .auth-market-card{
    border-color:rgba(249,115,22,.17);
    background:rgba(17,20,33,.5);
  }
  #authScreen .auth-market-live{color:#F97316;}
  #authScreen .auth-form-side{
    border-color:rgba(196,181,253,.14);
    background:linear-gradient(145deg,rgba(18,20,31,.98),rgba(9,11,19,.99)) !important;
  }
  #authScreen .auth-card-kicker{color:#F97316;}
  #authScreen .auth-input-wrap input{
    border-color:#2B3044;
    background:rgba(8,10,18,.62);
  }
  #authScreen .auth-input-wrap input:focus{
    border-color:#F97316;
    box-shadow:0 0 0 3px rgba(249,115,22,.12);
  }
  #authScreen .auth-submit{
    border-color:rgba(196,181,253,.45);
    background:linear-gradient(100deg,#8B5CF6,#F97316 54%,#F97316);
    color:#100C22;
    box-shadow:0 10px 26px rgba(139,92,246,.22);
  }
  #authScreen .auth-link{color:#C4B5FD;}
  #authScreen .auth-check input{accent-color:#F97316;}
  #authScreen.is-register .auth-brand-panel{
    border-color:rgba(249,115,22,.28);
  }
}

/* ============================================================
   SATU FONT UNTUK SEMUA: Inter (tanpa terkecuali).
   Form control, tabel, kode, dan teks bawaan browser dipaksa
   ikut Inter. Angka dibuat lebar-sama (tabular) supaya kolom
   harga tetap rapi tanpa font monospace.
   ============================================================ */
html, body, button, input, select, textarea, optgroup, option,
table, th, td, code, pre, kbd, samp, label, a, p, span, div, li{
  font-family:var(--font-ui);
}
body{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"cv11" 1;}