:root {
  --bg:#f4f7f5; --card:#fff; --text:#14221b; --muted:#66766e; --line:#dfe8e2;
  --primary:#146b47; --primary2:#0f5539; --warn:#a86d00; --danger:#b42318;
  --shadow:0 10px 30px rgba(19,50,35,.08); --radius:20px;
}
*{box-sizing:border-box} body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px max(18px,calc((100vw - 1180px)/2));background:rgba(244,247,245,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:800;color:var(--primary)} h1{margin:2px 0 0;font-size:24px}.header-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
main{max-width:1180px;margin:0 auto;padding:22px 18px 60px}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.login-card{max-width:430px;margin:6vh auto;padding:28px}.login-card h2{margin-top:0}.login-card form{display:grid;gap:14px;margin-top:20px}label{display:grid;gap:7px;font-weight:700;font-size:14px}input{width:100%;padding:13px 14px;border:1px solid #cbd8d0;border-radius:12px;font:inherit;background:#fff}input:focus{outline:3px solid rgba(20,107,71,.14);border-color:var(--primary)}
.btn{border:0;border-radius:12px;padding:11px 15px;font-weight:800;cursor:pointer;font:inherit}.btn.primary{background:var(--primary);color:#fff}.btn.primary:hover{background:var(--primary2)}.btn.secondary{background:#e9f4ee;color:#155c40}.btn.ghost{background:transparent;color:#385047;border:1px solid var(--line)}
.hidden{display:none!important}.muted{color:var(--muted)}.small{font-size:13px}.error{color:var(--danger);font-weight:700}.welcome-row{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}
.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.summary{background:#fff;border-radius:18px;border:1px solid var(--line);padding:16px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow)}.summary>span{font-size:24px}.summary strong{display:block;font-size:26px}.summary small{color:var(--muted)}
.toolbar{padding:16px;display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.machine-list{display:grid;gap:12px}.machine{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow);cursor:pointer;transition:.15s transform}.machine:hover{transform:translateY(-1px)}.machine-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.machine-title{font-weight:900;font-size:18px}.machine-id{font-size:12px;color:var(--muted);margin-top:2px}.status-pill{border-radius:999px;padding:7px 10px;font-size:12px;font-weight:900;white-space:nowrap}.status-ok{background:#e8f7ef;color:#12603f}.status-warning{background:#fff3d6;color:#805300}.status-error{background:#fdebea;color:#9d2018}.status-offline{background:#e9eceb;color:#38453f}
.bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:14px}.bin{background:#f7faf8;border:1px solid var(--line);padding:11px;border-radius:13px}.bin-row{display:flex;justify-content:space-between;gap:8px;font-size:13px}.bar{height:9px;background:#dfe8e2;border-radius:999px;overflow:hidden;margin-top:8px}.bar>div{height:100%;background:var(--primary);border-radius:999px}.bar.warn>div{background:#d19214}.bar.danger>div{background:#c8352a}.alerts{margin-top:12px;display:grid;gap:7px}.alert{border-left:4px solid #d19214;background:#fff8e7;padding:9px 11px;border-radius:8px;font-size:13px}.alert.critical{border-left-color:#c8352a;background:#fff1f0}
.detail-card{padding:22px;margin-top:12px}.detail-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}.section{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}.section h3{margin:0 0 12px}.event{padding:11px 0;border-bottom:1px solid var(--line)}.event:last-child{border-bottom:0}.event-time{font-size:12px;color:var(--muted)}
.toast{position:fixed;right:18px;bottom:18px;background:#13241c;color:#fff;padding:13px 16px;border-radius:12px;box-shadow:var(--shadow);z-index:20;max-width:360px}
@media(max-width:760px){.summary-grid{grid-template-columns:repeat(2,1fr)}.detail-grid{grid-template-columns:1fr}.topbar{align-items:flex-start}.header-actions{max-width:52%}.btn{padding:10px 12px}.machine-head{align-items:center}.welcome-row{align-items:flex-start;flex-direction:column}}