* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; background: #0b0d10; color: #e6e6e6; }
header { padding: 16px 18px; border-bottom: 1px solid #222; position: sticky; top: 0; background: rgba(11,13,16,0.95); backdrop-filter: blur(8px); }
h1 { margin: 0 0 10px; font-size: 20px; }
.controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
label { font-size: 14px; color: #cfcfcf; }
select, button { margin-left: 6px; padding: 6px 8px; border-radius: 10px; border: 1px solid #2a2a2a; background: #12151a; color: #e6e6e6; }
button { cursor: pointer; }
.status { margin-top: 10px; font-size: 13px; color: #a9a9a9; }
main { padding: 16px 18px; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.card { border: 1px solid #222; background: #101319; border-radius: 16px; padding: 12px; }
.card .k { font-size: 12px; color: #a9a9a9; }
.card .v { font-size: 22px; margin-top: 4px; }
.charts { display: grid; grid-template-columns: 1fr; gap: 12px; }
.chartCard { border: 1px solid #222; background: #101319; border-radius: 16px; padding: 12px; height: 260px; }
.chartCard h2 { margin: 0 0 8px; font-size: 14px; color: #cfcfcf; }
footer { padding: 14px 18px; border-top: 1px solid #222; color: #888; }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }