.appearance-settings{padding:22px}.appearance-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:22px 0}.theme-choice{display:flex;flex-direction:column;gap:10px;position:relative;border:2px solid #dce3ee;border-radius:12px;padding:16px;cursor:pointer}.theme-choice:has(input:checked){border-color:#2187db;box-shadow:0 0 0 2px #2187db22}.theme-choice input{position:absolute;right:16px;top:16px;min-height:0!important}.theme-choice small{line-height:1.6;color:#64748b}.theme-preview{height:115px;display:flex;border-radius:7px;overflow:hidden;background:#edf2fc}.theme-preview>i{width:22%;background:linear-gradient(#1a237e,#0d47a1)}.theme-preview>span{padding:20px 12px;display:grid;gap:8px;width:78%}.theme-preview b{height:12px;width:70%;background:#2187db;border-radius:3px}.theme-preview em{background:white;height:20px;border-radius:3px}.preview-emerald{background:#edf7f2}.preview-emerald>i{background:linear-gradient(#103e37,#076958)}.preview-emerald b{background:#087f6c}.preview-midnight{background:#111827}.preview-midnight>i{background:linear-gradient(#171b35,#31235a)}.preview-midnight b{background:#b4a0ff}.preview-midnight em{background:#26334a}.appearance-font{max-width:380px}.appearance-sample{border:1px solid #dce3ee;border-radius:10px;padding:18px;margin:20px 0;background:#f8fafc}.appearance-sample h3{margin-top:0}.appearance-sample p{line-height:1.7}#appearance-status{font-size:13px;color:#64748b}
:root[data-font=system]{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}:root[data-font=arial]{font-family:Arial,Helvetica,sans-serif}:root[data-font=verdana]{font-family:Verdana,Geneva,sans-serif}:root[data-font=georgia]{font-family:Georgia,'Times New Roman',serif}html[data-font] body,html[data-font] button,html[data-font] input,html[data-font] select,html[data-font] textarea{font-family:inherit}
:root[data-theme=emerald]{--surface:#fff;--canvas:#edf5f1;--tint:#f2f8f5;--ink:#203c36;--muted:#546f66;--line:#d5e5dd;--accent:#087c66;--accent-ink:#fff;--heading:#145446;--selected:#d9f0e5}
:root[data-theme=midnight]{color-scheme:dark;--surface:#1e293b;--canvas:#111827;--tint:#243247;--ink:#e5edf7;--muted:#b4c2d4;--line:#3d4c63;--accent:#b8a4ff;--accent-ink:#21163f;--heading:#ded4ff;--selected:#3b3159}
html[data-theme]:not([data-theme=classic]) body{background:var(--canvas);color:var(--ink)}html[data-theme=emerald] aside{background:linear-gradient(180deg,#103e37,#076958)}html[data-theme=midnight] aside{background:linear-gradient(180deg,#171b35,#31235a)}
html[data-theme]:not([data-theme=classic]) :is(h1,h2,h3,.stat strong,#content .panel-head h2){color:var(--heading)}
html[data-theme]:not([data-theme=classic]) :is(.panel,.board-card,dialog,.leave-month,.leave-month-detail,.login-panel form,.stat){background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-theme]:not([data-theme=classic]) #workspace #content>.panel{border-color:var(--line)}
html[data-theme]:not([data-theme=classic]) :is(.toolbar,.flow-board,.department-tree,.department-main .toolbar,.appearance-sample,.employee-photo-box,.dashboard-meta span,pre,.strip){background:var(--tint)!important;color:var(--ink);border-color:var(--line)!important}
html[data-theme]:not([data-theme=classic]) :is(input,select,textarea,#content input,#content select,#dialog input,#dialog select){background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-theme]:not([data-theme=classic]) :is(button,#content button,#dialog button){background:var(--accent);color:var(--accent-ink)}
html[data-theme]:not([data-theme=classic]) :is(button.secondary,#content button.secondary,#dialog button.secondary,.module-tabs button,.department-tree button,.employee-tabs button){background:var(--surface)!important;color:var(--ink);border-color:var(--line)}
html[data-theme]:not([data-theme=classic]) :is(nav button,nav button:hover){background:transparent;color:#e5edf7}html[data-theme]:not([data-theme=classic]) nav button.active{background:#ffffff26;color:white}
html[data-theme]:not([data-theme=classic]) :is(th,#content .master-table th,.board-table th,.leave-month-grid .day-heading){background:var(--tint);color:var(--muted)}
html[data-theme]:not([data-theme=classic]) :is(td,.board-person,.panel-head,.board-card h3,.admin-pagination,.department-main .table-scroll,.theme-choice,.appearance-sample){border-color:var(--line)!important}
html[data-theme]:not([data-theme=classic]) :is(tbody tr:nth-child(even),#content .master-table tbody tr:nth-child(even),.board-table tbody tr:nth-child(even)){background:var(--tint)}html[data-theme]:not([data-theme=classic]) tbody tr:hover{background:var(--selected)}
html[data-theme]:not([data-theme=classic]) :is(.muted,.note,.board-note,.board-empty,.board-person small,.board-heading span,.employee-ident small,.department-note,.admin-count,.theme-choice small,#appearance-status,.leave-month-detail p,.leave-person-row small){color:var(--muted)!important}
html[data-theme]:not([data-theme=classic]) :is(.employee-drawer .dialog-head,.employee-drawer #form-error,.leave-month-grid>div,.leave-month-grid>button){background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-theme]:not([data-theme=classic]) :is(.module-tabs button.active,.department-tree button.selected,.leave-month-grid .leave-day){background:var(--selected)!important;color:var(--heading)}
html[data-theme]:not([data-theme=classic]) .employee-drawer .employee-tabs [aria-selected=true]{color:var(--heading);border-bottom-color:var(--accent)}html[data-theme]:not([data-theme=classic]) .board-status svg text{fill:var(--ink)}html[data-theme]:not([data-theme=classic]) .theme-choice:has(input:checked){border-color:var(--accent)!important}html[data-theme]:not([data-theme=classic]) a{color:var(--heading)}html[data-theme]:not([data-theme=classic]) aside a{color:#e5edf7}html[data-theme=midnight] .staging-note{background:#243247;color:#dcc990;border-color:#66563b}html[data-theme=midnight] .login-shell{background:#111827}
@media(max-width:900px){.appearance-themes{grid-template-columns:1fr}.theme-preview{height:90px}.appearance-settings{padding:16px}}

html[data-theme=midnight] :is(.employee-status,.badge){background:#184937;color:#b7f3d1}html[data-theme=midnight] :is(.employee-status.resigned,.badge.offline){background:#542936;color:#ffbfcd}html[data-theme=midnight] .badge.warn{background:#544323;color:#ffe3a1}html[data-theme=midnight] .badge.neutral{background:#334155;color:#dce6f5}html[data-theme=midnight] .leave-month-grid :is(.holiday-day,.off-day){background:#2d3e44;color:#e5edf7}html[data-theme=midnight] :is(.board-avatar,.employee-initial){background:#374361;color:#e1d7ff}html[data-theme]:not([data-theme=classic]) button:focus-visible,html[data-theme]:not([data-theme=classic]) input:focus-visible,html[data-theme]:not([data-theme=classic]) select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}html[data-theme]:not([data-theme=classic]) button:disabled{opacity:.6}

html[data-theme]:not([data-theme=classic]) #workspace #nav button{background:transparent;color:#e5edf7}html[data-theme]:not([data-theme=classic]) #workspace #nav button:hover,html[data-theme]:not([data-theme=classic]) #workspace #nav button.active{background:#ffffff26;color:white}html[data-theme]:not([data-theme=classic]) #workspace #content .panel-head h2{color:var(--heading)!important}html[data-theme]:not([data-theme=classic]) :is(.employee-search>summary,.employee-extra-filter summary,.department-tree h3,.leave-month h3,.leave-month-detail h3,.empty strong,#message){color:var(--muted)!important}html[data-theme]:not([data-theme=classic]) .appearance-settings strong{font-family:inherit}html[data-theme=emerald] .staging-note{background:#dcefe5;color:#285e4a}

/* Compact text keeps existing control dimensions and click targets. */
html[data-font-size=small] body{font-size:13px}
html[data-font-size=small] :is(#content,#dialog) :is(input,select,textarea,button,label,td,th,.employee-ident strong,.board-person strong,.board-person-time,.note,.board-note,.board-empty,.appearance-settings p,.theme-choice small,.theme-choice strong,.admin-count){font-size:11px!important}
html[data-font-size=small] #nav button{font-size:11px}
html[data-font-size=small] #page-title{font-size:24px}
html[data-font-size=small] #content :is(.panel-head h2,.board-card h3,.appearance-sample h3){font-size:15px!important}
html[data-font-size=small] #dialog h2{font-size:16px}
html[data-font-size=small] #appearance-status{font-size:11px}

html[data-theme]:not([data-theme=classic]) :is(.chart-grid text,.donut .donut-number){fill:var(--ink)}
html[data-theme]:not([data-theme=classic]) :is(.chart-grid line,.donut circle.base){stroke:var(--line)}
html[data-theme]:not([data-theme=classic]) :is(.subscription-summary,.health-operations,.health-card,.api-card,.support-card,.metric-card){background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-theme]:not([data-theme=classic]) :is(.health-services,.flow-card p,.dashboard-meta span,.health-card p,.health-card small){color:var(--muted)}
html[data-theme]:not([data-theme=classic]) #toast{background:var(--heading);color:var(--canvas)}

html[data-theme]:not([data-theme=classic]){background:var(--canvas)}html[data-theme]:not([data-theme=classic]) body{min-height:100vh}