*{box-sizing:border-box} body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f3f6fb;color:#1f2937}
a{text-decoration:none;color:inherit}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:270px;background:#111827;color:#fff;padding:22px;display:flex;flex-direction:column}
.brand h2{margin:0 0 6px;font-size:24px}
.brand p{margin:0;color:#cbd5e1;font-size:13px}
.nav{margin-top:22px;display:flex;flex-direction:column;gap:8px}
.nav a{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);color:#e5e7eb}
.nav a:hover,.nav a.active{background:#2563eb;color:#fff}
.sidebar-footer{margin-top:auto;padding:14px;border-radius:14px;background:rgba(255,255,255,.06);font-size:13px;line-height:1.5}
.main-content{flex:1;padding:24px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.topbar h1{margin:0 0 6px;font-size:30px}
.topbar p{margin:0;color:#64748b}
.quick-form{display:flex;gap:10px;flex-wrap:wrap}
.quick-form select,.quick-form button,.form-control,.btn{padding:10px 12px;border-radius:10px;border:1px solid #cbd5e1;font-size:14px}
.quick-form button,.btn{background:#2563eb;color:#fff;border:none;cursor:pointer}
.btn.secondary{background:#0f766e}.btn.dark{background:#111827}.btn.warning{background:#b45309}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.hero{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
.card{background:#fff;border-radius:18px;padding:20px;box-shadow:0 8px 24px rgba(15,23,42,.06)}
.card h3{margin:0 0 10px;color:#64748b;font-size:15px}.metric{font-size:30px;font-weight:700}
.badge{display:inline-block;padding:8px 14px;border-radius:999px;color:#fff;font-weight:700}
.table-wrap{overflow:auto} table{width:100%;border-collapse:collapse}
th,td{padding:12px;border-bottom:1px solid #e5e7eb;text-align:left;font-size:14px} th{background:#f8fafc}
.section{margin-bottom:22px}.form-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.form-row .form-control{min-width:180px;background:#fff}
.list-clean{margin:0;padding-left:18px}.success{color:#15803d;font-weight:700}.error{color:#b91c1c;font-weight:700}.muted{color:#64748b}
canvas{width:100% !important;height:320px !important}
.status-on{color:#15803d;font-weight:bold}.status-off{color:#b91c1c;font-weight:bold}
@media (max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}}
@media (max-width:700px){.app-shell{display:block}.sidebar{width:100%}.grid{grid-template-columns:1fr}.main-content{padding:16px}}