@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Nunito+Sans:wght@400;500;600&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-page:#cfe2f8;--bg-app:#f0f6fc;--bg-card:#fff;--bg-input:#eef3fb;--bg-subtle:#e8f0fa;--blue:#3b82f6;--blue-dark:#1d4ed8;--blue-light:#eff6ff;--blue-mid:#bfdbfe;--text-1:#0f172a;--text-2:#475569;--text-3:#94a3b8;--green:#22c55e;--green-dim:#dcfce7;--red:#ef4444;--red-dim:#fee2e2;--amber:#f59e0b;--amber-dim:#fef3c7;--shadow-sm:0 2px 8px #3b82f61a;--shadow-card:0 2px 16px #0f172a12;--shadow-pop:0 4px 24px #3b82f629;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-pill:100px;--font:"Nunito", sans-serif;--font-body:"Nunito Sans", sans-serif;--header-h:64px;--footer-h:68px}html,body,#root{background:var(--bg-page);height:100%;color:var(--text-1);font-family:var(--font-body);-webkit-font-smoothing:antialiased}button{font-family:var(--font);cursor:pointer;border:none;outline:none}select{font-family:var(--font);outline:none}::-webkit-scrollbar{width:0}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes drawerIn{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulseDot{0%,to{opacity:1}50%{opacity:.3}}.app-shell{background:var(--bg-app);border-radius:32px;flex-direction:column;max-width:430px;min-height:100dvh;margin:0 auto;display:flex;overflow:clip;box-shadow:0 8px 48px #3b82f633}@media (width<=430px){.app-shell{box-shadow:none;border-radius:0}}@media (width>=430px){.app-shell{height:calc(100dvh - 40px);min-height:auto;margin:20px auto}}.app-header{background:var(--bg-card);z-index:50;border-bottom:1px solid #3b82f614;justify-content:space-between;align-items:center;padding:14px 20px;display:flex;position:sticky;top:0}.app-header__greeting{font-family:var(--font);color:var(--text-1);font-size:19px;font-weight:800;line-height:1.2}.app-header__sub{color:var(--text-3);margin-top:1px;font-size:12px}.ws-pill{border-radius:var(--radius-pill);background:var(--bg-subtle);font-family:var(--font);color:var(--text-2);border:1.5px solid #0000;align-items:center;gap:5px;padding:5px 12px;font-size:11px;font-weight:700;transition:all .3s;display:flex}.ws-pill.connected{background:var(--green-dim);color:#15803d;border-color:#bbf7d0}.ws-pill.connecting{background:var(--amber-dim);color:#92400e;border-color:#fde68a;animation:1.3s infinite pulseDot}.ws-pill.disconnected{background:var(--red-dim);color:#991b1b;border-color:#fecaca}.ws-dot{border-radius:50%;flex-shrink:0;width:7px;height:7px}.app-body{padding:14px;padding-bottom:calc(var(--footer-h) + 14px);flex-direction:column;flex:1;gap:10px;display:flex;overflow:visible auto}.clock-bar{background:var(--blue);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);justify-content:space-between;align-items:center;padding:10px 16px;animation:.2s both fadeUp;display:flex}.clock-bar__time{font-family:var(--font);color:#fff;font-size:20px;font-weight:800}.clock-bar__date{color:#ffffffbf;font-size:11.5px;font-weight:500}.section-label{font-family:var(--font);color:var(--text-1);justify-content:space-between;align-items:center;padding:2px 2px 0;font-size:15px;font-weight:800;display:flex}.section-label__count{color:var(--text-3);background:var(--bg-subtle);border-radius:var(--radius-pill);padding:3px 10px;font-size:11px;font-weight:700}.loc-picker{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:14px 16px;animation:.2s both fadeUp}.loc-picker__label{font-family:var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:7px;font-size:10px;font-weight:700}.loc-picker__wrap{position:relative}.loc-picker__select{appearance:none;background:var(--bg-input);border:1.5px solid var(--blue-mid);border-radius:var(--radius-md);width:100%;color:var(--text-1);font-family:var(--font);cursor:pointer;padding:11px 40px 11px 14px;font-size:14px;font-weight:600;transition:border-color .15s,box-shadow .15s}.loc-picker__select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #3b82f626}.loc-picker__chevron{color:var(--blue);pointer-events:none;align-items:center;display:flex;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.device-card{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);border:1.5px solid #3b82f612;transition:border-color .25s,box-shadow .25s;animation:.25s both fadeUp}.device-card--alarm{border-color:#ef44444d;box-shadow:0 2px 16px #ef44441a}.device-card__body{align-items:center;gap:10px;padding:12px 14px;display:flex}.device-card__icon{border-radius:var(--radius-sm);color:#64748b;background:#f8fafc;border:1.5px solid #e2e8f0;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.device-card__info{flex:1;min-width:0}.device-card__name{font-family:var(--font);color:var(--text-1);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:800;line-height:1.3;overflow:hidden}.device-card__meta{flex-wrap:wrap;align-items:center;gap:5px;margin-top:4px;display:flex}.tag{font-family:var(--font);border-radius:var(--radius-pill);padding:2px 7px;font-size:10px;font-weight:700}.tag--topic{background:var(--blue-light);color:var(--blue);font-family:monospace;font-size:10px;font-weight:600}.online-badge{font-family:var(--font);border-radius:var(--radius-pill);align-items:center;gap:3px;padding:2px 7px;font-size:10px;font-weight:700;display:flex}.online-badge--on{background:var(--green-dim);color:#15803d}.online-badge--off{background:var(--red-dim);color:#991b1b}.online-dot{border-radius:50%;flex-shrink:0;width:5px;height:5px}.alarm-state-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px;transition:background .3s,box-shadow .3s}.gempa-row{background:#fff;border-top:1px solid #f1f5f9;align-items:center;gap:8px;padding:8px 14px 10px;display:flex}.mode-switch{background:#f1f5f9;border-radius:20px;flex-shrink:0;gap:2px;padding:3px;display:flex}.mode-switch__btn{font-family:var(--font);color:var(--text-2);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:16px;align-items:center;gap:4px;padding:5px 12px;font-size:12px;font-weight:700;transition:background .15s,color .15s;display:flex}.mode-switch__btn.active{background:var(--blue);color:#fff}.mode-switch__btn.active.silence{background:var(--amber);color:#fff}.activate-btn{background:var(--blue);color:#fff;font-family:var(--font);cursor:pointer;border:none;border-radius:20px;flex:1;justify-content:center;align-items:center;gap:5px;padding:8px 14px;font-size:12px;font-weight:800;transition:background .18s,transform .12s;display:flex;box-shadow:0 2px 8px #3b82f640}.activate-btn:hover{background:var(--blue-dark)}.activate-btn:active{transform:scale(.97)}.activate-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.activate-btn--on{background:var(--red);box-shadow:0 2px 8px #ef444440}.activate-btn--on:hover{background:#dc2626}.map-section{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);border:1.5px solid var(--blue-mid);animation:.3s both fadeUp;overflow:hidden}.map-section__label{font-family:var(--font);color:var(--text-2);border-bottom:1px solid var(--bg-subtle);align-items:center;gap:6px;padding:12px 16px 10px;font-size:12px;font-weight:700;display:flex}.map-frame{height:200px}.map-placeholder{height:160px;color:var(--text-3);flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:16px;display:flex}.map-placeholder span{font-family:var(--font);text-align:center;font-size:12px;font-weight:600}.bottom-bar{width:100%;max-width:430px;height:var(--footer-h);background:var(--bg-card);z-index:50;border-top:1.5px solid #3b82f61a;align-items:center;padding:0 8px;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -4px 20px #3b82f614}.nav-btn{border-radius:var(--radius-md);height:50px;color:var(--text-3);font-family:var(--font);background:0 0;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;font-size:10px;font-weight:700;transition:all .15s;display:flex;position:relative}.nav-btn.active{color:var(--blue)}.nav-btn.active:after{content:"";background:var(--blue);border-radius:50%;width:4px;height:4px;position:absolute;bottom:4px}.nav-btn:hover{background:var(--blue-light)}.nav-btn:active{transform:scale(.92)}.nav-btn__badge{background:var(--red);color:#fff;border-radius:var(--radius-pill);justify-content:center;align-items:center;min-width:16px;height:16px;padding:0 4px;font-size:9px;font-weight:800;display:flex;position:absolute;top:6px;right:calc(50% - 20px)}.drawer-overlay{z-index:200;background:#0f172a66;align-items:flex-end;max-width:430px;display:flex;position:fixed;inset:0 0 0 50%;transform:translate(-50%)}.drawer{background:var(--bg-card);border-radius:24px 24px 0 0;flex-direction:column;width:100%;max-height:72dvh;animation:.25s cubic-bezier(.32,0,.67,0) both drawerIn;display:flex;box-shadow:0 -8px 40px #3b82f61f}.drawer__bar{justify-content:center;padding:10px 0 5px;display:flex}.drawer__handle{background:var(--blue-mid);border-radius:2px;width:36px;height:4px}.drawer__header{border-bottom:1px solid var(--bg-subtle);justify-content:space-between;align-items:center;padding:4px 16px 12px;display:flex}.drawer__title{font-family:var(--font);color:var(--text-1);font-size:15px;font-weight:800}.drawer__actions{gap:7px;display:flex}.drawer__btn{border-radius:var(--radius-pill);font-family:var(--font);background:var(--bg-subtle);color:var(--text-2);border:1.5px solid var(--blue-mid);padding:5px 13px;font-size:11px;font-weight:700;transition:all .12s}.drawer__btn:hover{background:var(--blue-light);color:var(--blue)}.drawer__btn--close{background:var(--blue);color:#fff;border-color:var(--blue)}.drawer__btn--close:hover{background:var(--blue-dark)}.drawer__body{flex-direction:column;flex:1;gap:1px;padding:8px 16px 20px;display:flex;overflow-y:auto}.drawer__empty{color:var(--text-3);text-align:center;padding:16px 0;font-size:13px;font-style:italic}.log-line{gap:10px;padding:1px 0;font-family:monospace;font-size:12px;line-height:1.6;display:flex}.log-line__time{color:var(--text-3);flex-shrink:0}.log-line--info .log-line__text{color:var(--text-2)}.log-line--ok .log-line__text{color:#15803d}.log-line--warn .log-line__text{color:#b45309}.log-line--err .log-line__text{color:var(--red);font-weight:600}.spinner{border:2px solid;border-top-color:#0000;border-radius:50%;width:12px;height:12px;animation:.6s linear infinite spin;display:inline-block}.empty-state{text-align:center;color:var(--text-3);font-family:var(--font);background:var(--bg-card);border-radius:var(--radius-lg);border:1.5px dashed var(--blue-mid);padding:28px 20px;font-size:13px;font-weight:600}.filter-bar{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);flex-direction:column;gap:10px;padding:12px 14px;animation:.25s both fadeUp;display:flex}.filter-radio-group{gap:6px;display:flex}.filter-radio{border-radius:var(--radius-pill);font-family:var(--font);color:var(--text-2);cursor:pointer;background:#f1f5f9;flex:1;justify-content:center;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:700;transition:all .15s;display:flex}.filter-radio input[type=radio]{display:none}.filter-radio.active{background:var(--blue);color:#fff}.filter-cascades{flex-direction:column;gap:8px;display:flex}.filter-select-wrap{position:relative}.filter-select{border-radius:var(--radius-sm);border:1.5px solid var(--blue-mid);background:var(--bg-input);width:100%;font-family:var(--font);color:var(--text-1);appearance:none;cursor:pointer;padding:9px 36px 9px 12px;font-size:13px;font-weight:600;transition:border-color .2s}.filter-select:focus{border-color:var(--blue);outline:none}.filter-chevron{pointer-events:none;color:var(--text-3);position:absolute;top:50%;right:10px;transform:translateY(-50%)}.filter-empty-hint{color:var(--text-3);text-align:center;padding:6px 0;font-size:12px;font-style:italic}.all-table-wrap{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);animation:.25s both fadeUp;overflow:hidden}.all-table-filters{border-bottom:1px solid #f1f5f9;flex-wrap:wrap;gap:6px;padding:10px 12px;display:flex}.all-table-filter-input{border-radius:var(--radius-sm);background:var(--bg-input);min-width:80px;font-family:var(--font);color:var(--text-1);appearance:none;border:1.5px solid #e2e8f0;flex:1;padding:6px 10px;font-size:11px}.all-table-filter-input:focus{border-color:var(--blue);outline:none}.all-table-scroll{max-height:320px;overflow:auto}.all-table{border-collapse:collapse;width:100%;font-family:var(--font);font-size:12px}.all-table thead tr{z-index:1;background:#f8fafc;position:sticky;top:0}.all-table th{text-align:left;color:var(--text-2);letter-spacing:.03em;white-space:nowrap;border-bottom:1.5px solid #e2e8f0;padding:9px 12px;font-size:11px;font-weight:800}.all-table th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.all-table th.sortable:hover{color:var(--blue)}.all-table th svg{vertical-align:middle;margin-left:3px;display:inline}.all-table-row{cursor:pointer;transition:background .12s}.all-table-row:hover{background:#f0f6fc}.all-table td{vertical-align:middle;border-bottom:1px solid #f1f5f9;padding:9px 12px}.all-table-loc{color:var(--text-1);white-space:nowrap;font-weight:700}.all-table-disaster{color:var(--text-2);white-space:nowrap}.all-table-sensor{align-items:center;gap:6px;display:flex}.all-table-sensor-name{color:var(--text-1);font-weight:700}.all-table-online{color:#94a3b8;align-items:center;gap:3px;font-size:10px;font-weight:700;display:flex}.all-table-online.on{color:#15803d}.all-table-dot{background:#cbd5e1;border-radius:50%;flex-shrink:0;width:5px;height:5px}.all-table-online.on .all-table-dot{background:#22c55e}.all-table-empty{text-align:center;color:var(--text-3);padding:24px}.all-table-count{color:var(--text-3);text-align:right;border-top:1px solid #f1f5f9;padding:7px 12px;font-size:11px;font-weight:600}.status-badge{border-radius:var(--radius-pill);white-space:nowrap;padding:2px 9px;font-size:11px;font-weight:800;display:inline-block}.status-badge--normal{color:#15803d;background:#dcfce7}.status-badge--siaga1{color:#92400e;background:#fef3c7}.status-badge--siaga2{color:#991b1b;background:#fee2e2}.status-badge--lg{padding:4px 16px;font-size:15px}.map-page{flex-direction:column;gap:10px;height:100%;display:flex}.map-page__header{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);flex-direction:column;gap:8px;padding:10px 14px;display:flex}.map-page__title{font-family:var(--font);color:var(--text-1);align-items:center;gap:6px;font-size:13px;font-weight:800;display:flex}.map-page__legend{flex-wrap:wrap;gap:8px;display:flex}.map-legend-item{font-family:var(--font);color:var(--text-2);align-items:center;gap:4px;font-size:10px;font-weight:700;display:flex}.map-legend-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.map-page__map{border-radius:var(--radius-md);min-height:400px;box-shadow:var(--shadow-card);flex:1;overflow:hidden}.sensor-detail{flex-direction:column;gap:10px;display:flex}.sensor-detail__back{font-family:var(--font);color:var(--blue);cursor:pointer;background:0 0;border:none;align-items:center;gap:5px;width:fit-content;padding:4px 0;font-size:13px;font-weight:700;display:inline-flex}.sensor-detail__back:hover{text-decoration:underline}.sensor-detail__header-card{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);align-items:center;gap:10px;padding:12px 14px;display:flex}.sensor-detail__icon{flex-shrink:0;font-size:28px}.sensor-detail__info{flex:1;min-width:0}.sensor-detail__name{font-family:var(--font);color:var(--text-1);font-size:15px;font-weight:800}.sensor-detail__loc{color:var(--text-3);align-items:center;gap:3px;margin-top:2px;font-size:11px;display:flex}.sensor-detail__status-card{border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:14px 16px}.sensor-detail__status-card--normal{background:#f0fdf4;border:1.5px solid #bbf7d0}.sensor-detail__status-card--siaga1{background:#fffbeb;border:1.5px solid #fde68a}.sensor-detail__status-card--siaga2{background:#fff1f2;border:1.5px solid #fecdd3}.sensor-detail__status-label{color:var(--text-3);margin-bottom:4px;font-size:11px;font-weight:700}.sensor-detail__status-value{margin-bottom:4px}.sensor-detail__status-desc{color:var(--text-2);font-size:12px}.sensor-detail__grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.sensor-detail__info-card{background:var(--bg-card);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);padding:10px 12px}.sensor-detail__info-label{color:var(--text-3);margin-bottom:3px;font-size:10px;font-weight:700}.sensor-detail__info-value{color:var(--text-1);word-break:break-all;font-size:12px;font-weight:700}.sensor-detail__info-value.mono{font-family:monospace;font-size:11px}.sensor-detail__info-value.text-red{color:var(--red)}.sensor-detail__info-value.text-green{color:var(--green)}.sensor-detail__desc-card{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:12px 14px}.sensor-detail__desc-title{color:var(--text-1);margin-bottom:6px;font-size:12px;font-weight:800}.sensor-detail__desc-body{color:var(--text-2);font-size:12px;line-height:1.6}.sensor-detail__desc-body code{background:#f1f5f9;border-radius:4px;padding:1px 4px;font-family:monospace;font-size:11px}.sensor-detail__map-card{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);overflow:hidden}.sensor-detail__map-title{color:var(--text-2);border-bottom:1px solid #f1f5f9;align-items:center;gap:5px;padding:8px 12px;font-size:11px;font-weight:700;display:flex}.sensor-detail__map-frame{height:180px}.nav-btn__label{font-family:var(--font);margin-top:2px;font-size:10px;font-weight:700;display:block}.nav-btn{flex-direction:column;gap:0}.empty-page{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:60px 20px;display:flex}.empty-page__icon{font-size:40px}.empty-page__title{font-family:var(--font);color:var(--text-1);font-size:16px;font-weight:800}.empty-page__sub{color:var(--text-3);font-size:12px}.sensor-detail__coord-card{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:12px 14px}.sensor-detail__coord-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.sensor-detail__coord-title{color:var(--text-1);align-items:center;gap:5px;font-size:12px;font-weight:800;display:flex}.coord-edit-btn{font-family:var(--font);color:var(--blue);background:var(--blue-light);border-radius:var(--radius-pill);cursor:pointer;border:none;align-items:center;gap:4px;padding:4px 10px;font-size:11px;font-weight:700;transition:background .15s;display:flex}.coord-edit-btn:hover{background:var(--blue-mid)}.coord-display{align-items:center;gap:8px;display:flex}.coord-display__val{color:var(--text-1);font-family:monospace;font-size:13px;font-weight:700}.coord-display__hint{color:var(--text-3);font-size:10px;font-style:italic}.coord-edit-form{flex-direction:column;gap:8px;display:flex}.coord-edit-row{align-items:center;gap:8px;display:flex}.coord-edit-label{font-family:var(--font);color:var(--text-2);flex-shrink:0;width:70px;font-size:11px;font-weight:700}.coord-edit-input{border-radius:var(--radius-sm);border:1.5px solid var(--blue-mid);background:var(--bg-input);color:var(--text-1);flex:1;padding:7px 10px;font-family:monospace;font-size:13px;transition:border-color .2s}.coord-edit-input:focus{border-color:var(--blue);outline:none}.coord-edit-error{color:var(--red);font-size:11px;font-weight:600}.coord-edit-actions{justify-content:flex-end;gap:8px;margin-top:2px;display:flex}.coord-btn{font-family:var(--font);border-radius:var(--radius-pill);cursor:pointer;border:none;align-items:center;gap:4px;padding:7px 16px;font-size:12px;font-weight:700;transition:all .15s;display:flex}.coord-btn--cancel{color:var(--text-2);background:#f1f5f9}.coord-btn--cancel:hover{background:#e2e8f0}.coord-btn--save{background:var(--blue);color:#fff;box-shadow:var(--shadow-sm)}.coord-btn--save:hover{background:var(--blue-dark)}.coord-btn:disabled{opacity:.55;cursor:not-allowed}.all-table-keterangan{color:var(--text-2);max-width:120px;font-size:12px}.csel{width:100%;position:relative}.csel__trigger{border-radius:var(--radius-sm);border:1.5px solid var(--blue-mid);background:var(--bg-input);width:100%;font-family:var(--font);color:var(--text-1);cursor:pointer;text-align:left;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;font-size:13px;font-weight:600;transition:border-color .2s;display:flex}.csel__trigger:focus,.csel__trigger--open{border-color:var(--blue);outline:none}.csel__value{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.csel__placeholder{color:var(--text-3)}.csel__chevron{color:var(--text-3);flex-shrink:0;transition:transform .2s}.csel__chevron--up{transform:rotate(180deg)}.csel__panel{background:var(--bg-card);border:1.5px solid var(--blue-mid);border-radius:var(--radius-md);max-height:240px;overflow-y:auto;box-shadow:0 8px 32px #0f172a33}.csel__item{text-align:left;width:100%;font-family:var(--font);color:var(--text-1);cursor:pointer;background:0 0;border:none;border-bottom:1px solid #f1f5f9;padding:11px 14px;font-size:13px;font-weight:600;transition:background .12s;display:block}.csel__item:last-child{border-bottom:none}.csel__item:hover{background:var(--blue-light);color:var(--blue)}.csel__item--active{background:var(--blue-light);color:var(--blue);font-weight:800}.device-card__right{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:6px;display:flex}.device-card__detail-btn{border-radius:var(--radius-pill);background:var(--blue-light);color:var(--blue);border:1px solid var(--blue-mid);font-family:var(--font);cursor:pointer;white-space:nowrap;align-items:center;gap:3px;padding:3px 8px;font-size:10px;font-weight:800;transition:background .15s;display:flex}.device-card__detail-btn:hover{background:var(--blue-mid)}.login-shell{background:var(--bg-page);justify-content:center;align-items:center;min-height:100dvh;padding:20px;display:flex}.login-card{background:var(--bg-card);border-radius:24px;flex-direction:column;gap:28px;width:100%;max-width:380px;padding:36px 28px;display:flex;box-shadow:0 8px 48px #3b82f633}.login-brand{flex-direction:column;align-items:center;gap:6px;display:flex}.login-brand__icon{font-size:48px;line-height:1}.login-brand__name{font-family:var(--font);color:var(--text-1);font-size:24px;font-weight:900}.login-brand__sub{color:var(--text-3);font-size:12px;font-weight:500}.login-form{flex-direction:column;gap:16px;display:flex}.login-field{flex-direction:column;gap:6px;display:flex}.login-label{font-family:var(--font);color:var(--text-2);font-size:12px;font-weight:800}.login-input-wrap{align-items:center;display:flex;position:relative}.login-input-icon{color:var(--text-3);pointer-events:none;flex-shrink:0;position:absolute;left:12px}.login-input{border:1.5px solid var(--blue-mid);border-radius:var(--radius-sm);background:var(--bg-input);width:100%;font-family:var(--font);color:var(--text-1);padding:11px 40px;font-size:14px;font-weight:600;transition:border-color .2s}.login-input:focus{border-color:var(--blue);outline:none}.login-eye-btn{color:var(--text-3);cursor:pointer;background:0 0;border:none;align-items:center;padding:4px;display:flex;position:absolute;right:12px}.login-eye-btn:hover{color:var(--blue)}.login-error{background:var(--red-dim);color:#991b1b;border-radius:var(--radius-sm);border:1px solid #fecaca;align-items:center;gap:6px;padding:9px 12px;font-size:12px;font-weight:700;display:flex}.login-btn{border-radius:var(--radius-sm);background:var(--blue);color:#fff;font-family:var(--font);cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;margin-top:4px;padding:13px;font-size:14px;font-weight:800;transition:background .18s,transform .12s;display:flex;box-shadow:0 4px 16px #3b82f64d}.login-btn:hover{background:var(--blue-dark)}.login-btn:active{transform:scale(.98)}.login-btn:disabled{opacity:.6;cursor:not-allowed}.login-footer{text-align:center;color:var(--text-3);margin-top:-8px;font-size:11px}.logout-btn{background:var(--red-dim);color:#991b1b;cursor:pointer;border:1px solid #fecaca;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;transition:background .15s;display:flex}.logout-btn:hover{background:#fecaca}.app-header__right{align-items:center;gap:8px;display:flex}.readings-card{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);flex-direction:column;gap:10px;padding:12px 14px;display:flex}.readings-header{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.readings-title{font-family:var(--font);color:var(--text-1);font-size:13px;font-weight:800}.readings-updated{color:var(--text-3);font-size:10px}.readings-loading{color:var(--text-3);align-items:center;gap:8px;padding:8px 0;font-size:12px;display:flex}.readings-grid{flex-direction:column;gap:8px;display:flex}.readings-item{border-radius:var(--radius-sm);background:#f8fafc;border:1.5px solid #e2e8f0;align-items:flex-start;gap:10px;padding:10px 12px;display:flex;position:relative}.readings-item--warn{background:#fffbeb;border-color:#fde68a}.readings-item--danger{background:#fff1f2;border-color:#fecdd3}.readings-item__icon{flex-shrink:0;margin-top:2px;font-size:20px;line-height:1}.readings-item__body{flex:1;min-width:0}.readings-item__label{color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;font-size:10px;font-weight:700}.readings-item__value{align-items:baseline;gap:4px;margin:2px 0;display:flex}.readings-item__num{font-family:var(--font);color:var(--text-1);font-size:22px;font-weight:900;line-height:1}.readings-item__unit{color:var(--text-3);font-size:11px;font-weight:700}.readings-item__desc{color:var(--text-3);margin-top:1px;font-size:10px}.readings-item__placeholder{color:var(--text-3);padding:4px 0;font-size:12px;font-style:italic}.readings-item__badge{border-radius:var(--radius-pill);padding:2px 7px;font-size:10px;font-weight:800;position:absolute;top:8px;right:8px}.readings-item__badge--warn{color:#92400e;background:#fef3c7}.readings-item__badge--danger{color:#991b1b;background:#fee2e2}.readings-common{border-top:1px solid #f1f5f9;flex-wrap:wrap;gap:8px;padding-top:8px;display:flex}.readings-common-item{color:var(--text-2);border-radius:var(--radius-pill);background:#f1f5f9;align-items:center;gap:5px;padding:3px 9px;font-size:11px;font-weight:600;display:flex}.readings-common-val{color:var(--text-1);font-weight:800}.readings-empty{text-align:center;color:var(--text-2);padding:12px;font-size:12px;line-height:1.6}.readings-empty__hint{color:var(--text-3);font-size:11px}.report-page{flex-direction:column;gap:10px;display:flex}.report-summary{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.report-sum-card{border-radius:var(--radius-md);text-align:center;box-shadow:var(--shadow-sm);padding:12px 10px}.report-sum-card--blue{background:#dbeafe}.report-sum-card--red{background:#fee2e2}.report-sum-card--green{background:#dcfce7}.report-sum-val{font-family:var(--font);color:var(--text-1);font-size:26px;font-weight:900}.report-sum-label{color:var(--text-2);margin-top:2px;font-size:10px;font-weight:700}.report-filters{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);flex-wrap:wrap;gap:6px;padding:10px 12px;display:flex}.report-refresh-btn{border-radius:var(--radius-sm);background:var(--blue);color:#fff;font-family:var(--font);cursor:pointer;white-space:nowrap;border:none;align-items:center;gap:5px;padding:6px 12px;font-size:11px;font-weight:700;display:flex}.report-refresh-btn:disabled{opacity:.5;cursor:not-allowed}.report-loading,.report-empty{text-align:center;color:var(--text-3);background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);flex-direction:column;align-items:center;gap:4px;padding:40px 20px;font-size:13px;display:flex}.report-list{flex-direction:column;gap:8px;display:flex}.report-event{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);border-left:4px solid #e2e8f0;flex-direction:column;gap:8px;padding:12px 14px;display:flex}.report-event--alert{border-left-color:var(--red)}.report-event--handled{border-left-color:var(--green);opacity:.85}.report-event__header{justify-content:space-between;align-items:center;gap:8px;display:flex}.report-event__title{font-family:var(--font);align-items:center;gap:6px;display:flex}.report-event__icon{font-size:18px}.report-event__name{color:var(--text-1);font-size:14px;font-weight:800}.report-event__meta{color:var(--text-2);flex-wrap:wrap;gap:8px;font-size:11px;font-weight:600;display:flex}.report-event__values{flex-wrap:wrap;gap:5px;display:flex}.report-event__val-chip{border-radius:var(--radius-pill);color:var(--text-2);background:#f1f5f9;padding:2px 9px;font-size:11px}.report-event__handled-info{color:#15803d;border-radius:var(--radius-sm);background:#dcfce7;padding:5px 9px;font-size:11px}.report-event__handle-btn{border-radius:var(--radius-pill);background:var(--blue);color:#fff;font-family:var(--font);cursor:pointer;border:none;align-self:flex-start;align-items:center;gap:5px;padding:6px 14px;font-size:11px;font-weight:800;transition:background .15s;display:flex}.report-event__handle-btn:hover{background:var(--blue-dark)}.report-event__handle-btn:disabled{opacity:.5;cursor:not-allowed}.card-sensor-values{flex-wrap:wrap;gap:4px;margin-top:5px;display:flex}.card-sensor-chip{border-radius:var(--radius-pill);white-space:nowrap;align-items:center;gap:2px;padding:1px 7px;font-size:10px;font-weight:600;display:inline-flex}.card-sensor-chip strong{font-weight:800}.card-sensor-chip--ok{color:var(--text-2);background:#f1f5f9}.card-sensor-chip--warn{color:#92400e;background:#fef3c7}.card-sensor-chip--danger{color:#991b1b;background:#fee2e2}