:root { color-scheme: dark; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif; background: #08111f; color: #ecf4ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 20% 0%, #173252 0, #08111f 45%); }
main { width: min(1080px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 80px; }
header { margin-bottom: 28px; }
h1 { margin: 6px 0 8px; font-size: clamp(2rem, 6vw, 4rem); letter-spacing: -.04em; }
h2 { margin-top: 0; }
.eyebrow { color: #52d3b2; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.panel, .metric { border: 1px solid #29415e; background: rgba(11, 25, 43, .88); box-shadow: 0 20px 60px rgba(0,0,0,.28); border-radius: 18px; }
.panel { padding: 24px; margin-bottom: 18px; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.capability-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.metric { min-height: 116px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.metric span, .muted { color: #9db0c6; }
.metric strong { font-size: 1.18rem; }
.metric.ok { border-color: #298d73; }.metric.warn { border-color: #a87525; }.metric.bad { border-color: #a74450; }
label { display: grid; gap: 8px; max-width: 460px; }
input, select { width: 100%; padding: 13px 14px; border: 1px solid #3b5471; border-radius: 10px; background: #07101d; color: inherit; font-size: 1rem; }
.selectors { display: grid; grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr) auto; gap: 12px; align-items: end; }
.selectors button { margin-top: 0; }
button { min-height: 44px; border: 0; border-radius: 10px; padding: 0 18px; margin-top: 14px; background: #38c7a4; color: #04100d; font-weight: 750; cursor: pointer; }
button.secondary { background: #8db9e8; color: #07111d; } button.danger { background: #ff7f8d; } button.ghost { background: transparent; border: 1px solid #46617f; color: #dce9f8; }
button:disabled { opacity: .5; cursor: wait; }
.actions, .toolbar { display: flex; flex-wrap: wrap; gap: 12px; }.toolbar { justify-content: flex-end; }.toolbar button { margin-top: 0; }
.hidden { display: none; }.error { color: #ff9ba5; min-height: 1.5em; }
@media (max-width: 760px) { main { width: min(100% - 20px, 680px); padding-top: 28px; }.grid, .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.selectors { grid-template-columns: 1fr; }.actions button, .selectors button { width: 100%; } }
@media (max-width: 390px) { .grid { grid-template-columns: 1fr; } }