.portal{padding:34px 0 60px}
.who{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--mute);margin-right:6px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:22px 0}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.kpi .l{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.kpi .v{font-size:2rem;font-weight:800;letter-spacing:-.03em;margin:4px 0 2px}
.kpi .d{font-size:.85rem;color:var(--mute)}
.kpi .d.up{color:var(--ok)}.kpi .d.down{color:#D92D20}
.kpi .t{font-size:.8rem;color:var(--mute);margin-top:6px}
.bars{display:flex;align-items:flex-end;gap:6px;height:140px;margin-top:10px;padding-bottom:22px}
.bars div{flex:1;background:var(--acc);border-radius:4px 4px 0 0;position:relative;min-width:8px;min-height:4px}
.bars div span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:.62rem;color:var(--mute)}
.status{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.s-on{background:rgba(18,163,106,.12);color:var(--ok)}.s-watch{background:rgba(251,191,36,.18);color:#92400E}.s-off{background:#FEE2E2;color:#B91C1C}
.login{max-width:440px;margin:60px auto}
.notice{background:var(--acc-bg);border:1px solid rgba(47,75,255,.18);border-radius:var(--r);padding:16px 18px;color:var(--soft);font-size:.95rem}
@media (max-width:800px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:500px){.kpis{grid-template-columns:1fr}}