body,button,input,select,textarea,dialog{font-family:var(--ui-font-family,Arial,"Microsoft YaHei",sans-serif)}
.appearance-card{margin-bottom:20px;max-width:1040px}
.appearance-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:620px}
.appearance-controls label{display:grid;gap:8px;color:var(--ui-muted, #718399);font-size:calc(13px * var(--ui-font-scale,1))}
.appearance-controls select{width:100%;font-size:calc(14px * var(--ui-font-scale,1))}
.appearance-preview{border:1px solid var(--line-soft);border-radius:12px;padding:18px;margin:20px 0;background:var(--ui-surface, #f8fafc)}
.appearance-preview strong{display:block;font-size:calc(24px * var(--ui-font-scale,1));font-weight:500;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.appearance-preview span{display:block;margin-top:8px;font-size:calc(14px * var(--ui-font-scale,1));color:var(--ui-muted, #718399)}
.appearance-card .palette-picker{width:100%;max-width:none;margin:14px 0 0}
.appearance-card .palette-options{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));width:100%;max-width:none}
.appearance-card .palette-options button{text-align:left;white-space:normal;min-width:0}
.appearance-card .palette-options small{white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.appearance-card .palette-picker summary{font-size:calc(13px * var(--ui-font-scale,1))}
.appearance-card .palette-options strong{font-size:calc(14px * var(--ui-font-scale,1))}
.appearance-card .palette-options small{font-size:calc(12px * var(--ui-font-scale,1))}
.x-panel .panel-head small{line-height:1.8}
.x-table td[data-category-rate],.x-table td[data-category-share]{min-width:135px;font-variant-numeric:tabular-nums}
@media(max-width:650px){
 .appearance-controls{grid-template-columns:1fr;gap:14px}
 .appearance-card .palette-options{grid-template-columns:repeat(2,minmax(0,1fr))}
 .appearance-card .palette-picker summary{flex-wrap:wrap}
 .appearance-preview strong{font-size:calc(22px * var(--ui-font-scale,1))}
 .overview-calendar .x-calendar-day{height:calc(68px * var(--ui-font-scale,1))}
 .overview-calendar .year-month .x-calendar-day{height:calc(30px * var(--ui-font-scale,1))}
 .overview-calendar .x-calendar-day strong{font-size:calc(12px * var(--ui-font-scale,1))}
 .category-legend-row{grid-template-columns:8px minmax(0,1fr) auto auto}
}