/* 草莓牛奶：奶白底、莓粉操作、粉彩分類，深色文字維持可讀性。 */
:root{color:#583d49;background:#fff8f7;--blue:#a73e64;--muted:#79616d;--line:#ecd7de}
header,.record,footer{border-color:#ecd7de}
.wordmark span{font-size:30px;color:#bb4e76}
h1{font-family:"Microsoft JhengHei","PingFang TC",sans-serif;font-size:32px;letter-spacing:.02em;color:#754456}
.summary{border-radius:20px;background:#fffdfc}
.summary>div{padding-top:26px;padding-bottom:26px}
.summary .balance{background:#f8dfe7;color:#74354e}
.balance span,.balance small{color:#75495b}
.entry,.distribution{background:#fffdfc;border-radius:20px}
.entry{border-top:4px solid #e8adc1}
.distribution{border-top:4px solid #edc2d0}
input,select{border-color:#d3b5c0;border-radius:11px;background:#fff;color:#583d49}
input::placeholder{color:#87707b}
button{border-color:#d3b5c0;border-radius:12px}
button:hover{background:#fbe7ee}
input:focus-visible,select:focus-visible,button:focus-visible{outline-color:#c95c85}
.type-switch label{background:#fff5f7;border-color:#ecd7de;border-radius:11px;color:#795464}
.type-switch label:has(input:checked){background:#f9e1e9;border-color:#b75b7c;color:#8d3153}
.primary{background:#a73e64;color:#fff;border-color:#a73e64}
.primary:hover{background:#8d3153}
.ledger-heading{border-color:#dfb8c7}
.record-title{color:#754456}
.record-amount:not(.income){color:#8d3153}
.record-amount.income{color:#32634f}
.record-actions button{background:#fffdfc}
.record-actions button:hover{background:#fbe7ee}
.expense-pie{border:4px solid #fff;box-shadow:0 0 0 1px #f0dfe5}
.legend-item{border-color:#f0e2e7}
.legend-swatch{border-radius:50%;width:12px;height:12px;box-shadow:inset 0 0 0 1px #583d491a}
.chart-empty{background:#fff0f4;border:1px dashed #e8bbcc;border-radius:14px}
footer strong{color:#754456}
dialog{background:#fffdfc;color:#583d49;border-radius:20px;box-shadow:0 20px 70px #66304733}
dialog::backdrop{background:#583d4966}
.danger{background:#a53236;color:#fff;border-color:#a53236}
.danger:hover{background:#82262a}
@media(max-width:760px){h1{font-size:27px}}
@media(max-width:360px){h1{font-size:24px}}
/* 限制原生日期控制項的內在寬度，手機上保持精簡。 */
.intro,.entry,.entry label{min-width:0}
.month-label{width:200px;min-width:0;max-width:100%;flex-shrink:1}
.entry label:has(> #date){width:220px;max-width:100%;min-width:0}
input[type="month"],input[type="date"]{display:block;box-sizing:border-box;width:100%;max-width:100%;min-width:0;min-inline-size:0;max-inline-size:100%;height:46px;padding:10px;-webkit-appearance:none;appearance:none;font-size:16px;line-height:1.5;text-align:left}
input[type="month"]::-webkit-date-and-time-value,input[type="date"]::-webkit-date-and-time-value{min-width:0;min-inline-size:0;text-align:left}
input[type="month"]::-webkit-datetime-edit,input[type="date"]::-webkit-datetime-edit{padding:0;min-width:0}