:root{--surface:#fff;--surface-soft:#fafafc;--surface-hover:#f1f1f5;--focus:#0071e3;--theme-shadow:0 4px 20px #182b4510}
.appearance-control{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:20px;white-space:nowrap;font-size:14px;min-height:36px;flex-shrink:0}
.appearance-control [data-theme-icon]{font-size:18px;width:19px;line-height:1;text-align:center;color:var(--muted)}
.appearance-control select,.top-tools .appearance-control select{font-size:14px;color:var(--ink);background:var(--surface);border:0;max-width:none;padding:0 3px;min-height:22px;cursor:pointer;outline-offset:3px}
.appearance-control select:focus-visible{outline:2px solid var(--focus);border-radius:4px}
.appearance-floating{position:fixed;right:24px;top:20px;z-index:45;box-shadow:var(--theme-shadow)}
@media(max-width:1200px){.top-tools{gap:12px}.top-tools .live{display:none}}
@media(max-width:600px){.appearance-label{display:none}.appearance-floating{right:16px;top:14px}.hand-context{align-items:center;gap:9px;flex-wrap:wrap}.hand-context .appearance-control{margin-left:auto}.hand-context select{max-width:120px}.hand-context .appearance-control select{max-width:none}}
@media screen{
html[data-theme="dark"]{--bg:#17181c;--ink:#f0f1f5;--muted:#a9acb7;--line:#393c46;--blue:#75b6ff;--green:#78d4a1;--orange:#f2bc72;--red:#ff9299;--surface:#23252b;--surface-soft:#292c33;--surface-hover:#323640;--focus:#82beff;--theme-shadow:0 8px 28px #0005;color-scheme:dark}
html[data-theme="dark"] .sidebar{background:#1d1f24}
html[data-theme="dark"] :is(.topbar,.hand-top,.hand-bottom){background:#202228ed;border-color:var(--line)}
html[data-theme="dark"] :is(.card,.metric,.gift,.calendar,.modal,.modal-head,.search,.btn,.hand-card,.hand-session,.hand-student,.hand-item,.hand-dates button,.hand-switch,.enrollment-shortcut){background:var(--surface);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] :is(.modal-foot,.table th,.field input,.field select,.field textarea,.flow-node,.requirements,.recovery-codes code,.hand-more-grid button,.hand-date-control input){background:var(--surface-soft);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] :is(.field input,.field textarea,.field select):focus{background:var(--surface);border-color:var(--focus);box-shadow:0 0 0 3px #75b6ff24}
html[data-theme="dark"] :is(input,select,textarea){color:var(--ink)}
html[data-theme="dark"] :is(input,textarea)::placeholder{color:#969ba9;opacity:1}
html[data-theme="dark"] :is(.field label,.nav-label,.nav-item,.crumb,.crumb b,.live,.eyebrow,.stat-label,.metric-label,.metric p,.table th,.table-foot,.table-note,.footer,.setting p,.class-row p,.calendar-head,.calendar-head b,.calendar-time,.timeline-item p,.hand-context,.hand-context select,.hand-heading p,.hand-stats span,.hand-section-title>span,.hand-quick,.hand-session>p,.hand-session-foot>span,.hand-empty,.hand-list-row strong,.hand-student-info,.hand-dates small,.hand-note,.hand-feedback,.hand-bottom button,.enrollment-info,.login-form footer){color:var(--muted)}
html[data-theme="dark"] :is(.iconbtn:hover,.nav-item:hover,.btn:hover,.todo:hover,.quick:hover,.table tr:hover td,.refund-order:hover){background:var(--surface-hover)}
html[data-theme="dark"] .nav-item.active,html[data-theme="dark"] .tabs button.selected,html[data-theme="dark"] .attendance-row .tabs button.selected{background:#253d5b;color:#acd2ff}
html[data-theme="dark"] :is(.tabs,.attendance-row .tabs){background:#17191e}
html[data-theme="dark"] .tabs button{color:#b4b8c4}
html[data-theme="dark"] :is(.tag,.avatar,.table .person .avatar,.profile-avatar,.todo-icon,.quick span,.hand-quick>span,.hand-item-icon){background:#303b4b;color:#b9cee9}
html[data-theme="dark"] :is(.hero,.mobile-hero,.hand-hero,.login-showcase,.gift-art){background:linear-gradient(125deg,#24344c,#343046);color:var(--ink)}
html[data-theme="dark"] :is(.hero p,.hero .eyebrow,.hand-hero p,.hand-hero .eyebrow,.login-showcase p){color:#b4c5dd}
html[data-theme="dark"] :is(.login-screen,.handheld){background:var(--bg)}
html[data-theme="dark"] :is(.tag.blue,.event,.info,.calendar-head.today,.refund-order:has(input:checked),.flow-node.current){background:#243a54;border-color:#3b587a;color:#b4d7ff}
html[data-theme="dark"] :is(.tag.green,.event.green,.flow-node.done){background:#233c31;border-color:#3e6954;color:#a2dfbd}
html[data-theme="dark"] :is(.tag.orange,.event.orange){background:#453522;border-color:#715537;color:#f3ca91}
html[data-theme="dark"] :is(.tag.red,.form-error,.btn.danger){background:#482c33;border-color:#70424b;color:#ffb4bc}
html[data-theme="dark"] :is(.tag.purple,.event.purple){background:#3b2f4e;border-color:#655079;color:#d8b9fa}
html[data-theme="dark"] .btn.primary{background:#1674d3;border-color:#1674d3;color:#fff}
html[data-theme="dark"] .btn.primary:hover{background:#2186ec}
html[data-theme="dark"] .btn.ghost{background:transparent;color:var(--blue);border-color:transparent}
html[data-theme="dark"] .hand-dates button.selected{background:#166ac1;color:white;border-color:#358de8}
html[data-theme="dark"] .hand-dates button.selected small{color:#dbeaff}
html[data-theme="dark"] .hand-bottom button.selected{color:var(--blue)}
html[data-theme="dark"] :is(.table td,.calendar-time,.calendar-head,.class-row,.todo,.timeline,.hand-feedback,.hand-list-row,.hand-empty,.student-history-tabs,.profile-account){border-color:var(--line)}
html[data-theme="dark"] .handheld .student-history-tabs{background:var(--surface)}
html[data-theme="dark"] .nav-item .count{background:#344b68;color:#c0dfff}
html[data-theme="dark"] .progress{background:#383e49}
html[data-theme="dark"] .bar{background:#466387}
html[data-theme="dark"] .modal-backdrop{background:#06080db3}
html[data-theme="dark"] #toast{background:#e6e9f2ed;color:#20232c}
html[data-theme="dark"] :is(.metric-top,.metric-foot,.metric-unit){color:var(--muted)}
html[data-theme="dark"] .metric-foot b{color:var(--green)}
html[data-theme="dark"] .hero:after{background:#7586a9;opacity:.18}
/* QR codes remain black on white so printed and screen-scanned labels stay readable. */
html[data-theme="dark"] :is(.student-code-image,.enrollment-qr){background:#fff;color:#222;border-color:#ddd;color-scheme:light}
html[data-theme="dark"] :is([style*="background:#f5f5f7"],[style*="background: #f5f5f7"]){background:var(--surface-soft)!important;color:var(--ink)}
}
@media print{.appearance-control{display:none!important}}

/* Compact appearance controls share the existing rounded button language. */
.setting .theme-setting-picker{display:inline-flex;flex-direction:row;align-items:center;gap:10px;width:auto;max-width:100%;margin-top:4px}
.setting .theme-setting-picker>span{font-size:14px;color:var(--muted);white-space:nowrap}
.setting .theme-setting-picker select{width:auto;max-width:190px;min-height:34px;border:1px solid var(--line);border-radius:18px;padding:6px 12px;background:var(--surface);font-size:14px;line-height:1.4;color:var(--ink);cursor:pointer;box-shadow:0 1px 3px #00000005}
.appearance-control{gap:5px;padding:5px 9px;min-height:32px;font-size:13px}
.appearance-control select,.top-tools .appearance-control select{font-size:13px}
@media(max-width:600px){.setting .theme-setting-picker select{min-height:40px;padding:8px 12px}.appearance-control{min-height:36px}}