:root{font-family:PingFang SC,Microsoft YaHei,system-ui,sans-serif;color:#1f2933;background:#eef2f1;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%}body{background:#eef2f1}input,select,button,a{font:inherit;-webkit-tap-highlight-color:transparent}button:focus:not(:focus-visible){outline:none}input:focus,select:focus{border-color:#147d6f;box-shadow:0 0 0 3px #147d6f1f}.page{min-height:100vh;padding:14px 14px 28px}.bill{max-width:620px;margin:0 auto;padding:0}.topbar{display:flex;justify-content:space-between;gap:8px;align-items:stretch;margin-bottom:10px}.address-group{display:flex;flex:1 1 auto;min-width:0;gap:6px;align-items:stretch}.grand-total{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:2px;text-align:right;min-width:158px;padding:9px 14px;border-left:3px solid #147d6f;background:#fff;border-radius:6px}.grand-total span{align-self:stretch;text-align:left;font-size:16px;font-weight:700;line-height:1;color:#65736f}.grand-total strong{font-size:40px;line-height:1;color:#11695f}.address,.extra-input{display:grid;gap:4px}.address{flex:1 1 auto;min-width:0;margin:0;padding:8px 10px;background:#fff;border:1px solid #dfe6e3;border-radius:8px}.address span,.extra-input span{font-size:12px;color:#65736f}.label-icon{color:#147d6f;font-size:15px;font-weight:700}.address input,.extra-input input,.grid-inputs input,.cable-fields input{width:100%;border:1px solid #d5dfdc;background:#fbfcfc;border-radius:6px;padding:9px;color:#1f2933;outline:none;transition:border-color .15s,box-shadow .15s}.item{position:relative;margin-bottom:8px;padding:11px 12px 10px;overflow:hidden;background:#fff;border:1px solid #dfe6e3;border-radius:8px}.item:before{position:absolute;inset:0 auto 0 0;width:4px;content:"";background:#147d6f}.item-water:before{background:#2585b8}.item-gas:before{background:#dc754d}.item-cable:before{background:#7b61a8}.item-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:6px}.item-title{display:flex;align-items:center;gap:12px;min-width:0}.utility-icon{display:grid;flex:0 0 25px;width:25px;height:25px;place-items:center;border-radius:50%;background:#e7f3f0;color:#147d6f;font-size:15px;font-weight:700;line-height:1}.item-water .utility-icon{background:#e9f4fa;color:#2585b8}.item-gas .utility-icon{background:#fff0e9;color:#c65f38}.item-cable .utility-icon{background:#f0ebf8;color:#7b61a8}.dot{font-size:20px;font-weight:700;white-space:nowrap}.tier-pills{display:flex;align-items:center;gap:5px}.tier-pills button{display:grid;width:28px;height:28px;padding:0;place-items:center;border:1px solid #c9d7d3;border-radius:50%;background:#f6f9f8;color:#586964;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.tier-pills button.active{border-color:#147d6f;background:#147d6f;color:#fff;box-shadow:0 0 0 3px #147d6f1f}.item-water .tier-pills button.active{border-color:#2585b8;background:#2585b8}.item-gas .tier-pills button.active{border-color:#dc754d;background:#dc754d}.item-cable .tier-pills button.active{border-color:#7b61a8;background:#7b61a8}.phone-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;margin:-1px 0 7px;padding-left:0;font-size:14px}.phone-line span{color:#65736f}.phone-line a{color:#147d6f;font-weight:600;text-decoration:none}.phone-line a:before{content:"☎ "}.item-actions{display:flex;flex:0 0 auto;gap:6px}.extra-toggle,.clear-button,.clear-all{flex:0 0 auto;min-height:30px;padding:5px 10px;border:1px solid #c9d7d3;border-radius:6px;background:#f6f9f8;color:#4d625d;font:inherit;font-size:12px;cursor:pointer}.clear-button{border-color:#dfd4d0;background:#fbf8f7;color:#8a5a4c}.clear-all{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;align-self:stretch;min-width:48px;padding-inline:8px;border-color:#dfd4d0;background:#fff;color:#8a5a4c;line-height:1.05}.extra-toggle.active{border-color:#147d6f;background:#e7f3f0;color:#11695f}.extra-toggle:focus-visible,.clear-button:focus-visible,.clear-all:focus-visible,.tier-pills button:focus-visible{outline:3px solid rgba(20,125,111,.18);outline-offset:2px}.grid-head,.grid-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.grid-head{margin-bottom:2px}.grid-head span{text-align:center;font-size:12px;color:#65736f}.grid-inputs input,.grid-inputs output{text-align:center;font-variant-numeric:tabular-nums}.grid-inputs output,.cable-fields output{display:grid;width:100%;min-height:39px;padding:9px;place-items:center;border:1px solid #e0e6e4;border-radius:6px;background:#edf2f0;color:#465750;font-variant-numeric:tabular-nums;font-weight:600}.electricity-grid{grid-template-columns:34px repeat(3,minmax(0,1fr))}.electricity-grid strong{align-self:center;text-align:center;font-size:13px}.extra-input{margin-top:6px}.extra-fields{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:8px}.cable-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.garbage-fee{display:grid;grid-template-columns:auto 90px minmax(0,1fr);gap:7px;align-items:center;margin-top:7px;color:#65736f;font-size:12px}.garbage-fee input{width:100%;min-width:0;padding:7px;border:1px solid #d5dfdc;border-radius:6px;background:#fbfcfc;text-align:center;outline:none}.cable-fields label{display:grid;gap:4px}.cable-fields label>span{color:#65736f;font-size:12px}.extra-amount input{text-align:center;font-variant-numeric:tabular-nums}.calc-line{margin-top:7px;padding:6px 8px;background:#f3f7f6;border-radius:6px;font-size:13px;line-height:1.65;font-variant-numeric:tabular-nums}.calc-line span{margin-right:4px}.calc-name{font-weight:700;margin-right:8px;color:#11695f}.tier-note{padding:2px 5px;border-radius:4px;background:#e6efec;color:#536b65;font-size:11px}.result{white-space:nowrap}.result-electricity{color:#147d6f}.result-water{color:#2585b8}.result-gas{color:#dc754d}.result-cable{color:#7b61a8}.calc-indent{margin-left:30px}.footer{display:flex;flex-direction:column;justify-content:flex-start;gap:8px;align-items:flex-start;padding:10px 12px;margin-top:4px;background:#163d38;border-radius:8px;color:#fff;font-size:14px}.footer strong{text-align:left;font-variant-numeric:tabular-nums}.footer-formula{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-end;gap:0 5px;line-height:1}.footer-formula>*{display:inline-flex;align-items:flex-end;line-height:1}.footer-formula i{color:#a9c3bd;font-style:normal;font-weight:400}.footer-formula .result-electricity{color:#69d5c4}.footer-formula .result-water{color:#72c7ef}.footer-formula .result-gas{color:#ffab86}.footer-formula .result-cable{color:#c7aaf2}.footer-total{color:#fff;font-size:17px}@media (max-width: 480px){input{font-size:16px}.page{padding:8px 8px 20px}.bill{width:100%}.grand-total{min-width:148px;padding-inline:10px}.item{padding:10px 9px 9px 12px}.item-title{gap:4px}.utility-icon{flex-basis:22px;width:22px;height:22px;font-size:13px}.tier-pills{gap:3px}.tier-pills button{width:25px;height:25px}.extra-toggle,.clear-button{padding-inline:6px}.grid-head,.grid-inputs{gap:6px}.electricity-grid{grid-template-columns:28px repeat(3,minmax(0,1fr))}.grid-inputs input{min-width:0;padding:8px 5px}.grid-inputs output{min-width:0;padding-inline:4px}.extra-fields{grid-template-columns:minmax(0,1fr) 104px;gap:6px}.phone-line{margin-left:0;font-size:14px}.cable-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.clear-all{padding-inline:6px}.calc-line{overflow-wrap:anywhere}.footer{flex-direction:column}.footer strong{text-align:left}}