:root { color-scheme: light; --bg:#f4f7fb; --ink:#13202f; --muted:#637083; --line:#d9e1ec; --accent:#146c94; --positive:#16835a; --negative:#c84d4d; --shadow:0 18px 42px rgba(31,45,72,.1); font-family:Inter,"SF Pro Display","PingFang SC","Microsoft YaHei",Arial,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); }
button,input,select { font:inherit; }
button:disabled { cursor:not-allowed; opacity:.48; }
.shell { width:min(1480px,calc(100% - 32px)); margin:0 auto; padding:28px 0 44px; }
.hero { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:28px 2px 20px; }
.eyebrow,h1,h2,p { margin:0; }
.eyebrow { margin-bottom:10px; color:var(--accent); font-size:13px; font-weight:800; text-transform:uppercase; }
h1 { font-size:clamp(34px,5vw,64px); line-height:1; }
h2 { font-size:18px; }
.summary { max-width:820px; margin-top:14px; color:var(--muted); font-size:16px; line-height:1.65; }
.status-pill { min-width:150px; border:1px solid rgba(20,108,148,.18); border-radius:999px; padding:10px 14px; background:#fff; color:var(--accent); font-size:13px; font-weight:800; text-align:center; box-shadow:var(--shadow); }
.status-pill.error { color:var(--negative); border-color:rgba(200,77,77,.3); }
.period-pages { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.period-pages a { border:1px solid var(--line); border-radius:6px; padding:8px 12px; background:#fff; color:var(--accent); font-size:13px; font-weight:800; text-decoration:none; }
.period-pages a:hover,.period-pages a.active { border-color:var(--accent); background:rgba(20,108,148,.08); }
.period-pages a.running-paper { border-color:rgba(22,131,90,.42); background:rgba(22,131,90,.1); color:var(--positive); }
.period-pages a.running-live { border-color:rgba(200,77,77,.42); background:rgba(200,77,77,.1); color:var(--negative); }
.active-experiments { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; border:1px solid rgba(22,131,90,.28); border-radius:8px; padding:14px 18px; background:#f1fbf7; }
.active-experiments>div:first-child { display:grid; gap:4px; }
.active-experiments span { color:var(--muted); font-size:12px; }
.active-experiment-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.active-experiment-links a { border:1px solid rgba(22,131,90,.35); border-radius:6px; padding:8px 11px; background:#fff; color:var(--positive); font-size:13px; font-weight:900; text-decoration:none; }
.active-experiment-links a.live { border-color:rgba(200,77,77,.38); color:var(--negative); }
.warning-panel { display:flex; gap:12px; margin-bottom:16px; border:1px solid rgba(154,91,19,.24); border-radius:8px; padding:14px 18px; background:#fff8ed; color:#6e4617; font-size:14px; line-height:1.55; }
.panel,.metric-card { border:1px solid rgba(19,32,47,.08); border-radius:8px; background:#fff; box-shadow:var(--shadow); }
.connect-panel,.strategy-panel,.table-panel,.log-panel { padding:18px; margin-bottom:16px; }
.panel-title { display:flex; justify-content:space-between; gap:16px; margin-bottom:16px; }
.panel-title p { margin-top:6px; color:var(--muted); font-size:13px; }
.connect-form { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; align-items:end; }
.connect-form .check-label { align-self:center; }
label { display:grid; gap:7px; }
label>span { color:var(--muted); font-size:13px; }
input,select,button { min-height:44px; border-radius:6px; }
input,select { width:100%; border:1px solid var(--line); padding:0 12px; background:#fff; color:var(--ink); outline:none; }
input:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(20,108,148,.12); }
button { border:0; padding:0 18px; background:var(--ink); color:#fff; cursor:pointer; font-weight:800; }
button.secondary { border:1px solid var(--line); background:#fff; color:var(--ink); }
button.reset { border-color:rgba(200,77,77,.28); color:var(--negative); }
button.danger { background:var(--negative); }
button.ghost { border:1px solid var(--line); background:transparent; color:var(--muted); }
.check-label { display:flex; align-items:center; gap:9px; min-height:44px; }
.check-label input { width:18px; min-height:18px; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.performance-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.metric-card { display:grid; gap:8px; min-height:126px; padding:20px; }
.metric-card span,.metric-card small { color:var(--muted); font-size:13px; }
.metric-card strong { align-self:end; font-size:clamp(23px,3vw,32px); }
.strategy-form { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; align-items:end; }
.strategy-form .live-risk { grid-column:span 3; align-self:center; border:1px solid rgba(200,77,77,.22); border-radius:6px; padding:8px 10px; background:rgba(200,77,77,.05); }
.strategy-form .live-risk span { color:#8e3333; line-height:1.45; }
.input-suffix { position:relative; }
.input-suffix input { padding-right:34px; }
.input-suffix span { position:absolute; right:12px; top:12px; color:var(--muted); }
.danger-actions { display:grid; grid-template-columns:minmax(220px,1fr) auto auto; gap:10px; margin-top:14px; border-top:1px solid var(--line); padding-top:14px; }
.performance-panel { margin-bottom:16px; padding:18px; }
.performance-panel .panel-title { align-items:flex-start; }
.compact { min-height:36px; padding:0 12px; font-size:13px; white-space:nowrap; }
.equity-chart-wrap { width:100%; height:300px; overflow:hidden; }
#equityCanvas { display:block; width:100%; height:100%; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:8px; }
table { width:100%; min-width:900px; border-collapse:collapse; }
th,td { border-bottom:1px solid var(--line); padding:12px 14px; text-align:right; white-space:nowrap; }
th { color:var(--muted); font-size:12px; }
th:first-child,td:first-child { text-align:left; }
.two-column { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.7fr); gap:16px; }
.top-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.top-item { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; border:1px solid var(--line); border-radius:7px; padding:10px 12px; }
.top-item div { display:grid; gap:3px; min-width:0; }
.top-item div strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-item div span { color:var(--muted); font-size:12px; }
.top-item b { font-size:13px; }
.signal { min-width:44px; border-radius:999px; padding:4px 7px; font-size:11px; font-style:normal; font-weight:900; text-align:center; }
.signal.red { background:rgba(200,77,77,.12); color:var(--negative); }
.signal.blue { background:rgba(20,108,148,.12); color:var(--accent); }
.signal.waiting { background:#edf1f6; color:var(--muted); }
.signal.error { background:rgba(200,77,77,.12); color:var(--negative); }
.signal.unavailable { background:#fff1dc; color:#8a5616; }
.logs { max-height:470px; overflow:auto; }
.log-item { display:grid; grid-template-columns:118px 1fr auto; gap:10px; padding:11px 4px; border-bottom:1px solid var(--line); font-size:13px; }
.log-item time { color:var(--muted); }
.log-item.error span { color:var(--negative); }
.log-item.success span { color:var(--positive); font-weight:700; }
.empty { padding:32px 12px; color:var(--muted); text-align:center; }
.positive { color:var(--positive); }
.negative { color:var(--negative); }
[hidden] { display:none!important; }
@media (max-width:1200px) { .performance-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:1100px) { .connect-form,.strategy-form { grid-template-columns:repeat(3,minmax(0,1fr)); } .two-column { grid-template-columns:1fr; } }
@media (max-width:760px) { .shell { width:min(100% - 20px,760px); padding-top:16px; } .hero { align-items:stretch; flex-direction:column; padding-top:14px; } h1 { font-size:36px; } .summary { display:none; } .active-experiments { align-items:stretch; flex-direction:column; } .active-experiment-links { justify-content:flex-start; } .warning-panel { display:grid; } .connect-form,.strategy-form,.metrics,.performance-grid,.top-grid,.danger-actions { grid-template-columns:1fr; } .strategy-form .live-risk { grid-column:1; } .connect-panel,.strategy-panel,.table-panel,.log-panel,.performance-panel { padding:14px; } .metric-card { min-height:100px; padding:16px; } .performance-panel .panel-title { align-items:stretch; flex-direction:column; } .equity-chart-wrap { height:240px; } }