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

:root {
  --bg: #07070f;
  --bg-card: #0e0e1c;
  --bg-input: #13132a;
  --bg-hover: #1a1a35;
  --border: #252545;
  --border-bright: #3a3a6a;
  --buy: #00e676;
  --buy-glow: rgba(0, 230, 118, 0.35);
  --sell: #ff1744;
  --sell-glow: rgba(255, 23, 68, 0.35);
  --accent: #7c6dff;
  --accent-glow: rgba(124, 109, 255, 0.3);
  --text: #e0e0f0;
  --text-muted: #6a6a9a;
  --win: #00e676;
  --loss: #ff1744;
  --pending: #ffd740;
  --warn: #ffd740;
  --radius: 12px;
  --radius-sm: 8px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ─── NAV ─── */
#main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: 60px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-brand {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-icon { font-size: 22px; }

/* The tabs live in a drawer now, not a row — see the DRAWER block below. */
.nav-links { display: flex; gap: 4px; }

.nav-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: all 0.2s;
}
.nav-btn:hover { color: var(--text); background: var(--bg-hover); }
.nav-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(124,109,255,0.1);
}

/* ─── MAIN ─── */
#main-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px;
}

/* full-width override for trading view */
#main-content.full-width {
  max-width: 100%;
  padding: 0;
}

/* ─── CARDS ─── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 20px;
}
.card-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* ─── SETUP WIZARD ─── */
.wizard-header {
  text-align: center;
  margin-bottom: 40px;
}
.wizard-header h1 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.wizard-header p { color: var(--text-muted); font-size: 15px; }

.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 40px;
}
.step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-input);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  transition: all 0.3s;
}
.step-dot.active { border-color: var(--accent); color: var(--accent); background: rgba(124,109,255,0.15); }
.step-dot.done { border-color: var(--buy); color: var(--bg); background: var(--buy); }
.step-line {
  width: 60px;
  height: 2px;
  background: var(--border);
  transition: background 0.3s;
}
.step-line.done { background: var(--buy); }

.step-panel { display: none; }
.step-panel.active { display: block; }

.step-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}
.step-sub {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 32px;
}

/* Inputs */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.form-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 14px 18px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
}
.form-input:focus { border-color: var(--accent); }
.form-input::placeholder { color: var(--text-muted); }

.input-prefix-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-prefix {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 600;
  pointer-events: none;
}
.input-prefix-wrap .form-input { padding-left: 30px; }
.input-suffix {
  position: absolute;
  right: 14px;
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 600;
  pointer-events: none;
}

/* Timeframe grid */
.tf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.tf-btn {
  background: var(--bg-input);
  border: 2px solid var(--border);
  color: var(--text-muted);
  padding: 16px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  transition: all 0.2s;
  text-align: center;
}
.tf-btn:hover { border-color: var(--border-bright); color: var(--text); }
.tf-btn.selected {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(124,109,255,0.15);
  box-shadow: 0 0 12px var(--accent-glow);
}

/* Instrument row */
.instrument-row {
  display: flex;
  gap: 10px;
}
.instrument-row .form-input { flex: 1; }
.add-btn {
  background: var(--accent);
  border: none;
  color: white;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.add-btn:hover { opacity: 0.85; }

.instrument-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.instrument-tag {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tag-remove {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
}
.tag-remove:hover { color: var(--loss); }

/* Review card */
.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.review-item { }
.review-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.review-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.review-value.accent { color: var(--accent); }

/* Wizard buttons */
.wizard-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  justify-content: flex-end;
}
.btn-primary {
  background: var(--accent);
  border: none;
  color: white;
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: all 0.2s;
  box-shadow: 0 0 20px var(--accent-glow);
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-secondary {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 14px 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.2s;
}
.btn-secondary:hover { border-color: var(--border-bright); color: var(--text); }
.btn-danger {
  background: rgba(255,23,68,0.15);
  border: 1px solid var(--loss);
  color: var(--loss);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
}
.btn-danger:hover { background: rgba(255,23,68,0.25); }

/* ─── TRADING VIEW ─── */
#trading-view {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  background: var(--bg);
}

.trade-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.trade-progress-text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-muted);
}
.trade-progress-num {
  font-size: 28px;
  font-weight: 900;
  color: var(--accent);
}

.trade-meta-grid {
  display: flex;
  gap: 40px;
  align-items: center;
}
.trade-meta-item { text-align: center; }
.trade-meta-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.trade-meta-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.trade-meta-value.instrument { color: var(--accent); font-size: 18px; }

.trade-timestamp {
  text-align: right;
}
.timestamp-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.timestamp-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--warn);
  font-variant-numeric: tabular-nums;
}

.trade-progress-bar-wrap {
  height: 3px;
  background: var(--border);
}
.trade-progress-bar {
  height: 100%;
  background: var(--accent);
  transition: width 0.4s ease;
}

/* The main buy/sell area */
.trade-arena {
  flex: 1;
  display: flex;
  gap: 0;
}

.trade-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.trade-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.buy-btn {
  background: rgba(0, 230, 118, 0.08);
  border-right: 2px solid var(--border);
}
.buy-btn::before { background: var(--buy); }
.buy-btn:active::before { opacity: 0.2; }
.buy-btn:hover { background: rgba(0, 230, 118, 0.14); }

.sell-btn {
  background: rgba(255, 23, 68, 0.08);
}
.sell-btn::before { background: var(--sell); }
.sell-btn:active::before { opacity: 0.2; }
.sell-btn:hover { background: rgba(255, 23, 68, 0.14); }

.trade-btn-label {
  font-size: 80px;
  font-weight: 900;
  letter-spacing: 4px;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.buy-btn .trade-btn-label { color: var(--buy); text-shadow: 0 0 60px var(--buy-glow), 0 0 120px var(--buy-glow); }
.sell-btn .trade-btn-label { color: var(--sell); text-shadow: 0 0 60px var(--sell-glow), 0 0 120px var(--sell-glow); }

.trade-btn-hint {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-top: 16px;
  position: relative;
  z-index: 1;
}

.trade-divider {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 10;
  pointer-events: none;
}

.trade-arena-wrap {
  flex: 1;
  position: relative;
  display: flex;
}

/* Placed flash overlay */
.trade-flash {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 120px;
  font-weight: 900;
  letter-spacing: 6px;
  opacity: 0;
  pointer-events: none;
  z-index: 200;
  transition: opacity 0.1s;
}
.trade-flash.buy { color: var(--buy); background: rgba(0,230,118,0.08); }
.trade-flash.sell { color: var(--sell); background: rgba(255,23,68,0.08); }
.trade-flash.show { opacity: 1; }

/* ─── SESSION COMPLETE / REVIEW ─── */
.session-complete-header {
  text-align: center;
  margin-bottom: 36px;
}
.session-complete-header h1 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 8px;
}
.session-complete-header p { color: var(--text-muted); }

.trades-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.trades-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.trades-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.trades-table tr:last-child td { border-bottom: none; }
.trades-table tr:hover td { background: var(--bg-hover); }

.direction-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
}
.direction-badge.BUY { background: rgba(0,230,118,0.15); color: var(--buy); }
.direction-badge.SELL { background: rgba(255,23,68,0.15); color: var(--sell); }

.outcome-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
}
.outcome-select:focus { border-color: var(--accent); }
.outcome-select.WIN { border-color: var(--win); color: var(--win); }
.outcome-select.LOSS { border-color: var(--loss); color: var(--loss); }
.outcome-select.TIE { border-color: var(--warn); color: var(--warn); }
.direction-select.BUY  { border-color: var(--buy);  color: var(--buy);  background: rgba(0,230,118,0.07); }
.direction-select.SELL { border-color: var(--sell); color: var(--sell); background: rgba(255,23,68,0.07); }

.trade-note-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 10px;
  font-size: 13px;
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
}
.trade-note-input:focus { border-color: var(--accent); }
/* As a textarea: room for a real observation, resizable vertically only so it
   cannot be dragged out sideways and break the table layout. */
textarea.trade-note-input {
  min-width: 200px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.45;
}

/* ─── METRICS ─── */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.metric-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
  text-align: center;
}
.metric-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.metric-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
}
.metric-value.positive { color: var(--win); }
.metric-value.negative { color: var(--loss); }
.metric-value.neutral { color: var(--warn); }
.metric-value.accent { color: var(--accent); }
.metric-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Wide metrics for 3-col */
.metrics-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.metrics-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* ─── SESSIONS LIST ─── */
.sessions-list { display: flex; flex-direction: column; gap: 16px; }

.session-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 26px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 24px;
}
.session-card:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
  transform: translateY(-1px);
}

.session-card-date {
  flex-shrink: 0;
  text-align: center;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  min-width: 80px;
}
.session-card-day {
  font-size: 26px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
}
.session-card-month {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.session-card-main { flex: 1; }
.session-card-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}
.session-card-sub {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  gap: 16px;
}
.session-card-sub span { display: flex; align-items: center; gap: 4px; }

.session-card-metrics {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-shrink: 0;
}
.sc-metric { text-align: center; }
.sc-metric-val {
  font-size: 18px;
  font-weight: 800;
}
.sc-metric-val.positive { color: var(--win); }
.sc-metric-val.negative { color: var(--loss); }
.sc-metric-val.neutral { color: var(--warn); }
.sc-metric-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.badge-complete {
  background: rgba(0,230,118,0.12);
  color: var(--win);
  border: 1px solid rgba(0,230,118,0.3);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}
.badge-pending {
  background: rgba(255,215,64,0.12);
  color: var(--warn);
  border: 1px solid rgba(255,215,64,0.3);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* ─── SESSION DETAIL ─── */
.detail-back {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 28px;
  width: fit-content;
  transition: color 0.2s;
}
.detail-back:hover { color: var(--accent); }

.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
}
.detail-title {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 6px;
}
.detail-sub { color: var(--text-muted); font-size: 14px; display: flex; gap: 16px; flex-wrap: wrap; }
.detail-sub span { display: flex; align-items: center; gap: 4px; }

.notes-area {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 14px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
  outline: none;
  transition: border-color 0.2s;
}
.notes-area:focus { border-color: var(--accent); }

/* ─── ALL-TIME STATS ─── */
.stats-header {
  text-align: center;
  margin-bottom: 40px;
}
.stats-header h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.stats-header p { color: var(--text-muted); }

.section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* ─── EMPTY STATE ─── */
.empty-state {
  text-align: center;
  padding: 80px 40px;
  color: var(--text-muted);
}
.empty-icon { font-size: 64px; margin-bottom: 16px; }
.empty-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.empty-sub { font-size: 14px; }

/* ─── TOAST ─── */
#toast-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  animation: slideIn 0.2s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.toast.success { border-color: var(--win); color: var(--win); }
.toast.error { border-color: var(--loss); color: var(--loss); }
.toast.info { border-color: var(--accent); color: var(--accent); }

@keyframes slideIn {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ─── MISC ─── */
.divider {
  height: 1px;
  background: var(--border);
  margin: 24px 0;
}

.pl-positive { color: var(--win); }
.pl-negative { color: var(--loss); }
.pl-zero { color: var(--text-muted); }

select.form-input option { background: var(--bg-card); }

/* ─── LIGHT THEME ─── */
body.light {
  --bg: #f0f2f8;
  --bg-card: #ffffff;
  --bg-input: #eaecf4;
  --bg-hover: #e2e5f0;
  --border: #d0d4e8;
  --border-bright: #b0b8d0;
  --buy: #00994d;
  --buy-glow: rgba(0,153,77,0.25);
  --sell: #cc1133;
  --sell-glow: rgba(204,17,51,0.25);
  --accent: #5a4ecc;
  --accent-glow: rgba(90,78,204,0.2);
  --text: #111128;
  --text-muted: #5a5a7a;
  --win: #00994d;
  --loss: #cc1133;
  --pending: #b38600;
  --warn: #b38600;
}

body.light #main-nav {
  background: #ffffff;
  border-bottom-color: #d0d4e8;
  box-shadow: 0 1px 8px rgba(0,0,0,0.08);
}

body.light .nav-brand { color: var(--accent); }

body.light .trade-btn.buy-btn { background: rgba(0,153,77,0.07); }
body.light .trade-btn.buy-btn:hover { background: rgba(0,153,77,0.14); }
body.light .trade-btn.sell-btn { background: rgba(204,17,51,0.07); }
body.light .trade-btn.sell-btn:hover { background: rgba(204,17,51,0.14); }

body.light .metric-card { background: #f5f6fc; }
body.light .session-card { background: #ffffff; }
body.light .session-card:hover { background: var(--bg-hover); }

body.light .toast { background: #ffffff; box-shadow: 0 4px 20px rgba(0,0,0,0.12); }

body.light select.form-input option { background: #ffffff; }

body.light .badge-complete { background: rgba(0,153,77,0.1); }
body.light .badge-pending  { background: rgba(179,134,0,0.1); }

/* ─── STRATEGY PICKER ─── */
.strategy-picker {
  display: flex;
  gap: 14px;
}
.strategy-option {
  flex: 1;
  background: var(--bg-input);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.strategy-option:hover {
  border-color: var(--border-bright);
  transform: translateY(-2px);
}
.strategy-option.selected {
  border-color: var(--accent);
  background: rgba(124,109,255,0.08);
}
.strategy-icon { font-size: 26px; margin-bottom: 8px; }
.strategy-name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text);
  margin-bottom: 6px;
}
.strategy-option.selected .strategy-name { color: var(--accent); }
.strategy-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ─── NAV USER INFO ─── */
.nav-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-username {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.5px;
}
.account-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 6px;
}
.account-badge.account-real {
  background: rgba(0,230,118,0.15);
  color: var(--win);
  border: 1px solid rgba(0,230,118,0.3);
}
.account-badge.account-demo {
  background: rgba(124,109,255,0.15);
  color: var(--accent);
  border: 1px solid rgba(124,109,255,0.3);
}
.nav-switch-btn {
  font-size: 12px;
  padding: 5px 12px !important;
}

/* ─── LOGIN SCREEN ─── */
.login-screen {
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 24px 20px;
  gap: 20px;
}
.login-logo {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.login-title {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 4px;
  color: var(--accent);
  margin: 0;
}
.login-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

/* ─── USER GRID ─── */
.user-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  max-width: 700px;
}
.user-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px 20px;
  min-width: 140px;
  max-width: 180px;
  flex: 1;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.user-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(124,109,255,0.2);
}
.user-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #c084fc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  margin: 0 auto 12px;
}
.user-card-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.user-card-date {
  font-size: 11px;
  color: var(--text-muted);
}
.user-card-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.user-card:hover .user-card-delete { opacity: 1; }
.user-card-delete:hover { color: var(--loss); }

.login-divider {
  width: 100%;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 12px;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.new-user-form {
  width: 100%;
  max-width: 400px;
  text-align: center;
}
.new-user-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ─── ACCOUNT TYPE SELECT ─── */
.user-select-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #c084fc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  margin: 0 auto 12px;
}
.account-type-grid {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.account-type-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  min-width: 200px;
  max-width: 240px;
  flex: 1;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.account-type-card:hover { transform: translateY(-4px); }
.account-type-card.demo:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 32px rgba(124,109,255,0.25);
}
.account-type-card.real:hover {
  border-color: var(--win);
  box-shadow: 0 10px 32px rgba(0,230,118,0.2);
}
.at-icon { font-size: 40px; margin-bottom: 14px; }
.at-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 3px;
  margin-bottom: 10px;
}
.account-type-card.demo .at-title { color: var(--accent); }
.account-type-card.real .at-title { color: var(--win); }
.at-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Light theme overrides for login */
body.light .user-card { background: #ffffff; }
body.light .user-card:hover { box-shadow: 0 8px 28px rgba(90,78,200,0.15); }
body.light .account-type-card { background: #ffffff; }
body.light .login-title { color: var(--accent); }

/* Responsive small tweak */
@media (max-width: 700px) {
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .tf-grid { grid-template-columns: repeat(4, 1fr); }
  .trade-btn-label { font-size: 50px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STRATEGY SIMULATOR TAB
   All rules scoped under .sim-root and driven by the journal's theme vars,
   so light/dark follow body.light automatically.
   ═══════════════════════════════════════════════════════════════════════════ */

#main-content.sim-wide {
  max-width: 1500px;
  padding: 32px 20px 60px;
}

/* Accent gradient. --sim-c1 is a bright cyan on dark, but that colour is
   near-invisible on a white page, so light mode swaps in a deep cyan and
   flips the on-gradient ink to white to keep both ends readable. */
.sim-root {
  --sim-c1: #22d3ee;
  --sim-c2: var(--accent);
  --sim-btn-ink: #03040c;
  --sim-grad: linear-gradient(100deg, var(--sim-c1), var(--sim-c2));
}
body.light .sim-root {
  --sim-c1: #0e7490;
  --sim-btn-ink: #ffffff;
}

.sim-hero { text-align: center; padding: 10px 0 24px; }
.sim-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--border);
  padding: 6px 14px; border-radius: 999px; background: var(--bg-card);
}
.sim-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent-glow);
  animation: sim-pulse 1.6s infinite;
}
@keyframes sim-pulse { 50% { opacity: .35; } }
.sim-hero h1 {
  font-size: clamp(26px, 5vw, 42px); font-weight: 800;
  margin: 16px 0 8px; letter-spacing: -1px;
  background: var(--sim-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sim-hero p { color: var(--text-muted); font-size: 14px; }

.sim-panel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; margin-bottom: 20px;
}
.sim-panel h3 {
  font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px; font-weight: 700;
}
.sim-panel h3::before {
  content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--sim-grad);
}

.sim-setup { padding: 24px; }
.sim-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 18px; }
.sim-field { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 170px; }
.sim-field-full { width: 100%; min-width: 100%; flex-basis: 100%; }
.sim-field label {
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}
.sim-field small { font-size: 11px; color: var(--text-muted); line-height: 1.5; }
.sim-field input,
.sim-field select {
  padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-input);
  color: var(--text); font-size: 15px; font-weight: 600;
  font-family: inherit; transition: all .2s;
}
.sim-field input:focus, .sim-field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}
.sim-root textarea {
  width: 100%; padding: 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-input); color: var(--text);
  font-size: 14px; font-family: 'Courier New', monospace;
  min-height: 100px; resize: vertical; line-height: 1.6; letter-spacing: .5px;
}
.sim-root textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}

.sim-help { font-size: 11.5px; color: var(--text-muted); margin-top: 8px; line-height: 1.6; }
.sim-counter { font-size: 12px; margin-top: 8px; font-weight: 700; min-height: 16px; }
.sim-counter.ok  { color: var(--win); }
.sim-counter.bad { color: var(--loss); }

.sim-quickfill { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sim-qbtn {
  padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-input); color: var(--text-muted);
  font-size: 11px; cursor: pointer; transition: all .2s; font-weight: 600; font-family: inherit;
}
.sim-qbtn:hover { border-color: var(--accent); color: var(--accent); }

.sim-btn {
  padding: 13px 28px; border: none; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
  letter-spacing: .5px; color: var(--sim-btn-ink); background: var(--sim-grad); transition: all .2s;
}
.sim-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--accent-glow); }
.sim-btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.sim-btn.ghost:hover { border-color: var(--accent); box-shadow: none; }

.sim-err { color: var(--loss); font-size: 13px; margin-top: 12px; display: none; font-weight: 600; }
.sim-err.show { display: block; }

.sim-pre { text-align: center; padding: 50px 20px; color: var(--text-muted); font-size: 15px; }
#sim-results { display: none; }
#sim-results.on { display: block; animation: sim-fadein .4s ease; }
@keyframes sim-fadein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.sim-warn {
  background: rgba(255, 215, 64, .08); border: 1px solid var(--pending);
  border-radius: var(--radius-sm); padding: 14px 18px;
  font-size: 13px; color: var(--pending); margin-bottom: 20px; line-height: 1.6;
}

/* summary */
.sim-simple-table { width: 100%; border-collapse: collapse; }
.sim-simple-table td { padding: 12px 6px; border-bottom: 1px solid var(--border); font-size: 14px; }
.sim-simple-table tr:last-child td { border-bottom: none; }
.sim-simple-table td:first-child { color: var(--text-muted); font-weight: 600; }
.sim-simple-table td:last-child  { text-align: right; font-weight: 800; font-size: 17px; }
.sim-simple-table td.pos { color: var(--win); }
.sim-simple-table td.neg { color: var(--loss); }
.sim-simple-table td.cy  { color: var(--accent); }

/* execution report */
.sim-table-scroll { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); }
table.sim-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 1550px; }
table.sim-table thead th {
  text-align: right; padding: 12px 14px; color: var(--text);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
  background: var(--bg-input); border-bottom: 1px solid var(--border);
  white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
table.sim-table thead th:first-child,
table.sim-table thead th:nth-child(2) { text-align: left; }
table.sim-table tbody td {
  text-align: right; padding: 10px 14px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.sim-table tbody td:first-child,
table.sim-table tbody td:nth-child(2) { text-align: left; font-weight: 700; }
table.sim-table tbody tr:hover td { background: var(--bg-hover); }
table.sim-table tr.sim-cycle-start td { border-top: 2px solid var(--accent); }
table.sim-table tfoot td {
  padding: 15px 14px; font-weight: 800; font-size: 13px;
  border-top: 2px solid var(--border); background: var(--bg-input); text-align: right;
}
table.sim-table tfoot td:first-child { text-align: left; }

.sim-pill { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 10.5px; font-weight: 800; }
.sim-pill.win  { background: rgba(0, 230, 118, .15); color: var(--win); }
.sim-pill.loss { background: rgba(255, 23, 68, .15);  color: var(--loss); }
.sim-pos   { color: var(--win);  font-weight: 700; }
.sim-neg   { color: var(--loss); font-weight: 700; }
.sim-muted { color: var(--text-muted); }

.sim-toolbar { display: flex; gap: 12px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }

/* charts */
.sim-chart { position: relative; width: 100%; overflow-x: auto; }
.sim-chart svg { display: block; }
.sim-axis { font-size: 11px; fill: var(--text-muted); }
.sim-chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .sim-chart-row { grid-template-columns: 1fr; } }
.sim-grad-start { stop-color: var(--sim-c1); }
.sim-grad-end   { stop-color: var(--sim-c2); }
.sim-dot, .sim-slice, .sim-bar { cursor: pointer; transition: opacity .15s, filter .15s; }
.sim-slice:hover { filter: brightness(1.2); }
.sim-bar:hover, .sim-dot:hover { opacity: .8; }
.sim-donut-wrap {
  display: flex; align-items: center; gap: 28px;
  flex-wrap: wrap; justify-content: center; padding: 10px 0;
}
.sim-legend { display: flex; flex-direction: column; gap: 12px; min-width: 180px; }
.sim-legend-item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.sim-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.sim-legend-item .lname { color: var(--text-muted); }
.sim-legend-item .lval  { margin-left: auto; font-weight: 800; padding-left: 16px; }
.sim-donut-lbl { font-size: 11px; fill: var(--text-muted); }
.sim-donut-val { font-size: 22px; font-weight: 800; fill: var(--text); }
.sim-empty { color: var(--text-muted); padding: 20px; font-size: 14px; }

.sim-tooltip {
  position: fixed; pointer-events: none;
  background: var(--bg-card); border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm); padding: 9px 14px;
  font-size: 12.5px; font-weight: 700; color: var(--text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  z-index: 300; opacity: 0; transition: opacity .12s; white-space: nowrap;
}
.sim-tooltip.show { opacity: 1; }

body.light .sim-panel { background: #ffffff; }
body.light .sim-badge { background: #ffffff; }
body.light .sim-warn  { background: rgba(179, 134, 0, .08); }
body.light .sim-pill.win  { background: rgba(0, 153, 77, .12); }
body.light .sim-pill.loss { background: rgba(204, 17, 51, .12); }
body.light .sim-tooltip   { background: #ffffff; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
body.light .sim-field select option { background: #ffffff; }

/* ─── SIMULATOR: summary cards, calculation breakdown, cycle ledger ─── */

.sim-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
}
.sim-cards .metric-value { font-size: 22px; letter-spacing: -.5px; }
.sim-cards .metric-sub   { line-height: 1.45; }

.sim-subhead {
  font-family: inherit;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted); margin: 28px 0 12px;
}

/* the arithmetic, laid out as an equation */
.sim-calc {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.sim-calc-row {
  display: grid;
  grid-template-columns: 28px minmax(150px, auto) 1fr minmax(110px, auto);
  align-items: baseline;
  gap: 14px;
  padding: 13px 18px;
  background: var(--bg-card);
}
.sim-calc-row .op {
  font-size: 15px; font-weight: 800; color: var(--text-muted); text-align: center;
}
.sim-calc-row .lbl { font-size: 14px; font-weight: 700; color: var(--text); }
.sim-calc-row .note {
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
}
.sim-calc-row .val {
  font-size: 16px; font-weight: 800; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.sim-calc-row.sum { border-top: 1px solid var(--border); background: var(--bg-input); }
.sim-calc-row.sum .op { color: var(--accent); }
.sim-calc-row.total {
  border-top: 2px solid var(--accent);
  background: var(--bg-input);
  padding-top: 16px; padding-bottom: 16px;
}
.sim-calc-row.total .lbl { font-size: 15px; }
.sim-calc-row.total .op  { color: var(--accent); }
.sim-calc-row.total .val { font-size: 21px; }
.sim-calc-row.total.pos .val { color: var(--win); }
.sim-calc-row.total.neg .val { color: var(--loss); }

@media (max-width: 720px) {
  .sim-calc-row {
    grid-template-columns: 24px 1fr minmax(96px, auto);
    row-gap: 3px;
  }
  .sim-calc-row .note { grid-column: 2 / 4; font-size: 11.5px; }
}

/* the ledger is only 7 columns — don't inherit the 1550px report width */
table.sim-table.sim-ledger { min-width: 760px; }
.sim-pill.flat { background: rgba(255, 215, 64, .15); color: var(--pending); }
body.light .sim-pill.flat { background: rgba(179, 134, 0, .12); }

/* Floating theme toggle for the login / account-select screens, where the
   main nav is hidden and there is otherwise no way to change theme. */
.theme-float {
  position: fixed;
  top: 16px; right: 20px;
  z-index: 150;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.theme-float:hover { border-color: var(--accent); background: var(--bg-hover); }
body.light .theme-float { box-shadow: 0 2px 10px rgba(0,0,0,0.08); }

/* ─── SIGN-IN FORM ─── */
.login-form {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-form .form-group { margin: 0; }
.login-submit { width: 100%; margin-top: 4px; }
.login-error {
  color: var(--loss);
  font-size: 13px;
  font-weight: 600;
  min-height: 18px;
  text-align: center;
}

/* ═══════════════ ADMIN PANEL ═══════════════ */

.admin-loading { padding: 60px 20px; text-align: center; color: var(--text-muted); }

.admin-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 24px;
}
.admin-title {
  font-size: 28px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 4px;
}
.admin-sub { color: var(--text-muted); font-size: 14px; }

/* kill switch — the loudest thing on the page, deliberately */
.kill-panel {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px; border-radius: var(--radius);
  border: 1px solid var(--border); margin-bottom: 28px;
}
.kill-panel.armed { background: rgba(0,230,118,0.06); border-color: var(--win); }
.kill-panel.open  { background: rgba(255,23,68,0.07); border-color: var(--loss); }
body.light .kill-panel.armed { background: rgba(0,153,77,0.07); }
body.light .kill-panel.open  { background: rgba(204,17,51,0.07); }
.kill-icon { font-size: 28px; line-height: 1; }
.kill-body { flex: 1; }
.kill-title { font-weight: 800; font-size: 15px; margin-bottom: 3px; }
.kill-desc  { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

.btn-danger-outline {
  background: transparent; border: 1px solid var(--border-bright); color: var(--text);
  padding: 10px 18px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 13px; font-weight: 700; font-family: inherit; white-space: nowrap;
}
.btn-danger-outline:hover { border-color: var(--loss); color: var(--loss); }

.admin-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-bottom: 16px;
}
.admin-form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.admin-form-row .form-group { flex: 1; min-width: 150px; }
.admin-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.admin-err { color: var(--loss); font-size: 13px; font-weight: 600; min-height: 18px; margin-top: 8px; }

.admin-users { display: flex; flex-direction: column; gap: 14px; }

.uc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.uc-name { font-size: 17px; font-weight: 800; margin-right: 10px; }
.uc-role, .uc-status, .uc-warn {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.8px; margin-right: 6px;
}
.uc-role.admin  { background: rgba(124,109,255,0.18); color: var(--accent); }
.uc-role.trader { background: var(--bg-input); color: var(--text-muted); }
.uc-status.active         { background: rgba(0,230,118,0.15); color: var(--win); }
.uc-status.suspended      { background: rgba(255,23,68,0.15); color: var(--loss); }
.uc-status.pending_setup { background: rgba(255,215,64,0.15); color: var(--pending); }
.uc-warn { background: rgba(255,215,64,0.15); color: var(--pending); }

.uc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-small {
  background: var(--bg-input); border: 1px solid var(--border); color: var(--text);
  padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit; transition: all 0.15s;
}
.btn-small:hover { border-color: var(--accent); color: var(--accent); }
.btn-small.danger:hover { border-color: var(--loss); color: var(--loss); }

.uc-limits {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.lim {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.lim.danger { border-color: rgba(255,23,68,0.35); }
body.light .lim.danger { border-color: rgba(204,17,51,0.3); }
.lim-l { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1px;
         text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.lim-v { display: block; font-size: 17px; font-weight: 800; }
.lim.danger .lim-v { color: var(--loss); }

.uc-nolimits {
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(255,215,64,0.08); border: 1px solid var(--pending);
  color: var(--pending); font-size: 13px; margin-bottom: 14px;
}

.uc-keys { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.keys-label { font-size: 10px; font-weight: 700; letter-spacing: 1px;
              text-transform: uppercase; color: var(--text-muted); }
.key {
  font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); cursor: help;
}
.key.on  { background: rgba(0,230,118,0.12); color: var(--win);  border-color: var(--win); }
.key.off { background: var(--bg-input); color: var(--text-muted); }

/* risk editor */
.risk-editor { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.re-title { font-size: 13px; font-weight: 800; letter-spacing: 0.5px;
            text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
.re-exposure {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px; margin: 16px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.exp-row { display: grid; grid-template-columns: minmax(150px,auto) minmax(90px,auto) 1fr;
           gap: 14px; align-items: baseline; }
.exp-l { font-size: 13px; font-weight: 700; }
.exp-v { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.exp-note { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.exp-row.bad .exp-v { color: var(--loss); }
.exp-row.bad .exp-note { color: var(--loss); }
@media (max-width: 700px) {
  .exp-row { grid-template-columns: 1fr; gap: 2px; }
}

.re-toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
             font-size: 13.5px; line-height: 1.5; }
.re-toggle input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); }
.re-toggle em { color: var(--text-muted); font-style: normal; font-size: 12.5px; }

/* audit */
.audit-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.audit-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.audit-table tr:last-child td { border-bottom: none; }
.au-time   { color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.au-actor  { font-weight: 700; white-space: nowrap; }
.au-action { color: var(--accent); font-weight: 600; white-space: nowrap; }
.au-detail { color: var(--text-muted); word-break: break-word; font-family: 'Courier New', monospace; font-size: 11.5px; }
.lim.warn { border-color: rgba(255,215,64,0.4); }
.lim.warn .lim-v { color: var(--pending); }
body.light .lim.warn { border-color: rgba(179,134,0,0.35); }

/* ═══════════════ THE DESK ═══════════════ */

.envelope-bar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px;
}
.env-item { display: flex; flex-direction: column; gap: 3px; }
.env-l { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.env-v { font-size: 16px; font-weight: 800; }
.env-item.danger .env-v { color: var(--loss); }

.slot-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.slot-count { margin-left: auto; font-size: 12px; color: var(--text-muted); font-weight: 600; }

/* Direction buttons sit on their own row rather than competing with the time
   for horizontal space. Squeezing an icon button beside the label is what
   clipped the second arrow at narrow track widths. */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
.slot-chip {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.sc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sc-i { font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
        text-transform: uppercase; color: var(--text-muted); }
.sc-t { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }

.sc-dir { display: flex; gap: 5px; }
.sc-btn {
  flex: 1; min-height: 34px; border-radius: 7px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--bg-card);
  color: var(--text-muted); font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.3px; font-family: inherit; transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 3px;
}
.sc-btn:hover { border-color: var(--border-bright); color: var(--text); }
.sc-btn.up.on {
  background: rgba(0,230,118,0.22); border-color: var(--buy); color: var(--buy);
  box-shadow: inset 0 0 0 1px var(--buy);
}
.sc-btn.dn.on {
  background: rgba(255,23,68,0.22); border-color: var(--sell); color: var(--sell);
  box-shadow: inset 0 0 0 1px var(--sell);
}
body.light .sc-btn.up.on { background: rgba(0,153,77,0.16); }
body.light .sc-btn.dn.on { background: rgba(204,17,51,0.16); }

.start-row {
  display: flex; gap: 20px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border);
}
.start-facts { font-size: 14px; flex: 1; min-width: 260px; }
.start-note { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.start-actions { display: flex; gap: 10px; }
.pos-t { color: var(--win); }
.neg-t { color: var(--loss); }

/* live board */
.live-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--win); margin-left: 8px; vertical-align: middle;
  animation: live-pulse 1.6s infinite;
}
@keyframes live-pulse { 50% { opacity: 0.3; } }

.next-panel {
  background: var(--bg-card); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px;
}
.np-head { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
           color: var(--accent); margin-bottom: 12px; }
.np-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.np-grid > div { display: flex; flex-direction: column; gap: 3px; }
.np-l { font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px;
        text-transform: uppercase; color: var(--text-muted); }
.np-v { font-size: 17px; font-weight: 800; }

.board-totals {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 22px;
}
.bt { background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.bt-l { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.bt-v { font-size: 18px; font-weight: 800; }
.bt.big .bt-v { font-size: 22px; }

.ended-banner {
  padding: 14px 18px; border-radius: var(--radius); margin-bottom: 18px; font-size: 14.5px;
  border: 1px solid var(--border);
}
.ended-banner.good { background: rgba(0,230,118,0.08); border-color: var(--win); }
.ended-banner.bad  { background: rgba(255,23,68,0.08); border-color: var(--loss); }
body.light .ended-banner.good { background: rgba(0,153,77,0.08); }
body.light .ended-banner.bad  { background: rgba(204,17,51,0.08); }

.slot-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.slot-table th {
  text-align: left; padding: 10px 14px; font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted);
  background: var(--bg-input); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.slot-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.slot-table tr:last-child td { border-bottom: none; }
.slot-table tr.sl-placed { background: rgba(255,215,64,0.05); }
.px { font-family: 'Courier New', monospace; font-size: 12px; color: var(--text-muted); }
.dir { font-weight: 700; font-size: 12px; }
.dir.UP { color: var(--buy); }
.dir.DOWN { color: var(--sell); }
.sl-pending { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.board-refresh { text-align: center; color: var(--text-muted); font-size: 12.5px; margin-top: 18px; }

/* ─── LIVE CANDLE FEED ───
   Read by the browser straight from Binance while a bet sits on a candle.
   Presentational only: nothing here is stored, and the worker settles from
   its own server-side read of the closed candle. */

.live-watch {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left-width: 3px; border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 16px;
  transition: border-color 0.4s;
}
.live-watch.win   { border-left-color: var(--win); }
.live-watch.lose  { border-left-color: var(--loss); }
.live-watch.level { border-left-color: var(--pending); }
.live-watch.pending, .live-watch.settling, .live-watch.offline { border-left-color: var(--accent); }

/* the scanning pulse — the "something is happening" cue */
.lw-scan {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); position: relative;
}
.lw-scan::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid var(--accent); animation: lw-ping 1.8s ease-out infinite;
}
.live-watch.win  .lw-scan, .live-watch.win  .lw-scan::after { background: var(--win); border-color: var(--win); }
.live-watch.lose .lw-scan, .live-watch.lose .lw-scan::after { background: var(--loss); border-color: var(--loss); }
@keyframes lw-ping {
  0%   { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(2.1); opacity: 0; }
}

.lw-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.lw-title { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; color: var(--text-muted); }
.lw-title b { font-weight: 800; }
.lw-count {
  margin-left: auto; font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.lw-wait { font-size: 13px; color: var(--text-muted); display: inline-block; margin-left: 4px; }
.lw-wait strong { color: var(--text); font-variant-numeric: tabular-nums; }
.live-watch.pending, .live-watch.settling, .live-watch.offline {
  display: flex; align-items: center; gap: 10px;
}

.lw-body { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lw-px { display: flex; flex-direction: column; gap: 2px; }
.lw-l {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.9px;
  text-transform: uppercase; color: var(--text-muted);
}
.lw-v {
  font-family: 'Courier New', monospace; font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lw-v.big { font-size: 24px; }
.lw-v.up { color: var(--win); }
.lw-v.down { color: var(--loss); }
.lw-to { font-size: 18px; color: var(--text-muted); }

/* a brief flash each time the price moves */
.lw-v.tick-up   { animation: lw-flash-up 0.5s ease-out; }
.lw-v.tick-down { animation: lw-flash-down 0.5s ease-out; }
@keyframes lw-flash-up   { 0% { background: rgba(0,230,118,0.3);  } 100% { background: transparent; } }
@keyframes lw-flash-down { 0% { background: rgba(255,23,68,0.3);  } 100% { background: transparent; } }

.lw-delta {
  font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; line-height: 1.2;
}
.lw-delta small { font-size: 11px; font-weight: 600; opacity: 0.75; }
.lw-delta.up { color: var(--win); }
.lw-delta.down { color: var(--loss); }
.lw-delta.flat { color: var(--text-muted); }

.lw-verdict {
  margin-left: auto; font-size: 12px; font-weight: 800; letter-spacing: 1px;
  padding: 7px 14px; border-radius: 999px; white-space: nowrap;
}
.lw-verdict.win   { background: rgba(0,230,118,0.16); color: var(--win); }
.lw-verdict.lose  { background: rgba(255,23,68,0.16); color: var(--loss); }
.lw-verdict.level { background: rgba(255,215,64,0.16); color: var(--pending); }
body.light .lw-verdict.win   { background: rgba(0,153,77,0.13); }
body.light .lw-verdict.lose  { background: rgba(204,17,51,0.13); }
body.light .lw-verdict.level { background: rgba(179,134,0,0.13); }

/* how far through the five minutes we are */
.lw-bar {
  height: 4px; background: var(--bg-input); border-radius: 999px;
  margin-top: 14px; overflow: hidden;
}
.lw-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--win));
  transition: width 3s linear;
}
.live-watch.lose .lw-fill { background: linear-gradient(90deg, var(--accent), var(--loss)); }

@media (prefers-reduced-motion: reduce) {
  .lw-scan::after { animation: none; }
  .lw-v.tick-up, .lw-v.tick-down { animation: none; }
  .lw-fill { transition: none; }
}

/* ─── ARMED STATE (bet placed, candle not open yet) ─── */
.live-watch.armed { border-left-color: var(--accent); }
.lw-armed-note { font-size: 12.5px; color: var(--text-muted); max-width: 32ch; line-height: 1.45; }
.lw-fill.armed { background: linear-gradient(90deg, var(--border-bright), var(--accent)); }

/* ─── RESULT ANNOUNCEMENT ─── */
.result-burst {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.rb-inner {
  /* Above the sparks, so confetti bursts from behind the card rather than
     scattering across the word. */
  position: relative; z-index: 2;
  text-align: center; padding: 26px 44px; border-radius: 20px;
  background: var(--bg-card); border: 2px solid var(--border);
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  animation: rb-pop 0.42s cubic-bezier(.18,1.4,.4,1) both,
             rb-out 0.5s ease-in 1.7s both;
}
.result-burst.win  .rb-inner { border-color: var(--win);  box-shadow: 0 0 0 6px rgba(0,230,118,0.12), 0 18px 60px rgba(0,0,0,0.45); }
.result-burst.loss .rb-inner { border-color: var(--loss); box-shadow: 0 0 0 6px rgba(255,23,68,0.12), 0 18px 60px rgba(0,0,0,0.45); }
.result-burst.tie  .rb-inner { border-color: var(--pending); }
.result-burst.loss .rb-inner { animation: rb-pop 0.42s cubic-bezier(.18,1.4,.4,1) both,
                                          rb-shake 0.45s ease-in-out 0.3s,
                                          rb-out 0.5s ease-in 1.2s both; }

.rb-mark { font-size: 46px; line-height: 1; font-weight: 800; }
.result-burst.win  .rb-mark { color: var(--win); }
.result-burst.loss .rb-mark { color: var(--loss); }
.result-burst.tie  .rb-mark { color: var(--pending); }
.rb-word {
  font-size: 34px; font-weight: 800; letter-spacing: 4px; margin-top: 6px;
  color: var(--text);
}
.rb-sub { font-size: 13px; color: var(--text-muted); margin-top: 8px; letter-spacing: 0.4px; }

@keyframes rb-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes rb-out { to { transform: scale(0.94); opacity: 0; } }
@keyframes rb-shake {
  0%,100% { translate: 0 0; }
  20% { translate: -9px 0; } 40% { translate: 8px 0; }
  60% { translate: -5px 0; } 80% { translate: 4px 0; }
}

/* sparks, wins only */
.rb-spark {
  position: absolute; top: 50%; left: 50%; z-index: 1;
  width: 8px; height: 8px; border-radius: 2px; background: var(--win);
  animation: rb-fly 1.1s ease-out both;
  animation-delay: calc(var(--i) * 18ms);
  transform-origin: center;
}
.rb-spark:nth-child(odd)  { background: var(--accent); }
.rb-spark:nth-child(3n)   { background: var(--pending); border-radius: 50%; }
@keyframes rb-fly {
  0%   { transform: rotate(calc(var(--i) * 25.7deg)) translateY(0) scale(1); opacity: 1; }
  100% { transform: rotate(calc(var(--i) * 25.7deg)) translateY(-190px) scale(0.2); opacity: 0; }
}

/* the settled row flashes to match */
.slot-table tr.row-win  td { animation: row-glow-win  1.6s ease-out; }
.slot-table tr.row-loss td { animation: row-glow-loss 1.6s ease-out; }
@keyframes row-glow-win  { 0% { background: rgba(0,230,118,0.28); } 100% { background: transparent; } }
@keyframes row-glow-loss { 0% { background: rgba(255,23,68,0.28); } 100% { background: transparent; } }

@media (prefers-reduced-motion: reduce) {
  .rb-inner { animation: rb-out 0.4s ease-in 1.7s both; }
  .rb-spark { display: none; }
  .slot-table tr.row-win td, .slot-table tr.row-loss td { animation: none; }
}

/* ─── MOBILE MENU BUTTON ─── */
.nav-toggle {
  display: none;            /* desktop shows the tabs directly */
  align-items: center; gap: 9px;
  margin-left: auto; margin-right: 4px;
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm);
  padding: 8px 12px; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 700; max-width: 46vw;
}
.nav-toggle:hover { border-color: var(--accent); }
.nav-toggle-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-burger { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.nav-burger span {
  display: block; width: 17px; height: 2px; border-radius: 2px;
  background: var(--text); transition: transform 0.2s, opacity 0.2s;
}
#main-nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
#main-nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
#main-nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .nav-burger span { transition: none; } }

/* The Switch item only exists inside the mobile menu. */
.nav-menu-only { display: none; }

/* ═══════════════ MOBILE ═══════════════ */
@media (max-width: 860px) {
  /* One bar, one button. The tabs live in a panel that drops below it. */
  #main-nav { height: 54px; padding: 0 12px; flex-wrap: nowrap; gap: 10px; position: relative; }
  .nav-brand { font-size: 14px; letter-spacing: 1px; }
  .brand-icon { font-size: 18px; }

  /* The drawer is identical at every width; only the bar tightens up. */
  .nav-user-info { gap: 8px; }
  .nav-username { font-size: 13px; }
  .account-badge { font-size: 9px; padding: 2px 6px; }
  .nav-toggle-label { display: none; }

  #main-content, #main-content.sim-wide { padding: 20px 14px 60px; }

  .admin-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .admin-title { font-size: 23px; }

  .envelope-bar { grid-template-columns: repeat(2, 1fr); }
  .board-totals, .np-grid { grid-template-columns: repeat(2, 1fr); }
  .uc-limits { grid-template-columns: repeat(2, 1fr); }
  .metrics-grid { grid-template-columns: repeat(2, 1fr) !important; }

  .admin-form-row { flex-direction: column; gap: 12px; }
  .admin-form-row .form-group { width: 100%; }

  .start-row { flex-direction: column; align-items: stretch; }
  .start-actions { flex-direction: column; }
  .start-actions button { width: 100%; }

  .uc-head { flex-direction: column; align-items: stretch; }
  .uc-actions { justify-content: flex-start; }

  /* wide tables scroll inside themselves, never the page */
  .slot-table, .audit-table, .trades-table { min-width: 620px; }
  .admin-card > table, .slot-table, .audit-table { display: table; }
  .table-wrap-m { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .lw-body { gap: 12px; }
  .lw-v.big { font-size: 20px; }
  .lw-verdict { margin-left: 0; }
  .lw-count { margin-left: 0; }

  .kill-panel { flex-direction: column; align-items: stretch; text-align: left; }

  .rb-inner { padding: 20px 28px; }
  .rb-word { font-size: 26px; letter-spacing: 3px; }
  .rb-mark { font-size: 36px; }

  .session-card { flex-wrap: wrap; }
  .detail-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .sim-chart-row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .envelope-bar, .board-totals, .np-grid, .uc-limits { grid-template-columns: 1fr 1fr; }
  .slot-grid { grid-template-columns: 1fr 1fr; }
  .nav-brand { width: 100%; }
  .nav-user-info { width: 100%; margin-left: 0; justify-content: space-between; }
  .metrics-grid { grid-template-columns: 1fr !important; }
}

/* Chart/metric pairs. A class rather than an inline style so the mobile
   breakpoint can collapse them to a single column. */
.pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pair-grid.wide { gap: 20px; }
.pair-grid > .span-2 { grid-column: span 2; }
.span-2 { grid-column: span 2; }

/* Any card holding a wide table scrolls itself rather than the page. */
.admin-card:has(> table),
.admin-card:has(> .audit-table),
#admin-audit { overflow-x: auto; }

@media (max-width: 860px) {
  .pair-grid, .pair-grid.wide { grid-template-columns: 1fr; }
  .pair-grid > .span-2 { grid-column: auto; }
  /* Chart.js sizes to its container; let it shrink with the card. */
  .card canvas { max-width: 100% !important; }
}

/* Theme button: icon plus words, now that it lives in the drawer. */
#theme-toggle { display: flex; align-items: center; gap: 10px; }
#theme-toggle .tl { display: inline; text-transform: capitalize; }
#theme-toggle .ti { font-size: 15px; }
@media (max-width: 860px) {
  #theme-toggle { display: flex; align-items: center; gap: 10px; }
  #theme-toggle .tl { display: inline; text-transform: capitalize; }
  /* Keep the wordmark on one line beside the menu button. */
  .nav-brand { white-space: nowrap; font-size: 13px; letter-spacing: 0.5px; }
}
@media (max-width: 400px) {
  .nav-brand .brand-text { display: none; }
  .nav-toggle { max-width: 58vw; }
}
/* A restarted cycle is shorter than the first, so each row shows how long
   its own cycle is. */
.sim-of { color: var(--text-muted); font-weight: 600; font-size: 0.85em; }

/* ═══════════════ TRADER REPORT ═══════════════ */

.rp-range { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.btn-small.on { border-color: var(--accent); color: var(--accent); background: rgba(124,109,255,0.12); }

.rp-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 26px;
}
.rp-tile {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.rp-l { font-size: 10px; font-weight: 700; letter-spacing: 1px;
        text-transform: uppercase; color: var(--text-muted); }
.rp-v { font-size: 23px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rp-n { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }

.rp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
/* Grid items default to min-width:auto, so a wide chart inside one forces its
   track open and the whole page scrolls sideways. The chart scrolls itself. */
.rp-two > * { min-width: 0; }
.rp-bar-row > .rp-bar-track { min-width: 0; }
@media (max-width: 860px) { .rp-two { grid-template-columns: 1fr; } }

.rp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rp-empty { color: var(--text-muted); font-size: 13.5px; padding: 26px 4px; text-align: center; }
.rp-note { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-top: 12px; }
.dim-t { color: var(--text-muted); }

/* calendar */
.rp-cal { display: block; }
.rp-cal-m { font-size: 10px; fill: var(--text-muted); font-weight: 600; }
.rp-cal-d { font-size: 9px; fill: var(--text-muted); }
.rp-cell { cursor: pointer; fill: var(--bg-input); stroke: var(--border); stroke-width: 0.5; }
/* --a carries the day's size relative to the biggest day in range. */
.rp-cell.win  { fill: color-mix(in srgb, var(--win)  calc(var(--a) * 100%), var(--bg-input)); }
.rp-cell.loss { fill: color-mix(in srgb, var(--loss) calc(var(--a) * 100%), var(--bg-input)); }
.rp-cell.flat { fill: var(--bg-hover); }
.rp-cell:hover { stroke: var(--accent); stroke-width: 1.5; }

.rp-legend {
  display: flex; align-items: center; gap: 5px; justify-content: flex-end;
  margin-top: 12px; font-size: 10.5px; color: var(--text-muted);
}
.rp-key { width: 13px; height: 13px; border-radius: 3px; display: inline-block;
          border: 1px solid var(--border); }
.rp-key.win  { background: color-mix(in srgb, var(--win)  calc(var(--a) * 100%), var(--bg-input)); }
.rp-key.loss { background: color-mix(in srgb, var(--loss) calc(var(--a) * 100%), var(--bg-input)); }
.rp-key.idle { background: var(--bg-input); }

/* line chart */
.rp-zero { stroke: var(--border-bright); stroke-width: 1; stroke-dasharray: 4 4; }
.rp-ax { font-size: 10px; fill: var(--text-muted); }
.rp-line { fill: none; stroke-width: 2.2; }
.rp-line.win { stroke: var(--win); }
.rp-line.loss { stroke: var(--loss); }
.rp-area { stroke: none; opacity: 0.16; }
.rp-area.win { fill: var(--win); }
.rp-area.loss { fill: var(--loss); }
.rp-dot { cursor: pointer; }
.rp-dot.win { fill: var(--win); }
.rp-dot.loss { fill: var(--loss); }

/* horizontal bars */
.rp-bars { display: flex; flex-direction: column; gap: 7px; }
.rp-bar-row { display: grid; grid-template-columns: 74px 1fr 60px; gap: 10px;
              align-items: center; cursor: default; }
.rp-bar-l { font-size: 11.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.rp-bar-track { display: flex; height: 17px; border-radius: 4px; overflow: hidden;
                background: var(--bg-input); }
.rp-seg { display: block; height: 100%; min-width: 0; }
.rp-seg.win  { background: var(--win); }
.rp-seg.loss { background: var(--loss); }
.rp-seg.flat { background: var(--pending); }
.rp-seg.pad  { background: transparent; }
.rp-bar-v { font-size: 12.5px; font-weight: 800; text-align: right;
            font-variant-numeric: tabular-nums; }

/* daily bars */
.rp-dbar { cursor: pointer; }
.rp-dbar.win  { fill: var(--win); }
.rp-dbar.loss { fill: var(--loss); }
.rp-dbar:hover { opacity: 0.75; }
.start-note.over { color: var(--loss); }
.start-note.over strong { color: var(--loss); }

/* A real button that sits in a row beside a .form-input.
   `align-self: stretch` makes it match the input's height exactly rather than
   guessing at padding — the row's line height is set by the taller input. */
.btn-inline {
  align-self: stretch;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  padding: 0 22px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: opacity 0.2s, transform 0.2s;
}
.btn-inline:hover  { opacity: 0.9; transform: translateY(-1px); }
.btn-inline:active { transform: none; opacity: 0.8; }
.btn-inline:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ─── TRADING: BUY / SELL ───────────────────────────────────────────────── */
/* Sized off the viewport so they stay big on a laptop and still fit a phone.
   These are the two controls the whole screen exists for. */
.trade-btn-row {
  display: flex;
  gap: clamp(16px, 4vw, 48px);
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
}
.trade-btn {
  width: clamp(200px, 34vw, 420px);
  height: clamp(120px, 22vh, 220px);
  border-radius: 16px;
  border: 3px solid;
  font-size: clamp(34px, 5.5vw, 64px);
  font-weight: 900;
  letter-spacing: 4px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.trade-btn-hint {
  font-size: clamp(9px, 1vw, 12px);
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 8px;
  opacity: 0.7;
}
.trade-btn-vs {
  font-size: clamp(14px, 1.6vw, 22px);
  color: var(--text-muted);
  font-weight: 700;
}
.trade-btn.buy {
  background: rgba(0,230,118,0.15);
  border-color: var(--buy);
  color: var(--buy);
  box-shadow: 0 0 28px rgba(0,230,118,0.22);
}
.trade-btn.sell {
  background: rgba(255,23,68,0.15);
  border-color: var(--sell);
  color: var(--sell);
  box-shadow: 0 0 28px rgba(255,23,68,0.22);
}
.trade-btn:hover  { transform: translateY(-3px) scale(1.02); }
.trade-btn.buy:hover  { background: rgba(0,230,118,0.26);  box-shadow: 0 0 46px rgba(0,230,118,0.4); }
.trade-btn.sell:hover { background: rgba(255,23,68,0.26); box-shadow: 0 0 46px rgba(255,23,68,0.4); }
/* Pressed state reads instantly, before the flash even starts. */
.trade-btn:active { transform: translateY(0) scale(0.97); }

/* The whole screen takes the colour of the side that was clicked. */
.trade-flash.buy  { color: var(--buy);  background: rgba(0,230,118,0.38); }
.trade-flash.sell { color: var(--sell); background: rgba(255,23,68,0.38); }
.trade-flash.show { opacity: 1; animation: trade-flash-pop 0.42s ease-out; }

@keyframes trade-flash-pop {
  0%   { opacity: 0;    transform: scale(0.82); }
  22%  { opacity: 1;    transform: scale(1.06); }
  55%  { opacity: 0.95; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1); }
}

/* Respect a reduced-motion preference: keep the colour, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .trade-btn:hover, .trade-btn:active { transform: none; }
  .trade-flash.show { animation: none; }
}

/* ═══════════════ NAVIGATION DRAWER ═══════════════
   The tabs slide in from the right on click, at every width. The bar keeps
   only the brand, who you are, and the button — which is also what stopped
   it overflowing at intermediate widths, where the switch and a duplicate
   theme toggle used to run off the edge. */

#main-nav { gap: 16px; }
#main-nav .nav-brand { margin-right: auto; }

/* Always visible now, not just on a phone. */
.nav-toggle { display: flex; }

.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  z-index: 190;
}
.nav-scrim.show { opacity: 1; pointer-events: auto; }

.nav-links {
  position: fixed;
  top: 0;
  right: 0;
  /* dvh so an iOS address bar appearing does not clip the last item */
  height: 100vh;
  height: 100dvh;
  width: min(320px, 86vw);
  z-index: 200;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 76px 14px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;

  background: var(--bg-card);
  border-left: 1px solid var(--border);
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.4);

  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
#main-nav.nav-open .nav-links { transform: translateX(0); }

/* The bar must stay above the scrim so the button can still close the drawer. */
#main-nav { z-index: 210; }

.nav-links .nav-btn {
  text-align: left;
  padding: 13px 14px;
  font-size: 14.5px;
  letter-spacing: 0.3px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav-links .nav-btn.active {
  background: rgba(124, 109, 255, 0.14);
  color: var(--accent);
}
.nav-drawer-sep {
  height: 1px;
  background: var(--border);
  margin: 10px 2px;
  flex-shrink: 0;
}

/* While the drawer is open the page behind it should not scroll away. */
body.nav-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav-links { transition: none; }
  .nav-scrim { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   EXECUTOR ACTIVITY — motion, because "waiting" and "dead" look the same
   ═══════════════════════════════════════════════════════════════════════ */

.act-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warn); display: inline-block; flex: none;
  box-shadow: 0 0 0 0 var(--warn);
  animation: act-pulse 1.8s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes act-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(234, 179, 8, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(234, 179, 8, 0); }
  100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); }
}

.act-armed {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--warn); font-weight: 800; letter-spacing: .5px;
}

/* "the screen is already dialled in" — otherwise pre-staging is invisible */
.act-ready {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; margin-bottom: 16px; font-size: 13px;
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; background: var(--surface-2); line-height: 1.5;
}
.act-ready .act-dot { margin-top: 5px; background: var(--accent); }

/* The bar is the panel's clock: it fills as the span runs out. */
.act-bar {
  position: relative; height: 22px; border-radius: 6px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border);
}
.act-bar-fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 100%);
  opacity: .30; transition: width .25s linear;
}
.act-bar-live  .act-bar-fill { background: var(--accent); }
.act-bar-queue .act-bar-fill { background: var(--text-muted); opacity: .22; }
.act-bar-soon  .act-bar-fill { background: var(--warn); opacity: .45; }
.act-bar-done  .act-bar-fill { width: 100% !important; opacity: .18; }

.act-bar-left {
  position: relative; z-index: 1; display: block; text-align: center;
  line-height: 22px; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .3px;
}
.act-bar-soon .act-bar-left { color: var(--warn); }
.act-bar-done .act-bar-left { color: var(--text-muted); font-weight: 600; }

/* A call whose moment has come, but which has not been clicked yet. */
.act-due {
  display: inline-block; margin-top: 3px; padding: 2px 9px;
  border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .4px;
  color: var(--win); border: 1px solid var(--win); background: transparent;
  animation: act-blink 1s steps(2, start) infinite;
}
@keyframes act-blink { 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  .act-dot, .act-due { animation: none; }
  .act-bar-fill { transition: none; }
}

/* Why the screen is NOT ready. Silence here cost a whole session once. */
.act-blocked {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; margin-bottom: 16px; font-size: 13px; line-height: 1.5;
  border: 1px solid var(--border); border-left: 3px solid var(--warn);
  border-radius: 8px; background: var(--surface-2);
}
.act-blocked > i {
  flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--warn); color: var(--bg); font-style: normal;
  font-weight: 900; font-size: 12px; line-height: 18px; text-align: center;
}

/* ── A contract on the market ──────────────────────────────────────────────
   This is the only thing on the page that is happening right now, so it gets
   the full width and a bar that moves. */

.act-live {
  padding: 16px 18px 18px; border-radius: 12px; margin-bottom: 14px;
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  background: var(--surface-2);
}
.act-live.is-buy  { border-left-color: var(--win); }
.act-live.is-sell { border-left-color: var(--loss); }

.act-live-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}
.act-live-id { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.act-live-tf {
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 9px;
}
.act-live-meta {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; color: var(--text-muted);
}
.act-live-real { color: var(--loss); font-weight: 800; text-transform: uppercase; }

.act-live-stake {
  font-size: 26px; font-weight: 800; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums; margin-bottom: 12px;
}
.act-live-stake span {
  font-size: 12px; font-weight: 600; letter-spacing: .4px;
  color: var(--text-muted); margin-left: 7px;
}
.act-live-fallback { font-size: 14px; }

/* The big bar. Height, stripes and a glow — a static bar at this size just
   looks like a block of colour, and you cannot tell it from a frozen one. */
.act-bar-xl { height: 40px; border-radius: 10px; }
.act-bar-xl .act-bar-left {
  line-height: 40px; font-size: 16px; font-weight: 800; letter-spacing: .5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.act-bar-xl .act-bar-fill { opacity: 1; }
.act-bar-buy  .act-bar-fill { background: var(--win); }
.act-bar-sell .act-bar-fill { background: var(--loss); }

/* Movement that does not depend on the width changing: at a 4-hour expiry the
   fill crawls, and without this the bar looks dead. */
.act-bar-xl .act-bar-fill::after {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, .17) 0 11px, transparent 11px 22px);
  background-size: 31px 31px;
  animation: act-stripes 1.1s linear infinite;
}
@keyframes act-stripes { to { background-position: 31px 0; } }

/* The last ten seconds, where a contract is actually decided. */
.act-bar-xl.act-bar-soon { animation: act-urgent 1s ease-in-out infinite; }
.act-bar-xl.act-bar-soon .act-bar-fill { background: var(--warn); opacity: 1; }
/* The small bar puts amber text on a dark ground; at this size the fill has
   reached the text, so it has to flip to dark-on-amber to stay readable. */
.act-bar-xl.act-bar-soon .act-bar-left { color: #1b1403; text-shadow: none; }
@keyframes act-urgent {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(234, 179, 8, .22); }
}
.act-bar-xl.act-bar-done .act-bar-fill { opacity: .35; }
.act-bar-xl.act-bar-done .act-bar-fill::after { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .act-bar-xl .act-bar-fill::after, .act-bar-xl.act-bar-soon { animation: none; }
}

/* ── Per-trader sizing ─────────────────────────────────────────────────────
   A desk does not stake every trader the same way, so each gets a card
   rather than a row in a table they all share. */

.pk-trader {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 12px; background: var(--surface-2);
}
.pk-trader-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.pk-trader-head strong { font-size: 15px; }
.pk-role {
  font-size: 11px; color: var(--text-muted); font-weight: 400; margin-left: 7px;
  text-transform: uppercase; letter-spacing: .6px;
}
.pk-trader-off { font-size: 12px; color: var(--text-muted); margin-top: 8px; }

.pk-trader-sizing { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }

.pk-follow {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  font-size: 13px; margin-bottom: 12px;
}
.pk-follow label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.pk-follow input { accent-color: var(--accent); }
.pk-follow-now { font-size: 12px; color: var(--text-muted); }

.pk-trader-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-top: 12px; flex-wrap: wrap;
}
.pk-trader-foot > span {
  flex: 1 1 260px; font-size: 12px; color: var(--text-muted); line-height: 1.5;
}



/* The queue's own toolbar — a count and the one destructive action on it. */
.act-queue-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
  padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2); font-size: 13px;
}

/* The contract duration: readable by the driver, settable only by hand. */
.pk-duration {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 4px; padding: 9px 13px; border-radius: 8px;
  border: 1px solid var(--border); border-left: 3px solid var(--win);
  background: var(--surface-2); font-size: 12px; color: var(--text-muted);
}
.pk-duration strong { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.pk-duration em { font-style: normal; flex: 1 1 240px; }
.pk-duration.is-off { border-left-color: var(--loss); }
.pk-duration.is-off em { color: var(--loss); }

/* ── Executor sessions: the ladder as it was actually walked ─────────────── */

.act-sess {
  border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 10px; background: var(--surface-2); overflow: hidden;
}
.act-sess-head {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px 14px; background: none; border: 0; cursor: pointer;
  color: inherit; font: inherit; text-align: left;
}
.act-sess-head:hover { background: rgba(127, 127, 127, .07); }
.act-sess-when { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.act-sess-name { flex: 1 1 auto; font-size: 13px; }
.act-sess-name em { font-style: normal; font-size: 11px; color: var(--text-muted); }
.act-sess-score { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.act-sess-net { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.act-sess-caret { color: var(--text-muted); transition: transform .18s ease; }
.act-sess.is-open .act-sess-caret { transform: rotate(180deg); }

.act-sess-body { border-top: 1px solid var(--border); padding: 12px 14px; }
.act-sess-note {
  font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-bottom: 12px;
}
.act-step-failed { opacity: .72; }

/* ── Sessions: whose sessions am I looking at ──────────────────────────────
   An admin can read any trader's journal from here, so the page has to say
   plainly which one is on screen. */

.sessions-head {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap; margin-bottom: 28px;
}
.sess-who { display: flex; align-items: center; gap: 9px; }
.sess-who label {
  font-size: 10px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-muted);
}
.sess-who select {
  width: auto; min-width: 150px; padding: 6px 12px; font-size: 13px;
}
.sess-who-note {
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  color: var(--warn); border: 1px solid var(--warn);
  border-radius: 999px; padding: 3px 11px;
}

/* ── Sessions that cannot trade ────────────────────────────────────────────
   Two different problems, both of which make a session look like the
   executor failed when it did exactly what it should. */

/* Calls entered for a minute that had already passed. */
.session-card.is-backdated { border-left: 3px solid var(--warn); }
.badge-backdated {
  display: inline-block; margin-left: 7px; padding: 2px 8px;
  border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .7px;
  color: var(--warn); border: 1px solid var(--warn); background: transparent;
  vertical-align: middle;
}

/* Deleted once: readable for ever, tradeable never. */
.session-card.is-barred { opacity: .78; border-left: 3px solid var(--text-muted); }
.badge-barred {
  display: inline-block; margin-left: 7px; padding: 2px 8px;
  border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .7px;
  color: var(--text-muted); border: 1px solid var(--border); background: transparent;
  vertical-align: middle;
}

/* ── The desk, before the individual ──────────────────────────────────────
   Who traded, how much, how it went — then what the two broker accounts
   actually did. All of it read off the executor's own records. */

.rp-desk {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2); padding: 16px 18px; margin-bottom: 22px;
}
.rp-desk-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
}
.rp-desk-head > span {
  font-size: 12px; font-weight: 500; letter-spacing: .2px;
  text-transform: none; color: var(--text-muted);
}
.rp-desk-line {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 9px 0; border-top: 1px solid var(--border);
  font-size: 13px; line-height: 1.6; color: var(--text-muted);
}
.rp-desk-who { font-weight: 800; color: var(--text); min-width: 110px; }
.rp-desk-who em {
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--text-muted); margin-left: 6px;
}
.rp-desk-net { margin-left: auto; white-space: nowrap; font-weight: 700; }

.rp-accounts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
}
.rp-acct {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px 8px; background: var(--bg-input);
}
.rp-acct.is-real { border-left: 3px solid var(--warn); }
.rp-acct-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-muted);
}
.rp-acct-head span { font-size: 12px; letter-spacing: 0; }
.rp-acct-now {
  font-size: 24px; font-weight: 800; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums; margin: 4px 0 2px;
}
.rp-acct-foot { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.rp-who { width: auto; min-width: 140px; padding: 5px 10px; font-size: 12px; }

/* Claimed, set up, cursor on the button — the moment before a trade. */
.act-live.is-arming { border-left-color: var(--warn); }
.act-arming-note {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-muted);
  padding: 9px 11px; border-radius: 8px;
  border: 1px dashed var(--border); background: var(--bg-input);
}
.act-arming-note strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* "40 minutes ago" answers the question a timestamp makes you work out.
   The exact moment stays on the title attribute. */
.ago { border-bottom: 1px dotted var(--border); cursor: help; }
.rp-last { margin-top: 2px; }
.rp-desk-when { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* ── Call note ──────────────────────────────────────────────────────────────
   Sits directly above BUY/SELL on the trading screen. Deliberately quiet: the
   call itself is the urgent thing on that screen and the note must not compete
   with it, so no fill and no accent until it is focused. */
.call-note {
  width: 100%;
  max-width: 420px;
  margin: 0 auto 18px;
  text-align: left;
}
.call-note-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.call-note-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.call-note-count {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.call-note-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 11px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}
.call-note-input:focus { border-color: var(--accent); }
.call-note-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
.call-tag {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  padding: 3px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.call-tag:hover { border-color: var(--accent); color: var(--text); }
.call-tag.on {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(124, 77, 255, 0.12);
}
.call-tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ─── Front page: "Adding Zeros To Money" ─────────────────────────────────
   The first thing anyone sees at zerotrail.capital. The figure is the
   slogan performed rather than written, so it gets the weight on the page
   and everything else stays quiet around it. */
.zt-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.zt-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px;
}

/* The stage is a fixed box so the page does not jump as the figure grows
   from $1 to ten digits — layout shift under a headline reads as a bug. */
.zt-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 78px;
  display: grid;
  place-items: center;
}
.zt-amount {
  font-size: clamp(32px, 7.2vw, 56px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  /* Without tabular figures every digit change nudges the whole number
     sideways, which turns a climb into a twitch. */
  font-variant-numeric: tabular-nums;
  color: var(--win);
  text-shadow: 0 0 34px rgba(0, 230, 118, 0.3);
  position: relative;
  z-index: 1;
}
@keyframes zt-pop {
  0%   { transform: scale(1);     filter: brightness(1); }
  28%  { transform: scale(1.055); filter: brightness(1.5); }
  100% { transform: scale(1);     filter: brightness(1); }
}
.zt-pop { animation: zt-pop 460ms cubic-bezier(.2,.7,.3,1); }

.zt-ghosts { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.zt-ghost {
  position: absolute;
  bottom: 24%;
  font-size: clamp(26px, 6vw, 46px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--win);
  opacity: 0;
  animation: zt-drift 1900ms cubic-bezier(.15,.6,.3,1) forwards;
}
@keyframes zt-drift {
  0%   { opacity: .55; transform: translate(0,0) rotate(0) scale(1); }
  100% { opacity: 0;   transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.7); }
}

.zt-word {
  font-size: clamp(26px, 5vw, 38px);
  font-weight: 900;
  letter-spacing: 9px;
  text-indent: 9px;            /* letter-spacing pads the right; put it back */
  color: var(--accent);
  margin: 4px 0 0;
}
.zt-slogan {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 4px;
}

.zt-foot {
  max-width: 46ch;
  margin: 2px auto 0;
  font-size: 12px;
  line-height: 1.65;
  text-align: center;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.zt-foot strong { color: var(--text); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .zt-pop, .zt-ghost { animation: none; }
  .zt-ghost { display: none; }
}