/* ═══════════════════════════════════════════
   ProSignal AI — Dark Trading Terminal Theme
   Palette: Volcanic Glass + Acid Neon accents
   ═══════════════════════════════════════════ */

:root {
  --bg-base:      #0a0c0f;
  --bg-panel:     #0f1217;
  --bg-card:      #141820;
  --bg-hover:     #1a2030;
  --border:       #1e2535;
  --border-light: #252d3d;

  --buy:          #00e676;
  --buy-dim:      #00e67622;
  --buy-glow:     #00e67644;
  --sell:         #ff3d57;
  --sell-dim:     #ff3d5722;
  --sell-glow:    #ff3d5744;
  --neutral:      #ffc107;
  --neutral-dim:  #ffc10722;

  --accent:       #7c4dff;
  --accent2:      #00b0ff;
  --gold:         #ffd740;

  --text-primary: #e8eaf0;
  --text-sec:     #8892a4;
  --text-dim:     #4a5568;

  --candle-bull:  #00e676;
  --candle-bear:  #ff3d57;

  --font-display: 'Syne', sans-serif;
  --font-mono:    'Space Mono', monospace;
  --font-body:    'Outfit', sans-serif;

  --radius:       6px;
  --radius-lg:    10px;
}

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

html, body {
  width: 100%; height: 100%;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  overflow: hidden;
}

/* ══════════════ SCROLLBAR ══════════════ */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }

/* ══════════════ TOP BAR ══════════════ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 100;
}

.topbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent)40, var(--buy)40, transparent);
}

.topbar-left, .topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-center {
  display: flex;
  align-items: center;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}
.logo-icon {
  font-size: 20px;
  color: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent));
}
.logo em {
  font-style: normal;
  color: var(--buy);
}

/* Symbol Buttons */
.symbol-selector { display: flex; gap: 4px; }
.sym-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-sec);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
}
.sym-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.sym-btn.active {
  background: var(--accent)22;
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 8px var(--accent)33;
}

/* Price Display */
.price-display { display: flex; align-items: baseline; gap: 10px; }
.cur-price {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -1px;
}
.price-change {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}
.price-change.positive { color: var(--buy); }
.price-change.negative { color: var(--sell); }

/* Timeframe Buttons */
.tf-selector { display: flex; gap: 2px; }
.tf-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
}
.tf-btn:hover { color: var(--text-primary); border-color: var(--border-light); }
.tf-btn.active {
  background: var(--buy)15;
  border-color: var(--buy)60;
  color: var(--buy);
}

/* Live Badge */
.live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--buy);
  background: var(--buy)15;
  border: 1px solid var(--buy)40;
  padding: 4px 10px;
  border-radius: 20px;
}
.pulse-dot {
  width: 7px; height: 7px;
  background: var(--buy);
  border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 6px var(--buy);
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* ══════════════ MAIN LAYOUT ══════════════ */
.main-layout {
  display: grid;
  grid-template-columns: 220px 1fr 240px;
  height: calc(100vh - 52px);
  overflow: hidden;
}

/* ══════════════ PANELS ══════════════ */
.left-panel, .right-panel {
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.right-panel { border-right: none; border-left: 1px solid var(--border); }

.panel-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* ══════════════ MASTER SIGNAL ══════════════ */
.master-signal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.master-signal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--buy), var(--accent));
}
.ms-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.ms-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.ms-value.buy { color: var(--buy); text-shadow: 0 0 20px var(--buy)66; }
.ms-value.sell { color: var(--sell); text-shadow: 0 0 20px var(--sell)66; }
.ms-value.neutral { color: var(--neutral); text-shadow: 0 0 20px var(--neutral)66; }

.conf-bar-wrap {
  background: var(--bg-base);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
  margin-bottom: 4px;
}
.conf-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--buy), var(--accent));
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 8px var(--buy)66;
}
.conf-pct {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--buy);
}
.ms-sub {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ══════════════ INDICATOR LIST ══════════════ */
.ind-list { display: flex; flex-direction: column; gap: 4px; }
.ind-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.2s;
}
.ind-item:hover { border-color: var(--border-light); background: var(--bg-hover); }
.ind-name { font-size: 11px; color: var(--text-sec); }
.ind-val {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
}
.ind-sig {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.ind-sig.buy { background: var(--buy-dim); color: var(--buy); border: 1px solid var(--buy)40; }
.ind-sig.sell { background: var(--sell-dim); color: var(--sell); border: 1px solid var(--sell)40; }
.ind-sig.neutral { background: var(--neutral-dim); color: var(--neutral); border: 1px solid var(--neutral)40; }

/* ══════════════ GAUGE ══════════════ */
.gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.gauge-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-sec);
  text-align: center;
}

/* ══════════════ CHART AREA ══════════════ */
.chart-area {
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  overflow: hidden;
}

.chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ct-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sec);
  letter-spacing: 1px;
}
.ct-tools { display: flex; align-items: center; gap: 10px; }
.tool-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-sec);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
}
.tool-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.tool-btn.active { background: var(--accent)22; border-color: var(--accent); color: var(--accent); }

.toggle-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-sec);
  cursor: pointer;
}
.toggle-wrap input[type="checkbox"] {
  accent-color: var(--accent);
  width: 13px; height: 13px;
}

.canvas-wrap {
  flex: 1;
  position: relative;
  min-height: 0;
}
.canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.sub-chart-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  padding: 4px 14px 2px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.sub-canvas-wrap {
  height: 70px;
  flex-shrink: 0;
  position: relative;
  border-top: 1px solid var(--border);
}
.sub-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Crosshair Info */
.crosshair-info {
  position: absolute;
  top: 8px; left: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-sec);
  pointer-events: none;
  background: var(--bg-panel)cc;
  padding: 4px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: none;
}

/* ══════════════ RIGHT PANEL ══════════════ */

/* Prediction Box */
.prediction-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  position: relative;
  overflow: hidden;
}
.prediction-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--buy), var(--accent2));
}
.pred-header {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.pred-direction {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 10px;
}
.pred-direction.up { color: var(--buy); text-shadow: 0 0 15px var(--buy)55; }
.pred-direction.down { color: var(--sell); text-shadow: 0 0 15px var(--sell)55; }

.prob-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  font-size: 11px;
  color: var(--text-sec);
}
.prob-row span:first-child { width: 48px; }
.prob-row span:last-child {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  width: 32px;
  text-align: right;
}
.prob-bar-wrap {
  flex: 1;
  background: var(--bg-base);
  border-radius: 3px;
  height: 5px;
  overflow: hidden;
}
.prob-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}
.prob-bar.bull { background: linear-gradient(90deg, var(--buy), var(--accent2)); box-shadow: 0 0 6px var(--buy)55; }
.prob-bar.bear { background: linear-gradient(90deg, var(--sell), #ff8a65); box-shadow: 0 0 6px var(--sell)55; }

/* Levels Box */
.levels-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
}
.lev-title {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.lev-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
  border-radius: var(--radius);
  margin-bottom: 3px;
  font-size: 11px;
}
.lev-row.resistance { background: var(--sell-dim); }
.lev-row.support { background: var(--buy-dim); }
.lev-row.current { background: var(--accent)15; border: 1px solid var(--accent)30; }
.lev-label { color: var(--text-sec); }
.lev-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
}
.lev-row.resistance .lev-val { color: var(--sell); }
.lev-row.support .lev-val { color: var(--buy); }
.lev-row.current .lev-val { color: var(--accent); }

/* Trade Setup */
.trade-setup {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
}
.ts-title {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.ts-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.ts-row:last-child { border-bottom: none; }
.ts-label { color: var(--text-sec); }
.ts-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
}
.ts-val.entry { color: var(--accent2); }
.ts-val.target { color: var(--buy); }
.ts-val.stoploss { color: var(--sell); }
.ts-val.rr { color: var(--gold); }

/* Pattern Box */
.pattern-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
}
.pat-title {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.pat-list { display: flex; flex-direction: column; gap: 4px; }
.pat-item {
  font-size: 11px;
  padding: 5px 8px;
  border-radius: var(--radius);
  border-left: 3px solid;
}
.pat-item.bull { background: var(--buy-dim); border-color: var(--buy); color: var(--buy); }
.pat-item.bear { background: var(--sell-dim); border-color: var(--sell); color: var(--sell); }
.pat-item.neutral { background: var(--neutral-dim); border-color: var(--neutral); color: var(--neutral); }

/* Accuracy Box */
.accuracy-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  text-align: center;
}
.acc-title {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.acc-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--buy);
  text-shadow: 0 0 20px var(--buy)55;
  line-height: 1;
  margin-bottom: 4px;
}
.acc-sub {
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.acc-breakdown {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 11px;
}
.acc-win { color: var(--buy); }
.acc-loss { color: var(--sell); }

/* ══════════════ ALERT TOAST ══════════════ */
.alert-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--bg-card);
  border: 1px solid var(--buy)60;
  border-radius: 30px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--buy);
  box-shadow: 0 4px 30px var(--buy)33;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  z-index: 999;
  pointer-events: none;
}
.alert-toast.show { transform: translateX(-50%) translateY(0); }
.at-icon { font-size: 16px; }

/* ══════════════ ANIMATIONS ══════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ind-item { animation: fadeInUp 0.3s ease both; }
.ind-item:nth-child(1) { animation-delay: 0.05s; }
.ind-item:nth-child(2) { animation-delay: 0.10s; }
.ind-item:nth-child(3) { animation-delay: 0.15s; }
.ind-item:nth-child(4) { animation-delay: 0.20s; }
.ind-item:nth-child(5) { animation-delay: 0.25s; }
.ind-item:nth-child(6) { animation-delay: 0.30s; }
.ind-item:nth-child(7) { animation-delay: 0.35s; }
.ind-item:nth-child(8) { animation-delay: 0.40s; }

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 8px var(--buy)33; }
  50% { box-shadow: 0 0 20px var(--buy)66; }
}
.master-signal { animation: glowPulse 3s ease-in-out infinite; }

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 1100px) {
  .main-layout { grid-template-columns: 200px 1fr 220px; }
}
@media (max-width: 900px) {
  .main-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .left-panel, .right-panel { flex-direction: row; flex-wrap: wrap; overflow-x: auto; height: auto; }
  html, body { overflow: auto; }
}