:root{--bg:#0b1220;--panel:#0f1730;--muted:#a9b6d3;--text:#e8eefc;--brand:#5b8cff;--btn:#3057ff;--btn2:#1f3ed6;--alert:#ff6969;--card:#101a38;--shadow:0 20px 50px rgba(0,0,0,.35)}
*{box-sizing:border-box}body{margin:0;font:16px/1.5 system-ui,Segoe UI,Roboto,Arial;color:var(--text);background:var(--bg)}
a{color:var(--brand);text-decoration:none}.bg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1080px;width:100%}
.card{background:var(--card);padding:28px;border-radius:16px;box-shadow:var(--shadow)}
.logo{font-weight:700;letter-spacing:.08em;color:#9ab6ff;margin-bottom:8px}h1{margin:.2em 0 .1em;font-size:1.9rem}
.muted{color:var(--muted);margin:0 0 18px}
.alert{background:rgba(255,105,105,.15);border:1px solid rgba(255,105,105,.35);color:#ffd0d0;padding:10px 12px;border-radius:10px;margin-bottom:14px}
.form label{display:block;margin:10px 0 6px;color:#cdd7f3;font-size:.92rem}
.form input{width:100%;padding:12px 14px;border:1px solid #23335f;border-radius:12px;background:#0c1430;color:var(--text)}
.form input:focus{border-color:#3e63ff;box-shadow:0 0 0 3px rgba(62,99,255,.2)}
.btn{display:inline-block;margin-top:16px;background:linear-gradient(180deg,var(--btn),var(--btn2));color:#fff;border:none;border-radius:12px;padding:12px 16px;font-weight:600;cursor:pointer;box-shadow:0 10px 25px rgba(48,87,255,.25)}
.btn.s{padding:8px 12px;border-radius:10px}.legal{margin-top:14px;color:#8593b8;font-size:.85rem}
.hero{position:relative;background:radial-gradient(1000px 500px at 70% 30%,rgba(68,106,255,.35),transparent 65%),linear-gradient(160deg,#0c1122,#0b1220 60%);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;display:flex;align-items:flex-end}
.blur{position:absolute;inset:0;backdrop-filter:blur(2px)}.copy{position:relative;padding:28px}.copy h2{margin:0 0 6px}.copy p{margin:0;color:var(--muted)}
@media (max-width:900px){.grid{grid-template-columns:1fr}}.app .topbar{position:sticky;top:0;background:rgba(16,26,56,.8);backdrop-filter:blur(6px);display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid #1d2950}
.brand{font-weight:700;letter-spacing:.06em}.user{color:#b9c7ff;margin-right:12px}.container{max-width:960px;margin:24px auto;padding:0 16px}
.panel{background:var(--panel);padding:20px;border-radius:14px;box-shadow:var(--shadow)}
.hmi-card{background:var(--card);padding:18px;border-radius:14px;box-shadow:var(--shadow);margin-top:12px}
.hmi-card__header{display:flex;align-items:center;justify-content:space-between;gap:14px}
.hmi-card__body{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:12px}
.hmi-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center}
.hmi-meta .label{color:#9fb0db}

.hmi-pill{padding:6px 10px;border-radius:999px;background:#384766;color:#dbe6ff;font-weight:700;min-width:98px;text-align:center}
.hmi-pill.ok{background:#1e7f3d;color:#fff}
.hmi-pill.warn{background:#8a6d1f;color:#fff}
.hmi-pill.down{background:#7a1e2a;color:#fff}
.hmi-pill.neutral{background:#444b63;color:#fff}