/* Extend the existing visual design with readable bilingual controls. */
:root{font-family:Arial,'Microsoft JhengHei','PingFang TC',sans-serif;font-size:16px}
.topbar{height:auto;min-height:100px;gap:24px;padding-top:18px;padding-bottom:18px;align-items:flex-start}
.header-controls{display:flex;align-items:flex-start;gap:22px}.language-switch{display:flex;gap:3px;flex-shrink:0}.language-switch button[aria-pressed=true]{background:var(--green);color:white}.remember-controls{max-width:310px}.remember-controls .help{font-size:12px;margin-top:5px}.remember-controls button{padding:5px 0;text-decoration:underline}.remember-controls .checkbox{font-size:14px}.remember-controls input{flex-shrink:0}
.intro{align-items:flex-start}.intro>div>p:last-child{font-size:16px;max-width:780px}.period{font-size:12px;display:grid}.period span{font-size:14px}.prototype,.eyebrow{font-size:12px;letter-spacing:1px}.brand{flex-shrink:0}
.guide{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}.guide a{font-size:14px;text-decoration:none;line-height:1.6}.guide a:hover{text-decoration:underline}.starting-note{font-size:14px;color:var(--muted);margin:18px 0 24px}.workspace{grid-template-columns:minmax(0,1.45fr) minmax(370px,1fr)}
.help,.scenario-note,.source-guide p,.boundary p,.metrics p,.contributions>p,.winter p,.breakdown p{font-size:14px;line-height:1.65}.card>p:first-of-type{margin-bottom:20px}.annual-row{margin-top:20px}label,legend,h3,.checkbox,button,.comparison span{font-size:14px}.metrics span{font-size:14px;min-height:0}.metrics strong{font-size:24px}.metrics strong small{font-size:12px}.comparison small,.difference p,.boundary strong,.contributions .rounding,.legend{font-size:12px}.difference strong{font-size:18px}.results h2{margin-top:12px}.results{position:static}
.months{gap:6px}.month-percent{font-size:12px;height:22px}.month-input{position:relative;margin:0 0 7px}.month-input input{padding:7px 25px 7px 5px;font-size:12px;text-align:right;border-radius:5px}.month-input span{position:absolute;right:5px;top:10px;font-size:9px;color:var(--muted);pointer-events:none}.month label{font-size:12px}.month label small{display:block;font-size:12px;color:var(--muted);margin-top:4px}.chart-footer{font-size:12px;flex-wrap:wrap}.chart-caption .help{font-size:14px}.bar-control{height:128px}.bar-fill.ghost{opacity:.38}.chart-caption{margin-top:24px}.usage-discrepancy{margin:10px 0 14px;padding:11px 12px;border-left:4px solid #9aa39a;background:#f3f4ef;border-radius:5px;font-size:13px;line-height:1.5}.usage-discrepancy p{margin-top:4px}.usage-discrepancy.green{border-color:#2f7a51;background:#edf7ef;color:#205c3b}.usage-discrepancy.amber{border-color:#c08318;background:#fff8e6;color:#6a4b0e}.usage-discrepancy.red{border-color:#b73a2a;background:#fff0ed;color:#7c261c}.guide-link,.source-guide a{text-decoration:underline;text-underline-offset:3px;font-weight:600}
.credit-row{margin-top:22px;max-width:330px}.credit-row input{margin-top:8px}.tariffs label span{float:none;display:block;margin-top:4px}.standing-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}.standing-row input{max-width:140px}.standing-row label span{display:block;margin-top:4px;font-size:12px}.scenario-head small{font-size:12px;line-height:1.5}.scenario-values{font-size:12px;line-height:1.5;flex-wrap:wrap}.scenario-values strong{font-size:14px}
.source-guide{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);scroll-margin-top:20px}.source-guide p{margin-top:10px}.search-example{background:#edf1e5;border-radius:6px;padding:12px;overflow-wrap:anywhere}
.breakdown{border-top:1px solid #d1dac8;margin-top:24px;padding-top:20px}.breakdown h3{margin:12px 0}.breakdown p{margin-top:14px;color:var(--muted)}.breakdown-line{font-size:14px;line-height:1.5;padding:5px 0}.breakdown-line strong{white-space:nowrap}.table-scroll table{font-size:12px}thead th,thead small{font-size:12px;white-space:normal}tbody th{white-space:nowrap}.results-inner{padding:24px}footer{font-size:12px}footer p{max-width:780px}section,aside{scroll-margin-top:20px}
html[lang=zh-Hant] h1,html[lang=zh-Hant] h2{font-family:'Microsoft JhengHei','PingFang TC',sans-serif;letter-spacing:0;line-height:1.4}html[lang=zh-Hant] h1{font-size:34px}
@media(max-width:1150px){.workspace{grid-template-columns:minmax(0,1.2fr) minmax(340px,1fr)}.months{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:18px}.topbar{flex-wrap:wrap}.header-controls{margin-left:auto}.bar-control{height:110px}.guide{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics{grid-template-columns:1fr}}
@media(max-width:780px){.workspace{grid-template-columns:1fr}.header-controls{margin:0;width:100%;justify-content:space-between}.period{display:grid;padding-left:16px}.intro{flex-direction:column}.period strong{font-size:15px}.metrics{grid-template-columns:1fr 1fr}.months{grid-template-columns:repeat(6,minmax(0,1fr))}.topbar{gap:16px}.card,.results-inner{padding:22px}}
@media(max-width:460px){.header-controls{flex-direction:column;gap:16px}.guide{gap:12px}.annual-row{flex-direction:column}.number-wrap{width:100%;max-width:220px}.annual-row .help{max-width:none}.tariffs{grid-template-columns:1fr;gap:26px}.fee-row{flex-direction:column;align-items:flex-start}.fee-row>div{width:100%}.metrics{grid-template-columns:1fr}.comparison{grid-template-columns:1fr;gap:22px}.comparison strong{font-size:32px}.standing-row{gap:8px}.standing-row input{max-width:115px}.scenario-head{align-items:flex-start}.scenario-head small{max-width:170px}.months{gap:5px;row-gap:16px}.month-input input{font-size:11px;padding-left:3px;padding-right:22px}.card,.results-inner{padding:18px}html[lang=zh-Hant] h1{font-size:28px}.brand{font-size:14px}.prototype{font-size:12px}.breakdown-line{flex-wrap:wrap}.table-scroll{max-width:100%}.chart-footer{font-size:12px}}