*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f3f5f8;color:#1d2630}.sidebar{position:fixed;left:0;top:0;bottom:0;width:235px;background:#121a25;color:#fff;padding:20px}.sidebar h2{margin:0 0 25px}.sidebar a{display:block;color:#cbd5e1;text-decoration:none;padding:12px;border-radius:8px;margin:6px 0}.sidebar a.active,.sidebar a:hover{background:#2563eb;color:#fff}.main{margin-left:235px;padding:24px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.ptt{background:#dc2626;color:#fff;border:0;border-radius:999px;padding:14px 24px;font-weight:bold;box-shadow:0 6px 20px #0002}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card,.panel{background:white;border-radius:14px;padding:20px;box-shadow:0 8px 24px #0001}.card b{font-size:34px;display:block}.card span{color:#64748b}.grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:16px}table{width:100%;border-collapse:collapse}th,td{text-align:left;border-bottom:1px solid #e5e7eb;padding:12px}.ok{color:#16a34a;font-weight:bold}.warn{background:#fff7ed;border-left:4px solid #f97316;padding:12px}.toolbar{margin-bottom:16px}.btn{display:inline-block;background:#2563eb;color:#fff;border:0;border-radius:8px;padding:10px 14px;text-decoration:none}.status{padding:5px 9px;border-radius:99px;font-size:12px}.online{background:#dcfce7;color:#166534}.offline{background:#fee2e2;color:#991b1b}.mapbox{height:520px;background:linear-gradient(135deg,#dbeafe,#ecfeff);border-radius:14px;position:relative;overflow:hidden}.pin{position:absolute;background:#dc2626;color:#fff;padding:8px 10px;border-radius:999px}.pin:nth-child(1){left:35%;top:40%}.pin:nth-child(2){left:58%;top:55%}.pin:nth-child(3){left:70%;top:30%}input,select,textarea{width:100%;padding:11px;border:1px solid #cbd5e1;border-radius:8px;margin:6px 0 14px}@media(max-width:900px){.sidebar{position:static;width:auto}.main{margin-left:0}.cards,.grid{grid-template-columns:1fr}}