:root {
  --bg: #0e1422;
  --panel: #151a29;
  --plot: #141b27;
  --line: #232b36;
  --text: #f3fbff;
  --accent: #7AA7D7;
}
* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--text); font-family: 'Inter', 'Segoe UI', Arial, sans-serif; margin: 0; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 auto; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.relative { position: relative; }
.hidden { display: none !important; }
.min-h-screen { min-height: 100vh; }
#mainChart { width: 100%; min-height: 370px; height: 370px; }
#rsiChart { width: 100%; height: 130px; }
#modal.show { display: flex !important; }

.bg-panel { background: var(--panel); }
.border-line { border-color: var(--line); }
.text-accent { color: #8ec5ff; }

/* Header */
.status-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px; border-radius: 12px; min-width: 170px;
  font-size: 13px; font-weight: 600; color: #e8f1fb;
  background: #151c2b; border: 1px solid #2a3547;
  transition: border-color .2s;
}
.status-pill .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--c, #FFDC80); flex-shrink: 0; }
.status-pill.live .dot { animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 9px; font-size: 12.5px; font-weight: 700; padding: 9px 15px;
  transition: background .15s, color .15s; cursor: pointer; white-space: nowrap;
}
.btn-primary { background: #2e406c; color: #f2f6fb; }
.btn-primary:hover { background: #38508a; }
.btn-primary.checked { background: #eaeeff; color: #21436e; }
.btn-ghost { background: transparent; color: #c9d7ec; border: 1px solid #2a3547; }
.btn-ghost:hover { background: #172033; }
.icon-btn { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #F5CA66; border: 1px solid #2b3446; }
.icon-btn:hover { background: #1e2740; }
.icon-btn.spin svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Cards */
.card {
  height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #171e2e; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px;
}
.card-title { color: #7AA7D7; font-size: 11px; font-weight: 600; letter-spacing: .8px; }
.card-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .card-value { font-size: 16px; } }

/* Controls */
.ctl { display: inline-flex; align-items: center; gap: 9px; color: #dfe7f2; font-size: 13px; }
.ctl select {
  background: #1c2230; color: #e7edf5; border: 1px solid #253c5b; border-radius: 7px;
  padding: 6px 12px; min-width: 115px; font-size: 12px; outline: none; cursor: pointer;
}
.ctl select:focus { border-color: #4a76b5; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #dfe7f2; cursor: pointer; user-select: none; }
.chk input { appearance: none; width: 15px; height: 15px; border: 1px solid #3a4a66; border-radius: 4px; background: #1c2230; display: grid; place-items: center; cursor: pointer; }
.chk input:checked { background: #3d7bfd; border-color: #3d7bfd; }
.chk input:checked::after { content: ''; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }

/* Plots */
.plot { background: var(--plot); border: 1px solid #1d2636; border-radius: 12px; padding: 8px 6px 4px; overflow: hidden; }
.plot-title { color: #a2dcff; font-size: 14px; text-align: center; padding: 2px 0 6px; }
.ai-overlay {
  position: absolute; top: 42px; left: 16px; max-width: min(460px, 70%);
  background: rgba(38, 52, 70, .85); border-radius: 8px; padding: 8px 12px; z-index: 5; pointer-events: none;
}

/* Analyst */
.analyst { background: rgba(25, 29, 50, .93); border: 1.8px solid #192c3e; border-radius: 14px; padding: 20px 18px 16px; color: #eaf3fd; }
.scorebar { position: relative; height: 22px; background: #131a24; border-radius: 8px; overflow: hidden; }
.scorebar-fill { position: absolute; top: 0; bottom: 0; background: #21ebaa; border-radius: 8px; transition: all .4s; }
.scorebar span { position: relative; z-index: 1; display: block; text-align: center; font-size: 11.5px; line-height: 22px; color: #e9f4ff; font-weight: 600; }

/* Console */
.console {
  background: #161c2e; color: #fff1e4; font-family: 'JetBrains Mono', 'Fira Mono', monospace; font-size: 12.5px;
  border-radius: 13px; padding: 8px 14px; min-height: 90px; max-height: 140px; overflow-y: auto; line-height: 1.55;
}
#rsiWrap:not(.hidden) + .console { grid-column: auto; }
.console::-webkit-scrollbar { width: 8px; }
.console::-webkit-scrollbar-thumb { background: #2a3550; border-radius: 8px; }

/* Simple mode */
.traffic { width: 92px; height: 92px; border-radius: 99px; display: grid; place-items: center; background: #151c2b; border: 1px solid #2a3547; }
.traffic span { width: 62px; height: 62px; border-radius: 99px; background: var(--c, #FFD050); transition: background .3s; }
.confbar { position: relative; width: 340px; max-width: 90vw; height: 24px; background: #142231; border: 1px solid #4076a0; border-radius: 7px; overflow: hidden; }
.confbar-fill { position: absolute; top: 0; bottom: 0; left: 0; background: #33dbda; transition: width .4s; }
.confbar span { position: relative; z-index: 1; display: block; line-height: 22px; font-size: 13px; color: #ddefff; font-weight: 600; }

#modal.show { display: flex; }