/* ============================================================
   SPX Lorentzian + Harmonic Engine — minimal light theme
   ============================================================ */
:root{
  --bg:      #ffffff;
  --bg-2:    #f6f7f9;
  --border:  #d8dde2;
  --border-2:#e4e7ea;
  --fg:      #1a1a1a;
  --fg-dim:  #7a7a7a;
  --accent:  #1aa874;
  --bull:    #1aa874;
  --bear:    #d6354a;
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family:'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace;
  font-size:12px;height:100%;overflow:hidden;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
body{display:flex;flex-direction:column;min-height:100vh}

/* ---------- top bar ---------- */
header#topbar{
  height:42px;flex:0 0 42px;
  display:flex;align-items:center;gap:20px;
  padding:0 14px;
  background:#fafbfc;
  border-bottom:1px solid var(--border);
  position:relative;z-index:5;
}
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{color:var(--fg);font-size:16px;font-weight:700;line-height:1}
.brand .title{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--fg)}

.tf-tabs,.view-tabs{display:flex;align-items:center;gap:2px;margin-left:6px}
.tf-tabs button,.view-tabs button{
  appearance:none;background:transparent;border:1px solid transparent;
  color:var(--fg-dim);padding:5px 12px;cursor:pointer;
  font-family:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border-radius:3px;
}
.tf-tabs button:hover,.view-tabs button:hover{color:var(--fg);background:#eef0f3}
.tf-tabs button.active,.view-tabs button.active{
  color:var(--fg);background:#ffffff;border-color:var(--border);
  box-shadow:inset 0 -2px 0 var(--fg);
}
.view-tabs{margin-left:auto;margin-right:8px}
.view-tabs button{font-weight:700}

/* ---------- backtest pane ---------- */
#backtest-pane{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--bg);position:relative;overflow:hidden}
.bt-toolbar{
  flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:8px 14px;border-bottom:1px solid var(--border);background:#fafbfc;
  font-size:11px;letter-spacing:.06em;
}
.bt-toolbar-left{display:flex;gap:12px;align-items:center}
.bt-meta{color:var(--fg-dim);font-size:10.5px;font-weight:400}
.bt-toolbar-right{display:flex;gap:8px;align-items:center}
.bt-toolbar-right label{display:flex;gap:5px;align-items:center;color:var(--fg-dim);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em}
.bt-toolbar-right input{
  width:46px;font-family:inherit;font-size:11px;text-align:center;
  background:#fff;border:1px solid var(--border);border-radius:2px;padding:3px 4px;color:var(--fg);
}
.bt-toolbar-right input:focus{outline:none;border-color:var(--fg)}
#bt-run{
  appearance:none;background:var(--fg);color:#fff;border:none;border-radius:2px;
  padding:5px 14px;font-family:inherit;font-size:11px;letter-spacing:.16em;font-weight:700;cursor:pointer;text-transform:uppercase;
}
#bt-run:hover{background:#333}
#bt-run:disabled{background:#bbb;cursor:wait}

.bt-stats{
  flex:0 0 auto;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:1px;background:var(--border);border-bottom:1px solid var(--border);
}
.bt-stat{background:#fff;padding:10px 12px;display:flex;flex-direction:column;gap:3px;min-width:0}
.bt-stat .l{font-size:9.5px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.14em}
.bt-stat .v{font-size:15px;font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-stat .v.pos{color:var(--bull)}
.bt-stat .v.neg{color:var(--bear)}
.bt-stat .s{font-size:10px;color:var(--fg-dim)}

.bt-charts{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.bt-chart{position:relative;width:100%}
#bt-equity{flex:3;min-height:0}
#bt-dd{flex:1;min-height:0;border-top:1px solid var(--border-2)}

.bt-table-wrap{
  flex:0 0 240px;border-top:1px solid var(--border);background:#fff;overflow:auto;
}
.bt-table-head{
  position:sticky;top:0;background:#fafbfc;border-bottom:1px solid var(--border);
  padding:6px 12px;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--fg);
  z-index:2;
}
.bt-table{width:100%;border-collapse:collapse;font-size:10.5px}
.bt-table th{
  position:sticky;top:27px;background:#fafbfc;text-align:left;padding:5px 10px;
  border-bottom:1px solid var(--border);color:var(--fg-dim);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;z-index:1;font-size:9.5px;
}
.bt-table td{padding:4px 10px;border-bottom:1px solid var(--border-2);white-space:nowrap}
.bt-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.bt-table tr:hover td{background:#f6f7f9}
.bt-table .pos{color:var(--bull)}
.bt-table .neg{color:var(--bear)}
.bt-table .side-l{color:var(--bull);font-weight:700}
.bt-table .side-s{color:var(--bear);font-weight:700}
.bt-table .reason-TP   {color:var(--bull)}
.bt-table .reason-SL   {color:var(--bear)}
.bt-table .reason-FLIP {color:#666}
.bt-table .reason-TIME {color:#999}

.bt-loader{
  position:absolute;inset:0;background:rgba(255,255,255,.85);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;
  z-index:10;
}
.bt-spinner{
  width:28px;height:28px;border:2px solid var(--border);
  border-top-color:var(--fg);border-radius:50%;animation:bt-spin 0.7s linear infinite;
}
.bt-progress{font-size:11px;color:var(--fg-dim);letter-spacing:.1em;text-transform:uppercase}
@keyframes bt-spin{to{transform:rotate(360deg)}}

/* ---------- layout ---------- */
main#layout{
  flex:1;display:flex;min-height:0;background:var(--bg);
}
#chart-main{flex:1;min-width:0;min-height:0;position:relative;background:var(--bg)}

/* ---------- footer ---------- */
footer#status{
  flex:0 0 22px;font-size:10px;color:var(--fg-dim);
  padding:0 12px;display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--border);background:#fafbfc;letter-spacing:.1em;
}
#status-text::before{content:"●";color:var(--bull);margin-right:8px}

#err-overlay{
  position:fixed;left:8px;bottom:30px;max-width:60vw;max-height:30vh;overflow:auto;
  font:11px/1.35 monospace;color:#aa1d1d;background:rgba(255,235,235,.92);
  border:1px solid #d6354a;border-radius:4px;padding:6px 8px;z-index:9999;white-space:pre-wrap
}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:#cfd4d8;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#9aa3ab}