: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 { font:inherit; }
.shell { width:min(1560px,calc(100% - 32px)); margin:0 auto; padding:28px 0 48px; }
.hero { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:28px 2px 20px; }
.eyebrow,h1,h2,h3,p { margin:0; }
.eyebrow { margin-bottom:10px; color:var(--accent); font-size:13px; font-weight:900; text-transform:uppercase; }
h1 { font-size:clamp(34px,5vw,64px); line-height:1; }
.summary { max-width:850px; margin-top:14px; color:var(--muted); line-height:1.65; }
.status-pill { min-width:140px; border:1px solid rgba(20,108,148,.2); border-radius:999px; padding:10px 14px; background:#fff; color:var(--accent); font-size:13px; font-weight:900; text-align:center; box-shadow:var(--shadow); }
.status-pill.error { color:var(--negative); border-color:rgba(200,77,77,.3); }
.page-links { display:flex; gap:8px; margin-bottom:16px; }
.page-links 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; }
.panel,.metric-card,.period-panel { border:1px solid rgba(19,32,47,.08); border-radius:8px; background:#fff; box-shadow:var(--shadow); }
.connect-panel { margin-bottom:16px; padding:18px; }
.connect-panel form { display:grid; grid-template-columns:minmax(260px,420px) auto; gap:12px; align-items:end; }
label { display:grid; gap:7px; }
label span,.metric-card span,.metric-card small { color:var(--muted); font-size:13px; }
input,button { min-height:44px; border-radius:6px; }
input { border:1px solid var(--line); padding:0 12px; outline:none; }
input: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:900; }
button:disabled { opacity:.5; cursor:not-allowed; }
.summary-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.metric-card { display:grid; gap:8px; min-height:122px; padding:18px; }
.metric-card strong { align-self:end; font-size:clamp(22px,2.4vw,30px); overflow-wrap:anywhere; }
.overview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.period-panel { min-width:0; padding:18px; }
.period-header { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:14px; }
.period-header h2 { font-size:24px; }
.period-header p { margin-top:5px; color:var(--muted); font-size:13px; }
.run-badge { border-radius:999px; padding:6px 9px; background:#edf1f6; color:var(--muted); font-size:12px; font-weight:900; white-space:nowrap; }
.run-badge.active { background:rgba(22,131,90,.12); color:var(--positive); }
.period-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
.period-metric { display:grid; gap:5px; border:1px solid var(--line); border-radius:7px; padding:10px; }
.period-metric span { color:var(--muted); font-size:11px; }
.period-metric strong { font-size:17px; overflow-wrap:anywhere; }
.positive { color:var(--positive); }
.negative { color:var(--negative); }
.parameter-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin-bottom:14px; border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.parameter { min-width:0; padding:10px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.parameter:nth-child(4n) { border-right:0; }
.parameter span { display:block; margin-bottom:4px; color:var(--muted); font-size:11px; }
.parameter strong { font-size:13px; overflow-wrap:anywhere; }
.chart-wrap { height:230px; }
.chart-wrap canvas { display:block; width:100%; height:100%; }
.positions { margin-top:12px; color:var(--muted); font-size:12px; line-height:1.65; }
.empty-period { display:grid; place-items:center; min-height:390px; color:var(--muted); text-align:center; }
[hidden] { display:none!important; }
@media (max-width:1200px) { .summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .period-metrics,.parameter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .parameter:nth-child(4n) { border-right:1px solid var(--line); } .parameter:nth-child(2n) { border-right:0; } }
@media (max-width:850px) { .overview-grid { grid-template-columns:1fr; } }
@media (max-width:650px) { .shell { width:min(100% - 20px,650px); padding-top:14px; } .hero { align-items:stretch; flex-direction:column; padding-top:14px; } h1 { font-size:36px; } .summary { display:none; } .connect-panel form,.summary-grid { grid-template-columns:1fr; } .period-panel { padding:14px; } .period-metrics,.parameter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .chart-wrap { height:210px; } }