/* Fixed dark appearance with semantic surfaces. */
:root{color-scheme:dark;--bg:#101110;--surface:#1c1c1e;--surface2:#2c2c2e;--line:#38383a;--muted:#aeaeb2;--text:#f5f5f7;--accent:#c4f454;--accent-soft:#c4f45414;--danger:#ff6961;--success:#6dd58c;--toolbar:#1c1c1eea;--shadow:0 5px 24px #0002;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--radius:18px}
html{scroll-padding-top:90px}body{background:var(--bg);color:var(--text)}[hidden]{display:none!important}.button{border-radius:12px;min-height:44px}.primary{background:#c4f454;color:#18200e}.primary:hover{background:#d4ff76}.secondary,.filters{background:var(--surface2);border-color:var(--line);color:var(--text)}.secondary:hover{background:var(--surface);border-color:var(--muted)}.subtle,.icon-button{color:var(--muted)}.subtle:hover,.icon-button:hover{background:var(--surface2);color:var(--text)}.danger{color:var(--danger)}.form-error{color:var(--danger)}.form-error.success{color:var(--success)}
.sidebar{background:var(--toolbar);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding-top:max(30px,env(safe-area-inset-top));padding-left:max(20px,env(safe-area-inset-left))}.sidebar nav a{color:var(--muted)}.sidebar nav a.active{color:var(--accent);background:var(--accent-soft);border-color:transparent}.sidebar nav a:hover{background:var(--surface2)}.nav-caption,.account small,.workspace-footer{color:var(--muted)}.mini-card{background:var(--surface);border-color:var(--line)}.mini-card p{color:var(--muted)}.topbar{position:sticky;top:0;z-index:4;background:var(--toolbar);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);min-height:68px;height:auto;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:12px}.breadcrumb,.top-user{color:var(--muted)}.breadcrumb strong{color:var(--text);font-weight:600;font-size:14px}.breadcrumb .icon{color:var(--muted)}.avatar{background:var(--surface2);color:var(--purple);border-color:var(--line)}.main-content{margin:0 auto}.mobile-tabs{display:none}
.panel,.session-card,.stats-grid>div,.song-list,.request-panel,.ordered-client-list,.guest-example{background:var(--surface);border-color:var(--line);border-radius:18px;box-shadow:var(--shadow)}.session-card.is-open{background:var(--surface);border-color:var(--accent)}.session-card:hover{border-color:var(--accent)}.session-icon,.stats-grid i{background:var(--surface2);color:var(--muted)}.is-open .session-icon,.is-open .session-card-link{color:var(--accent)}.stats-grid>div>span,.card-date,.session-card>p,.session-metrics,.client-order-note,.client-list-hint,.client-song-name p,.client-song-name small{color:var(--muted)}.session-metrics strong{color:var(--text)}.section-heading h2>span{background:var(--surface2);color:var(--muted);border-color:var(--line)}.filters button{color:var(--muted);min-height:40px}.filters button.selected{background:var(--surface);color:var(--text)}.badge{background:var(--surface2);color:var(--muted);border-color:var(--line)}.badge.open{color:var(--success);background:var(--accent-soft);border-color:var(--line)}.badge.finished{color:var(--purple);background:var(--surface2)}.client-mini,.session-metrics .client-mini,.client-label{color:var(--purple)}
.field>span{color:var(--text);font-size:13px}.field>span>small,.field small,.forgot-link{color:var(--muted)}.field input,.field textarea,.copy-fallback{background:var(--surface);color:var(--text);border-color:var(--line);border-radius:12px;font-size:16px;min-height:48px}.field input::placeholder,.field textarea::placeholder{color:var(--muted)}.field input:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.toggle-card{border-color:var(--line)}.switch{background:var(--surface2)}.profile-heading p{color:var(--muted)}.auth-story{background:var(--surface);border-color:var(--line)}.auth-story p,.auth-story>small,.auth-form .eyebrow{color:var(--muted)}.auth-story h1 em,.auth-switch a,.hero h1 em,.hello-dot{color:var(--accent)}
.song-card,.client-edit-row{border-color:var(--line)}.song-info p,.song-info>small,.song-number,.reactions,.played-label{color:var(--muted)}.played{background:var(--surface2)}.played .song-info h3,.played-section>.section-heading h2{color:var(--text)}.reaction{background:var(--surface2);color:var(--text);border-color:var(--line)}.reaction:hover{background:var(--surface)}.reaction.chosen{color:var(--accent);background:var(--accent-soft);border-color:var(--accent)}.reaction.dislike{color:var(--danger);border-color:var(--danger)}.workspace .song-actions .button{min-height:44px;font-size:12px}.session-overview>span{color:var(--muted)}.session-overview strong{color:var(--text)}.sync-status{color:var(--success)!important}.sync-status.offline{color:var(--danger)!important}.notice{background:var(--accent-soft);border-color:var(--line)}.notice strong{color:var(--text)}.notice p{color:var(--muted)}.notice>.icon{color:var(--accent)}.share-panel,.client-panel{background:var(--surface);border-color:var(--line)}.share-panel .eyebrow,.share-panel p,.client-panel p,.client-panel small{color:var(--muted)}.client-panel .button{background:var(--surface2);border-color:var(--line);color:var(--purple)}.queue-empty h3{color:var(--text)}.queue-empty p,.queue-empty>.icon{color:var(--muted)}.empty-state{background:var(--surface);border-color:var(--line)}.empty-state .eyebrow,.empty-state p,.empty-chips{color:var(--muted)}.bottom-tip{background:var(--surface);border-color:var(--line)}.bottom-tip strong{color:var(--text)}.bottom-tip p{color:var(--muted)}
.audience{background:var(--bg)}.audience-top{background:var(--toolbar);border-color:var(--line);padding-top:env(safe-area-inset-top);height:calc(77px + env(safe-area-inset-top))}.audience-top>span,.audience-footer,.request-note,.request-panel .request-note{color:var(--muted)}.audience-main{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}.event-heading h1{color:var(--text)}.event-heading .eyebrow,.event-description,.audience-message p{color:var(--muted)}.audience-message{background:var(--surface);border-color:var(--line)}.landing-nav{padding-top:env(safe-area-inset-top)}.landing-nav nav>a:not(.button),.hero .eyebrow,.hero-copy>p,.hero-note,.ticker,.steps article>span,.art-caption{color:var(--muted)}.steps article{border-color:var(--line)}.guest-guide{background:var(--bg)}.connection-banner{background:var(--surface2);color:var(--text);border-color:var(--line)}.help-icon,.text-link:hover,.mini-wave,.empty-record,.stats-grid i.stat-green{color:var(--accent)}
dialog{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:24px;box-shadow:0 24px 90px #0005;max-height:85svh;overflow:auto}dialog p{color:var(--muted)}dialog::backdrop{background:#0007;backdrop-filter:blur(5px)}#install-help{max-width:440px}#install-help h2{padding-right:22px}#install-help p{margin-top:20px;font-size:14px;line-height:1.65}#install-help strong{color:var(--text)}
.app-tools{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:6;display:flex;gap:8px;align-items:center}.app-tools .button{font-size:12px;padding:10px 14px;box-shadow:var(--shadow);background:var(--surface)}.app-network{padding:10px;border-radius:12px;background:var(--surface);color:var(--danger);font-size:12px}.app-update{position:fixed;z-index:15;bottom:calc(76px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 32px));padding:18px;display:flex;align-items:center;gap:14px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:20px;box-shadow:0 8px 48px #0004}.app-update p{color:var(--muted);font-size:12px;margin-top:5px}.app-update strong{font-size:14px}.app-update>.icon-button{flex-shrink:0}#toast{background:var(--surface2);color:var(--text);border:1px solid var(--line);bottom:calc(78px + env(safe-area-inset-bottom))}.workspace-footer,.landing-footer,.audience-footer{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
@media(max-width:700px){
 .sidebar{display:none}.work-area{margin:0;width:100%}.topbar{height:auto;min-height:calc(62px + env(safe-area-inset-top));padding:calc(12px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left))}.breadcrumb{font-size:0;gap:0}.breadcrumb>.icon{display:none}.breadcrumb strong{font-size:18px;letter-spacing:-.4px}.top-user>span:not(.avatar){display:none}.top-user .avatar{margin:0}.main-content{padding:26px max(20px,env(safe-area-inset-right)) 26px max(20px,env(safe-area-inset-left))}.mobile-tabs{position:fixed;z-index:8;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(3,1fr);background:var(--toolbar);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:1px solid var(--line);padding:5px env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.mobile-tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:55px;color:var(--muted);font-size:11px;font-weight:500}.mobile-tabs .icon{width:22px;height:22px}.mobile-tabs a.active{color:var(--accent)}.mobile-tabs a.active .icon{stroke-width:2.2}.page-intro h1{font-size:32px}.page-intro .eyebrow{color:var(--muted)}.workspace{padding-bottom:calc(65px + env(safe-area-inset-bottom));min-height:100svh}.workspace-footer{padding:20px 20px 75px}.app-tools{bottom:calc(12px + env(safe-area-inset-bottom))}body:has(.mobile-tabs) .app-tools{bottom:calc(72px + env(safe-area-inset-bottom))}body:has(.mobile-tabs) .app-update{bottom:calc(130px + env(safe-area-inset-bottom))}body:has(.mobile-tabs) #toast{bottom:calc(130px + env(safe-area-inset-bottom))}.song-actions .button,.song-actions .icon-button,.client-row-buttons .button,.client-row-buttons .icon-button{min-height:44px}.workspace .song-side{max-width:100%;flex-wrap:wrap}.workspace .song-actions{margin-left:auto}.filters button{min-height:44px}.session-toolbar,.session-toolbar>div{flex-wrap:wrap}.auth-main{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));padding-top:calc(24px + env(safe-area-inset-top));padding-bottom:90px}.app-update{gap:8px;padding:14px}.app-update .button{font-size:12px;padding:10px}.profile-actions{flex-wrap:wrap}
}
@media print{.app-tools,.app-update,.mobile-tabs{display:none!important}}