@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root{
  --bg:#e8eaed; --surface:#ffffff; --surface-2:#f2f3f5; --ink:#171b20; --ink-muted:#5c6570;
  --border:#d5d9de; --border-strong:#b9bfc7; --accent:#a85b1c; --accent-ink:#ffffff;
  --good:#1f7a4d; --good-soft:#dcefe3; --warn:#a5720f; --warn-soft:#f4e6c8;
  --bad:#a3372f; --bad-soft:#f4dcda; --pending:#6b5b95; --pending-soft:#e6e2f0;
  --shadow: 0 1px 2px rgba(20,24,28,0.06), 0 8px 24px -12px rgba(20,24,28,0.18);
  --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#15181c; --surface:#1d2126; --surface-2:#23272d; --ink:#e9eaec; --ink-muted:#9aa2ab;
    --border:#2d323a; --border-strong:#3b414a; --accent:#d98c47; --accent-ink:#1a1206;
    --good:#4fb586; --good-soft:#173328; --warn:#d9ad4f; --warn-soft:#3a2f13;
    --bad:#e0776e; --bad-soft:#3a1c19; --pending:#a99ad6; --pending-soft:#2a2540;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
  }
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:14px;line-height:1.45;}
.wrap{max-width:1180px;margin:0 auto;padding:28px 20px 64px;}
.masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--border-strong);margin-bottom:20px;}
.masthead h1{font-size:22px;font-weight:800;letter-spacing:-0.01em;margin:0 0 4px;background:linear-gradient(90deg,#1fb9e0,#8a5cf0);-webkit-background-clip:text;background-clip:text;color:transparent;}
.masthead .sub{font-family:var(--font-mono);font-size:12px;color:var(--ink-muted);}
.brand-row{display:flex;align-items:center;gap:12px;}
.brand-icon{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(66,133,255,0.35));}
.engine{display:flex;gap:10px;flex-wrap:wrap;}
.engine .tile{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 14px;min-width:82px;text-align:center;}
.engine .tile .n{font-family:var(--font-mono);font-size:19px;font-weight:600;}
.engine .tile .l{font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-muted);margin-top:3px;}
.engine .tile.pending_backtest .n{color:var(--pending);}
.engine .tile.incubating .n{color:var(--warn);}
.engine .tile.live .n{color:var(--good);}
.engine .tile.killed .n{color:var(--bad);}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.chipset{display:flex;gap:6px;flex-wrap:wrap;}
.chip{font-family:var(--font-mono);font-size:11.5px;padding:6px 11px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink-muted);cursor:pointer;user-select:none;}
.chip.on[data-status="pending_backtest"]{background:var(--pending);border-color:var(--pending);color:#fff;}
.chip.on[data-status="incubating"]{background:var(--warn);border-color:var(--warn);color:#1a1206;}
.chip.on[data-status="live"]{background:var(--good);border-color:var(--good);color:#fff;}
.chip.on[data-status="killed"]{background:var(--bad);border-color:var(--bad);color:#fff;}
.spacer{flex:1;}
.btn{font-family:var(--font-mono);font-size:11.5px;padding:6px 12px;border-radius:6px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);cursor:pointer;}
.btn:hover{border-color:var(--accent);color:var(--accent);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.tablewrap{background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);overflow-x:auto;}
table{border-collapse:collapse;width:100%;min-width:900px;}
thead th{background:var(--surface-2);text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--border-strong);}
thead th.num{text-align:right;}
tbody tr{border-bottom:1px solid var(--border);cursor:pointer;}
tbody tr:hover{background:var(--surface-2);}
td{padding:10px 12px;vertical-align:middle;}
td.num{text-align:right;font-family:var(--font-mono);}
.name-cell .name{font-weight:600;}
.name-cell .pair{font-family:var(--font-mono);font-size:11px;color:var(--ink-muted);margin-top:1px;}
.pos{color:var(--good);} .neg{color:var(--bad);}
.pill{display:inline-block;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:0.03em;text-transform:uppercase;padding:3px 9px;border-radius:999px;}
.pill.pending_backtest{background:var(--pending-soft);color:var(--pending);}
.pill.incubating{background:var(--warn-soft);color:var(--warn);}
.pill.live{background:var(--good-soft);color:var(--good);}
.pill.killed{background:var(--bad-soft);color:var(--bad);}
.detail-row td{background:var(--surface-2);padding:0;}
.detail{padding:18px 22px 22px;display:grid;grid-template-columns:1.1fr 1.4fr;gap:22px;}
@media (max-width:820px){.detail{grid-template-columns:1fr;}}
.detail h4{font-size:10.5px;text-transform:uppercase;letter-spacing:0.07em;color:var(--ink-muted);margin:0 0 8px;}
.rules{display:flex;flex-direction:column;gap:10px;}
.rule{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:9px 11px;}
.rule .k{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.05em;color:var(--accent);margin-bottom:3px;}
.rule .v{font-size:12.5px;}
.meta-line{font-family:var(--font-mono);font-size:11px;color:var(--ink-muted);margin-top:10px;line-height:1.6;white-space:pre-wrap;}
.code-box{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.code-head{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;border-bottom:1px solid var(--border);background:var(--surface-2);}
.code-head span{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-muted);}
.code-actions{display:flex;gap:6px;flex-wrap:wrap;}
pre.code{margin:0;padding:12px 14px;font-family:var(--font-mono);font-size:11.3px;line-height:1.55;max-height:340px;overflow:auto;white-space:pre;}
.empty{padding:48px 20px;text-align:center;color:var(--ink-muted);font-family:var(--font-mono);font-size:12.5px;}
.footer-note{margin-top:16px;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-muted);}
dialog{border:1px solid var(--border-strong);border-radius:10px;padding:0;background:var(--surface);color:var(--ink);width:min(640px,92vw);}
dialog::backdrop{background:rgba(0,0,0,0.4);}
.strategy-form{display:flex;flex-direction:column;gap:10px;padding:20px;max-height:80vh;overflow:auto;}
.strategy-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-muted);}
.strategy-form input, .strategy-form textarea{font-family:var(--font-ui);font-size:13px;padding:7px 9px;border-radius:6px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);}
.strategy-form textarea.mono{font-family:var(--font-mono);font-size:11.5px;}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;}
.toast{position:fixed;bottom:20px;right:20px;background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:8px;font-family:var(--font-mono);font-size:12px;box-shadow:var(--shadow);z-index:1000;}
