/* ===== Matrix 98 theme ===== */
:root{
  --green:#22ff66; --green-dim:#13a544; --green-dark:#0a2f17;
  --amber:#ffcf3f; --red:#ff5a5a; --bg:#000900; --panel:#03130a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:#000; color:var(--green);
  font-family:"Lucida Console","Courier New",monospace;
  font-size:13px; overflow-x:hidden;
}
#matrix{position:fixed;inset:0;z-index:0;opacity:.35}
.crt{position:relative;z-index:1;padding:14px;min-height:100%}
.crt::after{ /* scanlines */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:5;
  background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,20,0,.25) 2px 3px);
}

/* recolor 98.css window into phosphor terminal */
.main-window{max-width:1200px;margin:0 auto;background:var(--bg);
  border:2px solid var(--green-dim);box-shadow:0 0 24px rgba(34,255,102,.25)}
.title-bar{background:linear-gradient(90deg,#0a3f20,#031a0d)!important;
  border-bottom:1px solid var(--green-dim)}
.title-bar-text{color:var(--green)!important;text-shadow:0 0 6px var(--green);
  font-family:"Lucida Console",monospace;font-size:12px;letter-spacing:1px}
.window-body.term{background:var(--bg);color:var(--green);margin:0;padding:10px 12px}

.term, .term *{text-shadow:0 0 4px rgba(34,255,102,.45)}

/* top bar */
.topbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
  border:1px solid var(--green-dim);padding:6px 10px;background:#02160b;margin-bottom:10px}
.brand{letter-spacing:1px}
.badge{font-size:11px;padding:2px 8px;border:1px solid;animation:flick 2.2s steps(1) infinite}
.badge-paper{color:#000;background:var(--amber);border-color:#a98300;text-shadow:none}
@keyframes flick{48%{opacity:1}50%{opacity:.55}}
.controls{display:flex;gap:6px;flex-wrap:wrap}

.btn{font-family:inherit;font-size:12px;background:#04220f;color:var(--green);
  border:1px solid var(--green-dim);padding:4px 10px;cursor:pointer;letter-spacing:1px}
.btn:hover{background:#0a3f20;box-shadow:0 0 8px rgba(34,255,102,.5)}
.btn:active{transform:translateY(1px)}
.btn-kill{color:#fff;background:#3a0000;border-color:var(--red);text-shadow:0 0 6px var(--red)}
.btn-kill:hover{background:#7a0000;box-shadow:0 0 12px var(--red)}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:10px}
.tile{border:1px solid var(--green-dim);background:var(--panel);padding:6px 8px}
.tl{font-size:10px;color:var(--green-dim);letter-spacing:1px}
.tv{font-size:18px;font-weight:bold}
@media(max-width:900px){.tiles{grid-template-columns:repeat(3,1fr)}}

/* layout */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.col{display:flex;flex-direction:column;gap:12px}

.panel{border:1px solid var(--green-dim);background:var(--panel);padding:8px 10px}
.panel legend{color:var(--green);letter-spacing:2px;font-size:11px;padding:0 6px}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:11.5px}
.tbl th{text-align:left;color:var(--green-dim);border-bottom:1px solid var(--green-dark);padding:3px 5px;font-weight:normal}
.tbl td{padding:3px 5px;border-bottom:1px dotted #0a2a14}
.muted{color:var(--green-dim);text-align:center;font-style:italic}
.pos{color:var(--green)} .neg{color:var(--red)}
.long{color:var(--green)} .short{color:var(--amber)}

/* signals */
.signals{display:flex;flex-direction:column;gap:5px}
.sig{display:flex;justify-content:space-between;gap:8px;border:1px solid var(--green-dark);padding:4px 8px;background:#021a0d}
.sig .act{font-weight:bold;letter-spacing:1px}
.sig .why{color:var(--green-dim);font-size:11px}
.conf-bar{height:4px;background:#0a2a14;margin-top:3px}
.conf-fill{height:100%;background:var(--green)}

/* backtest */
.bt-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.bt-form label{font-size:11px;color:var(--green-dim)}
.inp{font-family:inherit;background:#021a0d;color:var(--green);border:1px solid var(--green-dim);padding:2px 5px;width:70px}
.bt-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 10px;font-size:11.5px;margin-bottom:8px}
.bt-metrics b{color:var(--green);text-shadow:0 0 6px var(--green)}

/* logs */
.logbox{height:150px;overflow:auto;font-size:11px;line-height:1.5}
.logbox div{white-space:pre-wrap}
.lvl-KILL{color:var(--red)} .lvl-TRADE{color:var(--amber)} .lvl-ERROR{color:var(--red)}
.lvl-WARN{color:#cfa} .lvl-INFO{color:var(--green-dim)}

.footer{margin-top:10px;text-align:center;color:var(--green-dim);font-size:11px;letter-spacing:1px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#0a3f20;border:1px solid var(--green-dim)}
::-webkit-scrollbar-track{background:#020}

/* strategy selector + chart */
.stratsel{font-size:11px;color:var(--green-dim);margin-left:10px}
.chart-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.chart-legend{margin-left:auto;font-size:10px;color:var(--green-dim);display:flex;align-items:center;gap:6px}
.chart-legend i{width:10px;height:3px;display:inline-block;margin-right:3px;vertical-align:middle}
.dot-ef{background:#5ad0ff}.dot-es{background:#ff9bf5}.dot-up{background:#22ff66}.dot-dn{background:#ffcf3f}
#priceChart{border:1px solid var(--green-dark);background:#000}

/* per-strategy signal chips */
.sig-strats{display:flex;gap:5px;margin-top:4px;flex-wrap:wrap}
.chip{font-size:9.5px;padding:1px 5px;border:1px solid var(--green-dark);letter-spacing:.5px}
.chip b{color:var(--green-dim)}
.chip-long{color:var(--green);border-color:#0a5a2a}
.chip-short{color:var(--amber);border-color:#6a5400}
.chip-flat{color:var(--green-dim)}
.chip-final{background:#02240f;border-color:var(--green-dim)}