:root {
  --bg:        #0d0f1a;
  --surface:   #151829;
  --surface2:  #1c2035;
  --border:    #252840;
  --text:      #c8cde0;
  --muted:     #6b718a;
  --green:     #00d46a;
  --red:       #ff4757;
  --orange:    #ffa502;
  --blue:      #4f8ef7;
  --purple:    #9b6dff;
  --amber:     #ffc107;
  --font:      'Inter', system-ui, sans-serif;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  min-height: 100vh;
}

a { color: var(--blue); text-decoration: none; }

/* ── Layout ─────────────────────────────────────────────── */

.header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-logo {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}

.header-logo span { color: var(--blue); }

.header-spacer { flex: 1; }

.header-meta {
  font-size: 11px;
  color: var(--muted);
}

.main {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Health indicator ───────────────────────────────────── */

.health-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

.health-dot.live    { background: var(--green); box-shadow: 0 0 6px var(--green); }
.health-dot.stale   { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.health-dot.down    { background: var(--red);   box-shadow: 0 0 6px var(--red); }
.health-dot.starting{ background: var(--muted); }

.health-label { font-size: 12px; font-weight: 600; }

/* ── Stat cards ─────────────────────────────────────────── */

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
}

.stat-card .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}

.stat-card .value {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.stat-card .value.green { color: var(--green); }
.stat-card .value.red   { color: var(--red); }

/* ── Two-column layout ──────────────────────────────────── */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

/* ── Cards / panels ─────────────────────────────────────── */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.panel-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-header .count {
  background: var(--surface2);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 10px;
  color: var(--text);
}

.panel-body {
  padding: 12px 16px;
}

.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 24px;
  font-size: 12px;
}

/* ── Signal cards ───────────────────────────────────────── */

.signal-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.signal-card:last-child { margin-bottom: 0; }

.signal-card.buy  { border-left: 3px solid var(--green); }
.signal-card.sell { border-left: 3px solid var(--red); }

.signal-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.signal-instrument {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge.buy    { background: rgba(0,212,106,0.15); color: var(--green); }
.badge.sell   { background: rgba(255,71,87,0.15);  color: var(--red); }
.badge.taken  { background: rgba(79,142,247,0.15); color: var(--blue); }
.badge.blocked{ background: rgba(255,165,2,0.15);  color: var(--orange); }
.badge.pending{ background: rgba(107,113,138,0.2); color: var(--muted); }
.badge.signal { background: rgba(79,142,247,0.15); color: var(--blue); }
.badge.approaching { background: rgba(255,165,2,0.15); color: var(--orange); }
.badge.watch  { background: rgba(107,113,138,0.2); color: var(--muted); }
.badge.neutral{ background: rgba(107,113,138,0.1); color: var(--muted); }

/* Signal relevance badges */
.badge.rel-live    { background: rgba(0,212,106,0.2);   color: var(--green); }
.badge.rel-near    { background: rgba(255,165,2,0.2);   color: var(--orange); }
.badge.rel-hover   { background: rgba(255,165,2,0.12);  color: #c8860a; }
.badge.rel-drifted { background: rgba(107,113,138,0.15);color: var(--muted); }
.badge.rel-watch   { background: rgba(107,113,138,0.1); color: var(--muted); }
.badge.rel-dead    { background: rgba(255,71,87,0.15);  color: var(--red); }

.signal-levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.level-item .level-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
}

.level-item .level-value {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.signal-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--muted);
}

.signal-meta span { white-space: nowrap; }

/* ── Pair heat table ────────────────────────────────────── */

.instrument-name { font-weight: 700; color: #fff; font-size: 13px; }
.asset-type-tag  { font-size: 10px; color: var(--muted); margin-left: 4px; }

/* ── Trade log table ─────────────────────────────────────── */

.trade-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.trade-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.trade-table td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(37,40,64,0.5);
}

.trade-table tr:last-child td { border-bottom: none; }
.trade-table tr:hover td { background: rgba(255,255,255,0.02); }

.pips-pos { color: var(--green); font-weight: 600; }
.pips-neg { color: var(--red);   font-weight: 600; }
.r-pos    { color: var(--green); }
.r-neg    { color: var(--red); }

.outcome-tp { color: var(--green); font-weight: 700; }
.outcome-sl { color: var(--red);   font-weight: 700; }
.outcome-to { color: var(--orange);font-weight: 700; }

/* ── Approaching setups ──────────────────────────────────── */

.setup-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(37,40,64,0.5);
}

.setup-item:last-child { border-bottom: none; }

.setup-left  { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; }
.setup-instr { font-weight: 700; color: #fff; font-size: 13px; }

.setup-mid   { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.setup-stat  { display: flex; flex-direction: column; align-items: center; }
.setup-stat-label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; }
.setup-stat-val   { font-size: 12px; font-weight: 700; color: #fff; line-height: 1.2; }

.setup-right { text-align: right; flex: 0 0 auto; }
.setup-dist  { font-size: 12px; color: var(--orange); font-weight: 700; }
.setup-fib   { font-size: 11px; color: var(--muted); }

/* ── Chart container ─────────────────────────────────────── */

.chart-container {
  position: relative;
  height: 200px;
  padding: 12px 16px 16px;
}

/* ── Login page ─────────────────────────────────────────── */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 36px 40px;
  width: 340px;
}

.login-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.login-sub {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 28px;
}

.form-group { margin-bottom: 16px; }

.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}

.form-group input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}

.form-group input:focus { border-color: var(--blue); }

.btn-primary {
  width: 100%;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 11px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
}

.btn-primary:hover { opacity: 0.9; }

.error-msg {
  background: rgba(255,71,87,0.1);
  border: 1px solid rgba(255,71,87,0.3);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--red);
  margin-bottom: 16px;
}

/* ── Account toggle ─────────────────────────────────────── */

.account-toggle { display: flex; gap: 4px; }

.toggle-btn {
  background: transparent;
  border: 1px solid rgba(107,113,138,0.3);
  color: var(--muted);
  padding: 3px 12px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}

.toggle-btn:hover  { border-color: var(--blue); color: var(--blue); }
.toggle-btn.active { background: rgba(79,142,247,0.15); border-color: var(--blue); color: var(--blue); }

/* ── Currency grid heatmap ───────────────────────────────── */

.currency-grid-wrap {
  overflow-x: auto;
  padding: 0 1.25rem 1.25rem;
}

.currency-grid {
  border-collapse: collapse;
  font-size: 11px;
  width: 100%;
  table-layout: fixed;
}

.currency-grid .grid-hdr {
  padding: 4px 2px;
  text-align: center;
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  background: var(--surface);
  border: 1px solid var(--border);
  line-height: 1.2;
}

.currency-grid td {
  border: 1px solid var(--border);
  text-align: center;
  padding: 4px 2px;
  vertical-align: middle;
  min-width: 52px;
  cursor: default;
}

.grid-diag {
  background: var(--surface);
  color: var(--border);
}

.grid-empty { background: var(--surface2); color: var(--muted); }

/* Bullish cells */
.grid-bull-strong { background: rgba(0, 212, 106, 0.22); }
.grid-bull        { background: rgba(0, 212, 106, 0.10); }

/* Bearish cells */
.grid-bear-strong { background: rgba(255, 71, 87, 0.22); }
.grid-bear        { background: rgba(255, 71, 87, 0.10); }

/* Neutral */
.grid-neutral { background: var(--surface2); }

/* Non-conventional direction — muted */
.grid-muted { opacity: 0.40; }

/* Cell content */
.grid-cell { line-height: 1; }

.grid-arrows {
  display: block;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 1px;
}

.grid-arr4h { color: var(--blue); }
.grid-arr1h { color: var(--muted); }

.grid-rsi-val {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: #e0e4f0;
}

.grid-bull-strong .grid-rsi-val { color: var(--green); }
.grid-bear-strong .grid-rsi-val { color: var(--red); }
.grid-bull .grid-rsi-val        { color: #80eab8; }
.grid-bear .grid-rsi-val        { color: #ff8a94; }
.grid-neutral .grid-rsi-val     { color: var(--muted); }

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1100px) {
  .three-col { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .stat-row  { grid-template-columns: 1fr 1fr; }
  .two-col   { grid-template-columns: 1fr; }
  .three-col { grid-template-columns: 1fr; }
}