/* ══════════════════════════════════════
   KORPAIIX Trading v2 — Unified Tron UI
   ══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Share+Tech+Mono&family=Noto+Sans+Thai:wght@300;400;600;700&display=swap');

:root {
  --bg: #0a0e17;
  --bg-panel: rgba(10,20,40,0.9);
  --neon-blue: #00d4ff;
  --neon-cyan: #00fff2;
  --neon-green: #00ff88;
  --neon-orange: #ff6b00;
  --neon-red: #ff2d55;
  --neon-purple: #b44dff;
  --neon-yellow: #ffe600;
  --neon-gold: #ffd700;
  --border: rgba(0,212,255,0.25);
  --text: #e0e8f0;
  --text-dim: #5a6a7a;
  --glow-blue: 0 0 8px rgba(0,212,255,0.4);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Noto Sans Thai","Share Tech Mono",sans-serif; font-size: 15px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body::before {
  content:'';
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:
    linear-gradient(rgba(0,212,255,0.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,0.02) 1px,transparent 1px);
  background-size:50px 50px;
  pointer-events:none; z-index:0;
}

/* NAV */
.nav {
  position:relative; z-index:100;
  background:rgba(10,14,23,0.95);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(20px);
  display:flex; align-items:center;
  height:50px; padding:0 16px; gap:16px;
  flex-shrink:0;
}
.nav-logo {
  font-family:'Orbitron'; font-weight:900; font-size:18px;
  color:var(--neon-blue); text-shadow:var(--glow-blue);
  letter-spacing:3px;
}
.nav-tabs { display:flex; gap:2px; }
.nav-tab {
  padding:6px 14px; background:none; border:none;
  color:var(--text-dim); font-size:14px; font-weight:600;
  cursor:pointer; border-radius:4px; transition:0.2s;
  font-family:'Noto Sans Thai';
}
.nav-tab:hover,.nav-tab.active { color:var(--neon-cyan); background:rgba(0,212,255,0.1); }
.nav-right { margin-left:auto; display:flex; gap:12px; align-items:center; font-size:14px; }
/* Mode Toggle */
.mode-toggle {
  display:flex; border:1px solid var(--border); border-radius:6px; overflow:hidden;
}
.mode-btn {
  padding:5px 12px; background:none; border:none;
  color:var(--text-dim); font-family:'Orbitron'; font-size:11px; font-weight:600;
  cursor:pointer; transition:0.2s; letter-spacing:0.5px;
}
.mode-btn.active[data-mode="auto"] {
  background:rgba(0,255,136,0.15); color:var(--neon-green);
  box-shadow:inset 0 0 8px rgba(0,255,136,0.15);
}
.mode-btn.active[data-mode="signal"] {
  background:rgba(0,212,255,0.15); color:var(--neon-blue);
  box-shadow:inset 0 0 8px rgba(0,212,255,0.15);
}
.mode-btn:hover { background:rgba(255,255,255,0.05); }

.emergency-btn {
  padding:6px 16px; border:2px solid var(--neon-red); background:rgba(255,45,85,0.1);
  color:var(--neon-red); font-family:'Orbitron'; font-size:12px; font-weight:700;
  border-radius:6px; cursor:pointer; letter-spacing:1px; transition:0.2s;
  animation: emergency-pulse 2s ease-in-out infinite;
}
.emergency-btn:hover { background:rgba(255,45,85,0.25); box-shadow:0 0 15px rgba(255,45,85,0.4); }
.emergency-btn.active {
  background:rgba(255,45,85,0.3); box-shadow:0 0 20px rgba(255,45,85,0.6);
  animation: emergency-flash 0.5s ease-in-out infinite;
}
@keyframes emergency-pulse { 0%,100%{opacity:0.8} 50%{opacity:1} }
@keyframes emergency-flash { 0%,100%{opacity:1;background:rgba(255,45,85,0.3)} 50%{opacity:0.7;background:rgba(255,45,85,0.5)} }

/* Emergency overlay */
.emergency-overlay {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(255,0,0,0.08); pointer-events:none; z-index:200;
  animation: emergency-border 1s ease-in-out infinite;
  border:3px solid rgba(255,45,85,0.5);
}
@keyframes emergency-border { 0%,100%{border-color:rgba(255,45,85,0.5)} 50%{border-color:rgba(255,45,85,0.15)} }

.conn-status { color:var(--neon-red); font-family:'Share Tech Mono'; }
.nav-user { color:var(--neon-gold); }
.logout-btn {
  background:none; border:1px solid rgba(255,45,85,0.3); color:var(--neon-red);
  padding:4px 10px; border-radius:4px; cursor:pointer; font-size:14px; transition:0.2s;
}
.logout-btn:hover { background:rgba(255,45,85,0.15); border-color:var(--neon-red); }

/* MAIN CONTAINER */
.main-container {
  display:flex; flex:1; overflow:hidden; position:relative; z-index:1;
}

/* OFFICE (LEFT) */
.office-wrap {
  flex:0 0 60%; position:relative;
  border-right:1px solid var(--border);
}
.office-wrap canvas {
  width:100%; height:100%; display:block;
}
/* Scanline */
.office-wrap::after {
  content:''; position:absolute; top:0;left:0;width:100%;height:100%;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px);
  pointer-events:none;
}

/* Agent Popup */
.agent-popup {
  position:absolute; bottom:60px; left:20px;
  width:320px; background:var(--bg-panel);
  border:1px solid var(--neon-blue);
  border-radius:10px; z-index:50;
  box-shadow:var(--glow-blue);
}
.popup-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; border-bottom:1px solid var(--border);
}
.popup-title { font-family:'Orbitron'; font-size:14px; color:var(--neon-cyan); }
.popup-close { background:none; border:none; color:var(--neon-red); cursor:pointer; font-size:16px; }
.popup-msgs { max-height:200px; overflow-y:auto; padding:10px 14px; font-size:14px; }
.popup-msg { padding:4px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.popup-msg.user { color:var(--neon-gold); }
.popup-msg.agent { color:var(--neon-cyan); }
.popup-input-wrap { display:flex; border-top:1px solid var(--border); }
.popup-input {
  flex:1; padding:8px 12px; background:none; border:none;
  color:var(--text); font-size:14px; outline:none;
}
.popup-send {
  padding:8px 14px; background:rgba(0,212,255,0.15); border:none;
  color:var(--neon-blue); cursor:pointer; font-size:14px;
}

/* PANEL (RIGHT) */
.panel-wrap {
  flex:0 0 40%; overflow-y:auto; padding:16px;
}
.panel-content { display:none; }
.panel-content.active { display:block; }
.panel-title {
  font-family:'Orbitron'; font-size:13px; color:var(--neon-cyan);
  margin-bottom:12px; letter-spacing:1px;
}

/* Stats Cards */
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.stat-card {
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:6px; padding:8px; text-align:center;
}
.stat-label { font-size:14px; color:var(--text-dim); text-transform:uppercase; font-family:'Share Tech Mono'; letter-spacing:1px; }
.stat-value { font-family:'Orbitron'; font-size:16px; font-weight:700; margin-top:1px; }
.stat-value.green { color:var(--neon-green); }
.stat-value.blue { color:var(--neon-blue); }
.stat-value.red { color:var(--neon-red); }
.stat-value.orange { color:var(--neon-orange); }

/* Quick Trade */
.quick-trade { background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; padding:10px; }
.qt-row { display:flex; gap:6px; margin-bottom:6px; }
.qt-select {
  flex:1; padding:8px; background:rgba(10,20,40,0.95); border:1px solid var(--border);
  border-radius:4px; color:var(--text); font-size:13px; font-family:'Share Tech Mono';
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300d4ff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
  padding-right:28px; cursor:pointer;
}
.qt-select:focus {
  border-color:var(--neon-blue); box-shadow:var(--glow-blue); outline:none;
}
.qt-select option {
  background:#0a1628; color:#e0e8f0; padding:8px;
}
.qt-select optgroup {
  background:#0d1a30; color:var(--neon-cyan); font-weight:700;
}
.qt-input {
  width:70px; padding:8px; background:rgba(0,212,255,0.05); border:1px solid var(--border);
  border-radius:4px; color:var(--text); font-size:13px; font-family:'Share Tech Mono'; text-align:center;
}
.qt-btn {
  flex:1; padding:8px; border-radius:6px; border:none; cursor:pointer;
  font-family:'Orbitron'; font-size:13px; font-weight:700; transition:0.2s;
}
.qt-buy { background:rgba(0,255,136,0.15); color:var(--neon-green); border:1px solid rgba(0,255,136,0.4); }
.qt-buy:hover { background:rgba(0,255,136,0.3); box-shadow:0 0 10px rgba(0,255,136,0.3); }
.qt-sell { background:rgba(255,45,85,0.15); color:var(--neon-red); border:1px solid rgba(255,45,85,0.4); }
.qt-sell:hover { background:rgba(255,45,85,0.3); box-shadow:0 0 10px rgba(255,45,85,0.3); }
.qt-close-all { background:rgba(255,107,0,0.15); color:var(--neon-orange); border:1px solid rgba(255,107,0,0.4); font-size:11px; }
.qt-close-all:hover { background:rgba(255,107,0,0.3); }
.qt-sltp { display:flex; flex-direction:column; flex:1; }
.qt-label { font-size:8px; color:var(--text-dim); font-family:'Orbitron'; letter-spacing:0.5px; margin-bottom:2px; }
.qt-input-sm {
  width:100%; padding:5px 6px; background:rgba(0,212,255,0.05); border:1px solid var(--border);
  border-radius:4px; color:var(--text); font-size:13px; font-family:'Share Tech Mono'; text-align:center;
}
.qt-result { font-size:13px; margin-top:6px; min-height:20px; font-family:'Share Tech Mono'; }

/* ══════════════════════════════════════
   SIGNAL CARDS
   ══════════════════════════════════════ */
.signal-cards {
  display:flex; flex-direction:column; gap:8px;
  max-height:320px; overflow-y:auto;
}
.signal-card {
  background:rgba(10,20,40,0.92);
  border:1px solid rgba(0,212,255,0.25);
  border-radius:10px; padding:12px;
  transition:all 0.3s ease;
  position:relative; overflow:hidden;
}
.signal-card::before {
  content:''; position:absolute; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg, transparent, var(--neon-blue), transparent);
  opacity:0.5;
}
.signal-card:hover {
  border-color:rgba(0,212,255,0.5);
  box-shadow:0 0 12px rgba(0,212,255,0.15);
  transform:translateY(-1px);
}
.signal-buy { border-color:rgba(0,255,136,0.35); }
.signal-buy::before { background:linear-gradient(90deg, transparent, var(--neon-green), transparent); }
.signal-buy:hover { border-color:rgba(0,255,136,0.6); box-shadow:0 0 12px rgba(0,255,136,0.15); }
.signal-sell { border-color:rgba(255,45,85,0.35); }
.signal-sell::before { background:linear-gradient(90deg, transparent, var(--neon-red), transparent); }
.signal-sell:hover { border-color:rgba(255,45,85,0.6); box-shadow:0 0 12px rgba(255,45,85,0.15); }

.signal-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px;
}
.signal-symbol {
  font-family:'Orbitron'; font-size:13px; font-weight:700;
  letter-spacing:0.5px;
}
.signal-buy .signal-symbol { color:var(--neon-green); }
.signal-sell .signal-symbol { color:var(--neon-red); }
.signal-time {
  font-family:'Share Tech Mono'; font-size:10px; color:var(--text-dim);
}

.signal-body { margin-bottom:10px; }
.signal-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:3px 0; font-size:12px; color:var(--text);
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.signal-row span:first-child { color:var(--text-dim); }
.signal-row span:last-child { font-family:'Share Tech Mono'; font-weight:600; }

.signal-confidence-bar {
  width:100%; height:4px; background:rgba(255,255,255,0.08);
  border-radius:2px; margin-top:6px; overflow:hidden;
}
.signal-confidence-fill {
  height:100%; border-radius:2px; transition:width 0.5s ease;
}
.signal-buy .signal-confidence-fill { background:linear-gradient(90deg, var(--neon-green), #00cc6a); box-shadow:0 0 6px rgba(0,255,136,0.4); }
.signal-sell .signal-confidence-fill { background:linear-gradient(90deg, var(--neon-red), #cc0033); box-shadow:0 0 6px rgba(255,45,85,0.4); }

.signal-reason {
  font-size:11px; color:var(--text-dim); margin-top:6px;
  padding:4px 6px; background:rgba(0,212,255,0.04);
  border-radius:4px; border-left:2px solid rgba(0,212,255,0.2);
  line-height:1.4;
}

.signal-actions {
  display:flex; gap:6px; margin-top:8px;
}
.signal-btn {
  flex:1; padding:7px 10px; border-radius:6px; border:none;
  cursor:pointer; font-family:'Noto Sans Thai','Orbitron'; font-size:12px;
  font-weight:600; transition:all 0.2s; letter-spacing:0.3px;
}
.signal-accept {
  background:rgba(0,255,136,0.12); color:var(--neon-green);
  border:1px solid rgba(0,255,136,0.35);
}
.signal-accept:hover {
  background:rgba(0,255,136,0.25); box-shadow:0 0 10px rgba(0,255,136,0.25);
}
.signal-skip {
  background:rgba(255,255,255,0.04); color:var(--text-dim);
  border:1px solid rgba(255,255,255,0.1);
}
.signal-skip:hover {
  background:rgba(255,45,85,0.1); color:var(--neon-red);
  border-color:rgba(255,45,85,0.3);
}

/* Signal auto-mode message */
.signal-auto-msg {
  padding:12px; text-align:center; font-size:13px;
  color:var(--neon-green); background:rgba(0,255,136,0.04);
  border:1px solid rgba(0,255,136,0.15); border-radius:8px;
}

/* Plan Selector — compact */
.plan-selector { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.plan-btn {
  padding:6px 4px; border-radius:6px; border:1px solid var(--border);
  background:var(--bg-panel); cursor:pointer; text-align:center;
  transition:0.2s; font-size:12px;
}
.plan-btn:hover { border-color:var(--neon-blue); }
.plan-btn.active { border-color:var(--neon-green); box-shadow:0 0 6px rgba(0,255,136,0.3); }
.plan-btn .plan-emoji { font-size:14px; }
.plan-btn .plan-name { font-weight:600; margin-top:2px; font-size:11px; }
.plan-btn .plan-risk { font-size:8px; color:var(--text-dim); margin-top:1px; }

/* Positions */
.positions-list { font-size:14px; }
.pos-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 8px; border-bottom:1px solid rgba(255,255,255,0.05);
  background:var(--bg-panel); border-radius:4px; margin-bottom:4px;
}
.pos-symbol { font-family:'Share Tech Mono'; font-weight:600; }
.pos-pnl { font-family:'Orbitron'; font-size:13px; }

/* Feed */
.feed-list { max-height:180px; overflow-y:auto; font-size:13px; }
.feed-item {
  display:flex; gap:6px; padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.feed-dot { width:5px; height:5px; border-radius:50%; margin-top:5px; flex-shrink:0; }
.feed-time { color:var(--text-dim); font-family:'Share Tech Mono'; font-size:12px; flex-shrink:0; }
.feed-text { flex:1; }
@keyframes feed-slide-up { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

/* Agents List */
.agents-list { display:flex; flex-direction:column; gap:10px; }
.agent-card {
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:10px; padding:12px; display:flex; align-items:center; gap:12px;
  transition:0.2s;
}
.agent-card:hover { border-color:var(--neon-blue); }
.agent-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.agent-info { flex:1; }
.agent-name { font-weight:600; font-size:13px; }
.agent-status { font-size:13px; color:var(--text-dim); margin-top:2px; }
.agent-model { font-size:12px; color:var(--text-dim); font-family:'Share Tech Mono'; }
.agent-toggle {
  padding:4px 10px; border-radius:4px; border:1px solid var(--border);
  background:none; color:var(--text); cursor:pointer; font-size:13px;
}
.agent-toggle.on { border-color:var(--neon-green); color:var(--neon-green); }

/* Plans Detail */
.plans-detail { display:flex; flex-direction:column; gap:12px; }
.plan-detail-card {
  background:var(--bg-panel); border-radius:12px; padding:16px;
  transition:0.2s;
}
.plan-detail-card:hover { transform:translateY(-2px); }
.plan-detail-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.plan-detail-icon { font-size:28px; }
.plan-detail-name { font-family:'Orbitron'; font-size:15px; font-weight:700; }
.plan-detail-eng { font-size:13px; color:var(--text-dim); font-family:'Share Tech Mono'; }
.plan-detail-stats { font-size:14px; }
.plan-detail-row { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.plan-detail-label { color:var(--text-dim); }
.plan-detail-value { font-family:'Share Tech Mono'; font-weight:600; }
.plan-risk-bar { display:flex; gap:3px; margin-top:10px; }
.risk-pip { height:4px; flex:1; border-radius:2px; background:rgba(255,255,255,0.08); }

/* Settings */
.settings-wrap { font-size:13px; }
.settings-section { margin-bottom:20px; }
.settings-section-title {
  font-family:'Orbitron'; font-size:14px; color:var(--neon-cyan);
  margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--border);
}
.setting-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.04);
}
.setting-label { color:var(--text-dim); font-size:14px; }
.setting-input {
  background:rgba(0,212,255,0.05); border:1px solid var(--border);
  border-radius:4px; padding:5px 10px; color:var(--text);
  font-size:14px; width:160px; text-align:right;
}
.setting-select {
  background:rgba(10,20,40,0.95); border:1px solid var(--border);
  border-radius:4px; padding:5px 8px; color:var(--text);
  font-size:13px;
}
.setting-select option {
  background:#0a1628; color:#e0e8f0;
}
.btn-save {
  margin-top:12px; padding:8px 24px;
  border:1px solid var(--neon-green); background:rgba(0,255,136,0.1);
  color:var(--neon-green); font-family:'Orbitron'; font-size:13px;
  border-radius:6px; cursor:pointer; width:100%;
}
.btn-save:hover { background:rgba(0,255,136,0.2); box-shadow:0 0 10px rgba(0,255,136,0.3); }

/* CHAT BAR */
.chat-bar {
  display:flex; align-items:center; gap:8px;
  padding:8px 16px; background:rgba(10,14,23,0.95);
  border-top:1px solid var(--border);
  flex-shrink:0; position:relative; z-index:100;
}
.chat-target {
  background:rgba(10,20,40,0.95); border:1px solid var(--border);
  border-radius:6px; padding:8px; color:var(--text);
  font-size:14px; cursor:pointer;
}
.chat-target option {
  background:#0a1628; color:#e0e8f0;
}
.chat-input {
  flex:1; padding:10px 14px; background:rgba(0,212,255,0.05);
  border:1px solid var(--border); border-radius:6px;
  color:var(--text); font-size:13px; outline:none;
}
.chat-input:focus { border-color:var(--neon-blue); box-shadow:var(--glow-blue); }
.chat-send {
  padding:10px 20px; background:rgba(0,212,255,0.15);
  border:1px solid var(--neon-blue); border-radius:6px;
  color:var(--neon-blue); font-family:'Orbitron'; font-size:14px;
  cursor:pointer; font-weight:600;
}
.chat-send:hover { background:rgba(0,212,255,0.25); box-shadow:var(--glow-blue); }

/* Scrollbar */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(0,212,255,0.2); border-radius:3px; }

/* Responsive */
@media (max-width:900px) {
  .main-container { flex-direction:column; }
  .office-wrap { flex:0 0 50vh; border-right:none; border-bottom:1px solid var(--border); }
  .panel-wrap { flex:1; }
  .nav-tabs { display:none; }
}

/* Plan card colors */
.plan-coffee { border:1px solid rgba(0,255,136,0.3); }
.plan-coffee .plan-detail-name { color:var(--neon-green); }
.plan-day { border:1px solid rgba(0,212,255,0.3); }
.plan-day .plan-detail-name { color:var(--neon-blue); }
.plan-aggressive { border:1px solid rgba(255,107,0,0.3); }
.plan-aggressive .plan-detail-name { color:var(--neon-orange); }
.plan-swing { border:1px solid rgba(180,77,255,0.3); }
.plan-swing .plan-detail-name { color:var(--neon-purple); }

/* ══════════════════════════════════════
   BACKTEST UI
   ══════════════════════════════════════ */
.bt-config {
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:8px; padding:12px; margin-bottom:14px;
}
.bt-row { display:flex; gap:8px; margin-bottom:8px; }
.bt-field { flex:1; display:flex; flex-direction:column; }
.bt-label {
  font-size:11px; color:var(--text-dim); font-family:'Orbitron';
  letter-spacing:0.5px; margin-bottom:3px; text-transform:uppercase;
}
.bt-select, .bt-input {
  padding:8px; background:rgba(10,20,40,0.95); border:1px solid var(--border);
  border-radius:4px; color:var(--text); font-size:14px; font-family:'Share Tech Mono';
  outline:none; transition:0.2s;
}
.bt-select option {
  background:#0a1628; color:#e0e8f0;
}
.bt-select optgroup {
  background:#0d1a30; color:var(--neon-cyan); font-weight:700;
}
.bt-select:focus, .bt-input:focus {
  border-color:var(--neon-blue); box-shadow:var(--glow-blue);
}
.bt-run-btn {
  width:100%; padding:10px; margin-top:4px;
  background:rgba(0,255,136,0.12); border:1px solid var(--neon-green);
  color:var(--neon-green); font-family:'Orbitron'; font-size:13px; font-weight:700;
  border-radius:6px; cursor:pointer; letter-spacing:1px; transition:0.2s;
}
.bt-run-btn:hover {
  background:rgba(0,255,136,0.25); box-shadow:0 0 15px rgba(0,255,136,0.3);
}
.bt-run-btn:disabled {
  opacity:0.5; cursor:not-allowed;
}
.bt-run-btn.running {
  background:rgba(0,212,255,0.15); border-color:var(--neon-blue); color:var(--neon-blue);
  animation:emergency-pulse 1s ease-in-out infinite;
}

/* Stats Grid */
.bt-stats-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:12px;
}
.bt-stat-card {
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:6px; padding:8px; text-align:center;
}
.bt-stat-label {
  font-size:11px; color:var(--text-dim); text-transform:uppercase;
  font-family:'Share Tech Mono'; letter-spacing:0.5px;
}
.bt-stat-value {
  font-family:'Orbitron'; font-size:13px; font-weight:700; margin-top:2px;
}

/* Chart */
.bt-chart-wrap {
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:8px; padding:10px; margin-bottom:10px; overflow:hidden;
}
.bt-chart-wrap canvas {
  width:100%; height:auto; display:block; border-radius:4px;
}
.bt-chart-title {
  font-family:'Orbitron'; font-size:13px; color:var(--neon-cyan);
  margin-bottom:8px; letter-spacing:0.5px;
}

/* Trade Table */
.bt-table-wrap {
  max-height:250px; overflow-y:auto; border:1px solid var(--border);
  border-radius:6px; margin-bottom:12px;
}
.bt-table {
  width:100%; border-collapse:collapse; font-size:13px;
  font-family:'Share Tech Mono';
}
.bt-table thead { position:sticky; top:0; z-index:2; }
.bt-table th {
  background:rgba(0,212,255,0.1); color:var(--neon-cyan);
  padding:6px 4px; text-align:center; font-family:'Orbitron';
  font-size:11px; letter-spacing:0.5px; border-bottom:1px solid var(--border);
}
.bt-table td {
  padding:5px 4px; text-align:center;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.bt-table tr:hover { background:rgba(0,212,255,0.04); }
.bt-table .win { color:var(--neon-green); }
.bt-table .loss { color:var(--neon-red); }

/* ── Login Modal ────────────────────────── */
.login-modal {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(5,8,15,0.95);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
  backdrop-filter:blur(8px);
}
.login-box {
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:40px 36px;
  width:340px;
  text-align:center;
  box-shadow:0 0 40px rgba(0,212,255,0.08);
}
.login-title {
  font-family:'Orbitron',sans-serif;
  font-size:22px; font-weight:700;
  color:var(--neon-blue);
  margin-bottom:4px;
  text-shadow:0 0 12px rgba(0,212,255,0.3);
}
.login-subtitle {
  font-size:13px; color:var(--text-dim);
  margin-bottom:24px;
  font-family:'Share Tech Mono',monospace;
}
.login-input {
  display:block; width:100%; box-sizing:border-box;
  padding:12px 14px; margin-bottom:12px;
  background:rgba(5,15,30,0.8);
  border:1px solid rgba(0,212,255,0.2);
  border-radius:6px;
  color:var(--text); font-size:14px;
  font-family:'Noto Sans Thai',sans-serif;
  outline:none;
  transition:border-color 0.2s;
}
.login-input:focus {
  border-color:var(--neon-blue);
  box-shadow:0 0 8px rgba(0,212,255,0.15);
}
.login-btn {
  width:100%; padding:12px;
  background:linear-gradient(135deg, rgba(0,212,255,0.2), rgba(0,255,136,0.15));
  border:1px solid var(--neon-blue);
  border-radius:6px;
  color:var(--neon-blue);
  font-size:15px; font-weight:600;
  font-family:'Noto Sans Thai',sans-serif;
  cursor:pointer;
  margin-top:8px;
  transition:all 0.2s;
}
.login-btn:hover {
  background:linear-gradient(135deg, rgba(0,212,255,0.35), rgba(0,255,136,0.25));
  box-shadow:0 0 16px rgba(0,212,255,0.2);
}
.login-error {
  color:var(--neon-red); font-size:14px;
  margin-top:12px; min-height:16px;
}

/* Responsive */
@media (max-width:600px) {
  .bt-row { flex-direction:column; }
  .bt-stats-grid { grid-template-columns:repeat(2,1fr); }
}

/* ══════════════════════════════════════
   REGISTER / PAYMENT / SUBSCRIPTION UI
   ══════════════════════════════════════ */

/* ── Login Register Link ── */
.login-register-link {
  margin-top:16px; font-size:14px; color:var(--text-dim); text-align:center;
}
.login-register-link a {
  color:var(--neon-blue); text-decoration:none; font-weight:600;
  transition:0.2s;
}
.login-register-link a:hover {
  color:var(--neon-cyan); text-shadow:0 0 8px rgba(0,212,255,0.3);
}

/* ── Register Modal ── */
.register-modal {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(5,8,15,0.95);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; backdrop-filter:blur(8px);
  overflow-y:auto;
}
.register-box {
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:32px 28px;
  width:720px; max-width:95vw;
  text-align:center;
  box-shadow:0 0 40px rgba(0,212,255,0.08);
  max-height:95vh; overflow-y:auto;
}
.register-title {
  font-family:'Orbitron',sans-serif;
  font-size:20px; font-weight:700;
  color:var(--neon-blue);
  margin-bottom:4px;
  text-shadow:0 0 12px rgba(0,212,255,0.3);
}
.register-subtitle {
  font-size:13px; color:var(--text-dim);
  margin-bottom:20px;
  font-family:'Share Tech Mono',monospace;
}
.register-btn {
  background:linear-gradient(135deg, rgba(0,255,136,0.2), rgba(0,212,255,0.15)) !important;
  border-color:var(--neon-green) !important;
  color:var(--neon-green) !important;
}
.register-btn:hover {
  background:linear-gradient(135deg, rgba(0,255,136,0.35), rgba(0,212,255,0.25)) !important;
  box-shadow:0 0 16px rgba(0,255,136,0.2) !important;
}

/* ── Plan Cards ── */
.plan-cards-wrap {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:10px; margin:16px 0;
}
.plan-card {
  background:rgba(5,15,30,0.8);
  border:2px solid rgba(0,212,255,0.15);
  border-radius:10px; padding:16px 10px;
  cursor:pointer; transition:all 0.2s;
  position:relative; text-align:center;
}
.plan-card:hover {
  border-color:var(--neon-blue);
  transform:translateY(-2px);
}
.plan-card.selected {
  border-color:var(--neon-green);
  background:rgba(0,255,136,0.05);
  box-shadow:0 0 15px rgba(0,255,136,0.15);
}
.plan-card-popular {
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  background:var(--neon-orange); color:#000; font-size:11px; font-weight:700;
  padding:2px 10px; border-radius:10px;
  font-family:'Orbitron';
}
.plan-card-badge {
  font-family:'Orbitron'; font-size:14px; font-weight:700;
  color:var(--neon-blue); margin-bottom:6px;
  letter-spacing:2px;
}
.plan-card-badge.pro { color:var(--neon-green); }
.plan-card-badge.premium { color:var(--neon-gold); }
.plan-card-price {
  font-family:'Orbitron'; font-size:20px; font-weight:900;
  color:var(--text); margin-bottom:10px;
}
.plan-card-price span {
  font-size:12px; color:var(--text-dim); font-weight:400;
}
.plan-card-features {
  list-style:none; text-align:left; font-size:13px;
  color:var(--text-dim);
}
.plan-card-features li {
  padding:3px 0;
}
.plan-card.selected .plan-card-features li { color:var(--text); }

@media (max-width:600px) {
  .plan-cards-wrap { grid-template-columns:1fr; }
}

/* ── Payment Modal ── */
.payment-modal {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(5,8,15,0.95);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; backdrop-filter:blur(8px);
}
.payment-box {
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:32px 28px;
  width:440px; max-width:95vw;
  text-align:center;
  box-shadow:0 0 40px rgba(0,212,255,0.08);
  max-height:95vh; overflow-y:auto;
}
.payment-title {
  font-family:'Orbitron'; font-size:18px; font-weight:700;
  color:var(--neon-blue); margin-bottom:12px;
  text-shadow:0 0 12px rgba(0,212,255,0.3);
}
.payment-plan-info {
  font-size:14px; color:var(--text); margin-bottom:16px;
  padding:10px; background:rgba(0,212,255,0.05);
  border:1px solid var(--border); border-radius:6px;
}
.payment-tabs {
  display:flex; gap:4px; margin-bottom:16px;
}
.payment-tab {
  flex:1; padding:8px; border:1px solid var(--border);
  background:none; color:var(--text-dim); font-size:14px;
  border-radius:6px; cursor:pointer; transition:0.2s;
  font-family:'Noto Sans Thai';
}
.payment-tab.active {
  background:rgba(0,212,255,0.1); color:var(--neon-blue);
  border-color:var(--neon-blue);
}
.payment-tab:hover { background:rgba(255,255,255,0.05); }
.payment-content { margin-bottom:16px; }

/* QR Code */
.qr-wrap { text-align:center; margin-bottom:16px; }
.qr-placeholder {
  width:220px; height:220px; margin:0 auto 10px;
  background:rgba(255,255,255,0.95); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--neon-blue);
}
.qr-placeholder canvas {
  max-width:200px; max-height:200px;
}
.qr-loading {
  color:#333; font-size:14px;
}
.qr-amount {
  font-family:'Orbitron'; font-size:24px; font-weight:900;
  color:var(--neon-green); margin-bottom:4px;
}
.qr-tx {
  font-family:'Share Tech Mono'; font-size:12px;
  color:var(--text-dim);
}

/* Payment Steps */
.payment-steps {
  text-align:left; margin:12px 0 16px;
  padding:10px; background:rgba(0,255,136,0.03);
  border:1px solid rgba(0,255,136,0.1); border-radius:6px;
}
.payment-steps .step {
  font-size:13px; color:var(--text-dim); padding:4px 0;
}
.payment-confirm-btn {
  background:linear-gradient(135deg, rgba(0,255,136,0.2), rgba(0,212,255,0.15)) !important;
  border-color:var(--neon-green) !important;
  color:var(--neon-green) !important;
}
.payment-close-btn {
  display:block; width:100%; padding:8px;
  background:none; border:1px solid rgba(255,255,255,0.1);
  color:var(--text-dim); border-radius:6px;
  cursor:pointer; font-size:14px; margin-top:8px;
  transition:0.2s;
}
.payment-close-btn:hover { border-color:var(--neon-red); color:var(--neon-red); }

/* Stripe placeholder */
.stripe-placeholder {
  padding:30px; text-align:center;
}
.stripe-icon { font-size:40px; margin-bottom:10px; }
.stripe-text {
  font-size:14px; color:var(--text); margin-bottom:6px;
}
.stripe-subtext { font-size:13px; color:var(--text-dim); }

/* ── Subscription Expired Modal ── */
.subscription-modal {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(5,8,15,0.95);
  display:flex; align-items:center; justify-content:center;
  z-index:9998; backdrop-filter:blur(8px);
}
.subscription-box {
  background:var(--bg-panel);
  border:1px solid var(--neon-red);
  border-radius:12px;
  padding:40px 36px;
  width:380px; max-width:90vw;
  text-align:center;
  box-shadow:0 0 40px rgba(255,45,85,0.1);
}
.subscription-icon { font-size:48px; margin-bottom:12px; }
.subscription-title {
  font-family:'Orbitron'; font-size:18px; font-weight:700;
  color:var(--neon-red); margin-bottom:8px;
}
.subscription-text {
  font-size:13px; color:var(--text-dim); margin-bottom:20px;
}

/* ══════════════════════════════════════
   PRICING MODAL — เลือกแพ็กเกจ
   ══════════════════════════════════════ */
.pricing-modal {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(5,8,15,0.97);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; backdrop-filter:blur(12px);
  overflow-y:auto;
}
.pricing-modal::before {
  content:''; position:absolute; top:0; left:0; width:100%; height:100%;
  background:
    linear-gradient(rgba(0,212,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.015) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
}
.pricing-modal-inner {
  position:relative; z-index:1;
  max-width:960px; width:95vw;
  padding:20px;
}
.pricing-modal-header {
  text-align:center; margin-bottom:32px;
}
.pricing-modal-title {
  font-family:'Orbitron',sans-serif; font-size:28px; font-weight:900;
  color:var(--neon-blue); letter-spacing:3px;
  text-shadow:0 0 20px rgba(0,212,255,0.4);
  margin-bottom:8px;
}
.pricing-modal-subtitle {
  font-size:15px; color:var(--text-dim);
  font-family:'Noto Sans Thai',sans-serif;
}

/* ── Pricing Cards Grid ── */
.pricing-cards-grid {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:20px; align-items:stretch;
}

/* ── Individual Card ── */
.pricing-plan-card {
  background:rgba(10,20,40,0.9);
  border:1px solid rgba(0,212,255,0.2);
  border-radius:16px;
  padding:28px 22px;
  text-align:center;
  position:relative;
  transition:all 0.3s ease;
  display:flex; flex-direction:column;
}
.pricing-plan-card:hover {
  border-color:rgba(0,212,255,0.4);
  transform:translateY(-4px);
  box-shadow:0 8px 30px rgba(0,212,255,0.1);
}

/* ── Featured (Pro) Card ── */
.pricing-plan-featured {
  border:2px solid var(--neon-cyan);
  background:rgba(0,255,242,0.03);
  box-shadow:0 0 25px rgba(0,255,242,0.12), inset 0 0 30px rgba(0,255,242,0.02);
  transform:scale(1.04);
}
.pricing-plan-featured:hover {
  border-color:var(--neon-cyan);
  transform:scale(1.04) translateY(-4px);
  box-shadow:0 0 35px rgba(0,255,242,0.18), inset 0 0 30px rgba(0,255,242,0.03);
}

/* ── Badge ── */
.pricing-plan-badge {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg, #ffd700, #ffaa00);
  color:#000; font-size:13px; font-weight:700;
  padding:4px 16px; border-radius:20px;
  font-family:'Orbitron',sans-serif;
  letter-spacing:0.5px;
  box-shadow:0 0 12px rgba(255,215,0,0.3);
  white-space:nowrap;
}

/* ── Icon ── */
.pricing-plan-icon {
  font-size:42px; margin-bottom:8px;
}

/* ── Name ── */
.pricing-plan-name {
  font-family:'Orbitron',sans-serif; font-size:18px; font-weight:700;
  color:var(--text); letter-spacing:2px;
  margin-bottom:8px;
}

/* ── Price — neon big ── */
.pricing-plan-price {
  font-family:'Orbitron',sans-serif; font-size:32px; font-weight:900;
  color:var(--neon-cyan);
  text-shadow:0 0 15px rgba(0,255,242,0.4);
  margin-bottom:6px;
}
.pricing-plan-price span {
  font-size:14px; font-weight:400; color:var(--text-dim);
  text-shadow:none;
}
.pricing-plan-featured .pricing-plan-price {
  color:var(--neon-green);
  text-shadow:0 0 15px rgba(0,255,136,0.4);
}

/* ── Users Count ── */
.pricing-plan-users {
  font-size:12px; color:var(--text-dim);
  margin-bottom:16px; padding:4px 0;
}
.pricing-plan-users strong {
  color:var(--neon-blue);
}

/* ── Features List ── */
.pricing-plan-features {
  list-style:none; text-align:left;
  font-size:14px; line-height:2;
  margin-bottom:auto; padding-bottom:20px;
  flex:1;
}
.pricing-plan-features .feature-yes {
  color:#e0e8f0;
}
.pricing-plan-features .feature-no {
  color:#5a6a7a;
  text-decoration:line-through;
  text-decoration-color:rgba(255,45,85,0.4);
}

/* ── Button ── */
.pricing-plan-btn {
  width:100%; padding:12px;
  background:rgba(0,212,255,0.1);
  border:1px solid rgba(0,212,255,0.4);
  border-radius:8px;
  color:var(--neon-blue);
  font-size:15px; font-weight:600;
  font-family:'Noto Sans Thai',sans-serif;
  cursor:pointer;
  transition:all 0.2s;
  letter-spacing:0.5px;
}
.pricing-plan-btn:hover {
  background:rgba(0,212,255,0.2);
  box-shadow:0 0 15px rgba(0,212,255,0.2);
  transform:translateY(-1px);
}

/* ── Featured Button ── */
.pricing-plan-btn-featured {
  background:linear-gradient(135deg, rgba(0,255,136,0.2), rgba(0,212,255,0.15));
  border-color:var(--neon-green);
  color:var(--neon-green);
  font-size:16px;
  box-shadow:0 0 10px rgba(0,255,136,0.15);
}
.pricing-plan-btn-featured:hover {
  background:linear-gradient(135deg, rgba(0,255,136,0.35), rgba(0,212,255,0.25));
  box-shadow:0 0 20px rgba(0,255,136,0.25);
}

/* ── Footer ── */
.pricing-modal-footer {
  text-align:center; margin-top:24px;
}
.pricing-modal-close {
  background:none; border:1px solid rgba(255,255,255,0.1);
  color:var(--text-dim); padding:8px 24px;
  border-radius:6px; cursor:pointer; font-size:14px;
  font-family:'Noto Sans Thai',sans-serif;
  transition:0.2s;
}
.pricing-modal-close:hover {
  border-color:var(--neon-red); color:var(--neon-red);
}

/* ── Responsive ── */
@media (max-width:768px) {
  .pricing-cards-grid {
    grid-template-columns:1fr;
    gap:16px;
  }
  .pricing-plan-featured {
    transform:scale(1); order:-1;
  }
  .pricing-plan-featured:hover {
    transform:translateY(-4px);
  }
  .pricing-modal-title { font-size:22px; }
  .pricing-plan-price { font-size:26px; }
}

/* ─── Approved Popup ─── */
.approved-popup {
  position:fixed; inset:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.95);
  display:flex; align-items:center;
  justify-content:center; z-index:999999;
  animation: fadeIn 0.3s ease;
  overflow-y:auto;
  flex-direction:column;
}
.approved-box {
  background:#0a1628; border:2px solid #00ff88; border-radius:16px;
  padding:30px; text-align:center; max-width:420px; width:90%;
  box-shadow: 0 0 40px rgba(0,255,136,0.3);
  animation: scaleIn 0.3s ease;
  position:relative;
}
@keyframes scaleIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}