*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:#f0f2f5;color:#1a1a1a;min-height:100vh}a{color:#2563eb;text-decoration:none}a:hover{text-decoration:underline}.container{max-width:1200px;margin:0 auto;padding:16px}@media (max-width: 768px){.container{padding:12px}}.card{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;padding:24px;margin-bottom:16px}@media (max-width: 768px){.card{padding:16px}}.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s}.btn-primary{background:#2563eb;color:#fff}.btn-primary:hover{background:#1d4ed8}.btn-danger{background:#dc2626;color:#fff}.btn-danger:hover{background:#b91c1c}.btn-sm{padding:6px 14px;font-size:13px}.btn:disabled{opacity:.5;cursor:not-allowed}.input{width:100%;padding:10px 14px;border:1px solid #d1d5db;border-radius:8px;font-size:15px;outline:none;transition:border .2s}.input:focus{border-color:#2563eb}.form-group{margin-bottom:14px}.form-group label{display:block;font-weight:600;margin-bottom:4px;font-size:14px}.navbar{background:#fff;box-shadow:0 1px 4px #0000000f;padding:12px 24px;display:flex;align-items:center;justify-content:space-between}@media (max-width: 768px){.navbar{padding:10px 16px}}.navbar-title{font-size:22px;font-weight:700;color:#2563eb}@media (max-width: 768px){.navbar-title{font-size:18px}}.navbar-right{display:flex;align-items:center;gap:12px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 14px;border-bottom:1px solid #e5e7eb}th{font-size:13px;font-weight:600;color:#6b7280;text-transform:uppercase}.chart-wrap{width:100%;height:420px}@media (max-width: 768px){.chart-wrap{height:260px}}@media (max-width: 768px){.device-controls{flex-direction:column;align-items:stretch}.device-controls .form-group{width:100%}.device-controls .form-group select{width:100%!important}.device-controls button{width:100%}}.add-device-form{display:flex;gap:10px}@media (max-width: 480px){.add-device-form{flex-direction:column}}.gauges-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-bottom:24px}.tgauge{display:flex;align-items:center;justify-content:center}.tgauge-ring{width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:12px}.tgauge-inner{width:100%;height:100%;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.tgauge-label{font-size:11px;color:#6b7280;text-align:center;line-height:1.2;padding:0 8px}.tgauge-value{font-size:24px;font-weight:700;line-height:1}.tgauge-unit{font-size:12px;font-weight:500;color:#9ca3af;margin-left:2px}.device-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:8px;margin-bottom:4px}.status-pill{display:inline-flex;align-items:center;gap:8px;background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600}.status-dot{width:8px;height:8px;border-radius:50%;background:#10b981;display:inline-block}.text-muted{color:#9ca3af}.sections-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}.section-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px}.section-title{font-size:14px;font-weight:700;color:#0f172a;margin-bottom:10px}.section-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dashed #e2e8f0}.section-item:last-child{border-bottom:none}.section-label{font-size:13px;color:#64748b}.metric-value{font-size:15px;font-weight:600;color:#0f172a}.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}.badge-success{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}.badge-muted{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0}.badge-danger{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}.badge-neutral{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}@media (max-width: 600px){.sections-grid{grid-template-columns:1fr}}