:root{font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,SF Pro Display,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.4;color-scheme:light;--bg-body: #f8fafc;--bg-card: #ffffff;--bg-subtle: #f1f5f9;--bg-badge-green: #eefdf4;--text-main: #0b192c;--text-navy: #0f172a;--text-muted: #64748b;--text-subtle: #94a3b8;--blue-primary: #2563eb;--blue-hover: #1d4ed8;--blue-light: #eff6ff;--color-success: #16a34a;--color-danger: #dc2626;--color-amber: #d97706;--border-card: #e2e8f0;--border-subtle: #f1f5f9;--shadow-card: 0 4px 20px rgba(15, 23, 42, .03);--nav-height: 68px}*{margin:0;padding:0;box-sizing:border-box}body{background-color:#f1f5f9;color:var(--text-main);min-height:100vh;-webkit-font-smoothing:antialiased}.app-container{display:flex;justify-content:center;align-items:flex-start;min-height:100vh;background-color:#e2e8f0}.mobile-shell{width:100%;max-width:412px;min-height:100vh;background-color:#f8fafc;display:flex;flex-direction:column;position:relative;box-shadow:0 0 40px #0f172a14;padding-bottom:calc(var(--nav-height) + 24px)}.mobile-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;background:#fff;border-bottom:1px solid #f1f5f9}.mobile-header__brand{display:flex;align-items:center;gap:10px}.mobile-header__logo{display:flex;align-items:center;justify-content:center}.mobile-header__titles{display:flex;flex-direction:column}.mobile-header__title{font-size:1.25rem;font-weight:800;color:#0f172a;letter-spacing:-.02em}.mobile-header__subtitle{font-size:.78rem;font-weight:500;color:#64748b}.mobile-header__actions{display:flex;align-items:center;gap:10px}.icon-btn{position:relative;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.icon-btn-plain{background:transparent;border:none;cursor:pointer;padding:4px}.icon-btn-bordered{background:#fff;border:1px solid #e2e8f0;border-radius:10px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer}.date-pill-dropdown{background:#eff6ff;color:#2563eb;padding:8px 14px;border-radius:10px;font-size:.85rem;font-weight:700;display:flex;align-items:center;gap:6px;cursor:pointer}.notification-dot{position:absolute;top:1px;right:1px;width:8px;height:8px;background-color:#ef4444;border:1.5px solid #ffffff;border-radius:50%}.user-avatar{width:34px;height:34px;border-radius:50%;background-color:#e0f2fe;color:#0284c7;font-weight:800;font-size:.95rem;display:flex;align-items:center;justify-content:center}.page-sub-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff;border-bottom:1px solid #f1f5f9}.header-back-btn{background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px}.header-page-title-group{display:flex;flex-direction:column;align-items:center;text-align:center}.header-page-title{font-size:1.15rem;font-weight:800;color:#0f172a}.header-page-sub{font-size:.75rem;color:#64748b}.header-action-save-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:6px 14px;font-size:.85rem;font-weight:700;cursor:pointer}.mobile-main{flex:1;padding:16px}.tab-container{display:flex;flex-direction:column;gap:16px}.hero-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:22px 18px;box-shadow:0 4px 16px #0f172a08;display:flex;flex-direction:column;gap:20px}.hero-card__split{display:grid;grid-template-columns:1fr 130px;gap:12px;align-items:center}.hero-card__left{display:flex;flex-direction:column;align-items:flex-start}.hero-card__label{font-size:.88rem;font-weight:700;color:#334155}.hero-card__value{font-size:4rem;font-weight:900;color:#0b192c;line-height:1;letter-spacing:-.04em;margin:4px 0 2px}.hero-card__value--full{font-size:3.2rem;color:#16a34a}.hero-card__sub{font-size:.88rem;font-weight:600;color:#475569;margin-bottom:14px}.status-badge-card{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;width:100%}.status-badge--normal,.status-badge--full{background-color:#eefdf4}.status-badge--low{background-color:#fffbeb}.status-badge--high{background-color:#fef2f2}.status-badge-card__dot{width:10px;height:10px;border-radius:50%;background-color:#16a34a;flex-shrink:0}.status-badge-card__text{display:flex;flex-direction:column;text-align:left}.status-badge-card__title{font-size:.82rem;font-weight:800;color:#15803d}.status-badge-card__desc{font-size:.72rem;font-weight:500;color:#475569}.tank-illustration-wrapper{display:flex;align-items:center;gap:8px;justify-content:center}.tank-illustration{width:90px;height:145px;position:relative;display:flex;flex-direction:column;align-items:center}.tank-cap{width:20px;height:6px;background:#94a3b8;border-radius:2px 2px 0 0}.tank-neck{width:32px;height:6px;background:#cbd5e1}.tank-body{width:90px;height:133px;border:3px solid #64748b;border-radius:16px 16px 20px 20px;position:relative;background:#fff;overflow:hidden;box-shadow:inset 0 0 10px #0000000a}.tank-glare{position:absolute;top:0;left:6px;width:12px;height:100%;background:linear-gradient(90deg,#fffc,#fff0);z-index:3}.tank-water{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#60a5fa,#2563eb);transition:height .6s ease-out}.tank-water--full{background:linear-gradient(180deg,#4ade80,#16a34a)}.tank-ruler{height:133px;display:flex;flex-direction:column;justify-content:space-between;position:relative}.ruler-mark{display:flex;align-items:center;gap:4px}.ruler-mark--middle{position:absolute;left:0;transition:bottom .6s ease-out}.ruler-line{width:8px;height:1px;background-color:#94a3b8}.ruler-text{font-size:.68rem;font-weight:600;color:#64748b;white-space:nowrap}.hero-metrics{background-color:#f8fafc;border-radius:14px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}.hero-metric-card{flex:1;display:flex;align-items:center;gap:12px}.hero-metric-card__divider{width:1px;height:32px;background-color:#e2e8f0;margin:0 8px}.hero-metric-card__icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center}.hero-metric-card__icon--blue{background-color:#e0f2fe;color:#0284c7}.hero-metric-card__icon--blue-alt{background-color:#eff6ff;color:#2563eb}.hero-metric-card__data{display:flex;flex-direction:column}.hero-metric-card__val{font-size:.95rem;font-weight:800;color:#0f172a}.hero-metric-card__lbl{font-size:.72rem;font-weight:600;color:#64748b}.check-now-wrapper{display:flex;flex-direction:column;gap:10px}.btn-check-now-primary{width:100%;padding:14px;border-radius:14px;border:none;background:linear-gradient(180deg,#2563eb,#1d4ed8);color:#fff;font-size:.95rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 12px #2563eb40;transition:opacity .15s ease}.btn-check-now-primary:hover{opacity:.95}.btn-check-now-primary:disabled{opacity:.7;cursor:not-allowed}.spin-icon{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.check-now-timestamp{display:flex;align-items:flex-start;gap:8px;padding:0 4px;color:#64748b}.check-now-timestamp svg{margin-top:2px;flex-shrink:0}.check-now-timestamp__text{display:flex;flex-direction:column;font-size:.78rem}.check-now-timestamp__label{color:#64748b;font-weight:500}.check-now-timestamp__val{color:#334155;font-weight:600}.form-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:18px 16px;box-shadow:0 4px 16px #0f172a08;display:flex;flex-direction:column;gap:14px}.form-card.align-center{align-items:center;text-align:center}.form-card-head{display:flex;align-items:center;gap:10px}.form-card-head.justify-between{justify-content:space-between}.form-card-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.form-card-icon--blue{background-color:#eff6ff;color:#2563eb}.form-card-icon--blue-alt{background-color:#e0f2fe;color:#0284c7}.form-card-icon--purple{background-color:#f5f3ff;color:#7c3aed}.form-card-title{font-size:1.05rem;font-weight:800;color:#0f172a}.form-card-sub{font-size:.78rem;color:#64748b}.form-field{display:flex;flex-direction:column;gap:4px}.label-with-info{display:flex;align-items:center;gap:6px}.form-label{font-size:.85rem;font-weight:700;color:#0f172a}.form-input{width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:10px;font-size:.92rem;font-weight:600;color:#0f172a;background:#f8fafc;outline:none}.form-input:focus{border-color:#2563eb;background:#fff}.input-with-unit{display:flex;align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.input-with-unit .form-input{border:none;background:transparent}.unit-badge{padding:0 12px;font-size:.85rem;font-weight:700;color:#64748b;background:#f1f5f9;height:100%;display:flex;align-items:center}.form-helper{font-size:.72rem;color:#64748b}.form-card-split-measurements{display:grid;grid-template-columns:1fr 120px;gap:12px;align-items:center}.measurements-inputs{display:flex;flex-direction:column;gap:12px}.tank-diagram-box{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f8fafc;border-radius:14px;padding:12px 6px;position:relative}.tank-diagram-sensor-label{font-size:.65rem;font-weight:800;color:#0f172a;margin-bottom:2px}.tank-diagram-svg{width:50px;height:80px;display:flex;flex-direction:column;align-items:center}.tank-diagram-cap{width:14px;height:4px;background:#64748b;border-radius:2px 2px 0 0}.tank-diagram-body{width:48px;height:74px;border:2px solid #64748b;border-radius:8px 8px 12px 12px;position:relative;background:#fff;overflow:hidden}.tank-diagram-fluid{position:absolute;left:0;right:0;bottom:0;background:#60a5fa}.tank-diagram-height-indicator{display:flex;flex-direction:column;align-items:center;font-size:.65rem;font-weight:700;color:#334155;margin-top:4px}.height-text{font-weight:800;color:#0f172a}.height-sub{font-size:.58rem;color:#64748b}.form-grid-dual{display:grid;grid-template-columns:1fr 1fr;gap:10px}.btn-primary-large{width:100%;padding:14px;border-radius:14px;border:none;background:linear-gradient(180deg,#2563eb,#1d4ed8);color:#fff;font-size:.95rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 12px #2563eb40;margin-top:6px}.btn-primary-large:disabled{opacity:.7}.tank-setup-content-form{display:flex;flex-direction:column;gap:16px}.device-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;background:#fff;border-bottom:1px solid #f1f5f9}.device-header-title{font-size:1.25rem;font-weight:800;color:#0f172a}.device-header-subtitle{font-size:.78rem;color:#64748b}.device-content-cards{display:flex;flex-direction:column;gap:16px}.device-overview-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:18px 16px;box-shadow:0 4px 16px #0f172a08;display:flex;flex-direction:column;gap:16px}.device-overview-top{display:flex;align-items:flex-start;justify-content:space-between}.device-chip-group{display:flex;align-items:center;gap:12px}.device-chip-icon{width:42px;height:42px;border-radius:12px;background-color:#eff6ff;display:flex;align-items:center;justify-content:center}.device-chip-text{display:flex;flex-direction:column}.device-chip-title{font-size:1.1rem;font-weight:800;color:#0f172a}.device-chip-sub{font-size:.78rem;color:#64748b}.device-chip-date{font-size:.72rem;color:#94a3b8}.device-online-pill{display:flex;align-items:center;gap:6px;background:#eefdf4;padding:6px 12px;border-radius:12px}.device-online-pill-text{display:flex;flex-direction:column}.device-online-state{font-size:.82rem;font-weight:800;color:#16a34a}.device-online-time{font-size:.65rem;color:#475569}.device-quick-grid{display:grid;grid-template-columns:repeat(4,1fr);background:#f8fafc;border-radius:14px;padding:12px 6px;gap:4px}.quick-grid-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}.quick-grid-icon{font-size:1.1rem}.quick-grid-text{display:flex;flex-direction:column}.quick-grid-val{font-size:.78rem;font-weight:800;color:#0f172a}.quick-grid-lbl{font-size:.65rem;color:#64748b}.info-rows-group{display:flex;flex-direction:column}.info-row-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f8fafc;font-size:.85rem}.info-row-item:last-child{border-bottom:none}.info-lbl{color:#64748b;font-weight:500}.info-val{color:#0f172a;font-weight:700}.info-val-action{display:flex;align-items:center;gap:6px}.info-action-btn{background:transparent;border:none;color:#64748b;cursor:pointer;display:flex;align-items:center}.connection-stable-badge{font-size:.75rem;font-weight:800;color:#16a34a;background:#eefdf4;padding:3px 8px;border-radius:6px;margin-left:auto}.actions-dual-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.action-tile-btn{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:12px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;cursor:pointer;text-align:left}.action-tile-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center}.action-tile-icon--blue{background-color:#eff6ff;color:#2563eb}.action-tile-text{display:flex;flex-direction:column}.action-tile-title{font-size:.85rem;font-weight:800;color:#0f172a}.action-tile-sub{font-size:.68rem;color:#64748b}.action-remove-btn{width:100%;background:#fef2f2;border:1px solid #fecaca;border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;margin-top:4px}.action-remove-title{font-size:.88rem;font-weight:800;color:#dc2626}.action-remove-sub{font-size:.72rem;color:#ef4444}.check-now-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a66;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;display:flex;justify-content:center}.check-now-modal-shell{width:100%;max-width:412px;height:100vh;background:#f8fafc;display:flex;flex-direction:column;overflow-y:auto}.check-now-modal-body{padding:16px;display:flex;flex-direction:column;gap:16px}.check-now-device-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between}.check-now-gauge-wrapper{position:relative;width:100px;height:100px;margin:10px auto}.check-now-gauge-svg{width:100%;height:100%;transform:rotate(-90deg)}.check-now-gauge-progress{transition:stroke-dashoffset .8s ease}.check-now-gauge-icon{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.check-now-title{font-size:1.15rem;font-weight:800;color:#0f172a}.check-now-subtitle{font-size:.78rem;color:#64748b}.check-now-steps{width:100%;display:flex;flex-direction:column;gap:12px;margin:12px 0}.check-now-step-row{display:flex;align-items:center;gap:12px;opacity:.5}.check-now-step-row.step--done,.check-now-step-row.step--active{opacity:1}.step-icon-circle{width:26px;height:26px;border-radius:50%;border:2px solid #cbd5e1;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;color:#cbd5e1;flex-shrink:0}.step--done .step-icon-circle{background-color:#2563eb;border-color:#2563eb;color:#fff}.step-text{display:flex;flex-direction:column;text-align:left}.step-title{font-size:.88rem;font-weight:800;color:#0f172a}.step-sub{font-size:.72rem;color:#64748b}.last-reading-split{display:grid;grid-template-columns:80px 1fr;gap:16px;align-items:center}.last-reading-info{display:flex;flex-direction:column;gap:6px}.last-reading-pct-row{display:flex;align-items:center;gap:8px}.last-reading-pct{font-size:1.8rem;font-weight:900;color:#0f172a}.status-badge-mini{font-size:.72rem;font-weight:700;color:#16a34a;background:#eefdf4;padding:2px 8px;border-radius:6px}.last-reading-metrics{display:flex;flex-direction:column;font-size:.78rem;color:#64748b}.last-reading-duals{display:flex;gap:12px;font-size:.72rem;color:#334155;margin-top:4px}.btn-cancel-light{width:100%;padding:14px;border-radius:14px;border:none;background:#eff6ff;color:#2563eb;font-size:.95rem;font-weight:800;cursor:pointer}.margin-top-sm{margin-top:8px}.width-full{width:100%}.history-tab-view{display:flex;flex-direction:column;gap:16px}.history-card-section{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:18px 16px;box-shadow:0 4px 16px #0f172a08;display:flex;flex-direction:column;gap:14px}.history-card-titles{display:flex;flex-direction:column}.history-card-main-title{font-size:1.15rem;font-weight:800;color:#0f172a}.history-card-subtitle{font-size:.82rem;color:#64748b;margin-top:2px}.history-card-pills{display:flex;background:#f1f5f9;padding:4px;border-radius:12px;gap:4px}.pill-btn{flex:1;padding:8px 12px;border:none;background:transparent;font-size:.82rem;font-weight:700;color:#64748b;border-radius:8px;cursor:pointer}.pill-btn--active{background:#2563eb;color:#fff;box-shadow:0 2px 6px #2563eb33}.history-chart-wrapper{display:flex;gap:8px;align-items:stretch}.chart-y-axis{display:flex;flex-direction:column;justify-content:space-between;font-size:.68rem;font-weight:600;color:#94a3b8;padding-bottom:20px}.chart-svg-area{flex:1;display:flex;flex-direction:column;position:relative}.chart-tooltip-box{position:absolute;transform:translate(-50%,-125%);background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:4px 10px;display:flex;flex-direction:column;align-items:center;box-shadow:0 4px 12px #0f172a14;pointer-events:none;z-index:10}.chart-tooltip-pct{font-size:.88rem;font-weight:900;color:#0f172a;line-height:1.1}.chart-tooltip-time{font-size:.65rem;font-weight:600;color:#64748b}.chart-tooltip-arrow{position:absolute;bottom:-5px;left:50%;transform:translate(-50%) rotate(45deg);width:8px;height:8px;background:#fff;border-right:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0}.area-chart-svg{width:100%;height:120px;overflow:visible}.chart-grid-line{stroke:#f1f5f9;stroke-width:1;stroke-dasharray:3 3}.chart-x-axis{display:flex;justify-content:space-between;font-size:.68rem;font-weight:600;color:#94a3b8;padding-top:4px}.history-quad-metrics{display:flex;align-items:center;justify-content:space-around;padding-top:14px;border-top:1px solid #f1f5f9}.quad-metric-item{display:flex;flex-direction:column;align-items:center}.quad-metric-val{font-size:1.1rem;font-weight:900;color:#0f172a}.quad-metric-lbl{font-size:.7rem;font-weight:600;color:#64748b}.quad-metric-divider{width:1px;height:24px;background-color:#e2e8f0}.recent-readings-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:18px 16px;box-shadow:0 4px 16px #0f172a08;display:flex;flex-direction:column;gap:12px}.recent-readings-head{display:flex;align-items:center;justify-content:space-between}.recent-readings-title{font-size:1.05rem;font-weight:800;color:#0f172a}.recent-readings-link{background:transparent;border:none;color:#2563eb;font-size:.82rem;font-weight:700;cursor:pointer}.readings-table{display:flex;flex-direction:column}.reading-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f8fafc}.reading-row:last-child{border-bottom:none}.reading-col{font-size:.85rem}.reading-time{color:#64748b;font-weight:500;width:80px}.reading-pct{color:#0f172a;font-weight:800;width:50px}.reading-status{display:flex;align-items:center;gap:6px;flex:1}.reading-status-dot{width:8px;height:8px;border-radius:50%}.reading-status-text{font-size:.82rem;font-weight:600;color:#475569}.reading-dist{display:flex;align-items:center;gap:6px;font-weight:600;color:#334155}.reading-arrow{color:#cbd5e1;font-weight:700}.notice-info-card{background:#eff6ff;border:1px solid #dbeafe;border-radius:16px;padding:14px 16px;display:flex;align-items:flex-start;gap:12px}.notice-icon{flex-shrink:0;margin-top:2px}.notice-text{display:flex;flex-direction:column;gap:4px}.notice-title{font-size:.88rem;font-weight:800;color:#1e40af}.notice-desc{font-size:.78rem;font-weight:500;color:#3b82f6;line-height:1.35}.sys-status-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.sys-status-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:10px}.sys-status-card__icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sys-status-card__icon--blue{background-color:#eff6ff;color:#2563eb}.sys-status-card__icon--purple{background-color:#f5f3ff;color:#7c3aed}.sys-status-card__icon--green{background-color:#eefdf4;color:#16a34a}.sys-status-card__icon--amber{background-color:#fffbeb;color:#d97706}.sys-status-card__text{display:flex;flex-direction:column}.sys-status-card__lbl{font-size:.72rem;font-weight:600;color:#64748b}.sys-status-card__val{font-size:.82rem;font-weight:800}.text-success{color:#16a34a}.text-danger{color:#dc2626}.text-dark{color:#0f172a}.bottom-navbar{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:412px;height:var(--nav-height);background:#fff;border-top:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-around;z-index:100;box-shadow:0 -4px 16px #0f172a0a}.bottom-nav-btn{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:transparent;border:none;cursor:pointer}.bottom-nav-active-bar{position:absolute;top:0;left:25%;right:25%;height:3px;background-color:#2563eb;border-radius:0 0 4px 4px}.bottom-nav-icon-box{display:flex;align-items:center;justify-content:center}.bottom-nav-lbl-text{font-size:.72rem;font-weight:700;margin-top:2px;color:#64748b}.bottom-nav-btn--active .bottom-nav-lbl-text{color:#2563eb}