:root{--brand: #1e5f4b;--surface: #ffffff;--surface-alt: #f2f3ef;--on-surface: #1a1c19;--up: #1e8e3e;--degraded: #e8a51d;--down: #c5221f}*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;color:var(--on-surface);background:var(--surface)}.shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh}.sidebar{background:var(--surface-alt);padding:16px;display:flex;flex-direction:column;gap:12px}.sidebar nav{display:flex;flex-direction:column;gap:6px}.sidebar a{padding:8px 10px;border-radius:8px;color:var(--on-surface);text-decoration:none}.sidebar a.active{background:var(--brand);color:#fff}.content{padding:24px}.kpi-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.kpi{background:var(--surface-alt);border-radius:12px;padding:16px;display:flex;flex-direction:column}.kpi__value{font-size:1.6rem;font-weight:800}.kpi__label{color:#5b5f57;font-size:.9rem}.lights{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.light{padding:4px 10px;border-radius:8px;background:var(--surface-alt)}.light--up{color:var(--up)}.light--degraded{color:var(--degraded)}.light--down{color:var(--down)}.login{max-width:360px;margin:80px auto;display:flex;flex-direction:column;gap:12px}.login label{display:flex;flex-direction:column;gap:4px}.login input,.login button{padding:10px}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:8px;border-bottom:1px solid var(--surface-alt)}.vendor{color:#5b5f57;margin-top:24px}