*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Noto Naskh Arabic UI','Tahoma',sans-serif;background:#f6f8fb;color:#1a1a1a}
.appbar{background:#1e73be;color:#fff;padding:12px 16px;position:sticky;top:0;z-index:5}
.appbar h1{margin:6px 0 10px;font-size:20px}
.appbar nav{display:flex;gap:8px;flex-wrap:wrap}
.appbar nav button{background:rgba(255,255,255,.15);border:0;color:#fff;padding:8px 10px;border-radius:10px;cursor:pointer}
.appbar nav button.active{background:#fff;color:#1e73be}
main{padding:16px;max-width:1100px;margin:0 auto}
.view{display:none}
.view.visible{display:block}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.card{background:#fff;border:1px solid #e5e9f2;border-radius:14px;padding:14px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.card-title{color:#5b6b7a;margin-bottom:10px}
.last-reading{font-size:22px;font-weight:700}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
button{border:1px solid #cfd8e3;background:#fff;padding:10px 14px;border-radius:10px;cursor:pointer}
button.primary{background:#1e73be;color:#fff;border-color:#1e73be}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.table-wrap{overflow:auto;background:#fff;border:1px solid #e5e9f2;border-radius:12px}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #eef2f7;text-align:right}
tr.alert-row{background:#fff3f1}
.alerts{list-style:none;padding:0;display:grid;gap:10px}
.alerts li{background:#fff;border:1px solid #f3c1b8;border-left:6px solid #e74c3c;padding:12px;border-radius:10px}
.alerts li.ok{border-color:#b9e6c9;border-left-color:#10b981}
#chart{background:#fff;border:1px solid #e5e9f2;border-radius:12px;padding:8px;width:100%}
dialog{border:none;border-radius:14px;box-shadow:0 6px 30px rgba(0,0,0,.2);padding:0}
dialog form{padding:16px;min-width:280px;max-width:420px}
label{display:block;margin:8px 0}
input,select,textarea{width:100%;padding:10px;border:1px solid #cfd8e3;border-radius:10px}
menu{display:flex;justify-content:flex-start;gap:10px;margin:12px 0 0;padding:0}
.footer{padding:16px;color:#6b7c8f;text-align:center}
@media (max-width:700px){.cards{grid-template-columns:1fr}}