:root{--teal-50:#f0fdfa;--teal-100:#ccfbf1;--teal-200:#99f6e4;--teal-600:#0d9488;--teal-700:#0f766e;--teal-800:#115e59;--bg:#f6f7f9;--surface:#fff;--surface-2:#f1f3f5;--border:#e3e6ea;--border-strong:#cdd3d9;--text:#1a1d21;--text-dim:#6b7280;--text-faint:#9aa1ab;--danger:#dc2626;--danger-bg:#fef2f2;--warn:#b45309;--warn-bg:#fffbeb;--ok:#15803d;--radius:12px;--radius-sm:8px;--shadow:0 1px 2px #1018280d, 0 1px 3px #1018280f;--shadow-lg:0 4px 12px #10182814;--appbar-h:56px;--bottombar-h:60px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}@media (prefers-color-scheme:dark){:root{--bg:#101418;--surface:#171c21;--surface-2:#1f262d;--border:#2a323a;--border-strong:#3a444e;--text:#e8ebee;--text-dim:#9aa4af;--text-faint:#6e7883;--teal-50:#0c2a28;--teal-100:#103b37;--danger-bg:#2a1618;--warn-bg:#2a2113;--shadow:0 1px 2px #0000004d;--shadow-lg:0 4px 14px #0006}}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Noto Sans CJK SC,sans-serif;font-size:15px;line-height:1.5}button,input,select,textarea{font:inherit;color:inherit}.app{flex-direction:column;min-height:100dvh;display:flex}.appbar{z-index:20;padding-top:var(--safe-top);background:var(--teal-700);color:#fff;box-shadow:var(--shadow);position:sticky;top:0}.appbar-inner{height:var(--appbar-h);align-items:center;gap:8px;max-width:780px;margin:0 auto;padding:0 12px;display:flex}.appbar h1{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;margin:0;font-size:16px;font-weight:600;overflow:hidden}.appbar .sub{opacity:.85;font-size:12px;font-weight:400}.content{width:100%;max-width:780px;padding:12px 12px calc(var(--bottombar-h) + 88px + var(--safe-bottom));flex:1;margin:0 auto}@media (min-width:720px){.content{padding-bottom:40px}}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:10px;overflow:hidden}.card-head{background:var(--teal-100);border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:10px 12px;display:flex}@media (prefers-color-scheme:dark){.card-head{background:var(--teal-100)}}.room{color:var(--teal-800);letter-spacing:.02em;flex-shrink:0;font-size:17px;font-weight:700}@media (prefers-color-scheme:dark){.room{color:var(--teal-200)}}.card-head .spacer{flex:1}.card-body{padding:4px 0}.meter{border-bottom:1px solid var(--border);padding:8px 12px}.meter:last-child{border-bottom:none}.meter-top{align-items:baseline;gap:6px;margin-bottom:6px;display:flex}.meter-kind{background:var(--surface-2);color:var(--text-dim);border-radius:999px;padding:1px 7px;font-size:14px;font-weight:600}.meter-usage{color:var(--text-dim);font-variant-numeric:tabular-nums;margin-left:auto;font-size:13px}.meter-usage strong{color:var(--text);font-weight:600}.readings{grid-template-columns:1fr auto 1fr auto;align-items:end;gap:8px;display:grid}.readings .field{flex-direction:column;gap:2px;min-width:0;display:flex}.mini-label{color:var(--text-dim);padding-left:2px;font-size:11px}.input.prev-input{background:var(--surface-2);color:var(--text-dim);border-style:dashed}.readings .arrow{color:var(--text-faint);padding-bottom:10px;font-size:14px}.readings .amount{font-variant-numeric:tabular-nums;text-align:right;min-width:68px;padding-bottom:11px;font-size:14px;font-weight:600}.input{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);font-variant-numeric:tabular-nums;width:100%;min-width:0;height:40px;padding:0 10px;font-size:16px;transition:border-color .12s,box-shadow .12s}.input:focus{border-color:var(--teal-600);outline:none;box-shadow:0 0 0 3px #0d948826}.input:disabled{background:var(--surface-2);color:var(--text-dim)}.input.text{font-variant-numeric:normal}.input-name{max-width:140px;height:34px;font-size:16px}.prev-value{border-radius:var(--radius-sm);background:var(--surface-2);height:40px;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap;text-overflow:ellipsis;justify-content:center;align-items:center;padding:0 8px;font-size:14px;display:flex;overflow:hidden}.btn{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);height:40px;color:var(--text);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:6px;padding:0 14px;font-size:14px;font-weight:500;transition:background .12s,border-color .12s,opacity .12s;display:inline-flex}.btn:hover:not(:disabled){background:var(--surface-2)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:var(--teal-700);border-color:var(--teal-700);color:#fff}.btn.primary:hover:not(:disabled){background:var(--teal-800)}.btn.ghost{background:0 0;border-color:#0000}.btn.ghost:hover:not(:disabled){background:#7f7f7f1f}.btn.danger{color:var(--danger);border-color:var(--border-strong)}.btn.sm{height:32px;padding:0 10px;font-size:13px}.btn.block{width:100%}.btn-icon{width:40px;padding:0}.monthbar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);align-items:center;gap:8px;margin-bottom:10px;padding:10px 12px;display:flex}.monthbar .current{text-align:center;font-variant-numeric:tabular-nums;flex:1;font-size:16px;font-weight:600}.monthbar .current small{color:var(--text-dim);font-size:12px;font-weight:400;display:block}.footer{z-index:30;background:var(--surface);border-top:1px solid var(--border);padding-bottom:var(--safe-bottom);position:fixed;bottom:0;left:0;right:0;box-shadow:0 -2px 10px #1018280f}.footer-inner{max-width:780px;margin:0 auto}.actionbar{border-bottom:1px solid var(--border);align-items:center;gap:8px;padding:8px 12px;display:flex}.actionbar .grand{flex:1;min-width:0}.actionbar .grand .label{color:var(--text-dim);font-size:11px}.actionbar .grand .value{font-variant-numeric:tabular-nums;font-size:19px;font-weight:700;line-height:1.15}.actionbar .grand .value .dirty{color:var(--warn);margin-left:6px;font-size:11px;font-weight:500}.tabbar{height:var(--bottombar-h);display:flex}.tabbar button{color:var(--text-dim);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;font-size:12px;display:flex}.tabbar button.active{color:var(--teal-700);font-weight:600}@media (prefers-color-scheme:dark){.tabbar button.active{color:var(--teal-200)}}.tabbar .icon{font-size:17px;line-height:1}.banner{border-radius:var(--radius);border:1px solid #0000;align-items:center;gap:10px;margin-bottom:10px;padding:10px 12px;font-size:13px;display:flex}.banner.info{background:var(--teal-50);border-color:var(--teal-200);color:var(--teal-800)}.banner.warn{background:var(--warn-bg);color:var(--warn);border-color:#fcd34d}.banner.error{background:var(--danger-bg);color:var(--danger);border-color:#fecaca}@media (prefers-color-scheme:dark){.banner.info{color:var(--teal-200)}.banner.warn{border-color:#78350f}.banner.error{border-color:#7f1d1d}}.banner .grow{flex:1;min-width:0}.summary{background:var(--surface-2);border-top:1px solid var(--border);align-items:center;gap:8px;padding:8px 12px;font-size:14px;display:flex}.summary .label{color:var(--text-dim)}.summary .spacer{flex:1}.summary .total{font-variant-numeric:tabular-nums;font-size:16px;font-weight:700}.extras{border-bottom:1px solid var(--border);padding:6px 12px}.extra-row{grid-template-columns:1fr 96px 32px;align-items:center;gap:6px;margin-bottom:6px;display:grid}.extra-row:last-child{margin-bottom:0}.rent-row{border-bottom:1px solid var(--border);grid-template-columns:1fr 110px;align-items:center;gap:8px;padding:8px 12px;display:grid}.field-label{color:var(--text-dim);font-size:13px}.page-title{margin:4px 0 10px;font-size:15px;font-weight:600}.list-row{border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:11px 12px;display:flex}.list-row:last-child{border-bottom:none}.list-row .room-tag{font-variant-numeric:tabular-nums;font-weight:600}.list-row .grow{flex:1;min-width:0}.list-row .muted{color:var(--text-dim);font-size:13px}.list-row .num{font-variant-numeric:tabular-nums;font-weight:600}.empty{text-align:center;color:var(--text-dim);padding:40px 20px;font-size:14px}.spinner{border:2px solid;border-right-color:#0000;border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.center-screen{justify-content:center;align-items:center;min-height:100dvh;padding:24px;display:flex}.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:360px;box-shadow:var(--shadow-lg);padding:22px}.login-card h1{margin:0 0 4px;font-size:19px}.login-card p{color:var(--text-dim);margin:0 0 16px;font-size:13px}.stack{flex-direction:column;gap:10px;display:flex}.row{align-items:center;gap:8px;display:flex}.section{margin-bottom:16px}.section>h2{color:var(--text-dim);text-transform:none;margin:0 0 8px;padding-left:2px;font-size:13px;font-weight:600}.kv{border-bottom:1px solid var(--border);grid-template-columns:1fr minmax(0,220px);align-items:center;gap:10px;padding:8px 12px;display:grid}.kv:last-child{border-bottom:none}.rate-row{border-bottom:1px solid var(--border);grid-template-columns:52px minmax(0,1fr) minmax(0,1fr) 40px;align-items:end;gap:10px;padding:8px 12px;display:grid}.rate-row:last-child{border-bottom:none}.rate-row .rate-room{font-variant-numeric:tabular-nums;padding-bottom:11px;font-weight:600}.rate-row .rate-field{flex-direction:column;gap:2px;min-width:0;display:flex}@media (min-width:560px){.rate-row{grid-template-columns:52px minmax(0,200px) minmax(0,200px) 40px;justify-content:start}}.violation{color:var(--danger);padding:0 12px 8px;font-size:12px}.violation.warn{color:var(--warn)}.hint{color:var(--text-dim);padding:8px 12px 0;font-size:12px;line-height:1.5}.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}@media (min-width:720px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.cards .card{margin-bottom:0}}
