:root{color:#0b1830;font-synthesis:none;text-rendering:optimizelegibility;--ink:#0b1830;--muted:#5e6b7d;--teal:#079d96;--teal-dark:#067f7a;--teal-soft:#e9f8f7;--water:#28aeea;--water-soft:#eaf8fe;--electric:#ed9715;--electric-soft:#fff6e8;--line:#dbe3ea;--danger:#b42318;--danger-soft:#fff1f0;background:#edf3f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,PingFang SC,sans-serif}*{box-sizing:border-box}html{background:#edf3f5;min-height:100%}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline-offset:3px;outline:4px solid #28aeea40}.app-shell{justify-content:center;min-height:100vh;display:flex}.phone-surface{background:#fff;width:min(100%,480px);min-height:100vh;box-shadow:0 0 40px #0c243414}.screen{min-height:100vh;padding:max(24px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom))}h1,p{margin-top:0}h1{letter-spacing:-.03em;margin-bottom:12px;font-size:clamp(30px,8vw,40px);line-height:1.18}.button{cursor:pointer;border:2px solid #0000;border-radius:16px;justify-content:center;align-items:center;gap:12px;width:100%;min-height:62px;padding:15px 22px;font-size:21px;font-weight:750;line-height:1.2;transition:transform .14s,background-color .14s,border-color .14s;display:inline-flex}.button:active:not(:disabled){transform:scale(.985)}.button:disabled{cursor:not-allowed;opacity:.42}.button-primary{color:#fff;background:var(--teal)}.button-primary:hover:not(:disabled){background:var(--teal-dark)}.button-secondary{color:var(--teal-dark);border-color:var(--teal);background:#fff}.button-secondary:hover:not(:disabled){background:var(--teal-soft)}.button-tall{min-height:96px;font-size:25px}.text-button,.back-button{color:var(--teal-dark);cursor:pointer;background:0 0;border:0;align-items:center;gap:8px;padding:10px 0;font-size:18px;font-weight:700;display:inline-flex}.back-button{margin:-6px 0 30px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.home-screen{text-align:center;flex-direction:column;display:flex}.home-mark{color:#fff;background:var(--teal);border-radius:21px;justify-content:center;align-items:center;gap:0;width:68px;height:68px;margin:12px auto 28px;display:flex}.home-mark svg:last-child{color:#ffd688;margin-left:-8px}.home-heading h1{margin-bottom:14px;font-size:clamp(42px,12vw,58px)}.home-heading p{color:var(--muted);font-size:23px;font-weight:650}.home-actions{gap:18px;margin-top:clamp(42px,10vh,82px);display:grid}.last-period{color:var(--muted);margin:5px 0 0;font-size:17px}.home-footer{flex-wrap:wrap;justify-content:center;gap:12px 28px;margin-top:auto;padding-top:42px;display:flex}.step-screen,.review-screen{flex-direction:column;display:flex}.step-count{color:var(--teal-dark);margin-bottom:12px;font-size:16px;font-weight:750;display:block}.step-heading h1{max-width:390px}.step-heading p,.review-heading p,.section-heading p{color:var(--muted);font-size:19px;line-height:1.55}.reading-input{margin-top:28px;display:block}.reading-input input{border:4px solid var(--water);width:100%;height:150px;color:var(--ink);background:var(--water-soft);text-align:center;letter-spacing:.01em;border-radius:18px;padding:18px 24px;font-size:clamp(54px,16vw,78px);font-weight:780}.electricity-input input{border-color:var(--electric);background:var(--electric-soft)}.reading-input input::placeholder{color:#8b97a7;font-size:30px;font-weight:600}.calculation{gap:14px;margin-top:28px;display:grid}.calculation>div{justify-content:space-between;align-items:baseline;gap:20px;min-height:62px;font-size:22px;display:flex}.calculation strong{color:var(--teal-dark);font-size:30px}.electricity-calc strong{color:#b76800}.calculation-error{color:var(--danger);background:var(--danger-soft);border-radius:14px;padding:18px;font-size:18px;font-weight:650;line-height:1.55}.calculation-error p{margin:0}.button-bottom{margin-top:auto}.review-heading{margin-bottom:18px}.bill-breakdown{border:1px solid var(--line);border-radius:18px;overflow:hidden}.bill-breakdown.compact{margin-bottom:24px}.bill-row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;min-height:82px;padding:18px;display:flex}.bill-row>div{align-items:center;gap:13px;min-width:0;display:flex}.bill-row span{gap:4px;min-width:0;display:grid}.bill-row strong,.bill-row>b{font-size:19px}.bill-row>b{white-space:nowrap}.bill-row small{color:var(--muted);font-size:14px;line-height:1.35}.water-row svg{color:var(--water)}.electricity-row svg{color:var(--electric)}.bill-total{background:#f7fbfb;flex-direction:column;align-items:flex-end;gap:6px;padding:22px 18px 25px;display:flex}.bill-total span{color:var(--muted);font-size:18px;font-weight:700}.bill-total strong{color:var(--teal-dark);font-size:clamp(36px,11vw,48px);line-height:1.08}.receipt-screen{padding-left:18px;padding-right:18px}.receipt-screen>.back-button{margin-bottom:16px;margin-left:6px}.receipt-capture{color:var(--ink);background:#fff;padding:24px 12px 20px}.receipt-header{text-align:center;margin-bottom:24px}.receipt-brand{color:#fff;background:var(--teal);border-radius:15px;justify-content:center;align-items:center;width:48px;height:48px;margin:0 auto 14px;display:flex}.receipt-brand svg:last-child{color:#ffd688;margin-left:-7px}.receipt-header h1{margin-bottom:8px;font-size:clamp(28px,8vw,36px)}.receipt-header p{color:var(--muted);margin-bottom:4px;font-size:17px;font-weight:600}.receipt-meta{text-align:center;padding-top:18px}.receipt-meta p{color:var(--muted);margin-bottom:7px;font-size:15px}.receipt-number{color:#8a95a4!important;font-size:12px!important}.receipt-actions{gap:13px;padding:12px;display:grid}.centered{justify-self:center}.notice{color:var(--teal-dark);text-align:center;margin:0;font-size:16px;font-weight:650;line-height:1.45}.section-heading{margin-bottom:26px}.bill-list{gap:12px;display:grid}.bill-list-item{border:1px solid var(--line);width:100%;min-height:88px;color:var(--ink);text-align:left;cursor:pointer;background:#fff;border-radius:16px;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:16px;display:grid}.bill-list-item>div{gap:6px;min-width:0;display:grid}.bill-list-item strong{font-size:20px}.bill-list-item span{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:15px;overflow:hidden}.bill-list-item b{white-space:nowrap;font-size:18px}.settings-screen{padding-bottom:110px}.settings-form{gap:20px;display:grid}.form-field{gap:9px;display:grid}.form-field>span:first-child{color:#3e4a5b;font-size:17px;font-weight:650}.form-field input{width:100%;height:62px;color:var(--ink);background:#fff;border:2px solid #cfd8e2;border-radius:13px;padding:0 16px;font-size:21px;font-weight:600}.form-field input:focus{border-color:var(--teal)}.input-with-unit{display:block;position:relative}.input-with-unit input{padding-right:88px}.input-with-unit b{color:var(--muted);font-size:16px;position:absolute;top:50%;right:16px;transform:translateY(-50%)}.sticky-save{left:50%;bottom:max(18px, env(safe-area-inset-bottom));width:min(100% - 48px,432px);position:fixed;transform:translate(-50%);box-shadow:0 10px 30px #079d963d}.sticky-save:active{transform:translate(-50%)scale(.985)!important}@media (width<=360px){.screen{padding-left:18px;padding-right:18px}.button{font-size:19px}.bill-row{padding-left:13px;padding-right:13px}.bill-row small{font-size:12px}}@media (width>=700px){.phone-surface{border-radius:28px;min-height:calc(100vh - 56px);margin:28px 0;overflow:hidden}.screen{min-height:calc(100vh - 56px)}}.photo-field{margin-top:24px}.photo-picker{border:2px dashed var(--line);min-height:68px;color:var(--teal-dark);cursor:pointer;background:#fbfdfe;border-radius:16px;justify-content:center;align-items:center;gap:12px;font-size:19px;font-weight:700;display:flex}.photo-picker:active{background:var(--teal-soft)}.photo-preview{align-items:center;gap:16px;display:flex}.photo-preview>img{border:2px solid var(--line);object-fit:cover;background:#f2f5f7;border-radius:14px;width:108px;height:108px}.photo-tools{gap:10px;display:grid}.photo-retake,.photo-remove{cursor:pointer;justify-content:center;align-items:center;gap:8px;min-height:48px;padding:0 18px;font-size:17px;font-weight:700;display:flex}.photo-retake{border:2px solid var(--line);color:var(--ink);border-radius:12px}.photo-remove{color:var(--danger);background:var(--danger-soft);border:0;border-radius:12px}.photo-error{color:var(--danger);margin:12px 0 0;font-size:16px;font-weight:650}.reading-photos{margin-top:22px}.reading-photos h2{color:var(--muted);letter-spacing:.02em;margin:0 0 14px;font-size:15px;font-weight:700}.reading-photo-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;display:grid}.reading-photo-grid figure{margin:0}.reading-photo-grid img{aspect-ratio:4/3;border:1px solid var(--line);object-fit:cover;background:#f2f5f7;border-radius:12px;width:100%}.reading-photo-grid figcaption{color:var(--ink);text-align:center;margin-top:8px;font-size:14px;font-weight:700}.backup-section{border-top:1px solid var(--line);gap:14px;margin-top:36px;padding-top:26px;display:grid}.backup-section h2{letter-spacing:-.01em;margin:0;font-size:22px}.backup-hint{color:var(--muted);margin:0;font-size:16px;line-height:1.55}.backup-usage{margin:0;font-size:16px;font-weight:700}.review-notice{color:var(--danger);background:var(--danger-soft);text-align:left;border-radius:14px;margin:18px 0 0;padding:16px;line-height:1.55}.danger-button{color:var(--danger)}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important}}@media print{:root,html,body,.app-shell,.phone-surface,.screen{box-shadow:none!important;background:#fff!important}.phone-surface,.screen{width:100%;min-height:0;margin:0;padding:0}.no-print,.receipt-screen>.back-button{display:none!important}.receipt-capture{width:430px;margin:0 auto}}
