:root{
	--bg:#0f172a;         /* slate-900 */
	--panel:#111827;      /* gray-900 */
	--panel-2:#1f2937;    /* gray-800 */
	--text:#e5e7eb;       /* gray-200 */
	--muted:#9ca3af;      /* gray-400 */
	--accent:#3b82f6;     /* blue-500 */
	--accent-2:#22c55e;   /* green-500 */
	--warn:#f59e0b;       /* amber-500 */
	--danger:#ef4444;     /* red-500 */
	--card-radius:10px;
	--shadow:0 8px 24px rgba(0,0,0,0.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body.theme-dark{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}

.app-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--panel);box-shadow:var(--shadow)}
.brand{font-weight:700;font-size:18px}
.status-dot{width:10px;height:10px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 2px rgba(34,197,94,.25)}

.toolbar{display:flex;gap:20px;align-items:flex-end;padding:12px 18px;background:var(--panel-2);border-top:1px solid #0b1222;border-bottom:1px solid #0b1222}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;color:var(--muted)}
.field input,.field select{background:#0b1222;color:var(--text);border:1px solid #152036;border-radius:8px;padding:8px 10px;min-width:140px}
.actions{margin-left:auto;display:flex;gap:8px}
button{background:var(--accent);color:white;border:none;border-radius:8px;padding:8px 12px;cursor:pointer}
button#start-bot{background:var(--accent-2)}
button#stop-bot{background:var(--danger)}
button:disabled{opacity:.6;cursor:not-allowed}

.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:16px}
.card{background:var(--panel);border:1px solid #0b1222;border-radius:var(--card-radius);box-shadow:var(--shadow)}
.kpi{padding:14px}
.kpi-title{font-size:12px;color:var(--muted);margin-bottom:6px}
.kpi-value{font-size:26px;font-weight:700}
.kpi-sub{font-size:12px;color:var(--muted)}

.grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;padding:0 16px 16px;grid-auto-rows:min-content}
.grid>section:nth-child(1){grid-column:1;grid-row:1/3}
.grid>section:nth-child(2){grid-column:2;grid-row:1}
.grid>section:nth-child(3){grid-column:2;grid-row:2}
.grid>section:nth-child(4){grid-column:1/-1;grid-row:3}
.card-header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid #0b1222}
.card-title{font-weight:600}
.legend-hint{font-size:12px;color:var(--muted)}
.chart-card #chart{width:100%;height:520px}
.card-footer{padding:10px 12px;border-top:1px solid #0b1222;color:var(--muted)}

/* Bot Status Card */
.bot-status-card{padding:16px}
.bot-status-content{display:flex;flex-direction:column;gap:16px}
.bot-status-main{display:flex;align-items:center;justify-content:center;padding:12px 0}
.bot-status-indicator{display:flex;align-items:center;gap:12px}
.status-dot-large{width:16px;height:16px;border-radius:50%;background:#9ca3af;transition:all .3s ease}
.bot-status-text{display:flex;flex-direction:column;gap:4px}
.bot-status-label{font-size:12px;color:var(--muted)}
.bot-status-value{font-size:18px;font-weight:700;color:var(--text);transition:color .3s ease}
.bot-status-details{display:grid;gap:8px;padding-top:12px;border-top:1px solid #0b1222}
.bot-detail-item{display:flex;justify-content:space-between;align-items:center;padding:6px 0}
.bot-detail-label{font-size:12px;color:var(--muted)}
.bot-detail-value{font-size:13px;font-weight:500;color:var(--text)}

.signals{padding:12px;display:grid;gap:8px}
.sig span{color:var(--muted);margin-right:6px}
.badge{background:#0b1222;border:1px solid #152036;border-radius:999px;padding:2px 7px;font-size:12px;line-height:1.2;vertical-align:middle}
.badge.green{background:rgba(34,197,94,.12);color:#86efac;border-color:rgba(34,197,94,.35)}
.badge.red{background:rgba(239,68,68,.12);color:#fecaca;border-color:rgba(239,68,68,.35)}
.badge.yellow{background:rgba(245,158,11,.12);color:#fde68a;border-color:rgba(245,158,11,.35)}

.trades-card{overflow:auto}
.trades-table{width:100%;border-collapse:collapse}
.trades-table th,.trades-table td{padding:8px 10px;border-bottom:1px solid #0b1222;text-align:left}
.trades-table thead th{position:sticky;top:0;background:var(--panel-2)}
.pl-pos{color:#86efac}
.pl-neg{color:#fecaca}

.footer{padding:12px 16px;color:var(--muted);display:flex;gap:14px;border-top:1px solid #0b1222}

/* ===== AUTH & MODE UI ===== */
.auth-container{display:flex;gap:8px}
.auth-section{display:flex;gap:8px;align-items:center}
.user-email{color:var(--text);padding:0 8px}
.btn-sm{padding:6px 10px;font-size:13px}
.btn-xs{padding:4px 8px;font-size:12px}
.btn-primary{background:var(--accent)}
.btn-success{background:var(--accent-2)}
.btn-danger{background:var(--danger)}
.btn-warning{background:var(--warn);color:#000}

.mode-badge{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-weight:700;font-size:13px;border:2px solid}
.mode-badge.mode-paper{background:rgba(59,130,246,.15);border-color:#3b82f6;color:#93c5fd}
.mode-badge.mode-live{background:rgba(239,68,68,.15);border-color:#ef4444;color:#fca5a5}
.mode-label{font-size:14px}

/* ===== MODALS ===== */
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);justify-content:center;align-items:center;z-index:9999}
.modal-content{background:var(--panel);border:1px solid #0b1222;border-radius:var(--card-radius);box-shadow:0 16px 48px rgba(0,0,0,.6);width:90%;max-width:520px}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid #0b1222}
.modal-header h3{margin:0;font-size:18px}
.modal-close{background:none;color:var(--muted);font-size:24px;padding:0;width:32px;height:32px;border-radius:4px}
.modal-close:hover{background:#152036;color:var(--text)}
.modal-body{padding:18px}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;padding:16px 18px;border-top:1px solid #0b1222}

.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:6px;font-size:13px;color:var(--muted)}
.input{width:100%;background:#0b1222;color:var(--text);border:1px solid #152036;border-radius:8px;padding:10px 12px;font-size:14px}
.input:focus{outline:none;border-color:var(--accent)}
.error-message{background:rgba(239,68,68,.15);border:1px solid var(--danger);border-radius:8px;padding:10px 12px;color:#fca5a5;font-size:13px;margin-top:12px}
.warning-box{background:rgba(245,158,11,.15);border:1px solid var(--warn);border-radius:8px;padding:16px;margin-top:12px}
.warning-box h4{margin:0 0 8px;color:#fbbf24}
.warning-box p,.warning-box ul{margin:8px 0;color:var(--text)}
.warning-box ul{padding-left:24px}
.muted,.small{color:var(--muted);font-size:12px}

/* ===== TRADING CONTROLS ===== */
.trading-controls{display:flex;gap:8px;margin-left:auto}
.control-group{display:flex;gap:8px}

/* ===== ORDERS PANEL ===== */
.orders-card{grid-column:1/-1}
.orders-table{width:100%;border-collapse:collapse}
.orders-table th,.orders-table td{padding:8px 10px;border-bottom:1px solid #0b1222;text-align:left}
.orders-table thead th{position:sticky;top:0;background:var(--panel-2);font-weight:600}
.orders-table .text-center{text-align:center}
.badge-success{background:rgba(34,197,94,.12);color:#86efac;border-color:rgba(34,197,94,.35)}
.badge-danger{background:rgba(239,68,68,.12);color:#fecaca;border-color:rgba(239,68,68,.35)}

/* ===== RANGE INPUT ===== */
input[type="range"]{width:100%;height:6px;background:#152036;border-radius:4px;outline:none;-webkit-appearance:none}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:var(--accent);border-radius:50%;cursor:pointer}
input[type="range"]::-moz-range-thumb{width:18px;height:18px;background:var(--accent);border-radius:50%;cursor:pointer}
output{display:block;text-align:center;font-size:18px;font-weight:700;color:var(--accent);margin-top:8px}

/* ===== ENHANCED BOT STATUS CARD ===== */
.bot-strategy-section, .bot-performance-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #0b1222;
}

.strategy-header, .performance-header {
  margin-bottom: 12px;
}

.strategy-header h4, .performance-header h4 {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.strategy-grid, .performance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.strategy-item, .performance-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 12px;
}

.strategy-label, .performance-label {
  color: var(--muted);
  font-weight: 500;
}

.strategy-value, .performance-value {
  color: var(--text);
  font-weight: 600;
  text-align: right;
}

.performance-value {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
}

/* Color coding for performance values */
.performance-value.positive {
  color: #86efac;
}

.performance-value.negative {
  color: #fecaca;
}

.performance-value.neutral {
  color: var(--text);
}

/* Action badge styling */
#bot-current-action {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

#bot-current-action.hold {
  background: rgba(156, 163, 175, 0.15);
  color: #9ca3af;
}

#bot-current-action.buy {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
}

#bot-current-action.sell {
  background: rgba(239, 68, 68, 0.15);
  color: #fecaca;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .strategy-grid, .performance-grid {
    grid-template-columns: 1fr;
  }
  
  .strategy-item, .performance-item {
    padding: 8px 0;
  }
}

/* Auth Required Overlay */
.auth-required-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 9998;
  justify-content: center;
  align-items: center;
}

.auth-required-content {
  background: var(--panel);
  border: 1px solid #0b1222;
  border-radius: var(--card-radius);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8);
  padding: 48px;
  text-align: center;
  max-width: 500px;
  width: 90%;
}

.auth-required-icon {
  font-size: 64px;
  margin-bottom: 24px;
}

.auth-required-content h2 {
  margin: 0 0 16px 0;
  font-size: 28px;
  color: var(--text);
}

.auth-required-content p {
  margin: 8px 0;
  color: var(--muted);
  font-size: 16px;
}

.auth-required-subtitle {
  margin-bottom: 32px !important;
  font-size: 14px !important;
}

.auth-required-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
}

.btn-lg {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  min-width: 140px;
}