:root{
  --bg:#f4f6f9;
  --card:#ffffff;
  --text:#1f2d3d;
  --muted:#6b7a90;
  --border:#e6ebf2;
  --primary:#2f80ed;
  --sidebar:#1f2d3d;
  --sidebarHover:#2c3e50;
  --shadow:0 10px 25px rgba(0,0,0,.06);
  --radius:12px;
}
*{box-sizing:border-box;}
body{margin:0;font-family:Segoe UI, Arial, sans-serif;color:var(--text);background:var(--bg);}
.layout{display:flex;min-height:100vh;}
.sidebar{width:260px;background:var(--sidebar);color:#fff;padding:22px 18px;display:flex;flex-direction:column;}
.brand{padding:6px 10px 18px 10px;}
.brand-title{font-weight:700;letter-spacing:.2px;font-size:18px;}
.brand-sub{opacity:.75;margin-top:4px;font-size:13px;}
.nav{display:flex;flex-direction:column;gap:6px;padding:8px;}
.nav-item{color:#cfd8e3;text-decoration:none;padding:10px 12px;border-radius:10px;transition:.15s;}
.nav-item:hover{background:var(--sidebarHover);color:#fff;}
.nav-item.active{background:var(--primary);color:#fff;}
.nav-sep{margin:14px 10px 6px;color:#9fb0c6;font-size:12px;text-transform:uppercase;letter-spacing:.08em;}
.logout{margin-top:auto;padding:10px;}
.main{flex:1;display:flex;flex-direction:column;}
.topbar{height:64px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 22px;}
.crumb{font-weight:600;color:#334a63;}
.user-chip{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.user-name{font-weight:700;}
.user-role{font-size:12px;color:var(--muted);}
.content{padding:26px;}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:18px;}
.card-title{font-weight:700;margin-bottom:12px;}
.grid{display:grid;gap:16px;margin-bottom:18px;}
.grid-3{grid-template-columns:repeat(3, minmax(0, 1fr));}
@media (max-width: 980px){ .grid-3{grid-template-columns:1fr;} .sidebar{width:220px;} }
.kpi .kpi-label{font-size:13px;color:var(--muted);}
.kpi .kpi-value{font-size:28px;font-weight:800;margin-top:6px;}
.kpi .kpi-sub{font-size:12px;color:var(--muted);margin-top:6px;}
.table{width:100%;border-collapse:separate;border-spacing:0;}
.table thead th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#51677f;background:#f1f3f8;padding:12px;border-bottom:1px solid var(--border);}
.table tbody td{padding:12px;border-bottom:1px solid #eef2f7;}
.table tbody tr:hover{background:#f8fafc;}
.muted{color:var(--muted);text-align:center;padding:14px;}
.btn{border:1px solid transparent;border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:700;letter-spacing:.2px;transition:.15s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{filter:brightness(.95);}
.btn-secondary{background:#e8f0ff;color:#1c60c7;border-color:#d5e4ff;}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.2);}
.btn-ghost:hover{background:rgba(255,255,255,.08);}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0;}
.btn-success{background:#27ae60;color:#fff;}
.btn-warning{background:#f2c94c;color:#1f2d3d;}
.btn-info{background:#56ccf2;color:#1f2d3d;}
.btn-danger{background:#eb5757;color:#fff;}
.btn-success:hover,.btn-warning:hover,.btn-info:hover,.btn-danger:hover{filter:brightness(.96);}
.btn:disabled{
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.2);
}
.actions{display:flex;flex-wrap:wrap;gap:10px;}
.alert{padding:10px 12px;border-radius:10px;margin:10px 0;font-weight:600;}
.alert-danger{background:#ffe9e9;border:1px solid #ffc2c2;color:#a11b1b;}
.form{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
label{font-size:13px;color:#39506a;font-weight:700;}
input, select{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.hint{margin-top:10px;color:var(--muted);font-size:12px;}
.progress{height:10px;background:#e5edf7;border-radius:999px;overflow:hidden;}
.progress-fill{height:100%;background:var(--primary);width:0%;}
.pos{color:#27ae60;font-weight:800;}
.neg{color:#eb5757;font-weight:800;}
.auth-body{display:flex;min-height:100vh;align-items:center;justify-content:center;background:var(--bg);}
.auth-card{width:420px;max-width:92vw;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:22px;}
.auth-title{font-size:22px;font-weight:900;}
.auth-sub{color:var(--muted);margin-top:6px;}
.auth-footer{margin-top:14px;color:var(--muted);}
.auth-footer a{color:var(--primary);text-decoration:none;font-weight:800;}
.statusbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.status-left{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}

.status-right{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.2px;
  width:fit-content;
  border:1px solid var(--border);
  background:#f6f8fb;
  color:#2b3d52;
}

.status-pill.on{
  background:#e8f0ff;
  border-color:#d5e4ff;
  color:#1c60c7;
}

.status-pill.warn{
  background:#fff6dd;
  border-color:#ffe7a6;
  color:#8a6b00;
}

.status-pill.ok{
  background:#eafff1;
  border-color:#bff0d0;
  color:#1b7a3a;
}

.status-pill.off{
  background:#f1f3f8;
  border-color:#e6ebf2;
  color:#51677f;
}

.status-text{
  color:#334a63;
  line-height:1.45;
}

.mini-kpi{
  background:#f6f8fb;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  min-width:110px;
  text-align:right;
}

.mini-kpi-label{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.mini-kpi-value{
  margin-top:6px;
  font-size:18px;
  font-weight:900;
}

.progress-row{
  margin:10px 0 12px 0;
}

.progress-label{
  font-size:12px;
  color:var(--muted);
  margin-bottom:8px;
  font-weight:700;
}

.time-chips{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:8px;
}

@media (max-width: 980px){
  .time-chips{grid-template-columns:1fr;}
  .statusbar{flex-direction:column;}
  .status-right{width:100%; justify-content:flex-start;}
}

.chip{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
}

.chip-label{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.chip-value{
  margin-top:8px;
  font-size:18px;
  font-weight:900;
  color:#1f2d3d;
}

.card-sep{
  height:1px;
  background:var(--border);
  margin:16px 0;
}