*{box-sizing:border-box}body{font:16px system-ui,Arial,sans-serif;margin:0;background:#f6f8fc;color:#17243b}header{background:linear-gradient(110deg,#123c69,#3869ad,#7a4caf);color:white;padding:22px max(20px,calc((100vw - 1200px)/2));}header h1{margin:0}header p{margin:4px 0 0}main{max-width:1200px;margin:20px auto;padding:0 16px}.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px}input,select,textarea,button{font:inherit;padding:9px;border:1px solid #b8c4d4;border-radius:7px}input{flex:1;min-width:180px}button{cursor:pointer;background:#fff}button.primary{background:#164d88;color:white;border-color:#164d88}button:hover{filter:brightness(.96)}.layout{display:grid;grid-template-columns:minmax(240px,330px) minmax(0,1fr);gap:18px}nav,section,.panel{background:white;border:1px solid #dce3ef;border-radius:10px;padding:14px}nav{max-height:75vh;overflow:auto}.song{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid #eee;border-radius:0;padding:12px 6px}.song small{display:block;color:#53657a}.song.active{background:#eaf1ff}.sheet{font:15px/1.55 'Courier New',monospace;white-space:pre;overflow:auto;background:#fbfcfe;border:1px solid #e3e8f1;padding:16px;border-radius:7px;tab-size:4}.muted{color:#596a7c}.arr{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.arr button.selected{background:#164d88;color:white}.status{min-height:24px}.admin-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}.admin-row label{display:flex;gap:5px;align-items:center}.admin-row input{flex:0;min-width:0}.admin-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px}textarea{width:100%;min-height:400px;font:14px/1.5 monospace;white-space:pre;tab-size:4}pre{overflow:auto}@media(max-width:750px){.layout,.admin-layout{grid-template-columns:1fr}nav{max-height:270px}}
.save-toast{position:fixed;right:20px;top:20px;z-index:9999;padding:16px 20px;border-radius:10px;box-shadow:0 8px 28px #0003;font-weight:650;max-width:min(420px,calc(100vw - 40px));transition:opacity .2s}.save-toast-success{background:#17643c;color:#fff}.save-toast-error{background:#a82323;color:#fff}.save-toast-hidden{opacity:0;pointer-events:none}.save-feedback{font-size:14px;font-weight:600}.save-feedback.success{color:#17643c}.save-feedback.pending{color:#755b11}.save-feedback.error{color:#a82323}

.catalog-controls{margin-top:24px;padding:16px;border:1px solid #b8c9db;border-radius:8px}.catalog-controls label{display:block;margin:10px 0}.catalog-controls input,.catalog-controls select{display:block;width:100%;max-width:550px;padding:8px;margin-top:4px}.catalog-controls button{margin:5px 8px 5px 0;padding:8px}

.genre-choices{display:flex;flex-wrap:wrap;gap:8px 14px;margin:8px 0 14px}.genre-choices label{display:inline-flex;align-items:center;gap:4px;width:auto}.catalog-controls{margin-top:18px;padding:12px;border:1px solid #ccd3df;border-radius:8px}.catalog-controls>label{display:block;margin:9px 0}.catalog-controls input,.catalog-controls select{max-width:100%}

/* Public song reader controls */
.reader-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;position:sticky;top:0;z-index:3;background:#fff;padding:10px 0;border-bottom:1px solid #dce3ef;margin:12px 0}
.reader-controls button{min-width:48px;padding:8px 12px;font-weight:600}.reader-controls #font-size-label{min-width:44px;text-align:center;font-variant-numeric:tabular-nums}.reader-controls #fullscreen-button{margin-left:auto;background:#164d88;color:white;border-color:#164d88}
#detail:fullscreen,#detail.fullscreen-fallback{background:white;padding:20px 26px;overflow:auto;height:100vh;width:100vw;max-width:none;border-radius:0}
#detail.fullscreen-fallback{position:fixed;inset:0;z-index:9999}
#detail:fullscreen .sheet,#detail.fullscreen-fallback .sheet{max-height:none;min-height:60vh}
#detail .sheet{font-size:18px;line-height:1.55;overflow:auto;max-width:100%}
@media(max-width:600px){.reader-controls{gap:5px}.reader-controls button{padding:8px}.reader-controls #fullscreen-button{margin-left:0}}

.transpose-controls{flex-wrap:wrap;gap:8px;margin-top:8px}.transpose-controls strong{font-size:14px}.transpose-controls small{opacity:.75}.transpose-controls button{min-width:70px}

.feature-settings{margin:14px 0;padding:16px;border:1px solid #ccd6e5;border-radius:10px}.feature-settings h2{font-size:18px;margin:0 0 12px}.setting-check{display:flex;align-items:center;gap:8px;margin-bottom:12px}.setting-check input{min-width:0;flex:none}.feature-settings button{margin-right:12px}.scroll-controls input[type=range]{flex:0 1 160px;min-width:95px;padding:0}.scroll-controls strong{font-size:14px}.scroll-controls label{font-size:14px}.scroll-controls span{font-size:13px;color:#53657a}

/* Compact public catalog filters */
.toolbar select{flex:1 1 140px;min-width:125px;max-width:220px}.toolbar #count{white-space:nowrap}
/* Admin genre checkboxes: keep each checkbox next to its own label */
.genre-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px 14px;align-items:start}.genre-choices label{display:inline-flex!important;align-items:center;justify-content:flex-start;gap:8px;width:auto!important;margin:0!important;white-space:nowrap}.genre-choices input[type=checkbox]{display:inline-block!important;flex:0 0 auto!important;width:16px!important;min-width:16px!important;max-width:16px!important;margin:0!important;padding:0!important}

#performance-management .performance-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#performance-management label{display:flex;flex-direction:column;gap:5px}#performance-management label:has(textarea),#performance-management .performance-form>div,#performance-management #event-feedback{grid-column:1/-1}#performance-management label.setting-check{flex-direction:row;align-items:center}@media(max-width:650px){#performance-management .performance-form{grid-template-columns:1fr}}