:root{font-family:Arial,Helvetica,sans-serif;background:#f3f3f1;color:#171717}*{box-sizing:border-box}body{margin:0;min-height:100vh}main{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:32px 0 64px}header{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px}h1{margin:2px 0 0;font-size:32px;line-height:1;letter-spacing:-.03em}.eyebrow{margin:0;color:#666;font-size:11px;letter-spacing:.12em}video{display:block;width:100%;aspect-ratio:16 / 9;border:1px solid #bbb;background:#000}.badge{padding:5px 8px;border:1px solid #aaa;font-size:12px;background:#fff}.badge.waiting{color:#795b00;border-color:#c6a441}.badge.online{color:#08614c;border-color:#16856c}.badge.error{color:#9a2727;border-color:#c95a5a}.hero-kpis{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:1px;margin:16px 0;border:1px solid #ccc;background:#ccc}.hero-kpis article{min-width:0;padding:14px;background:#fff}.hero-kpis span,.hero-kpis small{display:block;color:#666;font-size:11px}.hero-kpis strong{display:block;margin:6px 0 4px;font-size:26px;line-height:1;letter-spacing:-.03em}.hero-kpis .saving-card strong{color:#08614c}.charts-grid{display:grid;grid-template-columns:1.7fr .8fr;gap:12px;margin-bottom:12px}.chart-card{min-width:0;padding:14px;border:1px solid #ccc;background:#fff}.chart-card>header{align-items:start;margin:0 0 10px}.chart-card header span{display:block;color:#777;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.chart-card header strong{display:block;margin-top:2px;font-size:14px}.chart-card header em{color:#777;font-size:10px;font-style:normal}.chart-wrap{position:relative;height:220px}.chart-wrap.small{height:130px}.network-card{grid-column:1 / -1}.donut-wrap{position:relative;height:168px}.donut-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.donut-label strong{font-size:28px}.donut-label span{color:#16856c;font-size:10px}.legend{display:grid;gap:6px;margin-top:6px;color:#666;font-size:11px}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:8px;height:8px}.legend b{margin-left:auto;color:#222}.p2p-color{background:#16856c}.http-color{background:#315bb5}.server-stats{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:12px;padding:10px 12px;border:1px solid #ccc;background:#fff;color:#666;font-size:11px}.server-stats div{display:flex;align-items:center;gap:5px}.server-stats strong{color:#222}.live-dot{width:7px;height:7px;border-radius:50%;background:#888}.live-dot.active{background:#16856c}.controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border:1px solid #ccc;background:#fff;font-size:12px}button{padding:6px 10px;border:1px solid #888;background:#f7f7f7;color:#111;cursor:pointer}button:hover{background:#e9e9e9}details{margin-top:12px;color:#666;font-size:12px}pre{max-height:240px;overflow:auto;white-space:pre-wrap;font-size:11px}@media(max-width:760px){.hero-kpis{grid-template-columns:repeat(2,1fr)}.charts-grid{grid-template-columns:1fr}.network-card{grid-column:auto}header{align-items:start;flex-direction:column}.chart-wrap{height:180px}}@media(max-width:440px){.hero-kpis{grid-template-columns:1fr}}