* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #0d0d0d;
  color: #e0e0e0;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Top bar (branding + auth) ───────────────────────────────────── */
#top-bar {
  display: flex; height: 42px; background: #0b101a;
  align-items: center; padding: 0 16px;
  flex-shrink: 0; border-bottom: 1px solid #1a2233;
}
#brand {
  display: flex; align-items: center; gap: 9px;
}
#brand-name {
  font-size: 16px; font-weight: 700; color: #e0e0e0;
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
  letter-spacing: 0.5px;
}
#brand-version {
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  color: #1e90ff; text-transform: uppercase;
  background: rgba(30,144,255,0.12);
  border: 1px solid rgba(30,144,255,0.32);
  padding: 2px 6px; border-radius: 4px;
  margin-left: 2px;
  cursor: help; user-select: none;
  font-family: 'Inter', 'Segoe UI', sans-serif;
}
#top-bar-right {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
}
#upgrade-btn {
  background: none; border: 1px solid #1e90ff; color: #1e90ff;
  padding: 4px 12px; display: flex; align-items: center; gap: 6px;
  border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: 600;
  transition: background 0.15s, color 0.15s; white-space: nowrap;
}
#upgrade-btn:hover { background: #1e90ff; color: #fff; }
#upgrade-btn svg { flex-shrink: 0; }
#settings-btn, #help-btn {
  background: none; border: none; color: #666; cursor: pointer;
  padding: 4px; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; transition: color 0.15s;
}
#settings-btn:hover, #help-btn:hover { color: #1e90ff; }
#top-bar #login-btn {
  background: #1e90ff; border: none;
  color: #fff; padding: 7px 20px; border-radius: 5px; cursor: pointer;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background 0.15s;
}
#top-bar #login-btn:hover { background: #1a7ae0; }
#top-bar #login-btn.signed-in { display: none; }
#top-bar #clerk-user-btn { display: flex; align-items: center; gap: 8px; }

/* ── Info bar (search + OHLCV) ───────────────────────────────────── */
#info-bar {
  display: flex; height: 36px; background: #0b101a;
  align-items: center; padding: 0 12px; gap: 12px;
  font-size: 13px; flex-shrink: 0;
  border-bottom: 1px solid #1a2233;
}
#search-row {
  display: flex; gap: 6px; align-items: center;
  position: relative;
}
#symbol-input {
  background: #0d0d0d; border: 1px solid #444; color: #1e90ff;
  padding: 4px 8px; border-radius: 4px; font-size: 14px; width: 90px;
  text-transform: uppercase; outline: none; font-weight: bold;
}
#symbol-input:focus { border-color: #1e90ff; }
#date-input {
  background: #0d0d0d; border: 1px solid #444; color: #aaa;
  padding: 4px 8px; border-radius: 4px; font-size: 13px; outline: none;
  color-scheme: dark;
}
#date-input:focus { border-color: #1e90ff; }
#load-btn {
  background: #1e90ff; color: #fff; border: none;
  padding: 4px 12px; border-radius: 4px; font-size: 13px; font-weight: bold;
  cursor: pointer;
}
#load-btn:hover { background: #1a7ae0; }
#load-btn:disabled { background: #333; color: #666; cursor: not-allowed; }

/* Autocomplete dropdown */
#autocomplete {
  position: absolute; top: 100%; left: 0;
  background: #141a24; border: 1px solid #444;
  border-radius: 6px; max-height: 200px; overflow-y: auto;
  z-index: 1001; display: none; min-width: 250px;
}
#autocomplete .ac-item {
  padding: 8px 14px; cursor: pointer; font-size: 14px;
  display: flex; gap: 10px;
}
#autocomplete .ac-item:hover, #autocomplete .ac-item.selected { background: #1a2233; }
#autocomplete .ac-sym { color: #1e90ff; font-weight: bold; min-width: 60px; }
#autocomplete .ac-name { color: #888; }

#search-status { color: #888; font-size: 11px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#search-status.error { color: #ff5656; }

#info-bar .ohlc-label { color: #888; }
#info-bar .ohlc-val { font-weight: bold; }
#info-bar .up { color: #00d01a; }
#info-bar .down { color: #ff5656; }
.equity-spacer { flex: 1; }

/* ── Position info panel ─────────────────────────────────────────── */
/* ── Sim bar (fixed-width right section of info bar) ─────────────── */
.sim-bar {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; white-space: nowrap;
}
.sim-bar-divider {
  width: 1px; height: 18px; background: #1a2233; flex-shrink: 0;
}
.sim-position-info {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; width: 230px; justify-content: flex-end;
}
.sim-equity-cell {
  display: flex; align-items: center; gap: 6px;
  width: 140px; flex-shrink: 0;
}
.sim-equity-cell .ohlc-val {
  display: inline-block; width: 100px; text-align: right;
}
.sim-flat { color: #888; }
.sim-long { color: #00d01a; font-weight: 600; }
.sim-short { color: #ff5656; font-weight: 600; }
.sim-avg { color: #888; }
.sim-profit { color: #00d01a; }
.sim-loss { color: #ff5656; }

/* ── Main area ───────────────────────────────────────────────────── */
#main-area {
  flex: 1; display: flex; flex-direction: row; overflow: hidden;
}
#chart-container {
  flex: 1; min-width: 0; position: relative; overflow: hidden;
  background: #111111;
}
canvas { display: block; width: 100%; height: 100%; }

/* ── Right panel (control panel + T&S stacked) ───────────────────── */
#right-panel {
  width: 220px; display: flex; flex-direction: column;
  flex-shrink: 0; border-left: 1px solid #222;
}

/* ── Control panel (top, holds Settings + Trade Replay) ──────────── */
#control-panel {
  flex: 0 0 auto;
  background: #0d0d0d; border-bottom: 1px solid #222;
  overflow: hidden; padding: 12px;
  display: flex; flex-direction: column; box-sizing: border-box;
}
.cp-section {
  flex: 0 0 auto; border-bottom: 1px solid #1a2233;
  padding: 10px 0;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.cp-section-trades .cp-section-body {
  display: flex; flex-direction: column;
}
.cp-section:first-child { padding-top: 0; }
.cp-section:last-child { border-bottom: none; }
.cp-section-title {
  font-size: 10px; font-weight: 600; color: #556;
  text-transform: uppercase; letter-spacing: 1px;
  text-align: center; margin-bottom: 10px;
}
.cp-section-body {}
.cp-toggle {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; padding: 4px 0;
}
.cp-toggle input[type="checkbox"] {
  display: none;
}
.cp-switch {
  position: relative; width: 36px; height: 20px;
  background: #333; border-radius: 10px;
  flex-shrink: 0; transition: background 0.2s;
}
.cp-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #888; transition: transform 0.2s, background 0.2s;
}
.cp-toggle input:checked + .cp-switch {
  background: #1e90ff;
}
.cp-toggle input:checked + .cp-switch::after {
  transform: translateX(16px); background: #fff;
}
.cp-toggle-label {
  font-size: 13px; color: #bbb; user-select: none;
}
.cp-btn {
  display: block; width: 100%; padding: 7px 0; border: none;
  border-radius: 4px; font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: center; letter-spacing: 0.3px;
}
.cp-btn-accent {
  background: #1e90ff; color: #fff; margin-top: 12px;
}
.cp-btn-accent:hover { background: #1a7ae0; }
.cp-shares-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.cp-shares-label {
  font-size: 12px; color: #888; white-space: nowrap;
}
.cp-shares-input {
  flex: 1; min-width: 0; background: #0d0d0d; border: 1px solid #333; color: #e0e0e0;
  padding: 6px 8px; border-radius: 4px; font-size: 14px;
  text-align: center; outline: none; font-weight: 600;
}
.cp-shares-input:focus { border-color: #1e90ff; }
.cp-trade-buttons {
  display: flex; gap: 8px;
}
.cp-btn-buy {
  flex: 1; background: #00d01a; color: #111; font-size: 14px;
  padding: 10px 0; font-weight: 700;
}
.cp-btn-buy:hover { background: #00b816; }
.cp-btn-sell {
  flex: 1; background: #ff5656; color: #111; font-size: 14px;
  padding: 10px 0; font-weight: 700;
}
.cp-btn-sell:hover { background: #e04444; }

/* ── T&S panel (middle, fills available space) ───────────────────── */
#tas-panel {
  flex: 1; background: #0d0d0d;
  display: flex; flex-direction: column; overflow: hidden;
}

/* ── Simulator panel (bottom) ────────────────────────────────────── */
#simulator-panel {
  flex: 0 0 auto; background: #0d0d0d; border-top: 1px solid #222;
  padding: 12px; box-sizing: border-box;
}
#tas-header {
  height: 28px; background: #0d0d0d; border-bottom: 1px solid #222;
  display: flex; align-items: center; padding: 0 12px;
  font-size: 14px; font-family: Arial, Helvetica, sans-serif;
  color: #888; flex-shrink: 0;
}
#tas-header span { flex: 1; text-align: center; }
#tas-header span:first-child { text-align: left; }
#tas-header span:last-child { text-align: right; }
#tas-body {
  flex: 1; overflow: hidden;
  font-size: 14px; font-family: Arial, Helvetica, sans-serif;
}
#tas-body .tas-row {
  display: flex; padding: 1px 12px;
  border-bottom: 1px solid rgba(30,30,30,0.5);
}
#tas-body .tas-row span { flex: 1; text-align: center; }
#tas-body .tas-row span:first-child { text-align: left; color: #888; }
#tas-body .tas-row span:last-child { text-align: right; color: #aaa; }
#tas-body .tas-row.up span:nth-child(2) { color: #00d01a; }
#tas-body .tas-row.down span:nth-child(2) { color: #ff5656; }
#tas-body .tas-row.neutral span:nth-child(2) { color: #cccc00; }

/* ── Equity drawer (between chart and bottom bar) ───────────────────
   Collapsed = 24px (handle only, sticking up). Open = 160px. Height is
   transitioned so the chart area grows/shrinks smoothly. Canvas inside
   is absolute-positioned so its resize tracks the body area cleanly. */
#equity-drawer {
  position: relative; flex-shrink: 0;
  background: #0b101a; border-top: 1px solid #1a2233;
  height: 24px; overflow: hidden;
  transition: height 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
#equity-drawer.eq-drawer-open { height: 320px; }
#equity-drawer.eq-drawer-peeking { animation: eq-peek 1.8s ease-in-out; }
@keyframes eq-peek {
  0%   { height: 24px; }
  25%  { height: 120px; }
  65%  { height: 120px; }
  100% { height: 24px; }
}
.eq-handle {
  position: relative; z-index: 2;
  width: 100%; height: 24px;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  /* Gradient + blue accent top border so the handle reads as an
     interactive surface even at rest. The accent line is what the
     user sees above the bottom bar when the drawer is collapsed. */
  background: linear-gradient(180deg, rgba(30,144,255,0.10) 0%, rgba(30,144,255,0.04) 60%, #0b101a 100%);
  border: none;
  border-top: 2px solid rgba(30, 144, 255, 0.55);
  border-bottom: 1px solid #1a2233;
  color: #c8daf0; font-size: 11px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase;
  cursor: pointer; user-select: none;
  transition: background 0.15s, color 0.15s, border-top-color 0.15s;
}
.eq-handle:hover {
  background: linear-gradient(180deg, rgba(30,144,255,0.18) 0%, rgba(30,144,255,0.08) 60%, #0b101a 100%);
  color: #e5f0fa;
  border-top-color: rgba(30, 144, 255, 0.85);
}
.eq-handle-icon { color: #1e90ff; opacity: 1; }
.eq-handle-chevron { font-size: 9px; opacity: 0.8; color: #1e90ff; }
/* Subtle pulse — only runs while the user has never opened the drawer.
   Drops as soon as they discover it; goes quiet forever after. */
#equity-drawer.eq-drawer-pulse .eq-handle {
  animation: eq-handle-pulse 1.8s ease-in-out infinite;
}
@keyframes eq-handle-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(30,144,255,0.0); color: #9aaabb; }
  50%      { box-shadow: inset 0 1px 0 rgba(30,144,255,0.5), 0 -4px 14px rgba(30,144,255,0.18); color: #c8daf0; }
}
.eq-body {
  position: absolute; left: 0; right: 0; top: 24px; bottom: 0;
  overflow: hidden;
}
#equity-canvas {
  display: block; width: 100%; height: 100%;
  cursor: crosshair;
}
.eq-empty {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  color: #556; font-size: 12px;
  pointer-events: none;
}
.eq-crosshair-label {
  position: absolute; top: 6px;
  display: none; flex-direction: column; gap: 2px;
  background: rgba(11,16,26,0.92); border: 1px solid #1a2233; border-radius: 4px;
  padding: 4px 8px; font-size: 11px; font-family: 'Consolas', monospace;
  pointer-events: none; z-index: 3;
  min-width: 60px;
}
.eq-cl-pnl { font-weight: 700; }
.eq-cl-pnl.pos { color: #00d01a; }
.eq-cl-pnl.neg { color: #ff5656; }
.eq-cl-dd { color: #ff8080; font-size: 10px; }

/* ── Bottom bar ──────────────────────────────────────────────────── */
#bottom-bar {
  display: flex; background: #0b101a; border-top: 1px solid #1a2233;
  flex-shrink: 0; flex-direction: column;
}
#time-slider-container {
  height: 35px; display: flex; align-items: center; padding: 0 16px;
}
#time-slider {
  width: 100%; height: 12px; -webkit-appearance: none; appearance: none;
  background: #1a2233; border-radius: 6px; outline: none; cursor: pointer;
}
#time-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 33px; height: 33px; border-radius: 50%;
  background: #1e90ff; cursor: pointer; border: 2px solid #0b101a;
}
#time-slider::-moz-range-thumb {
  width: 33px; height: 33px; border-radius: 50%;
  background: #1e90ff; cursor: pointer; border: 2px solid #0b101a;
}
#controls-row {
  height: 48px; display: flex; align-items: center;
  padding: 0 16px; gap: 14px; border-top: 1px solid #1a2233;
}
/* Thin legal/policy strip inside the bottom bar. Must be visible in the
   rendered HTML so Google's OAuth verification crawler finds the privacy
   + terms links; also the standard trust signal for a paid SaaS. */
#legal-footer {
  height: 24px; display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 0 16px; border-top: 1px solid #1a2233;
  font-size: 10px; color: #5a6878; letter-spacing: 0.3px;
}
#legal-footer a {
  color: #7a8594; text-decoration: none;
  transition: color 0.15s;
}
#legal-footer a:hover { color: #1e90ff; }
#legal-footer .legal-sep { color: #2a3544; user-select: none; }
#playhead-time { color: #1e90ff; font-size: 15px; font-weight: 600; width: 130px; font-family: 'Consolas', monospace; }
#play-btn {
  background: none; border: 1px solid #555; color: #e0e0e0;
  width: 40px; height: 35px; border-radius: 4px; cursor: pointer;
  font-size: 18px; display: flex; align-items: center; justify-content: center;
}
#play-btn:hover { border-color: #1e90ff; color: #1e90ff; }
#speed-select, #candle-interval {
  background: #0d0d0d; border: 1px solid #555; color: #e0e0e0;
  padding: 5px 10px; border-radius: 4px; font-size: 15px; cursor: pointer;
}

/* ── Loading overlay ─────────────────────────────────────────────── */
#loading-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(13,13,13,0.95); z-index: 999;
  flex-direction: column; align-items: center; justify-content: center;
}
#loading-overlay #loading-title {
  color: #e0e0e0; font-size: 15px; font-weight: 500;
  margin: 0 0 8px 0; letter-spacing: 0.2px;
  text-align: center;
}
#loading-overlay #loading-description {
  color: #8a97a8; font-size: 12px; line-height: 1.5;
  margin: 0 0 20px 0; padding: 0 24px;
  max-width: 440px; text-align: center;
  min-height: 16px;
}
#loading-bar-track {
  width: 320px; height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
  position: relative;
}
#loading-bar-fill {
  width: 0%; height: 100%;
  background: linear-gradient(90deg, #1e6fff 0%, #1e90ff 50%, #5ab4ff 100%);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(30,144,255,0.45);
  transition: width 120ms linear;
}
#loading-bar-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-100%);
  animation: loading-shimmer 1.6s ease-in-out infinite;
}
@keyframes loading-shimmer {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
#loading-overlay #loading-progress {
  color: #6ba6e8; font-size: 12px;
  margin: 14px 0 0 0;
  min-height: 16px;
  letter-spacing: 0.2px;
}

/* ── Crosshair labels ────────────────────────────────────────────── */
#crosshair-time {
  position: absolute; bottom: 4px; background: #333; color: #e0e0e0;
  padding: 2px 8px; font-size: 11px; border-radius: 3px;
  pointer-events: none; display: none; white-space: nowrap;
}
#crosshair-price {
  position: absolute; right: 0; background: #333; color: #e0e0e0;
  padding: 2px 8px; font-size: 11px; border-radius: 3px;
  pointer-events: none; display: none; white-space: nowrap;
}

/* ── Settings modal ──────────────────────────────────────────────── */
.settings-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  z-index: 2000; display: flex; align-items: center; justify-content: center;
}
.settings-modal {
  background: #0b101a; border: 1px solid #1a2233; border-radius: 12px;
  width: 420px; max-width: 90vw; max-height: 90vh;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.settings-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #1a2233;
  flex-shrink: 0;
}
.settings-title {
  font-size: 17px; font-weight: 700; color: #e0e0e0;
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
}
.settings-close {
  background: none; border: none; color: #666; font-size: 22px;
  cursor: pointer; padding: 0; line-height: 1;
}
.settings-close:hover { color: #e0e0e0; }
.settings-body {
  padding: 4px 20px;
  flex: 1 1 auto; overflow-y: auto; min-height: 0;
}
.settings-body::-webkit-scrollbar { width: 6px; }
.settings-body::-webkit-scrollbar-thumb { background: #1a2233; border-radius: 3px; }
.settings-body::-webkit-scrollbar-thumb:hover { background: #2a3544; }
.settings-group {
  padding: 14px 0 16px;
  border-bottom: 1px solid #1a2233;
}
.settings-group:last-child  { border-bottom: none; padding-bottom: 4px; }
.settings-group-title {
  font-size: 10px; font-weight: 600; color: #5a6878;
  text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 10px;
}

/* ── Two-column field grid ─────────────────────────────────────────
   Every row in the modal body uses this grid: label on the left (col 1),
   control right-aligned on col 2. Hints span both columns underneath. */
.settings-field {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px; row-gap: 4px;
  align-items: center;
  padding: 6px 0;
}
.settings-field + .settings-field { padding-top: 8px; }
.settings-field-label {
  font-size: 13px; color: #c8d0da; line-height: 1.35;
  margin: 0; user-select: none;
}
.settings-field-hint {
  grid-column: 1 / -1;
  font-size: 11px; color: #6a7a8c; line-height: 1.4;
  margin: 2px 0 0;
}

/* Right-column wrappers for number/time/prefix inputs. */
.settings-control {
  display: inline-flex; align-items: center; gap: 6px;
  justify-self: end;
}

/* Compact toggle — just the switch in the right column. */
.settings-toggle-compact {
  display: inline-flex; align-items: center; cursor: pointer;
  justify-self: end;
}
.settings-toggle-compact input[type="checkbox"] { display: none; }
.settings-toggle-compact input:checked + .cp-switch { background: #1e90ff; }
.settings-toggle-compact input:checked + .cp-switch::after {
  transform: translateX(16px); background: #fff;
}

/* Demo-trades status text reuses the label style so Demo + Subscription
   rows look like peers of the pref rows above them. */
.settings-status-text {
  font-size: 13px; color: #c8d0da; line-height: 1.4;
}

/* Subscription plan label stacks above the sub-line in col 1. */
.settings-billing-status {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.settings-billing-plan {
  font-size: 15px; font-weight: 700; letter-spacing: 0.3px;
}
.settings-billing-plan-basic { color: #1e90ff; }
.settings-billing-plan-free  { color: #9aaabb; }
.settings-billing-sub {
  font-size: 12px; color: #6a7a8c;
}
.settings-billing-btn {
  flex-shrink: 0;
  padding: 7px 14px; border-radius: 6px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.settings-billing-btn-upgrade {
  background: #1e90ff; color: #fff;
}
.settings-billing-btn-upgrade:hover { background: #1a7ae0; }
.settings-billing-btn-manage {
  background: none; border: 1px solid #2a3544; color: #bbb;
}
.settings-billing-btn-manage:hover { border-color: #1e90ff; color: #1e90ff; }

/* ── Post-replay summary toast ─────────────────────────────────── */
#replay-summary-toast {
  position: fixed; top: 72px; right: 20px; z-index: 2400;
  background: #0b101a; border: 1px solid #1e90ff; border-radius: 10px;
  padding: 14px 18px; min-width: 320px; max-width: 90vw;
  color: #e0e0e0;
  box-shadow: 0 10px 32px rgba(0,0,0,0.6);
  animation: billing-toast-in 0.35s ease-out;
}
.rs-header {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid #1a2233;
}
.rs-title { font-size: 14px; font-weight: 700; color: #e0e0e0; flex: 1; }
.rs-dismiss {
  background: none; border: none; color: #888; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0 4px;
}
.rs-dismiss:hover { color: #e0e0e0; }
.rs-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.rs-stat { text-align: center; }
.rs-stat-label {
  font-size: 9px; font-weight: 600; color: #6a7a8c;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 3px;
}
.rs-stat-val {
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: #e0e0e0;
}
.rs-pos { color: #00d01a; }
.rs-neg { color: #ff5656; }

/* ── Welcome tour bubbles ──────────────────────────────────────── */
#welcome-tour {
  position: fixed; inset: 0; z-index: 2800;
  pointer-events: none;  /* bubbles themselves take pointer events */
}
.wt-bubble {
  position: fixed;
  background: #0b101a; border: 1px solid #1e90ff; border-radius: 8px;
  padding: 10px 14px 10px 38px;
  max-width: 240px; color: #e0e0e0; font-size: 13px; line-height: 1.45;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6), 0 0 0 1px rgba(30,144,255,0.2);
  pointer-events: auto;
  animation: wt-pop 0.32s ease-out;
}
.wt-step-num {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: #1e90ff; color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.wt-text { }
.wt-arrow {
  position: absolute; width: 10px; height: 10px;
  background: #0b101a; border: 1px solid #1e90ff;
  transform: rotate(45deg);
}
.wt-bubble-above .wt-arrow {
  bottom: -6px; left: 50%; margin-left: -5px;
  border-top: none; border-left: none;
}
.wt-bubble-below .wt-arrow {
  top: -6px; left: 50%; margin-left: -5px;
  border-bottom: none; border-right: none;
}
.wt-bubble-left .wt-arrow {
  right: -6px; top: 50%; margin-top: -5px;
  border-bottom: none; border-left: none;
}
.wt-bubble-right .wt-arrow {
  left: -6px; top: 50%; margin-top: -5px;
  border-top: none; border-right: none;
}
.wt-got-it {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: #1e90ff; color: #fff; border: none;
  padding: 12px 32px; border-radius: 8px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 32px rgba(0,0,0,0.65), 0 0 0 1px rgba(30,144,255,0.3);
  pointer-events: auto;
}
.wt-got-it:hover { background: #1a7ae0; }
@keyframes wt-pop {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Keyboard-shortcut help overlay ────────────────────────────── */
.kh-box {
  background: #0b101a; border: 1px solid #1a2233; border-radius: 12px;
  width: 460px; max-width: 92vw; max-height: 86vh;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7);
  overflow: hidden; display: flex; flex-direction: column;
}
.kh-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #1a2233; flex-shrink: 0;
}
.kh-title {
  font-size: 16px; font-weight: 700; color: #e0e0e0;
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
}
.kh-body {
  padding: 16px 20px; overflow-y: auto;
}
.kh-group { margin-bottom: 16px; }
.kh-group:last-child { margin-bottom: 0; }
.kh-group-title {
  font-size: 10px; font-weight: 600; color: #6a7a8c;
  text-transform: uppercase; letter-spacing: 0.8px;
  margin-bottom: 8px;
}
.kh-row {
  display: flex; align-items: center; gap: 14px;
  padding: 5px 0; font-size: 13px;
}
.kh-key {
  display: inline-block; min-width: 72px;
  background: #0d1422; border: 1px solid #2a3544; border-radius: 5px;
  padding: 3px 8px; color: #e0e0e0;
  font-family: 'Inter', monospace; font-weight: 600; font-size: 12px;
  text-align: center;
}
.kh-desc { color: #bbb; }
.kh-footer {
  padding: 12px 20px; border-top: 1px solid #1a2233;
  display: flex; justify-content: flex-end; flex-shrink: 0;
}
.kh-replay-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid #2a3544; color: #bbb;
  padding: 7px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.kh-replay-btn:hover {
  border-color: #1e90ff; color: #1e90ff;
  background: rgba(30,144,255,0.06);
}

/* ── Drag-and-drop CSV indicator ───────────────────────────────── */
#drop-indicator {
  position: fixed; inset: 0; z-index: 2500;
  background: rgba(11,16,26,0.82);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;  /* let drop pass through to window handler */
}
.drop-indicator-box {
  border: 2px dashed #1e90ff; border-radius: 14px;
  padding: 36px 56px; text-align: center;
  color: #e0e0e0; font-size: 16px; font-weight: 600;
  background: rgba(30,144,255,0.06);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}

/* ── Billing redirect toast ────────────────────────────────────── */
#billing-toast {
  position: fixed; top: 58px; left: 50%; transform: translateX(-50%);
  z-index: 3000; background: #0b101a;
  border: 1px solid #1e90ff; border-radius: 8px;
  padding: 12px 18px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  font-size: 14px; color: #e0e0e0;
  animation: billing-toast-in 0.35s ease-out;
  max-width: 90vw;
}
#billing-toast.billing-toast-error {
  border-color: #ff5656;
}
#billing-toast .billing-toast-icon { flex-shrink: 0; }
#billing-toast-dismiss {
  background: none; border: none; color: #888; cursor: pointer;
  padding: 2px 6px; margin-left: 8px; font-size: 16px; line-height: 1;
}
#billing-toast-dismiss:hover { color: #e0e0e0; }
@keyframes billing-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.settings-dollar {
  color: #7a8594; font-size: 14px; font-weight: 600;
}
.settings-input {
  background: #0d0d0d; border: 1px solid #2a3544; color: #e0e0e0;
  height: 34px; padding: 0 10px; border-radius: 5px;
  font-size: 14px; font-weight: 600; font-family: inherit;
  outline: none; width: 140px;
  box-sizing: border-box;
  line-height: normal;
}
.settings-input-narrow { width: 110px; }
/* Time inputs need extra room for the 12-hour AM/PM indicator + picker icon. */
.settings-input[type="time"] { width: 135px; }
.settings-input:focus { border-color: #1e90ff; }
.settings-input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.6);
  cursor: pointer;
}
.settings-footer {
  padding: 14px 20px; border-top: 1px solid #1a2233;
  display: flex; justify-content: flex-end;
  flex-shrink: 0;
}
.settings-save-btn {
  background: #1e90ff; color: #fff; border: none;
  padding: 8px 28px; border-radius: 5px; font-size: 13px;
  font-weight: 600; cursor: pointer;
}
.settings-save-btn:hover { background: #1a7ae0; }

/* ── Guest gate (sign-in prompt for settings) ──────────────────── */
.settings-gate-box {
  background: #0b101a; border: 1px solid #1a2233; border-radius: 12px;
  padding: 32px 40px; text-align: center; max-width: 360px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7);
}
.settings-gate-title {
  font-size: 19px; font-weight: 700; color: #e0e0e0;
  font-family: 'Montserrat', 'Segoe UI', sans-serif; margin-bottom: 8px;
}
.settings-gate-msg {
  color: #999; font-size: 15px; line-height: 1.5; margin-bottom: 20px;
}
.settings-gate-signin {
  background: #1e90ff; color: #fff; border: none;
  padding: 10px 28px; border-radius: 6px; font-size: 14px;
  font-weight: 600; cursor: pointer; margin-right: 10px;
}
.settings-gate-signin:hover { background: #1a7ae0; }
.settings-gate-dismiss {
  background: none; border: 1px solid #444; color: #aaa;
  padding: 10px 20px; border-radius: 6px; font-size: 14px; cursor: pointer;
}
.settings-gate-dismiss:hover { border-color: #1e90ff; color: #1e90ff; }

/* ── Tier comparison modal ──────────────────────────────────────── */
.tier-modal {
  background: #0b101a; border: 1px solid #1a2233; border-radius: 12px;
  width: 760px; max-width: 94vw; max-height: 92vh;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.tier-modal-wide { width: 1000px; }
.tier-modal .settings-header {
  padding: 20px 28px; flex-shrink: 0;
}
.tier-modal .settings-title { font-size: 18px; }
.tier-body {
  padding: 28px; overflow-y: auto; flex: 1;
}
.tier-cards {
  display: flex; gap: 18px;
}
.tier-card {
  flex: 1; background: #0d0d0d; border: 1px solid #1a2233;
  border-radius: 10px; padding: 24px 20px; display: flex;
  flex-direction: column; align-items: center; text-align: center;
  transition: border-color 0.2s;
}
.tier-card.current { border-color: #444; }
.tier-card.recommended { border-color: #1e90ff; }
.tier-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; padding: 3px 10px; border-radius: 10px;
  margin-bottom: 10px;
}
.tier-card.current .tier-badge {
  background: #222; color: #888;
}
.tier-card.recommended .tier-badge {
  background: rgba(30,144,255,0.15); color: #5aadff;
}
.tier-card-name {
  font-size: 17px; font-weight: 700; color: #e0e0e0;
  font-family: 'Montserrat', sans-serif; margin-bottom: 4px;
}
.tier-card-price {
  font-size: 14px; color: #888; margin-bottom: 16px;
}
.tier-features {
  list-style: none; width: 100%; text-align: left;
}
.tier-features li {
  font-size: 13px; color: #bbb; padding: 5px 0;
  display: flex; align-items: center; gap: 8px;
}
.tier-features li svg { flex-shrink: 0; }
.tier-features .feat-yes { color: #6fcf97; }
.tier-features .feat-no { color: #555; }
.tier-card-action {
  margin-top: auto; padding-top: 16px; width: 100%;
}
.tier-card-action button {
  width: 100%; padding: 9px 0; border-radius: 6px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background 0.15s;
}
.tier-btn-current {
  background: none; border: 1px solid #444; color: #666;
  cursor: default !important;
}
.tier-btn-upgrade {
  background: #1e90ff; border: none; color: #fff;
}
.tier-btn-upgrade:hover { background: #3da0ff; }
.tier-btn-signup {
  background: #1e90ff; border: none; color: #fff;
}
.tier-btn-signup:hover { background: #3da0ff; }

/* Tier modal responsiveness: stack cards on tablet / phone, tighten padding. */
@media (max-width: 800px) {
  .tier-modal,
  .tier-modal-wide { width: 94vw; }
  .tier-cards { flex-direction: column; gap: 14px; }
  .tier-card { padding: 18px 16px; }
  .tier-body { padding: 20px 20px 24px; }
}
@media (max-width: 480px) {
  .tier-modal .settings-header { padding: 16px 18px; }
  .tier-modal .settings-title { font-size: 17px; }
  .tier-body { padding: 16px 14px 20px; }
  .tier-card { padding: 16px 14px; }
  .tier-card-name { font-size: 16px; }
  .tier-card-price { font-size: 13px; margin-bottom: 12px; }
  .tier-features li { font-size: 13px; }
}

/* ── Trade Log Import modal ─────────────────────────────────────── */
.trade-import-modal {
  background: #0b101a; border: 1px solid #1a2233; border-radius: 12px;
  width: 480px; max-width: 92vw; max-height: 86vh; display: flex;
  flex-direction: column; box-shadow: 0 12px 48px rgba(0,0,0,0.7);
  overflow: hidden;
}
.trade-import-modal .settings-header {
  flex-shrink: 0;
}
.ti-body {
  padding: 20px; overflow-y: auto; flex: 1;
}
.ti-meta {
  background: #0d1422; border: 1px solid #1a2233; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 16px;
}
.ti-meta-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; padding: 3px 0;
}
.ti-meta-label { color: #6a7a8c; text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; font-weight: 600; }
.ti-meta-val { color: #e0e0e0; font-weight: 500; text-align: right; word-break: break-all; margin-left: 12px; }

.ti-hint {
  color: #6a7a8c; font-size: 12px; line-height: 1.5; margin-top: 8px;
}

/* Prominent date block (Step 1) */
.ti-date-block {
  background: linear-gradient(180deg, rgba(30,144,255,0.08) 0%, rgba(30,144,255,0.02) 100%);
  border: 1.5px solid rgba(30,144,255,0.35);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 18px;
}
.ti-date-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.ti-date-step {
  background: #1e90ff; color: #fff; font-size: 9px; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
}
.ti-date-title {
  color: #e0e0e0; font-weight: 600; font-size: 15px;
}
.ti-date-row {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
.ti-date-input-big {
  background: #0b101a; border: 2px solid #1e90ff; color: #e0e0e0;
  padding: 10px 14px; border-radius: 8px;
  font-size: 18px; font-weight: 700; font-family: 'Montserrat', 'Segoe UI', sans-serif;
  outline: none; color-scheme: dark; min-width: 170px;
}
.ti-date-input-big:focus { border-color: #3da0ff; box-shadow: 0 0 0 3px rgba(30,144,255,0.2); }
.ti-date-preview {
  color: #1e90ff; font-size: 14px; font-weight: 600;
}

.ti-summary {
  background: #0d1422; border: 1px solid #1a2233;
  border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; text-align: center;
  position: relative;
}
.ti-summary-step {
  position: absolute; top: 10px; left: 12px;
  background: #2a3544; color: #9aaabb; font-size: 9px; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
}
.ti-summary-big {
  font-size: 22px; font-weight: 700; color: #1e90ff;
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
}
.ti-summary-sub {
  font-size: 12px; color: #7a8a9a; margin-top: 4px;
}

.ti-symbol-table-wrap {
  border: 1px solid #1a2233; border-radius: 8px;
  max-height: 220px; overflow-y: auto;
}
.ti-symbol-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.ti-symbol-table thead {
  position: sticky; top: 0; background: #0d1422;
  border-bottom: 1px solid #1a2233;
}
.ti-symbol-table th {
  text-align: left; padding: 8px 12px;
  font-size: 10px; font-weight: 600; color: #6a7a8c;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.ti-symbol-table td {
  padding: 7px 12px; border-top: 1px solid #141c2a;
}
.ti-symbol-table tbody tr:first-child td { border-top: none; }
.ti-sym { font-weight: 700; color: #1e90ff; font-family: 'Montserrat', monospace; }
.ti-cnt { color: #e0e0e0; }
.ti-bs-buy { color: #00d01a; font-weight: 600; }
.ti-bs-sell { color: #ff5656; font-weight: 600; }
.ti-bs-sep { color: #444; margin: 0 4px; }

.ti-footer {
  flex-shrink: 0; padding: 14px 20px; border-top: 1px solid #1a2233;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.ti-btn-secondary {
  background: none; border: 1px solid #2a3544; color: #9aaabb;
  padding: 8px 18px; border-radius: 6px; font-size: 14px; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.ti-btn-secondary:hover { border-color: #1e90ff; color: #1e90ff; }
.ti-btn-primary {
  background: #1e90ff; color: #fff; border: none;
  padding: 9px 20px; border-radius: 6px; font-size: 14px;
  font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ti-btn-primary:hover { background: #1a7ae0; }

/* ── Import intro modal ─────────────────────────────────────────── */
.trade-import-intro .tii-body {
  padding: 20px; overflow-y: auto; flex: 1;
}
.tii-hero {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px; margin-bottom: 16px;
  background: linear-gradient(180deg, rgba(30,144,255,0.08) 0%, rgba(30,144,255,0.02) 100%);
  border: 1px solid rgba(30,144,255,0.25); border-radius: 10px;
}
.tii-hero svg { flex-shrink: 0; }
.tii-hero-text { flex: 1; }
.tii-hero-title {
  color: #e0e0e0; font-weight: 700; font-size: 16px;
  margin-bottom: 4px; font-family: 'Montserrat', 'Segoe UI', sans-serif;
}
.tii-hero-sub {
  color: #9aaabb; font-size: 13px; line-height: 1.55;
}
.tii-section { margin-bottom: 16px; }
.tii-section:last-child { margin-bottom: 0; }
.tii-section-title {
  font-size: 11px; font-weight: 600; color: #6a7a8c;
  text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px;
}
.tii-list {
  list-style: none; padding: 0; margin: 0;
}
.tii-list li {
  position: relative; padding-left: 18px; margin-bottom: 8px;
  color: #bbb; font-size: 14px; line-height: 1.5;
}
.tii-list li::before {
  content: ''; position: absolute; left: 4px; top: 9px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #1e90ff;
}
.tii-list-subtle li { color: #8a9aac; font-size: 13px; }
.tii-list-subtle li::before { background: #2a3544; }
.tii-list-subtle li strong { color: #bbb; }
.tii-section-muted .tii-section-title { color: #4a5a6c; }
.tii-p {
  color: #8a9aac; font-size: 13px; line-height: 1.55;
  padding: 8px 12px; border-left: 2px solid #1a2233;
  margin: 0;
}

/* ── Trade Replay controls: badge (left) + half-width Load button ── */
.cp-trade-controls {
  display: flex; gap: 8px; align-items: stretch;
}
.cp-trade-badge {
  flex: 1 1 0; min-width: 0; box-sizing: border-box;
  height: 32px;
  background: rgba(30,144,255,0.10);
  border: 1px solid rgba(30,144,255,0.28);
  border-radius: 5px;
  padding: 3px 8px;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center; line-height: 1.15;
}
.cp-trade-badge-empty {
  background: rgba(128,128,128,0.05);
  border-color: #1a2233;
}
.cp-trade-badge-samples {
  background: rgba(120,140,160,0.08);
  border-color: rgba(120,140,160,0.22);
}
.cp-badge-count {
  font-size: 12px; font-weight: 700; color: #1e90ff;
  white-space: nowrap;
}
.cp-trade-badge-empty .cp-badge-count { color: #6a7a8c; font-weight: 600; }
.cp-trade-badge-samples .cp-badge-count { color: #9aaabb; font-weight: 600; font-size: 11px; }
.cp-badge-sub {
  font-size: 9px; color: #6a7a8c;
  text-transform: uppercase; letter-spacing: 0.5px;
  white-space: nowrap;
}
.cp-btn-half {
  width: auto; flex: 1 1 0; box-sizing: border-box;
  height: 32px; padding: 0 6px; margin: 0;
  font-size: 12px; white-space: nowrap; letter-spacing: 0.2px;
  /* Explicit height + internal flex centering — native <button> doesn't
     reliably stretch in a flex parent across all browsers. The explicit
     margin: 0 overrides a stray top margin from a parent cp-btn rule. */
  display: flex; align-items: center; justify-content: center;
}
.cp-trade-clear {
  text-align: left; margin-top: 4px; min-height: 14px;
}
.cp-link-btn {
  background: none; border: none; color: #1e90ff;
  font-size: 10px; cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 2px;
}
.cp-link-btn:hover { color: #3da0ff; }

/* ── Trade History panel ─────────────────────────────────────────── */
#trade-history {
  margin-top: 10px;
  border-top: 1px solid #1a2233;
  display: flex; flex-direction: column;
  max-height: 280px;  /* scrolls internally beyond this; keeps T&S visible */
}
/* Column grid shared by header and rows — sized for the 220px right panel. */
.th-header,
.th-row {
  display: grid;
  grid-template-columns: 54px 14px 32px 36px 1fr;
  gap: 3px;
  padding: 3px 3px;
  font-variant-numeric: tabular-nums;
  align-items: baseline;
}
.th-header {
  padding: 6px 3px 5px;
  border-bottom: 1px solid #1a2233;
  font-size: 9px; font-weight: 600; color: #556;
  text-transform: uppercase; letter-spacing: 0.8px;
  flex-shrink: 0;
}
.th-header .th-h-qty,
.th-header .th-h-price,
.th-header .th-h-pnl { text-align: right; }
.th-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  min-height: 0;
}
.th-body::-webkit-scrollbar { width: 6px; }
.th-body::-webkit-scrollbar-thumb { background: #1a2233; border-radius: 3px; }
.th-body::-webkit-scrollbar-thumb:hover { background: #2a3544; }
.th-empty {
  padding: 18px 10px; font-size: 11px; color: #556;
  text-align: center; line-height: 1.5;
}
.th-row {
  font-size: 11px;
  border-bottom: 1px solid rgba(30,30,30,0.4);
  transition: opacity 0.18s, background 0.12s;
  cursor: pointer;
}
.th-row:hover { background: rgba(30,144,255,0.10); }
.th-row.th-future { opacity: 0.32; }
/* Playhead crossed this trade just now — pulse yellow so the user sees it
   in the history list, since the arrow on the chart may be off-screen. */
@keyframes th-row-flash {
  0%   { background: rgba(255, 204, 0, 0.55); }
  100% { background: transparent; }
}
.th-row.th-flash { animation: th-row-flash 0.7s ease-out 1; }
.th-time { color: #888; font-size: 10px; white-space: nowrap; }
.th-src-sim { color: #1e90ff; margin-left: 2px; }
.th-side {
  text-align: center; font-weight: 700; font-size: 11px;
}
.th-side-buy  { color: #00d01a; }
.th-side-sell { color: #ff5656; }
.th-qty { text-align: right; color: #ccc; }
.th-price { text-align: right; color: #888; font-size: 10px; }
.th-pnl { text-align: right; font-weight: 600; font-size: 11px; white-space: nowrap; }
.th-pnl-pos   { color: #00d01a; }
.th-pnl-neg   { color: #ff5656; }
.th-pnl-empty { color: #444; }