/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Design tokens ── */
:root {
  --bg:        #080D14;
  --card:      rgba(17,24,39,0.82);
  --border:    #1E2D45;
  --sidebar:   #0D1117;
  --blue:      #3B82F6;
  --green:     #10B981;
  --red:       #EF4444;
  --orange:    #F59E0B;
  --purple:    #8B5CF6;
  --indigo:    #6366F1;
  --cyan:      #06B6D4;
  --text:      #E6EBF5;
  --muted:     #94A3B8;
}

/* ── Light theme overrides ── */
[data-theme="light"] {
  --bg:      #F1F5F9;
  --card:    #FFFFFF;
  --border:  #CBD5E1;
  --sidebar: #FFFFFF;
  --text:    #0F172A;
  --muted:   #64748B;
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  /* CRITICAL LAYOUT FALLBACK — must not be Tailwind-only */
  display: flex;
  transition: background .2s, color .2s;
}
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }

/* ── Critical layout fallbacks (also defined via Tailwind utilities) ── */
.sidebar {
  width: 220px;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 40;
  overflow-y: auto;
}
.main {
  margin-left: 220px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content { flex: 1; padding: 1.5rem; }

/* Metric grid */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
}
/* Generic two-column row */
.row-2col { display: grid; gap: 1rem; }
/* Three-column row */
.row-3col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }

/* ── Glassmorphism card ── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  padding: 1.25rem;
  transition: box-shadow .2s;
  min-width: 0;
}
.card:hover {
  box-shadow: 0 0 0 1px rgba(59,130,246,.08), 0 8px 32px rgba(0,0,0,.5);
}

/* ── Glow utilities ── */
.glow-green { text-shadow: 0 0 18px rgba(16,185,129,.55), 0 0 36px rgba(16,185,129,.18); }
.glow-red   { text-shadow: 0 0 18px rgba(239,68,68,.55),  0 0 36px rgba(239,68,68,.18);  }
.glow-blue  { text-shadow: 0 0 18px rgba(59,130,246,.55), 0 0 36px rgba(59,130,246,.18); }

/* ── Icon circle ── */
.icon-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.icon-blue   { background: rgba(59,130,246,.15);  box-shadow: 0 0 12px rgba(59,130,246,.25); }
.icon-green  { background: rgba(16,185,129,.15);  box-shadow: 0 0 12px rgba(16,185,129,.25); }
.icon-cyan   { background: rgba(6,182,212,.15);   box-shadow: 0 0 12px rgba(6,182,212,.25);  }
.icon-purple { background: rgba(139,92,246,.15);  box-shadow: 0 0 12px rgba(139,92,246,.25); }
.icon-orange { background: rgba(245,158,11,.15);  box-shadow: 0 0 12px rgba(245,158,11,.25); }
.icon-indigo { background: rgba(99,102,241,.15);  box-shadow: 0 0 12px rgba(99,102,241,.25); }
.icon-red    { background: rgba(239,68,68,.15);   box-shadow: 0 0 12px rgba(239,68,68,.25);  }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  white-space: nowrap;
}
.b-enabled  { background: rgba(16,185,129,.15); color: var(--green); box-shadow: 0 0 10px rgba(16,185,129,.15); }
.b-disabled { background: rgba(100,116,139,.12); color: var(--muted); }
.b-error    { background: rgba(239,68,68,.15);   color: var(--red);   box-shadow: 0 0 10px rgba(239,68,68,.15); }
.b-notrun   { background: rgba(245,158,11,.12);  color: var(--orange); }
.b-buy      { background: rgba(16,185,129,.15);  color: var(--green); padding: 1px 6px; border-radius: 4px; }
.b-sell     { background: rgba(239,68,68,.15);   color: var(--red);   padding: 1px 6px; border-radius: 4px; }

/* Pulsing dot (for enabled badge) */
.pdot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  animation: pdot 1.5s ease-in-out infinite;
}
@keyframes pdot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.7); }
}

/* ── Skeleton shimmer ── */
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, rgba(30,45,69,.6) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 6px;
  height: 1.2em;
  width: 100%;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── Text utilities ── */
.text-muted   { color: var(--muted); }
.text-error   { color: var(--red); }
.text-green   { color: var(--green); }
.text-red     { color: var(--red); }
.text-tabular { font-variant-numeric: tabular-nums; }

/* ── Overflow protection ── */
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ── Sidebar nav ── */
.logo {
  display: flex; align-items: center; gap: 10px;
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
}
.logo-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 20px rgba(59,130,246,.35);
}
.logo-text { font-size: 15px; font-weight: 700; letter-spacing: -.3px; }
.nav { flex: 1; padding: .75rem 0; overflow-y: auto; }
.nav-section {
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  color: var(--muted); text-transform: uppercase;
  padding: .75rem 1rem .25rem;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: .5rem 1rem;
  border-left: 3px solid transparent;
  color: var(--muted);
  font-size: 13px; font-weight: 500;
  transition: color .15s, background .15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-item svg { flex-shrink: 0; }
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.04); }
.nav-item.active {
  color: var(--blue);
  border-left-color: var(--blue);
  background: linear-gradient(90deg, rgba(59,130,246,.12), transparent);
}
.sidebar-footer { padding: 1rem; border-top: 1px solid var(--border); }
.paper-card {
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.2);
  border-radius: 10px;
  padding: .75rem;
}
.paper-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.go-live {
  font-size: 12px; font-weight: 600; color: var(--blue);
  display: block; margin-top: 4px;
}
.logout-btn {
  width: 100%; margin-top: .5rem;
  border: none; background: none;
  border-radius: 8px; text-align: left;
  color: var(--muted);
}
.logout-btn:hover { color: var(--red); background: rgba(239,68,68,.06); }

/* ── Header ── */
.page-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(8,13,20,.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: .75rem 1.5rem;
  display: flex; align-items: center; gap: 1rem;
  min-width: 0;
}
.page-header .title-wrap { min-width: 0; }
.page-header .page-title { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-header .page-sub   { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-bar {
  display: flex; align-items: center; gap: 8px;
  background: rgba(30,45,69,.5);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  width: 240px; flex-shrink: 0;
  transition: border-color .15s, background .15s;
}
.search-bar:hover {
  border-color: rgba(59,130,246,.5);
  background: rgba(30,45,69,.7);
}

/* ── Global search overlay ── */
#search-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.75); backdrop-filter: blur(8px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 80px;
}
#search-overlay.hidden { display: none; }
#search-overlay-box {
  width: 560px; max-width: calc(100vw - 2rem);
  background: linear-gradient(160deg, #131c2e 0%, #0d1117 100%);
  border: 1px solid rgba(59,130,246,.3);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
  overflow: hidden;
}
#search-overlay-box::before {
  content: ''; display: block; height: 2px;
  background: linear-gradient(90deg, #3B82F6, #8B5CF6);
}
#search-input-wrap {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(30,45,69,.8);
}
#search-input-wrap svg { flex-shrink: 0; }
#search-input {
  flex: 1; background: none; border: none; outline: none;
  font-size: 16px; font-weight: 500; color: var(--text);
  font-family: inherit;
}
#search-input::placeholder { color: var(--muted); }
#search-close-btn {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  background: rgba(30,45,69,.6); border: 1px solid var(--border);
  color: var(--muted); font-size: 11px; font-weight: 700;
  cursor: pointer; flex-shrink: 0;
}
#search-results {
  padding: .75rem;
  display: flex; flex-direction: column; gap: 2px;
  max-height: 380px; overflow-y: auto;
}
.search-result-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .75rem; border-radius: 10px;
  cursor: pointer; transition: background .1s;
  text-decoration: none; color: var(--text);
}
.search-result-item:hover, .search-result-item.focused {
  background: rgba(59,130,246,.1);
}
.search-result-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(30,45,69,.8); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.search-result-label { font-size: 13px; font-weight: 600; }
.search-result-desc  { font-size: 11px; color: var(--muted); margin-top: 1px; }
#search-hint {
  padding: .6rem 1.25rem .9rem;
  font-size: 11px; color: var(--muted);
  border-top: 1px solid rgba(30,45,69,.5);
  display: flex; gap: 1rem; align-items: center;
}
.search-kbd {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(30,45,69,.6); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px;
  font-size: 10px; font-weight: 700; color: var(--muted);
}
.search-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--muted); }
.market-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.market-chip.open   { color: var(--green); border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.08); }
.market-chip.closed { color: var(--muted); }
.market-chip.unknown { color: var(--orange); border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.08); }
.online-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px rgba(16,185,129,.5);
}
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.plan-badge {
  font-size: 10px; font-weight: 600; padding: 2px 7px;
  border-radius: 4px; background: rgba(59,130,246,.15); color: var(--blue);
  white-space: nowrap;
}
.bell-wrap { position: relative; }
.bell-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--red); color: #fff;
  font-size: 9px; font-weight: 700;
  width: 14px; height: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* ── Banner ── */
.banner {
  padding: .6rem 1.25rem;
  font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
.banner-paper { background: rgba(59,130,246,.1); border-bottom: 1px solid rgba(59,130,246,.2); color: var(--blue); }
.banner-kill  { background: rgba(239,68,68,.12);  border-bottom: 1px solid rgba(239,68,68,.25);  color: var(--red); }
.banner-warn  { background: rgba(245,158,11,.1);  border-bottom: 1px solid rgba(245,158,11,.2);  color: var(--orange); }

/* ── Table ── */
.dtable-wrap { overflow-x: auto; }
.dtable {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  min-width: 600px;
}
/* Logs page: fixed layout so Reason column doesn't blow out the table */
.dtable.dtable-fixed {
  table-layout: fixed;
}
.dtable th {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
  padding: .5rem .75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
}
.dtable td {
  padding: .6rem .75rem;
  font-size: 13px;
  border-bottom: 1px solid rgba(30,45,69,.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dtable td.col-badge {
  overflow: visible;
}
/* Reason / detail columns wrap */
.dtable td.col-reason,
.dtable td.col-detail {
  white-space: normal;
  word-break: break-word;
}
.dtable tr:last-child td { border-bottom: none; }
.dtable tr:hover td { background: rgba(59,130,246,.04); }

/* ── System bar ── */
.sys-bar {
  display: flex; flex-wrap: wrap; gap: .75rem;
  padding: .75rem 1.5rem;
  border-top: 1px solid var(--border);
  background: rgba(13,17,23,.6);
  font-size: 12px; color: var(--muted);
}
.sys-item { display: flex; align-items: center; gap: 6px; }
.sys-dot  { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px rgba(16,185,129,.5); }
.sys-dot.off { background: var(--red); box-shadow: 0 0 6px rgba(239,68,68,.4); }

/* ── Range tabs ── */
.range-tabs { display: flex; gap: 2px; }
.range-tab {
  padding: 3px 10px; font-size: 11px; font-weight: 500;
  border-radius: 6px; border: none;
  background: transparent; color: var(--muted);
  cursor: pointer; transition: background .15s, color .15s;
}
.range-tab:hover   { background: rgba(59,130,246,.1); color: var(--blue); }
.range-tab.active  { background: rgba(59,130,246,.15); color: var(--blue); }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: linear-gradient(160deg, #131c2e 0%, #0d1117 100%);
  border: 1px solid rgba(30,45,69,.9);
  border-radius: 18px;
  width: 420px; max-width: 92vw;
  box-shadow: 0 30px 70px rgba(0,0,0,.7), 0 0 0 1px rgba(59,130,246,.06);
  overflow: hidden;
  position: relative;
}
.modal-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #3B82F6, #8B5CF6);
}
.modal-title {
  font-size: 16px; font-weight: 700;
  padding: 1.4rem 1.5rem .9rem;
  border-bottom: 1px solid rgba(30,45,69,.8);
  margin: 0;
}
.modal-body {
  font-size: 13px; color: var(--muted); line-height: 1.6;
  padding: 1.1rem 1.5rem;
}
.modal-body strong { color: var(--text); }
.modal-body label {
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
  display: block; margin-bottom: 5px;
}
.modal-body .input-field { color: var(--text); }
.modal-actions {
  display: flex; gap: .75rem; justify-content: flex-end;
  padding: .9rem 1.5rem;
  border-top: 1px solid rgba(30,45,69,.8);
  background: rgba(0,0,0,.2);
}

/* ── Buttons ── */
.btn {
  padding: 7px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600; border: none;
  cursor: pointer; transition: opacity .15s, box-shadow .15s;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary  { background: var(--blue);  color: #fff; }
.btn-danger   { background: var(--red);   color: #fff; }
.btn-ghost    { background: rgba(255,255,255,.07); color: var(--text); }
.btn-sm       { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── Result summary panel ── */
.result-panel {
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: 10px; padding: .75rem 1rem;
  font-size: 12px; margin-top: .75rem;
}
.result-panel.error { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.2); }

/* ── Chart unavailable fallback ── */
.chart-unavailable {
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 80px;
  color: var(--muted); font-size: 12px;
}

/* ── Empty / error states ── */
.state-empty { text-align: center; padding: 2rem 1rem; color: var(--muted); font-size: 13px; }
.state-error { text-align: center; padding: 1rem; color: var(--red); font-size: 12px; }

/* ── Login page ── */
.login-wrap {
  min-height: 100vh; display: flex;
  align-items: center; justify-content: center;
  background: var(--bg);
}
.login-card { width: 380px; }

/* ── Form inputs ── */
.input-field {
  width: 100%;
  background: rgba(30,45,69,.5);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.input-field:focus { border-color: var(--blue); }
.input-field option { background: #0F1623; }

/* ── Broker Account Card ── */
.broker-card {
  background: rgba(22,32,52,0.9);
  border: 1px solid rgba(60,85,120,.5);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  padding: 1.1rem 1.1rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: box-shadow .2s, border-color .2s;
  position: relative;
  overflow: hidden;
}
.broker-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00C805, #3B82F6);
  opacity: .7;
}
.broker-card:hover {
  border-color: rgba(0,200,5,.2);
  box-shadow: 0 0 0 1px rgba(0,200,5,.06), 0 8px 32px rgba(0,0,0,.5);
}
.broker-card-top {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.broker-logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(0,200,5,.08);
  border: 1px solid rgba(0,200,5,.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.broker-key-chip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(30,45,69,.7);
  border: 1px solid rgba(60,85,120,.5);
  border-radius: 8px;
  padding: .5rem .75rem;
}
.broker-key-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.broker-key-val {
  font-size: 12px;
  font-family: 'Courier New', monospace;
  color: #A78BFA;
  letter-spacing: .04em;
}
.broker-card-dim {
  opacity: .72;
  filter: grayscale(.2);
}
.broker-card-dim:hover {
  opacity: .88;
  filter: grayscale(.1);
  border-color: rgba(60,85,120,.5);
  box-shadow: none;
}

/* ── Trading Mode Selector ── */
.mode-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.mode-option {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  background: rgba(30,45,69,.25);
}
.mode-option:hover { border-color: rgba(59,130,246,.3); background: rgba(59,130,246,.04); }
.mode-opt-active {
  border-color: rgba(59,130,246,.5) !important;
  background: rgba(59,130,246,.08) !important;
  box-shadow: 0 0 0 1px rgba(59,130,246,.15), 0 4px 16px rgba(59,130,246,.1);
}
.mode-opt-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mode-opt-paper { background: rgba(59,130,246,.12); color: var(--blue); border: 1px solid rgba(59,130,246,.2); }
.mode-opt-live  { background: rgba(239,68,68,.12);  color: var(--red);  border: 1px solid rgba(239,68,68,.2);  }
.mode-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mode-check.hidden { display: none; }

/* ── Modal redesign ── */
.modal-head {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 1.4rem 1.5rem 1rem;
  border-bottom: 1px solid rgba(30,45,69,.8);
}
.modal-head-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.modal-head-title { font-size: 16px; font-weight: 700; line-height: 1.2; }
.modal-head-sub   { font-size: 12px; color: var(--muted); margin-top: 2px; }
.modal-form {
  padding: 1.1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
}
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form-label {
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.form-error {
  font-size: 12px; color: var(--red);
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 6px;
  padding: .4rem .6rem;
}

/* ── Type selector (Paper / Live cards) ── */
.type-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.type-opt {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .8rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: rgba(30,45,69,.2);
}
.type-opt:hover { border-color: rgba(59,130,246,.3); background: rgba(59,130,246,.04); }
.type-opt.active {
  border-color: rgba(59,130,246,.5);
  background: rgba(59,130,246,.1);
  box-shadow: 0 0 0 1px rgba(59,130,246,.12);
}
.type-opt-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.type-paper-dot { background: var(--blue); box-shadow: 0 0 6px rgba(59,130,246,.5); }
.type-live-dot  { background: var(--red);  box-shadow: 0 0 6px rgba(239,68,68,.5); }
.type-opt-name  { font-size: 12px; font-weight: 600; line-height: 1.2; }
.type-opt-desc  { font-size: 10px; color: var(--muted); margin-top: 1px; }

/* ── Account count pill (bots page) ── */
.acct-pill {
  flex-shrink: 0;
  font-size: 10px; font-weight: 600;
  padding: 1px 7px; border-radius: 99px;
  background: rgba(139,92,246,.15);
  color: #A78BFA;
  white-space: nowrap;
}
.acct-pill.acct-pill-empty {
  background: rgba(100,116,139,.1);
  color: var(--muted);
}

/* ── Placeholder page ── */
.placeholder-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 300px; flex-direction: column; gap: .75rem;
  color: var(--muted);
}

/* ── Risk page ── */
.risk-status-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
}
.risk-stat {
  flex: 1;
  min-width: 120px;
  padding: .25rem 1.25rem .25rem 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.risk-stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.risk-stat-value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.risk-stat-sub {
  font-size: 11px;
  line-height: 1.4;
}
.risk-stat-divider {
  width: 1px;
  background: var(--border);
  margin: 0 1.25rem;
  align-self: stretch;
  flex-shrink: 0;
}
.risk-pl-bar-wrap {
  height: 4px;
  background: rgba(100,116,139,.2);
  border-radius: 99px;
  overflow: hidden;
  margin-top: .35rem;
  width: 100%;
  max-width: 100px;
}
.risk-pl-bar {
  height: 100%;
  border-radius: 99px;
  transition: width .4s ease, background .3s;
}
.risk-warning-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 12px;
  padding: .45rem .75rem;
  border-radius: 8px;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.2);
  color: #FCD34D;
}
.risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.risk-item {
  background: rgba(30,45,69,.3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.risk-item-header {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.risk-input-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.risk-input {
  width: 90px !important;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.risk-unit {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Broker Picker (Add Account step 1) ── */
.broker-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .65rem;
}
.broker-pick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: .875rem .5rem .75rem;
  border-radius: 10px;
  border: 1px solid rgba(60,85,120,.45);
  background: rgba(22,32,52,.8);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.broker-pick-card:hover:not(.broker-pick-soon) {
  border-color: rgba(59,130,246,.5);
  background: rgba(59,130,246,.07);
  transform: translateY(-1px);
}
.broker-pick-card:active:not(.broker-pick-soon) {
  transform: translateY(0);
}
.broker-pick-soon {
  opacity: .4;
  cursor: not-allowed;
}
.broker-pick-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.5px;
}
.broker-pick-name {
  font-size: 12px;
  font-weight: 600;
  color: #E6EBF5;
  margin-top: 2px;
}

/* ── Account modal band (coloured header) ── */
.acct-modal-band {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #1E2D45;
  transition: background .25s, border-color .25s;
}
.acct-band-paper {
  background: linear-gradient(135deg, rgba(59,130,246,.18) 0%, rgba(30,45,69,.55) 100%);
  border-bottom-color: rgba(59,130,246,.25);
}
.acct-band-live {
  background: linear-gradient(135deg, rgba(239,68,68,.18) 0%, rgba(30,45,69,.55) 100%);
  border-bottom-color: rgba(239,68,68,.25);
}
.acct-band-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,.07);
  color: #E6EBF5;
}
.acct-band-title { font-size: 15px; font-weight: 700; color: #E6EBF5; }
.acct-band-sub   { font-size: 12px; color: #94A3B8; margin-top: 2px; }

/* Type badge in band */
.acct-type-badge {
  font-size: 11px; font-weight: 700;
  padding: .2rem .65rem;
  border-radius: 20px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.acct-badge-paper { background: rgba(59,130,246,.2);  color: #60A5FA; border: 1px solid rgba(59,130,246,.35); }
.acct-badge-live  { background: rgba(239,68,68,.18);  color: #F87171; border: 1px solid rgba(239,68,68,.35); }

/* ── Account type card grid ── */
.acct-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
.acct-type-card {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem .875rem;
  border-radius: 10px;
  border: 1.5px solid #1E2D45;
  background: rgba(17,24,39,.5);
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
  user-select: none;
}
.acct-type-card:hover { border-color: rgba(100,116,139,.4); background: rgba(30,41,59,.7); }
.acct-type-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,.05);
  color: #94A3B8;
  transition: background .18s, color .18s;
}
.acct-type-name { font-size: 13px; font-weight: 600; color: #CBD5E1; transition: color .18s; }
.acct-type-desc { font-size: 11px; color: #64748B; margin-top: 2px; }
.acct-type-check {
  margin-left: auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid #1E2D45;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  flex-shrink: 0;
  transition: background .18s, border-color .18s, color .18s;
}
.acct-type-paper.active {
  border-color: rgba(59,130,246,.55);
  background: rgba(59,130,246,.08);
  box-shadow: 0 0 0 1px rgba(59,130,246,.18);
}
.acct-type-paper.active .acct-type-icon { background: rgba(59,130,246,.15); color: #60A5FA; }
.acct-type-paper.active .acct-type-name { color: #93C5FD; }
.acct-type-paper.active .acct-type-check { background: #3B82F6; border-color: #3B82F6; color: #fff; }
.acct-type-live.active {
  border-color: rgba(239,68,68,.5);
  background: rgba(239,68,68,.07);
  box-shadow: 0 0 0 1px rgba(239,68,68,.18);
}
.acct-type-live.active .acct-type-icon { background: rgba(239,68,68,.13); color: #F87171; }
.acct-type-live.active .acct-type-name { color: #FCA5A5; }
.acct-type-live.active .acct-type-check { background: #EF4444; border-color: #EF4444; color: #fff; }

/* ── Credentials banner ── */
.acct-creds-section {
  border-top: 1px solid #1E2D45;
  margin-top: .875rem;
  padding-top: .875rem;
}
.acct-creds-banner {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .6rem .75rem;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  transition: background .25s, border-color .25s, color .25s;
}
.acct-creds-banner svg { flex-shrink: 0; margin-top: 1px; }
.acct-creds-banner-paper { background: rgba(59,130,246,.1);  border: 1px solid rgba(59,130,246,.25); color: #93C5FD; }
.acct-creds-banner-live  { background: rgba(239,68,68,.09);  border: 1px solid rgba(239,68,68,.25);  color: #FCA5A5; }

/* ── Broker Picker Tabs ── */
.bp-tabs {
  display: flex;
  gap: .35rem;
  background: rgba(15,23,42,.6);
  border: 1px solid rgba(60,85,120,.4);
  border-radius: 10px;
  padding: .3rem;
  margin-bottom: .875rem;
}
.bp-tab {
  flex: 1;
  padding: .4rem .5rem;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: #94A3B8;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
  text-align: center;
}
.bp-tab:hover:not(.bp-tab-active) {
  background: rgba(59,130,246,.08);
  color: #CBD5E1;
}
.bp-tab-active {
  background: rgba(59,130,246,.2);
  color: #60A5FA;
  box-shadow: 0 0 0 1px rgba(59,130,246,.3);
}
.bp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
}

/* ── Toggle switch ── */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  display: flex;
  align-items: center;
  width: 42px;
  height: 24px;
  border-radius: 99px;
  background: rgba(100,116,139,.25);
  border: 1px solid rgba(100,116,139,.3);
  transition: background .2s, border-color .2s;
  padding: 2px;
}
.toggle-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #64748B;
  transition: transform .2s, background .2s;
  flex-shrink: 0;
}
.toggle-switch input:checked + .toggle-track {
  background: rgba(59,130,246,.35);
  border-color: rgba(59,130,246,.5);
}
.toggle-switch input:checked + .toggle-track .toggle-thumb {
  transform: translateX(18px);
  background: #3B82F6;
  box-shadow: 0 0 8px rgba(59,130,246,.5);
}
.toggle-sm .toggle-track { width: 34px; height: 20px; }
.toggle-sm .toggle-thumb { width: 14px; height: 14px; }
.toggle-sm input:checked + .toggle-track .toggle-thumb { transform: translateX(14px); }

/* ── Settings page ── */
.settings-section-head {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.settings-fields {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.settings-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.field-group { display: flex; flex-direction: column; gap: .4rem; }
.field-label { font-size: 12px; font-weight: 500; color: var(--muted); }
.field-hint { font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: .25rem; }
.field-msg {
  font-size: 12px;
  margin-top: .4rem;
  padding: .4rem .65rem;
  border-radius: 7px;
}
.field-msg.ok  { background: rgba(16,185,129,.12); color: #34D399; border: 1px solid rgba(16,185,129,.25); }
.field-msg.err { background: rgba(239,68,68,.1);  color: #F87171; border: 1px solid rgba(239,68,68,.2); }
.event-trigger-list { display: flex; flex-direction: column; }
.event-trigger-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .875rem 0;
  border-bottom: 1px solid rgba(30,45,69,.8);
}

/* ── Blacklist chip ── */
.blacklist-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .55rem .25rem .65rem;
  border-radius: 99px;
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.25);
  color: #F87171;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
.blacklist-chip button {
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  color: #F87171;
  opacity: .7;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.blacklist-chip button:hover { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Software Updates card ── */
[data-theme="light"] #update-release-box {
  background: #F8FAFC;
}

/* ── Manual order result ── */
.mo-result { font-size:12px; transition:color .15s; }
.mo-result.ok  { color: var(--green); }
.mo-result.err { color: var(--red); }

/* ═══════════════════════════════════════════
   Order Ticket (mot-*) — clean card style
   ═══════════════════════════════════════════ */
.mot-card {
  padding: 1.1rem !important;
  border-radius: 14px !important;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* Header row */
.mot-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: -.25rem;
}
.mot-header-title {
  font-size: 14px; font-weight: 700; color: var(--text);
}
.mot-header-sub {
  font-size: 11px; color: var(--muted);
}
.mot-header-sub select {
  background: transparent; border: none; color: var(--blue);
  font-size: 11px; font-weight: 600; font-family: inherit; cursor: pointer;
  outline: none;
}

/* Account selector — shared across all pages */
.acct-sel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .35rem .65rem;
  font-size: 12px; font-weight: 500;
  color: var(--text);
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color .15s;
}
.acct-sel:focus { border-color: var(--blue); }
.acct-sel option { background: var(--card); color: var(--text); }

/* Account selector */
#mo-account-wrap {
  padding: 0 !important;
}
#mo-account-wrap .acct-sel {
  width: 100%;
}

/* Buy / Sell tabs — pill style */
.mot-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .4rem;
  border-bottom: none;
}
.mot-tab {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .55rem .5rem;
  font-size: 13px; font-weight: 700;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
  color: var(--muted);
}
.mot-tab-sell { border-left: 1px solid var(--border); }
.mot-tab:hover { background: rgba(59,130,246,.04); color: var(--text); }
.mot-tab-buy.mot-tab-active  { color: var(--green); background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.35); }
.mot-tab-sell.mot-tab-active { color: var(--red);   background: rgba(239,68,68,.1);  border-color: rgba(239,68,68,.35);  }

/* Order type underline tabs (Market / Limit) */
.mot-otype-bar {
  display: flex; border-bottom: 1px solid var(--border);
  margin-bottom: .75rem;
}
.mot-otype-tab {
  padding: .38rem .85rem; font-size: 12px; font-weight: 500;
  color: var(--muted); cursor: pointer; background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: inherit; transition: color .12s;
}
.mot-otype-tab:hover { color: var(--text); }
.mot-otype-active    { color: var(--blue) !important; border-color: var(--blue) !important; font-weight: 600; }
.cmo-otype-active   { color: #F0B90B !important; border-color: #F0B90B !important; font-weight: 600; }

/* Stock / Crypto broker tab toggle (orders card + manual order card) */
.ord-broker-tab {
  display: flex; align-items: center; gap: .3rem;
  padding: .32rem .75rem; font-size: 11px; font-weight: 600;
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); font-family: inherit; transition: color .12s, background .12s;
}
.ord-broker-tab:hover { color: var(--text); background: rgba(255,255,255,.04); }
.ord-broker-active    { color: var(--text) !important; background: var(--card2) !important; }
[data-theme="light"] .ord-broker-tab:hover    { background: rgba(0,0,0,.04); }
[data-theme="light"] .ord-broker-active       { background: var(--card2) !important; }

/* Symbol row */
.mot-sym-row {
  padding: 0;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.mot-sym-wrap {
  position: relative;
}
.mot-sym-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--muted);
}
.mot-sym-input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text); font-family: inherit;
  font-size: 14px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
  padding: 8px 10px 8px 30px;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.mot-sym-input::placeholder { color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 13px; }
.mot-sym-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}
.mot-quote {
  font-size: 12px; font-weight: 600; padding: .4rem .65rem;
  border-radius: 7px; min-height: 0;
  background: #DBEAFE; color: #1D4ED8; border: 1px solid #93C5FD;
  display: none;
}
.mot-quote:not(:empty) { display: block; }

/* Divider */
.mot-divider { display: none; }

/* Form sections */
.mot-section {
  padding: 0;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.mot-label {
  font-size: 12px; font-weight: 600; text-transform: none;
  letter-spacing: 0; color: var(--text);
}

/* In/USD toggle */
.mot-toggle {
  display: flex;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.mot-toggle-btn {
  flex: 1; padding: .4rem .5rem; font-size: 12px; font-weight: 600;
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; font-family: inherit;
  transition: background .12s, color .12s;
}
.mot-toggle-btn + .mot-toggle-btn { border-left: 1px solid var(--border); }
.mot-toggle-btn.mot-toggle-active { background: rgba(59,130,246,.12); color: var(--blue); }
.mot-toggle-btn:hover:not(.mot-toggle-active) { background: rgba(59,130,246,.04); color: var(--text); }

/* Qty / price inputs */
.mot-qty-wrap {
  position: relative; display: flex; align-items: center;
}
.mot-qty-prefix {
  position: absolute; left: 11px;
  font-size: 14px; font-weight: 600; color: var(--muted); pointer-events: none;
}
.mot-qty-input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text); font-family: inherit;
  font-size: 16px; font-weight: 700;
  padding: 9px 11px;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  -moz-appearance: textfield;
}
.mot-qty-input::-webkit-outer-spin-button,
.mot-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mot-qty-input::placeholder { color: var(--muted); font-size: 14px; font-weight: 400; }
.mot-qty-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}
.mot-qty-with-prefix { padding-left: 26px; }

/* Estimated total */
.mot-est-total {
  font-size: 11px; font-weight: 600; color: var(--muted);
}

/* Submit button */
.mot-submit {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  width: 100%; margin: 0;
  padding: .75rem 1rem; border-radius: 9px;
  font-size: 13px; font-weight: 700;
  color: #fff; border: none; cursor: pointer; font-family: inherit;
  transition: opacity .15s, transform .1s;
}
.mot-submit:hover  { opacity: .9; }
.mot-submit:active { transform: scale(.98); }
.mot-submit-buy  { background: var(--green); }
.mot-submit-sell { background: var(--red); }
.mot-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ── Mode card — live trading state ── */
.live-card {
  background: rgba(16,185,129,.08);
  border-color: rgba(16,185,129,.25);
}
.live-card .paper-label { color: var(--green); }
.live-card .go-live { color: var(--green); }

/* ══════════════════════════════════════════════
   RESPONSIVE — Mobile & Tablet
   Breakpoints: 1024px (tablet), 768px (mobile), 480px (phone)
══════════════════════════════════════════════ */

/* Hamburger button — hidden on desktop */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  flex-shrink: 0;
  cursor: pointer;
}

/* Sidebar backdrop overlay */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 39;
}
.sidebar-backdrop.visible { display: block; }

@media (max-width: 768px) {
  /* Show hamburger */
  .hamburger-btn { display: flex; }

  /* Sidebar: hide off-screen, slide in on mobile-open */
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 50;
  }
  .sidebar.mobile-open { transform: translateX(0); }

  /* Main content fills full width */
  .main { margin-left: 0 !important; }

  /* Page header: tighten spacing */
  .page-header {
    padding: .6rem 1rem;
    gap: .5rem;
    flex-wrap: wrap;
  }

  /* Hide secondary header items on small screens */
  .search-bar { display: none; }
  .bell-wrap  { display: none; }

  /* Page title shrink */
  .page-title { font-size: 16px; }
  .page-sub   { font-size: 11px; }

  /* Content padding */
  .content { padding: .75rem; gap: .75rem; }

  /* Cards */
  .card { padding: .85rem; }

  /* Row grids collapse to single column */
  .row-2col { grid-template-columns: 1fr !important; }

  /* Account selector: compact */
  .acct-selector-label { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acct-selector-sub   { display: none; }
}

@media (max-width: 480px) {
  .page-header { padding: .5rem .75rem; }
  .content     { padding: .5rem; }
  .card        { padding: .65rem; border-radius: 10px; }
}

/* ── Responsive tables ── */
@media (max-width: 768px) {
  .dtable-wrap,
  .pos-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dtable th,
  .dtable td,
  .pos-table th,
  .pos-table td {
    white-space: nowrap;
    font-size: 12px;
    padding: .5rem .6rem;
  }

  .col-hide-mobile { display: none !important; }
}

@media (max-width: 480px) {
  .dtable th,
  .dtable td { font-size: 11px; padding: .4rem .5rem; }
}

/* ── Positions page two-column → single column ── */
@media (max-width: 1024px) {
  .pos-layout {
    grid-template-columns: 1fr !important;
  }
  .pos-ticket-col {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .mo-ticket {
    width: 100% !important;
    min-width: unset !important;
  }
}

@media (max-width: 768px) {
  /* Summary strip: wrap to 2×2 grid */
  .pos-summary-strip {
    grid-template-columns: 1fr 1fr !important;
  }
  .pos-stat-div { display: none; }

  /* Filter tabs: smaller */
  .pos-filter-tab { font-size: 11px; padding: .3rem .6rem; }
}

/* ── Dashboard responsive ── */
@media (max-width: 768px) {
  canvas { max-height: 220px; }
  .scanner-col-hide { display: none !important; }
}

/* ── Forms & Modals responsive ── */
@media (max-width: 768px) {
  .modal-box {
    width: calc(100vw - 2rem) !important;
    max-width: 100% !important;
    margin: 1rem;
    padding: 1.25rem;
  }

  .accounts-grid {
    grid-template-columns: 1fr !important;
  }

  .settings-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .5rem !important;
  }
  .settings-row .settings-control { width: 100% !important; }

  .bots-layout {
    grid-template-columns: 1fr !important;
  }
  .bots-detail-panel {
    position: static !important;
  }
}

/* ── Light theme element overrides ── */
[data-theme="light"] .page-header {
  background: rgba(241,245,249,.92);
}
[data-theme="light"] .card {
  backdrop-filter: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
[data-theme="light"] .card:hover {
  box-shadow: 0 0 0 1px rgba(59,130,246,.15), 0 4px 16px rgba(0,0,0,.1);
}
[data-theme="light"] .search-bar {
  background: rgba(203,213,225,.4);
}
[data-theme="light"] .search-bar:hover {
  background: rgba(203,213,225,.7);
}
/* #search-overlay-box light override — full rule below in search overlay section */
[data-theme="light"] #search-input { color: var(--text); }
[data-theme="light"] .modal-overlay { background: rgba(15,23,42,.5); }
[data-theme="light"] .modal-box {
  background: #ffffff;
  border-color: var(--border);
}
[data-theme="light"] .input,
[data-theme="light"] .cfg-input,
[data-theme="light"] select {
  background: #f8fafc;
  color: var(--text);
  border-color: var(--border);
}
[data-theme="light"] .dtable thead th {
  background: rgba(241,245,249,.9);
  color: var(--muted);
}
[data-theme="light"] .dtable tbody tr:hover { background: rgba(59,130,246,.04); }
[data-theme="light"] .banner-paper {
  background: #DBEAFE;
  border-bottom-color: #93C5FD;
  color: #1D4ED8;
}
[data-theme="light"] .banner-kill {
  background: #FEE2E2;
  border-bottom-color: #FCA5A5;
  color: #B91C1C;
}
[data-theme="light"] .banner-warn {
  background: #FEF3C7;
  border-bottom-color: #FCD34D;
  color: #92400E;
}
[data-theme="light"] .sys-bar {
  background: #F8FAFC;
  border-top-color: var(--border);
  color: var(--muted);
}
[data-theme="light"] .skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
}
[data-theme="light"] .paper-card {
  background: rgba(59,130,246,.06);
}
[data-theme="light"] .theme-toggle-btn { color: var(--muted); }
[data-theme="light"] .theme-toggle-btn:hover { color: var(--text); background: rgba(0,0,0,.05); }

/* sidebar */
[data-theme="light"] .sidebar { box-shadow: 1px 0 6px rgba(0,0,0,.06); }

/* nav */
[data-theme="light"] .nav-item:hover { color: var(--text); background: rgba(59,130,246,.04); }
[data-theme="light"] .nav-item.active { background: rgba(59,130,246,.07); }

/* table row borders */
[data-theme="light"] .dtable td { border-bottom-color: #E2E8F0; }

/* modal interior */
[data-theme="light"] .modal-box { background: #FFFFFF; box-shadow: 0 20px 60px rgba(0,0,0,.15), 0 0 0 1px rgba(203,213,225,.5); }
[data-theme="light"] .modal-title { border-bottom-color: var(--border); color: var(--text); }
[data-theme="light"] .modal-body  { color: var(--muted); }
[data-theme="light"] .modal-actions { background: #F8FAFC; border-top-color: var(--border); }

/* buttons */
[data-theme="light"] .btn-ghost { background: #F1F5F9; color: var(--text); border: 1px solid var(--border); }
[data-theme="light"] .btn-ghost:hover { background: #E2E8F0; }

/* form inputs used in settings/login */
[data-theme="light"] .input-field { background: #F8FAFC; color: var(--text); border-color: var(--border); }
[data-theme="light"] .input-field option { background: #FFFFFF; }

/* broker cards */
[data-theme="light"] .broker-card {
  background: #FFFFFF;
  border-color: var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
[data-theme="light"] .broker-card:hover {
  border-color: rgba(59,130,246,.3);
  box-shadow: 0 0 0 1px rgba(59,130,246,.1), 0 4px 16px rgba(0,0,0,.08);
}
[data-theme="light"] .broker-key-chip { background: #F1F5F9; border-color: var(--border); }
[data-theme="light"] .broker-key-val  { color: #6D28D9; }

/* search overlay */
[data-theme="light"] #search-overlay { background: rgba(15,23,42,.4); }
[data-theme="light"] #search-overlay-box {
  background: #FFFFFF;
  border-color: var(--border);
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
[data-theme="light"] #search-input-wrap { border-bottom-color: var(--border); }
[data-theme="light"] #search-close-btn { background: #F1F5F9; border-color: var(--border); color: var(--muted); }
[data-theme="light"] #search-close-btn:hover { background: #E2E8F0; color: var(--text); }
[data-theme="light"] .search-result-icon { background: #F1F5F9; border-color: var(--border); }
[data-theme="light"] .search-result-item:hover,
[data-theme="light"] .search-result-item.focused { background: rgba(59,130,246,.06); }
[data-theme="light"] .search-kbd { background: #F1F5F9; border-color: var(--border); color: var(--muted); }
[data-theme="light"] #search-hint { border-top-color: var(--border); color: var(--muted); }

/* strategy health detail row */
[data-theme="light"] .sh-detail-cell { background: #F8FAFC; }
[data-theme="light"] .sh-expand-btn { background: #F1F5F9; border-color: var(--border); }
[data-theme="light"] .sh-expand-btn:hover { background: rgba(59,130,246,.1); }
[data-theme="light"] .sh-expand-btn.expanded { background: rgba(59,130,246,.1); }
[data-theme="light"] .bench-star-btn { background: #F1F5F9; border-color: var(--border); }

/* glow — tone down on light backgrounds */
[data-theme="light"] .glow-green { text-shadow: none; }
[data-theme="light"] .glow-red   { text-shadow: none; }
[data-theme="light"] .glow-blue  { text-shadow: none; }

/* health pills — ensure dark text on light bg */
[data-theme="light"] .health-green  { background: #D1FAE5; color: #065F46; border-color: #6EE7B7; }
[data-theme="light"] .health-yellow { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
[data-theme="light"] .health-red    { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }

/* badges — ensure readable on light */
[data-theme="light"] .b-enabled  { background: #D1FAE5; color: #065F46; box-shadow: none; }
[data-theme="light"] .b-disabled { background: #F1F5F9; color: #475569; }
[data-theme="light"] .b-error    { background: #FEE2E2; color: #B91C1C; box-shadow: none; }
[data-theme="light"] .b-notrun   { background: #FEF3C7; color: #92400E; }
[data-theme="light"] .b-buy      { background: #D1FAE5; color: #065F46; }
[data-theme="light"] .b-sell     { background: #FEE2E2; color: #B91C1C; }

/* sidebar logo shadow */
[data-theme="light"] .logo-mark { box-shadow: 0 0 12px rgba(59,130,246,.2); background: rgba(59,130,246,.1); }

/* paper-card text contrast */
[data-theme="light"] .paper-card { border-color: rgba(59,130,246,.25); }
[data-theme="light"] .paper-card p:last-of-type { color: #0F172A; }

/* watchlist suggestions dropdown */
.wl-suggestions-drop { background: var(--card); }
[data-theme="light"] .wl-suggestions-drop { background: #FFFFFF; box-shadow: 0 8px 24px rgba(0,0,0,.1); }

/* order ticket */
[data-theme="light"] .mot-sym-input { background: #F8FAFC; border-color: var(--border); color: var(--text); }
[data-theme="light"] .mot-qty-input { background: #F8FAFC; border-color: var(--border); color: var(--text); }
[data-theme="light"] .mot-toggle    { background: #F1F5F9; border-color: var(--border); }
[data-theme="light"] .mot-toggle-btn + .mot-toggle-btn { border-left-color: var(--border); }
[data-theme="light"] .mot-tab { background: #F8FAFC; border-color: var(--border); color: var(--muted); }
[data-theme="light"] .mot-tab:hover { background: rgba(59,130,246,.06); color: var(--text); }
[data-theme="light"] .mot-tab-buy.mot-tab-active  { color: var(--green); background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.4); }
[data-theme="light"] .mot-tab-sell.mot-tab-active { color: var(--red);   background: rgba(239,68,68,.08);  border-color: rgba(239,68,68,.4);  }
[data-theme="light"] .acct-sel { background: #F8FAFC; border-color: var(--border); color: var(--text); }
[data-theme="light"] .acct-sel option { background: #FFFFFF; }
[data-theme="light"] .cmo-otype-active { color: #9A6E00 !important; border-color: #9A6E00 !important; }

/* broker picker (step 1) */
[data-theme="light"] .modal-head { border-bottom-color: var(--border); }
[data-theme="light"] .bp-tabs { background: #F1F5F9; border-color: var(--border); }
[data-theme="light"] .bp-tab { color: var(--muted); }
[data-theme="light"] .bp-tab:hover:not(.bp-tab-active) { background: rgba(59,130,246,.06); color: var(--text); }
[data-theme="light"] .bp-tab-active { background: #FFFFFF; color: var(--blue); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
[data-theme="light"] .broker-pick-card {
  background: #F8FAFC;
  border-color: var(--border);
}
[data-theme="light"] .broker-pick-card:hover:not(.broker-pick-soon) {
  background: rgba(59,130,246,.05);
  border-color: rgba(59,130,246,.4);
}
[data-theme="light"] .broker-pick-name { color: var(--text); }

/* account modal band (coloured header) */
[data-theme="light"] .acct-modal-band { border-bottom-color: var(--border); }
[data-theme="light"] .acct-band-paper {
  background: linear-gradient(135deg, rgba(59,130,246,.1) 0%, rgba(241,245,249,1) 100%);
  border-bottom-color: rgba(59,130,246,.2);
}
[data-theme="light"] .acct-band-live {
  background: linear-gradient(135deg, rgba(239,68,68,.1) 0%, rgba(241,245,249,1) 100%);
  border-bottom-color: rgba(239,68,68,.2);
}
[data-theme="light"] .acct-band-icon { background: rgba(255,255,255,.8); border: 1px solid var(--border); color: var(--text); }
[data-theme="light"] .acct-band-title { color: var(--text); }
[data-theme="light"] .acct-band-sub   { color: var(--muted); }
[data-theme="light"] .acct-badge-paper { background: #DBEAFE; color: #1D4ED8; border-color: #93C5FD; }
[data-theme="light"] .acct-badge-live  { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }

/* account type cards */
[data-theme="light"] .acct-type-card {
  background: #F8FAFC;
  border-color: var(--border);
}
[data-theme="light"] .acct-type-card:hover { background: #F1F5F9; border-color: #94A3B8; }
[data-theme="light"] .acct-type-icon { background: #F1F5F9; color: var(--muted); border: 1px solid var(--border); }
[data-theme="light"] .acct-type-name { color: var(--text); }
[data-theme="light"] .acct-type-check { border-color: var(--border); background: #F1F5F9; }
[data-theme="light"] .acct-type-paper.active {
  border-color: rgba(59,130,246,.5);
  background: #EFF6FF;
  box-shadow: 0 0 0 1px rgba(59,130,246,.15);
}
[data-theme="light"] .acct-type-paper.active .acct-type-icon { background: #DBEAFE; color: #2563EB; border-color: #93C5FD; }
[data-theme="light"] .acct-type-paper.active .acct-type-name { color: #1D4ED8; }
[data-theme="light"] .acct-type-paper.active .acct-type-check { background: #3B82F6; border-color: #3B82F6; color: #fff; }
[data-theme="light"] .acct-type-live.active {
  border-color: rgba(239,68,68,.45);
  background: #FFF5F5;
  box-shadow: 0 0 0 1px rgba(239,68,68,.15);
}
[data-theme="light"] .acct-type-live.active .acct-type-icon { background: #FEE2E2; color: #DC2626; border-color: #FCA5A5; }
[data-theme="light"] .acct-type-live.active .acct-type-name { color: #B91C1C; }
[data-theme="light"] .acct-type-live.active .acct-type-check { background: #EF4444; border-color: #EF4444; color: #fff; }

/* credentials section */
[data-theme="light"] .acct-creds-section { border-top-color: var(--border); }
[data-theme="light"] .acct-creds-banner-paper { background: #DBEAFE; border-color: #93C5FD; color: #1D4ED8; }
[data-theme="light"] .acct-creds-banner-live  { background: #FEE2E2; border-color: #FCA5A5; color: #B91C1C; }

/* modal actions footer */
[data-theme="light"] .modal-actions { background: #F8FAFC; border-top-color: var(--border); }

/* ── Time inputs — color-scheme follows theme ── */
input[type="time"] { color-scheme: dark; }
[data-theme="light"] input[type="time"] { color-scheme: light; }

/* ── Theme toggle button ── */
.theme-toggle-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: .45rem 1rem;
  background: none; border: none;
  color: var(--muted); font-size: 12px; font-weight: 500;
  font-family: inherit; cursor: pointer; border-radius: 8px;
  transition: color .15s, background .15s;
  margin-top: .25rem;
}
.theme-toggle-btn:hover { color: var(--text); background: rgba(255,255,255,.04); }

/* ── Strategy Health card ── */
.sh-title-row { display:flex; align-items:center; gap:.6rem; }
.sh-title { font-size:14px; font-weight:600; }
.sh-subtitle { font-size:12px; color:var(--muted); margin-top:1px; }
.sh-badge-count {
  font-size:10px; font-weight:700; padding:1px 7px; border-radius:99px;
  background:rgba(239,68,68,.15); color:#F87171;
  border:1px solid rgba(239,68,68,.25); white-space:nowrap;
}
.sh-badge-count.sh-badge-ok {
  background:rgba(16,185,129,.12); color:#34D399;
  border-color:rgba(16,185,129,.25);
}
.health-pill {
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px;
  border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap;
}
.health-green  { background:rgba(16,185,129,.13); color:#34D399; border:1px solid rgba(16,185,129,.25); }
.health-yellow { background:rgba(245,158,11,.13); color:#FCD34D; border:1px solid rgba(245,158,11,.25); }
.health-red    { background:rgba(239,68,68,.13);  color:#F87171; border:1px solid rgba(239,68,68,.25); }
.health-none   { background:rgba(100,116,139,.1); color:var(--muted); border:1px solid rgba(100,116,139,.2); }
.health-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.health-dot-green  { background:#10B981; box-shadow:0 0 6px rgba(16,185,129,.6); }
.health-dot-yellow { background:#F59E0B; box-shadow:0 0 6px rgba(245,158,11,.6); }
.health-dot-red    { background:#EF4444; box-shadow:0 0 6px rgba(239,68,68,.6); }
.health-dot-none   { background:#64748B; }
.metric-pair { display:flex; flex-direction:column; gap:2px; }
.metric-live { font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.metric-bench { font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:3px; }
.metric-bench-label { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:#475569; }
.delta-chip { display:inline-flex; align-items:center; font-size:10px; font-weight:700; padding:1px 5px; border-radius:4px; }
.delta-down { background:rgba(239,68,68,.12); color:#F87171; }
.delta-up   { background:rgba(16,185,129,.12); color:#34D399; }
.delta-flat { background:rgba(100,116,139,.1); color:var(--muted); }
.sh-detail-row { display:none; }
.sh-detail-row.open { display:table-row; }
.sh-detail-cell { background:rgba(15,23,42,.6); border-bottom:1px solid var(--border) !important; padding:.75rem 1rem !important; }
.sh-detail-inner { display:flex; gap:2rem; flex-wrap:wrap; }
.sh-detail-item { display:flex; flex-direction:column; gap:3px; }
.sh-detail-label { font-size:10px; font-weight:600; color:#475569; text-transform:uppercase; letter-spacing:.06em; }
.sh-detail-val { font-size:13px; font-weight:500; color:var(--text); }
.sh-expand-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:6px;
  background:rgba(30,45,69,.6); border:1px solid var(--border);
  color:var(--muted); transition:background .15s,color .15s; cursor:pointer; flex-shrink:0;
}
.sh-expand-btn:hover { background:rgba(59,130,246,.15); color:var(--blue); }
.sh-expand-btn.expanded { background:rgba(59,130,246,.15); color:var(--blue); }
.info-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; border-radius:50%;
  background:rgba(100,116,139,.2); color:var(--muted);
  font-size:9px; font-weight:700; cursor:default; flex-shrink:0;
}
.bench-star-btn {
  display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:6px;
  font-size:11px; font-weight:600;
  background:rgba(30,45,69,.6); border:1px solid var(--border);
  color:var(--muted); cursor:pointer; white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.bench-star-btn:hover { background:rgba(245,158,11,.12); color:#FCD34D; border-color:rgba(245,158,11,.3); }
.bench-star-btn.is-bench { background:rgba(245,158,11,.12); color:#FCD34D; border-color:rgba(245,158,11,.3); }

/* ── Risk page — light mode overrides ── */
[data-theme="light"] .risk-pl-bar-wrap2 { background: #E2E8F0; }

[data-theme="light"] .ri {
  background: #F8FAFC;
  border-color: var(--border);
}
[data-theme="light"] .ri-field {
  background: #FFFFFF;
  border-color: var(--border);
}
[data-theme="light"] .ri-field:focus-within { border-color: rgba(59,130,246,.5); }
[data-theme="light"] .ri-field input { color: var(--text); }
[data-theme="light"] .ri-suffix {
  background: #F1F5F9;
  border-left-color: var(--border);
  color: var(--muted);
}

[data-theme="light"] .sizing-opt2 {
  background: #F8FAFC;
  border-color: var(--border);
}
[data-theme="light"] .sizing-opt2.active {
  background: rgba(59,130,246,.06);
  border-color: rgba(59,130,246,.4);
}

[data-theme="light"] .time-input2 {
  background: #FFFFFF;
  border-color: var(--border);
  color: var(--text);
}
[data-theme="light"] .time-input2:focus { border-color: rgba(59,130,246,.5); }

[data-theme="light"] .ntl-input2 {
  background: #FFFFFF;
  border-color: var(--border);
  color: var(--text);
}
[data-theme="light"] .ntl-input2:focus { border-color: rgba(59,130,246,.5); }

[data-theme="light"] .ntl-chip2 {
  background: #EEF2FF;
  border-color: #C7D2FE;
  color: #4F46E5;
}
[data-theme="light"] .ntl-chip2 button { color: #94A3B8; }
[data-theme="light"] .ntl-chip2 button:hover { color: #EF4444; }

[data-theme="light"] .tog-track {
  background: #E2E8F0;
  border-color: var(--border);
}
[data-theme="light"] .tog-thumb { background: #94A3B8; }
[data-theme="light"] .tog input:checked ~ .tog-track { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.4); }
[data-theme="light"] .tog input:checked ~ .tog-thumb { background: #EF4444; }

[data-theme="light"] .risk-warn-item {
  background: #FEF3C7;
  border-color: #FDE68A;
  color: #92400E;
}

[data-theme="light"] .btn-risksave {
  background: rgba(59,130,246,.08);
  color: #2563EB;
  border-color: rgba(59,130,246,.25);
}
[data-theme="light"] .btn-risksave:hover { background: rgba(59,130,246,.15); }

/* Position close button column */
.pos-table td:last-child {
  padding: .3rem .4rem;
  text-align: center;
}

/* Position close button */
.btn-close-pos {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  padding: 2px 7px;
  transition: background .15s, color .15s, border-color .15s;
  opacity: 0.5;
}
.btn-close-pos:hover {
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.35);
  color: var(--red);
  opacity: 1;
}

/* Close All button in positions card header */
.btn-close-all {
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.25);
  border-radius: 7px;
  color: var(--red);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  padding: .25rem .65rem;
  transition: background .15s, border-color .15s;
}
.btn-close-all:hover {
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.5);
}

[data-theme="light"] .btn-close-pos {
  border-color: transparent;
  color: var(--muted);
}
[data-theme="light"] .btn-close-pos:hover {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.3);
  color: #DC2626;
  opacity: 1;
}

/* Paper vs Live comparison */
.compare-col {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.compare-col-hd {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .5rem .85rem;
  text-transform: uppercase;
}
.compare-paper-hd {
  background: rgba(59,130,246,.08);
  border-bottom: 1px solid rgba(59,130,246,.15);
  color: #3B82F6;
}
.compare-live-hd {
  background: rgba(16,185,129,.08);
  border-bottom: 1px solid rgba(16,185,129,.15);
  color: #10B981;
}
.compare-body { padding: .6rem 0; }
.compare-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .35rem .85rem;
  font-size: 13px;
}
.compare-row:hover { background: rgba(59,130,246,.04); }
.compare-label { color: var(--muted); font-size: 12px; }
.compare-val   { font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.compare-na    { color: var(--muted); font-size: 12px; font-style: italic; }

[data-theme="light"] .compare-paper-hd { background: rgba(59,130,246,.06); }
[data-theme="light"] .compare-live-hd  { background: rgba(16,185,129,.06); }
[data-theme="light"] .compare-row:hover { background: rgba(59,130,246,.04); }
[data-theme="light"] .btn-close-all {
  background: rgba(239,68,68,.06);
  border-color: rgba(239,68,68,.2);
  color: #DC2626;
}
[data-theme="light"] .btn-close-all:hover {
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.4);
}

/* ══════════════════════════════════════════════════
   CRYPTO SECTION — light mode
   Classes used across index, balances, positions,
   performance pages for Binance metric cards/tables
══════════════════════════════════════════════════ */

/* Crypto accent colour shifts to a darker gold in light mode */
[data-theme="light"] {
  --crypto:        #9A6E00;
  --crypto-bg:     rgba(154,110,0,.06);
  --crypto-border: rgba(154,110,0,.28);
  --crypto-glow:   rgba(154,110,0,.10);
}

/* Crypto section wrapper */
[data-theme="light"] .crypto-section {
  background: rgba(154,110,0,.04);
  border-color: rgba(154,110,0,.25);
}

/* Crypto card (inner cards inside .crypto-section) */
[data-theme="light"] .crypto-card {
  background: #FFFBF0;
  border-color: rgba(154,110,0,.22);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
[data-theme="light"] .crypto-card:hover {
  box-shadow: 0 0 0 1px rgba(154,110,0,.2), 0 4px 12px rgba(0,0,0,.07);
}

/* Section divider label */
[data-theme="light"] .section-divider-label.crypto { color: #9A6E00; }

/* Crypto section header ("B" logo + title) */
[data-theme="light"] .crypto-section-hd { color: #9A6E00; }

/* Tag chip (Demo / Live) */
[data-theme="light"] .tag {
  background: rgba(154,110,0,.10);
  color: #9A6E00;
  border-color: rgba(154,110,0,.25);
}

/* Crypto metric value text */
[data-theme="light"] .crypto-val { color: #9A6E00; }

/* Spark gradient — crypto */
[data-theme="light"] .spark-crypto {
  background: linear-gradient(90deg, transparent, rgba(154,110,0,.20));
}

/* Metric icon background — yellow/crypto */
[data-theme="light"] .icon-yellow,
[data-theme="light"] .ic-yellow {
  background: rgba(154,110,0,.10);
  box-shadow: none;
}

/* Button variants for crypto */
[data-theme="light"] .btn-crypto {
  background: rgba(154,110,0,.08);
  color: #9A6E00;
  border-color: rgba(154,110,0,.25);
}
[data-theme="light"] .btn-crypto:hover {
  background: rgba(154,110,0,.15);
  border-color: rgba(154,110,0,.40);
}

/* Badges — yellow/crypto */
[data-theme="light"] .b-yellow {
  background: rgba(154,110,0,.10);
  color: #9A6E00;
  border-color: rgba(154,110,0,.25);
}

/* Table: crypto-accented symbol text */
[data-theme="light"] .crypto-section .dtable td { border-bottom-color: rgba(154,110,0,.12); }
[data-theme="light"] .crypto-section .dtable tr:hover td { background: rgba(154,110,0,.04); }

/* Donut inner circle adapts to white card bg */
[data-theme="light"] .donut-inner { background: #FFFBF0; }

/* USDT legend dot — visible on light */
[data-theme="light"] .legend-dot[style*="#1e2d45"],
[data-theme="light"] .legend-dot[style*="#1E2D45"] { background: #CBD5E1 !important; }

/* Bar chart */
[data-theme="light"] .chart-wrap {
  background: linear-gradient(90deg, rgba(154,110,0,.03), rgba(154,110,0,.09));
}
[data-theme="light"] .chart-bar      { background: rgba(154,110,0,.28); }
[data-theme="light"] .chart-bar-last { background: rgba(154,110,0,.55); }

/* Strategy health rows */
[data-theme="light"] .strat-row {
  background: rgba(0,0,0,.015);
  border-color: rgba(180,200,230,.6);
}
[data-theme="light"] .strat-bar-track { background: rgba(0,0,0,.07); }

/* % quick-fill buttons inside crypto order form */
[data-theme="light"] .pct-btn {
  background: #EEF3FA;
  border-color: var(--border);
  color: var(--muted);
}
[data-theme="light"] .pct-btn:hover { border-color: rgba(154,110,0,.4); color: #9A6E00; }
[data-theme="light"] .pct-btn.on,
[data-theme="light"] .pct-btn.active-g { background: rgba(154,110,0,.10); color: #9A6E00; border-color: rgba(154,110,0,.25); }

/* Crypto order type underline tabs */
[data-theme="light"] .otype-tab { color: var(--muted); }
[data-theme="light"] .otype-tab.active {
  color: #9A6E00;
  border-bottom-color: #9A6E00;
}

/* Crypto quote strip */
[data-theme="light"] .quote-strip { background: #F8FAFB; border-color: var(--border); }
[data-theme="light"] .quote-strip.crypto {
  background: rgba(154,110,0,.04);
  border-color: rgba(154,110,0,.22);
}

/* TP/SL dashed placeholder */
[data-theme="light"] .tp-dashed {
  border-color: #CBD5E1;
  background: rgba(0,0,0,.01);
}
[data-theme="light"] .tp-box {
  background: rgba(5,150,105,.08);
  border-color: rgba(5,150,105,.25);
}

/* Crypto card inline border (positions page order panel) */
[data-theme="light"] .crypto-card-inline {
  background: rgba(154,110,0,.03);
  border-color: rgba(154,110,0,.25);
}

/* Crypto buy/sell column header labels */
[data-theme="light"] .bs-label-green { color: #059669; }
[data-theme="light"] .bs-label-red   { color: #DC2626; }

/* ══════════════════════════════════════════════════
   MISC HARDCODED DARK VALUES — light mode fixes
══════════════════════════════════════════════════ */

/* page-header background (was hardcoded rgba dark) */
[data-theme="light"] .page-header {
  background: rgba(241,245,249,.95);
}

/* sys-bar background */
[data-theme="light"] .sys-bar { background: #F8FAFC; }

/* Skeleton shimmer */
[data-theme="light"] .skeleton {
  background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%);
}

/* mot-quote strip (order panel live price readout) */
[data-theme="light"] .mot-quote {
  background: #EFF6FF;
  color: #1D4ED8;
  border-color: #93C5FD;
}

/* icon circles — ensure no dark glow bleeds on light */
[data-theme="light"] .icon-blue   { box-shadow: none; background: rgba(59,130,246,.10); }
[data-theme="light"] .icon-green  { box-shadow: none; background: rgba(16,185,129,.10); }
[data-theme="light"] .icon-cyan   { box-shadow: none; background: rgba(6,182,212,.10);  }
[data-theme="light"] .icon-purple { box-shadow: none; background: rgba(139,92,246,.10); }
[data-theme="light"] .icon-orange { box-shadow: none; background: rgba(245,158,11,.10); }
[data-theme="light"] .icon-indigo { box-shadow: none; background: rgba(99,102,241,.10); }
[data-theme="light"] .icon-red    { box-shadow: none; background: rgba(239,68,68,.10);  }

/* Pulsing dot box-shadow */
[data-theme="light"] .pdot { box-shadow: none; }
[data-theme="light"] .sys-dot { box-shadow: none; }

/* health dots — no glow on light */
[data-theme="light"] .health-dot-green  { box-shadow: none; }
[data-theme="light"] .health-dot-yellow { box-shadow: none; }
[data-theme="light"] .health-dot-red    { box-shadow: none; }

/* Strategy health detail cell */
[data-theme="light"] .sh-detail-cell { background: #F8FAFC; border-color: var(--border); }
[data-theme="light"] .sh-detail-label { color: #64748B; }

/* delta chips */
[data-theme="light"] .delta-down { background: #FEE2E2; color: #B91C1C; }
[data-theme="light"] .delta-up   { background: #D1FAE5; color: #065F46; }
[data-theme="light"] .delta-flat { background: #F1F5F9; color: #475569; }

/* sh-badge-count */
[data-theme="light"] .sh-badge-count     { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }
[data-theme="light"] .sh-badge-count.sh-badge-ok { background: #D1FAE5; color: #065F46; border-color: #6EE7B7; }

/* acct-pill */
[data-theme="light"] .acct-pill { background: rgba(124,58,237,.10); color: #6D28D9; }
[data-theme="light"] .acct-pill.acct-pill-empty { background: #F1F5F9; color: var(--muted); }

/* range tabs */
[data-theme="light"] .range-tab:hover  { background: rgba(59,130,246,.08); }
[data-theme="light"] .range-tab.active { background: rgba(59,130,246,.12); }

/* mode selector */
[data-theme="light"] .mode-option { background: #F8FAFC; }
[data-theme="light"] .mode-option:hover { background: rgba(59,130,246,.05); }

/* % quick-fill buttons — selected state (crypto order panel) */
.cmo-pct-btn.pct-active {
  background: rgba(240,185,11,.18) !important;
  border-color: rgba(240,185,11,.55) !important;
  color: #F0B90B !important;
}
[data-theme="light"] .cmo-pct-btn.pct-active {
  background: rgba(154,110,0,.12) !important;
  border-color: rgba(154,110,0,.40) !important;
  color: #9A6E00 !important;
}

/* risk warning */
[data-theme="light"] .risk-warning-item { background: #FEF3C7; border-color: #FDE68A; color: #92400E; }

/* toggle track (generic) */
[data-theme="light"] .toggle-track { background: #E2E8F0; border-color: #CBD5E1; }
[data-theme="light"] .toggle-thumb { background: #94A3B8; }

/* result panels */
[data-theme="light"] .result-panel       { background: rgba(5,150,105,.07); border-color: rgba(5,150,105,.2); }
[data-theme="light"] .result-panel.error { background: rgba(220,38,38,.06); border-color: rgba(220,38,38,.2); }

/* blacklist chip */
[data-theme="light"] .blacklist-chip { background: #FEE2E2; border-color: #FCA5A5; color: #B91C1C; }
[data-theme="light"] .blacklist-chip button { color: #B91C1C; }

/* compare columns */
[data-theme="light"] .compare-col { background: #FFFFFF; border-color: var(--border); }

/* type-opt / mode-opt */
[data-theme="light"] .type-opt { background: #F8FAFC; border-color: var(--border); }
[data-theme="light"] .mode-opt-paper { background: rgba(59,130,246,.07); }
[data-theme="light"] .mode-opt-live  { background: rgba(220,38,38,.07); }

/* broker-card light mode */
[data-theme="light"] .broker-card { background: #FFFFFF; }

/* plan-badge */
[data-theme="light"] .plan-badge { background: rgba(37,99,235,.10); color: #1D4ED8; }

/* live-card sidebar */
[data-theme="light"] .live-card { background: rgba(5,150,105,.06); border-color: rgba(5,150,105,.2); }
[data-theme="light"] .live-card .paper-label { color: #059669; }
[data-theme="light"] .live-card .go-live     { color: #059669; }

/* ── Floating panic kill-switch button ─────────────────────────────────────── */
#panic-wrap {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .65rem;
  pointer-events: none;
}
#panic-wrap > * { pointer-events: auto; }

/* FAB trigger button */
.panic-fab {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(239,68,68,.15);
  border: 1.5px solid rgba(239,68,68,.4);
  color: #EF4444;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  box-shadow: 0 4px 20px rgba(239,68,68,.2), 0 2px 8px rgba(0,0,0,.3);
  transition: background .15s, box-shadow .15s, transform .1s;
  font-family: inherit;
}
.panic-fab:hover {
  background: rgba(239,68,68,.28);
  box-shadow: 0 4px 24px rgba(239,68,68,.4), 0 2px 8px rgba(0,0,0,.3);
  transform: scale(1.07);
}
.panic-fab:active { transform: scale(.95); }
.panic-fab-label { font-size: 8px; font-weight: 800; letter-spacing: .06em; line-height: 1; }
.panic-fab-active {
  background: #EF4444 !important;
  color: #fff !important;
  border-color: #DC2626 !important;
  animation: panic-fab-pulse 1.2s ease-in-out 3;
}
@keyframes panic-fab-pulse {
  0%,100% { box-shadow: 0 4px 20px rgba(239,68,68,.3), 0 2px 8px rgba(0,0,0,.3); }
  50%      { box-shadow: 0 4px 32px rgba(239,68,68,.7), 0 2px 8px rgba(0,0,0,.3); }
}

/* Popup panel */
.panic-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .9rem 1rem 1rem;
  width: 260px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
  display: flex; flex-direction: column; gap: .55rem;
}
.panic-panel.hidden { display: none; }
.panic-panel-hd { display: flex; align-items: center; justify-content: space-between; }
.panic-panel-title { font-size: 13px; font-weight: 700; color: var(--text); }
.panic-close {
  background: none; border: none; cursor: pointer; color: var(--muted);
  padding: 2px; border-radius: 5px; display: flex; align-items: center;
  transition: color .12s, background .12s;
}
.panic-close:hover { color: var(--text); background: var(--card2); }
.panic-panel-desc { font-size: 11px; color: var(--muted); line-height: 1.4; }
.panic-acct-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .1rem; }

/* Per-account row inside panel */
.panic-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .45rem .55rem;
  background: var(--card2);
  border-radius: 9px;
  border: 1px solid var(--border);
  gap: .5rem;
}
.panic-row-meta { display: flex; align-items: center; gap: .4rem; flex: 1; min-width: 0; }
.panic-initials {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; letter-spacing: .02em;
}
.panic-acct-name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panic-badge { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 4px; flex-shrink: 0; }
.panic-badge-run  { background: rgba(16,185,129,.12); color: #10B981; }
.panic-badge-halt { background: rgba(239,68,68,.14); color: #EF4444; }

/* Row action buttons */
.panic-row-btn {
  flex-shrink: 0;
  padding: .28rem .5rem;
  border-radius: 7px; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; gap: .25rem;
  transition: background .12s, box-shadow .12s, transform .1s;
  white-space: nowrap;
}
.panic-row-stop {
  background: rgba(239,68,68,.1); color: #EF4444;
  border-color: rgba(239,68,68,.25);
}
.panic-row-stop:hover { background: rgba(239,68,68,.2); border-color: rgba(239,68,68,.5); }
.panic-row-arm {
  background: #EF4444; color: #fff; border-color: #DC2626;
  animation: panic-arm-pulse .8s ease-in-out infinite;
}
@keyframes panic-arm-pulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(239,68,68,.3); }
  50%      { box-shadow: 0 0 0 5px rgba(239,68,68,.1); }
}
.panic-row-resume {
  background: rgba(16,185,129,.1); color: #10B981;
  border-color: rgba(16,185,129,.25);
}
.panic-row-resume:hover { background: rgba(16,185,129,.2); border-color: rgba(16,185,129,.5); }
.panic-row-btn:active { transform: scale(.95); }
.panic-row-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; animation: none; }

/* Light mode */
[data-theme="light"] .panic-fab {
  background: rgba(239,68,68,.09);
  border-color: rgba(239,68,68,.3);
  box-shadow: 0 4px 16px rgba(239,68,68,.15), 0 2px 6px rgba(0,0,0,.1);
  color: #DC2626;
}
[data-theme="light"] .panic-fab:hover {
  background: rgba(239,68,68,.18);
  box-shadow: 0 4px 20px rgba(239,68,68,.3), 0 2px 6px rgba(0,0,0,.1);
}
[data-theme="light"] .panic-panel {
  background: #fff;
  border-color: #E2E8F0;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.07);
}
[data-theme="light"] .panic-row { background: #F8FAFC; border-color: #E2E8F0; }
[data-theme="light"] .panic-row-stop { background: rgba(239,68,68,.07); color: #DC2626; border-color: rgba(239,68,68,.2); }
[data-theme="light"] .panic-row-stop:hover { background: rgba(239,68,68,.14); }
[data-theme="light"] .panic-row-resume { background: rgba(16,185,129,.07); color: #059669; border-color: rgba(16,185,129,.2); }
[data-theme="light"] .panic-row-resume:hover { background: rgba(16,185,129,.14); }
[data-theme="light"] .panic-badge-run { background: rgba(16,185,129,.1); color: #059669; }