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

:root { color-scheme: dark; --bg:#080d12; --panel:#101820; --line:#273640; --muted:#84939d; --text:#edf4f5; --green:#8bf0b0; --red:#ff8b84; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Manrope,sans-serif; }
.monitor { max-width:1180px; margin:0 auto; padding:28px 32px 20px; }
.monitor-header, .connection-state, .section-title, .metric > div { display:flex; align-items:center; }
.monitor-header { justify-content:space-between; margin-bottom:28px; }
.kicker, .label, .connection-state, .section-title > span:last-child, footer { color:var(--muted); font:500 10px 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
h1 { margin:5px 0 0; font-size:26px; letter-spacing:-.05em; }
.connection-state { gap:8px; color:var(--green); }
.pulse-dot { width:7px; height:7px; border-radius:50%; background:var(--green); }
.metrics { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:12px; }
.metric, .dataset-section { border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.metric { min-height:130px; padding:20px; }
.metric.primary { border-color:#376148; background:#13231d; }
.metric > div { gap:7px; margin-top:17px; }
.metric strong { font-size:30px; letter-spacing:-.07em; }
.metric > div span { color:var(--muted); font:12px 'DM Mono',monospace; }
.metric-sub { display:block; margin-top:10px; color:var(--muted); font:11px 'DM Mono',monospace; }
.progress-track { height:6px; margin-top:17px; overflow:hidden; border-radius:99px; background:#26332e; }
.progress-fill { width:0; height:100%; border-radius:inherit; background:var(--green); transition:width .4s ease; }
.dataset-section { margin-top:24px; overflow:hidden; }
.section-title { justify-content:space-between; padding:17px 20px; border-bottom:1px solid var(--line); }
.dataset-table { display:grid; grid-template-columns:minmax(250px,1.7fr) .8fr .8fr .9fr; gap:18px; align-items:center; padding:15px 20px; border-top:1px solid #1e2b34; font:12px 'DM Mono',monospace; }
.dataset-table:first-of-type { border-top:0; }
.dataset-header { color:var(--muted); background:#0d151c; font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.dataset-table strong { color:var(--text); }
.dataset-table small { display:block; margin-top:3px; color:var(--muted); font:10px Manrope,sans-serif; }
.current-task { margin-top:24px; padding:18px 20px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.current-task strong { display:block; margin-top:8px; font-size:18px; letter-spacing:-.03em; }
.current-task small { display:block; margin-top:5px; color:var(--muted); font:11px 'DM Mono',monospace; }
.error { margin:18px 0 0; padding:11px; border:1px solid #5d3535; border-radius:8px; color:var(--red); background:#2a1718; font:11px 'DM Mono',monospace; }
footer { display:block; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); letter-spacing:.04em; text-transform:none; }
@media (max-width:900px) { .metrics { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .monitor { padding:20px 16px; } .metrics { grid-template-columns:1fr; } .dataset-section { overflow-x:auto; } .dataset-table { min-width:650px; } }