/* Device-local display modes share the same family accent and semantic surfaces. */
html { background:var(--canvas); color-scheme:light; }
html[data-theme=night] { color-scheme:dark; }
body,body[data-page],body[data-page] #app,body[data-page] main,body[data-page] #content { background:var(--canvas); color:var(--ink); }
body[data-page] main > #network-state,.rail-brand,.shell-update { background:var(--paper); }
input,select,textarea,button { accent-color:var(--action); }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:.85; }
.theme-mode-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.theme-mode-options button { display:flex; flex-direction:column; align-items:center; gap:16px; padding:25px 8px 18px; background:var(--bg); border:1px solid var(--surface-outline); color:var(--muted); border-radius:18px; transition:background-color .22s,color .22s,border-color .22s,transform .22s; }
.theme-mode-options .bi { font-size:28px; }
.theme-mode-options button[aria-pressed=true] { background:var(--accent-soft); border-color:var(--focus); color:var(--on-accent-soft); }
@media(hover:hover){.theme-mode-options button:hover { background:var(--ui-hover); color:var(--ink); transform:translateY(-2px); }}
#theme-dialog { width:420px; }
#theme-mode-label { margin-left:auto; color:var(--muted); font-size:13px; }
#editor .kind-switch button.active { color:var(--ink); }
.tx-icon,.category-glyph { color:var(--ink); }
html:not([data-theme=day]) .tx-icon { background:var(--paper); }
html:not([data-theme=day]) .chart-tick { fill:var(--muted); }
html:not([data-theme=day]) .chart-category { fill:var(--ink); }
html:not([data-theme=day]) .chart-swatch { color:var(--ink); }
html:not([data-theme=day]) .chart-grid { stroke:var(--surface-outline); }
html:not([data-theme=day]) .chart-zero { stroke:var(--muted); }
html:not([data-theme=day]) .annual-over { background:var(--ui-danger-bg); color:var(--danger); }
html:not([data-theme=day]) .annual-legend-over { background:var(--danger); }
html:not([data-theme=day]) .dialog-actions :is(.danger-button,.destructive-action) { background:var(--danger); color:var(--on-danger); }
html[data-theme=accent] .network-dot { background:var(--ink); }
/* Preserve the readable offline treatment without flashing a light canvas at night. */
body[data-offline=true] { --on-action-hover:var(--on-action); --canvas:#f7f7f7; --ui-hover:#e3e3e3; --ui-hover-strong:#d5d5d5; --ui-selected:#cecece; --ui-skeleton:#c2c2c2; --ui-plan-fill:#dedede; --ui-danger-bg:#ddd; --ui-danger-hover:#ccc; }
html[data-theme=night] body[data-offline=true] { --canvas:#131313; --paper:#1d1d1d; --bg:#252525; --surface:#2c2c2c; --ink:#f4f4f4; --muted:#c6c6c6; --subtle:#aaa; --line:#555; --surface-outline:#505050; --control-line:#666; --accent:#3c3c3c; --accent-soft:#303030; --on-accent:#fff; --on-accent-soft:#eee; --accent-muted:#ddd; --action:#ddd; --on-action:#141414; --action-hover:#fff; --focus:#eee; --danger:#eee; --ui-hover:#323232; --ui-hover-strong:#3c3c3c; --ui-selected:#454545; --ui-skeleton:#575757; --ui-plan-fill:#3c3c3c; --ui-danger-bg:#333; --ui-danger-hover:#444; }
html[data-theme=night] body[data-offline=true] [data-person] { --person-row:#2d2d2d!important; --person-row-hover:#3b3b3b!important; --person-text:#f4f4f4!important; --person-muted:#ccc!important; --person-marker:#4c4c4c!important; --person-on:#fff!important; --person-avatar-bg:#444!important; }
@media(prefers-reduced-motion:no-preference){body,.sidebar,#network-state,.rail-brand,dialog,.choice-popover,.analytics-panel,.settings-profile-card,.settings-list,.theme-mode-options button { transition:background-color .25s ease,color .25s ease,border-color .25s ease; }}
@media(prefers-reduced-motion:reduce){.theme-mode-options button{transition:none;}}
/* Single, predictable category target; subcategories live inside the editor. */
#category-list .category-family { padding:0; border-radius:0; }
#category-list .category-edit-row { width:100%; padding:14px 16px; display:flex; gap:12px; align-items:center; min-height:68px; border:0; border-radius:0; color:var(--ink); background:var(--paper); text-align:left; transition:background-color .18s,color .18s; }
#category-list .category-edit-row strong { flex:1; min-width:0; font-size:15px; font-weight:450; }
#category-list .category-edit-row > .bi { flex-shrink:0; color:var(--muted); font-size:13px; }
.category-child-count { padding:3px 8px; border-radius:8px; background:var(--bg); color:var(--muted); font-size:11px; }
.category-name-row { display:flex; align-items:center; gap:12px; }
.category-name-row input { flex:1; min-width:0; margin:0; }
.category-emoji-button { display:grid; place-items:center; width:48px; height:48px; padding:0; flex:0 0 48px; border:1px solid var(--surface-outline); border-radius:14px; background:var(--bg); color:var(--ink); margin:0; }
.category-emoji-panel { padding:16px 0 0; }
.category-emoji-panel[hidden] { display:none; }
.category-emoji-panel > input { width:64px; text-align:center; font-size:24px; padding:6px; margin-bottom:12px; }
.category-emoji-panel .emoji-search-label { font-size:0; gap:0; }
.category-emoji-panel .emoji-current { display:none; }
#settings-dialog:has(#category-editor-children),#category-child-dialog { width:520px; }
#category-editor-children { margin-top:24px; }
.category-children-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.category-children-heading h3 { font-size:14px; font-weight:500; margin:0; }
.category-child-list { border:1px solid var(--surface-outline); border-radius:14px; overflow:hidden; }
.category-child-row { display:flex; align-items:center; gap:10px; min-height:56px; padding:8px 12px; width:100%; border:0; border-bottom:1px solid var(--surface-outline); border-radius:0; background:var(--paper); color:var(--ink); text-align:left; }
.category-child-row:last-child { border-bottom:0; }
.category-child-row span:not(.category-glyph) { flex:1; font-size:14px; }
.category-child-row .bi { color:var(--muted); font-size:13px; }
.category-child-empty { width:100%; min-height:56px; background:var(--bg); color:var(--muted); border:0; border-radius:0; font-size:13px; }
#category-child-delete { background:var(--ui-danger-bg); color:var(--danger); border-radius:12px; }
#category-child-form .dialog-actions > .primary { flex:1; }
@media(hover:hover){#category-list .category-edit-row:not(:disabled):hover,.category-child-row:hover,.category-child-empty:hover,.category-emoji-button:hover { background:var(--ui-hover); color:var(--ink); }#category-child-delete:hover{background:var(--ui-danger-hover);}}
@media(max-width:800px){#settings-dialog:has(#category-editor-children),#category-child-dialog,#theme-dialog { width:100%; }}
/* One persistent dimmer prevents flashes when dialogs are stacked or replaced. */
#modal-backdrop { position:fixed; inset:0; z-index:110; pointer-events:none; background:#10111680; }
#modal-backdrop[hidden] { display:none; }
dialog::backdrop, #confirm-dialog::backdrop { background:transparent; }
dialog[open] { animation:none; }
dialog.modal-behind { filter:brightness(.7); }
dialog { transition:background-color .25s,color .25s,border-color .25s,filter .24s; }
@media(prefers-reduced-motion:reduce){dialog{transition:none;}}
#category-list .category-edit-row > .category-child-count { flex:0 0 auto; }
html[data-theme=night] :is(.tx-icon,#category-list .category-glyph,.category-emoji-button) { background:color-mix(in srgb,var(--person-marker,var(--accent)) 35%,#fff); }
#category-child-undo { margin-top:12px; font-size:12px; }
html[data-theme=night] .category-child-row .category-glyph { background:color-mix(in srgb,var(--accent) 35%,#fff); border-radius:10px; }

/* Accent surfaces keep their hue; emoji and photographs retain their own colors. */
html[data-theme=accent] .choice-option[aria-selected=true] { color:var(--on-accent-soft); }
@media(hover:hover) {
 html[data-theme=accent] :is(.icon-button,.secondary,.choice-trigger,.choice-option,.month-control,.year-switch button,.month-grid button,.emoji-option,.category-emoji-button):not(:disabled):hover,
 html[data-theme=accent] #nav button:not(.active):hover,
 html[data-theme=accent] .filter-chips .chip:not(.active):hover { background:var(--ui-hover); color:var(--ink); }
 html[data-theme=accent] .choice-option[aria-selected=true]:hover { background:var(--ui-hover-strong); color:var(--ink); }
 html[data-theme=accent] .profile-toggle:hover { box-shadow:0 0 0 4px var(--ui-hover-strong); }
 html[data-theme=accent] .annual-table tbody tr:not(.annual-section):not(.annual-summary):hover > * { box-shadow:inset 0 0 0 9999px var(--ui-table-hover); }
 html[data-theme=accent] .theme-mode-options button[aria-pressed=true]:hover { background:var(--ui-hover-strong); color:var(--ink); }
}

html[data-theme=accent] .choice-option > .bi:last-child { color:inherit; }
@media(hover:hover) {
 html[data-theme=accent] .household .chip:not(.active):hover { background:var(--action-hover); color:var(--on-action-hover); }
 html[data-theme=accent] :is(.primary,.quick-expense,.quick-income,.floating-add):not(:disabled):hover { color:var(--on-action-hover); }
 html[data-theme=accent] :is(.settings-row,.profile-settings-row,.admin-budget-row):hover .settings-item-icon,
 html[data-theme=accent] #category-list .category-edit-row:hover .category-glyph { background:var(--paper); }
}