@font-face {
  font-family:Inter;
  src:url('/admin-assets/InterVariable.woff2') format('woff2');
  font-style:normal;
  font-weight:100 900;
  font-display:swap
}
:root {
  color-scheme:light;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  color:#17202b;
  background:#fff;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  --ink:#202124;
  --muted:#646b75;
  --line:#e3e7ed;
  --canvas:#f6f7f9;
  --soft:#f1f3f6;
  --blue:#0b57d0;
  --blue-soft:#eef3ff;
  --red:#ab3535;
  --green:#167c5b
}
* {
  box-sizing:border-box
}
html {
  min-height:100%
}
body {
  margin:0;
  min-height:100vh;
  min-height:100dvh
}
button,input,textarea,select {
  font:inherit
}
button,a {
  touch-action:manipulation
}
button {
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
button:disabled {
  cursor:wait;
  opacity:.55
}
[hidden] {
  display:none!important
}
:focus-visible {
  outline:3px solid #8aaaf1;
  outline-offset:3px
}
img {
  vertical-align:middle
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-weight:600;
  letter-spacing:-.025em
}
p {
  line-height:1.55
}
.dropzone>svg {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
.button {
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  color:var(--ink);
  font-size:13px;
  font-weight:550;
  line-height:1.3;
  white-space:nowrap;
  transition:background-color .15s,border-color .15s
}
.button img {
  flex:none
}
.button:hover {
  background:#f5f6f8;
  border-color:#ccd3dc
}
.button.quiet {
  border-color:transparent;
  background:var(--soft)
}
.button.quiet:hover {
  background:#e8ecf1
}
.button.primary {
  background:var(--blue);
  border-color:var(--blue);
  color:#fff
}
.button.primary:hover {
  background:#0847af
}
.button.danger,.text-button.danger {
  color:var(--red)
}
.button.full-width {
  width:100%;
  margin-top:18px
}
.icon-button {
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--muted)
}
.icon-button:hover {
  background:var(--soft)
}
.text-button,.quiet-button {
  min-height:44px;
  padding:0 8px;
  border:0;
  background:transparent;
  color:var(--blue);
  font-weight:500
}
.text-button:hover,.quiet-button:hover {
  text-decoration:underline
}
.app-toolbar {
  height:64px;
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:10px 28px;
  border-bottom:1px solid var(--line);
  background:#fff
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  font-size:18px;
  font-weight:600;
  letter-spacing:-.3px
}
.toolbar-actions {
  display:flex;
  align-items:center;
  gap:12px
}
.account-button {
  width:44px;
  height:44px;
  border:0;
  display:grid;
  place-items:center;
  background:transparent;
  border-radius:22px
}
.account-button span {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--soft);
  font-size:12px;
  font-weight:600
}
.mobile-settings,.mobile-create,.mobile-upload,.song-mobile-nav,.mobile-preview {
  display:none
}
.workspace-layout {
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  min-height:calc(100dvh - 64px)
}
.library-browser {
  position:sticky;
  top:64px;
  display:flex;
  flex-direction:column;
  gap:16px;
  height:calc(100dvh - 64px);
  min-height:320px;
  padding:24px 16px 16px;
  background:#fff;
  border-right:1px solid var(--line);
  min-width:0
}
.library-heading {
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.library-heading h1 {
  font-size:20px;
  line-height:28px
}
.library-heading #result-count {
  font-size:13px;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}
.search {
  min-height:44px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  background:var(--soft);
  border-radius:9px
}
.search:focus-within {
  outline:3px solid #cad9fd
}
.search input {
  border:0!important;
  outline:0!important;
  padding:0!important;
  background:transparent!important;
  min-width:0;
  width:100%;
  min-height:44px!important;
  font-size:14px!important
}
.search input::placeholder {
  color:var(--muted)
}
.search img {
  flex:none
}
.library-filters {
  display:flex;
  gap:8px;
  flex:none
}
.filter {
  position:relative;
  min-width:54px;
  min-height:44px;
  padding:0 16px;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:13px;
  font-weight:500;
  white-space:nowrap
}
.filter.active {
  color:var(--blue);
  font-weight:600
}
.filter.active::after {
  content:"";
  position:absolute;
  bottom:5px;
  left:calc(50% - 8px);
  width:16px;
  height:2px;
  background:var(--blue)
}
.library-results {
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  flex:1;
  padding:3px;
  margin:-3px
}
.lesson-list {
  display:flex;
  flex-direction:column;
  gap:4px
}
.lesson-row {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  width:100%;
  min-height:78px;
  padding:12px;
  border:0;
  border-radius:10px;
  background:transparent;
  text-align:left;
  color:var(--ink)
}
.lesson-row:hover {
  background:#f5f6f8
}
.lesson-row.active,.lesson-row[aria-current="true"],.lesson-row[aria-pressed="true"] {
  background:var(--blue-soft)
}
.song-mark {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex:none;
  background:#fff;
  border-radius:9px
}
.song-copy {
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex:1
}
.song-title {
  font-size:14px;
  font-weight:600;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  line-height:20px
}
.lesson-row.active .song-title,.lesson-row[aria-current="true"] .song-title,.lesson-row[aria-pressed="true"] .song-title {
  color:var(--blue)
}
.song-artist,.song-meta {
  font-size:12px;
  color:var(--muted);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  line-height:18px
}
.song-meta,.row-chevron {
  display:none
}
.selection-check {
  flex:none
}
.library-settings {
  flex:none;
  width:100%
}
.empty-state {
  padding:28px 8px;
  text-align:center;
  color:var(--muted)
}
.empty-state h2 {
  margin:12px 0 6px;
  font-size:17px;
  color:var(--ink)
}
.empty-state p {
  font-size:13px;
  margin-bottom:16px
}
.migration-note {
  padding:10px 12px;
  background:var(--blue-soft);
  border-radius:9px;
  font-size:12px
}
.migration-note strong {
  display:block;
  font-weight:600
}
.migration-note .text-button {
  padding:0;
  min-height:36px
}
.detail-empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-height:calc(100dvh - 64px);
  color:var(--muted)
}
.detail-empty h2 {
  font-size:18px;
  font-weight:500
}
.song-detail {
  min-width:0;
  background:var(--canvas);
  position:relative
}
.song-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  min-height:144px;
  padding:30px 36px 26px;
  border-bottom:1px solid var(--line);
  background:#fff
}
.song-heading {
  min-width:0;
  flex:1
}
.song-heading h1 {
  font-size:30px;
  line-height:38px;
  overflow-wrap:anywhere
}
.song-heading h1:focus {
  outline:0
}
.song-byline {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:3px;
  color:var(--muted);
  min-height:26px
}
.song-sharing {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px
}
.song-metadata {
  font-size:13px;
  color:var(--muted);
  margin-top:12px
}
.song-actions {
  display:flex;
  align-items:center;
  gap:8px;
  padding-top:4px;
  flex:none
}
.song-actions #selected-edit {
  min-width:124px
}
.song-actions #detail-share {
  min-width:104px
}
.song-menu {
  position:relative
}
.song-menu summary {
  list-style:none
}
.song-menu summary::-webkit-details-marker {
  display:none
}
.menu-panel {
  position:absolute;
  z-index:4;
  right:0;
  top:50px;
  width:190px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 8px 24px #17202b12;
  background:#fff
}
.menu-panel button {
  width:100%;
  min-height:44px;
  padding:0 12px;
  text-align:left;
  background:transparent;
  border:0;
  border-radius:6px
}
.menu-panel button:hover {
  background:var(--soft)
}
.song-preview {
  padding:24px 36px 48px
}
.preview-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:44px;
  margin-bottom:16px;
  color:var(--muted)
}
.preview-toolbar>span {
  font-size:14px
}
.preview-paper {
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  min-height:488px;
  padding:28px 36px;
  box-shadow:0 2px 6px #20212404;
  min-width:0;
  overflow:hidden
}
.preview-controls {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:22px
}
.track-picker {
  width:224px;
  max-width:65%;
  position:relative
}
.track-picker select {
  min-height:44px!important;
  background:var(--soft)!important;
  border:1px solid transparent!important;
  border-radius:8px!important;
  padding-right:34px!important;
  font-size:13px!important;
  appearance:none;
  background-image:url('/admin-assets/down.svg')!important;
  background-repeat:no-repeat!important;
  background-position:right 12px center!important;
  text-overflow:ellipsis
}
.preview-tempo {
  white-space:nowrap;
  font-size:12px;
  color:var(--muted)
}
.preview-status {
  font-size:13px;
  color:var(--muted);
  padding:24px 0
}
.preview-status.error {
  color:var(--red)
}
#score-preview {
  min-width:0;
  width:100%;
  font-family:Arial,sans-serif
}
#score-preview .at-surface {
  max-width:100%
}
.loading-state {
  min-height:55vh;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:var(--muted)
}
.spinner {
  width:19px;
  height:19px;
  border:2px solid var(--line);
  border-top-color:var(--blue);
  border-radius:50%;
  animation:spin .8s linear infinite
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
/* The sign-in uses one calm surface with separate identity and form columns. */
.access {
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:48px 24px;
  background:#f3f5f8
}
.access-card {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  width:min(920px,100%);
  padding:48px;
  border:1px solid #e9ecf1;
  border-radius:24px;
  background:#fff;
  box-shadow:0 4px 24px #20212403
}
.access-identity {display:flex;flex-direction:column;align-items:flex-start}
.access-brand {margin-bottom:64px;font-size:21px;gap:11px}
.access-card h1 {font-size:38px;font-weight:500;letter-spacing:-1.5px;line-height:1.2;margin:12px 0 14px}
.eyebrow {font-size:10px;font-weight:650;letter-spacing:1.6px;color:var(--muted)}
.access-intro:empty {display:none}
.access-intro,.legacy-note {font-size:14px;color:var(--muted);line-height:1.6}
.legacy-note {padding:12px;background:var(--blue-soft);border-radius:8px;margin-bottom:16px}
.access-fields {padding-top:44px}
.access-fields .field-label {font-size:13px;margin:0 0 9px;font-weight:550}
.access-fields .field-label:not(:first-child) {margin-top:24px}
.access-fields input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {min-height:50px;border-radius:9px;padding:12px 14px;font-size:15px}
.access-fields .full-width {min-height:46px;margin-top:28px;font-size:14px}
.password-field {position:relative}
.password-field input {padding-right:48px!important}
.password-toggle {position:absolute;right:3px;top:3px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:var(--muted)}
.password-toggle:hover {background:var(--soft)}
.password-toggle svg {width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.eye-slash {display:none}
.password-toggle[aria-pressed="true"] .eye-slash {display:block}
.field-label {
  display:block;
  margin:18px 0 8px;
  font-size:13px;
  font-weight:500
}
.field-label span {
  color:var(--muted);
  font-size:12px;
  font-weight:400;
  margin-left:8px
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),textarea,select {
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border:1px solid #d7dde5;
  border-radius:20px;
  background:#fff;
  color:var(--ink);
  font-size:14px
}
textarea {
  resize:vertical;
  line-height:1.5
}
input::placeholder,textarea::placeholder {
  color:#788390
}
.field-hint {
  font-size:12px;
  color:var(--muted);
  margin-top:8px
}
.form-status {
  margin-top:12px;
  font-size:13px;
  color:var(--muted);
  line-height:1.5
}
.form-status:empty {
  display:none
}
.form-status.error {
  color:var(--red)
}
.auth-switch {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px;
  margin-top:16px;
  font-size:13px;
  color:var(--muted)
}
.account-email {
  margin:8px 0 24px;
  color:var(--muted);
  overflow-wrap:anywhere
}
/* Native dialogs retain keyboard focus, Escape handling, and modal semantics. */
dialog {
  width:min(620px,calc(100vw - 32px));
  max-height:calc(100dvh - 48px);
  margin:auto;
  padding:28px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  color:var(--ink);
  box-shadow:0 20px 80px #17202b25;
  overflow:auto;
  overscroll-behavior:contain
}
dialog::backdrop {
  background:#17202b55;
  backdrop-filter:blur(3px)
}
.dialog-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px
}
.dialog-head h2 {
  font-size:22px;
  line-height:1.35
}
.dialog-head p {
  font-size:13px;
  color:var(--muted);
  margin-top:5px
}
.dialog-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--line)
}
.spacer {
  flex:1
}
.dropzone {
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;min-height:230px;padding:28px 20px;border:1px dashed #c0cbdc;border-radius:12px;
  background:#fafbfd;text-align:center;cursor:pointer;transition:background .15s,border-color .15s
}
.dropzone:hover,.dropzone:focus-within {background:#f2f6fd;border-color:#6e92c5}
.dropzone:focus-within {outline:3px solid #0b57d033;outline-offset:3px}
.dropzone .upload-icon {display:grid;place-items:center;width:48px;height:48px;border:1px solid #e1e7f0;border-radius:14px;background:#fff;color:#4d6c98;margin-bottom:4px}
.dropzone .upload-icon svg {width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dropzone strong {font-size:15px;font-weight:600;color:#283749}
.dropzone .upload-formats {font-size:12px;color:var(--muted)}
.dropzone .choose-files {display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;margin-top:9px;border:1px solid #b9c7db;border-radius:8px;background:#fff;color:#244d88;font-size:13px;font-weight:550;box-shadow:0 1px 2px #172d4910}
.dropzone input.sr-only {width:1px;min-height:0;padding:0;border:0}
.drag-over {background:var(--blue-soft)!important;outline:2px solid #7c9ce7}
.upload-limit {margin-top:10px;text-align:center;color:#8792a2;font-size:11px}
.file-selection {max-height:230px;overflow:auto;margin-top:16px;display:grid;gap:8px}
.file-selection:empty {display:none}
.upload-file {display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #e2e7ef;border-radius:10px;background:#fff}
.upload-file>img {width:24px;height:28px;flex:none}
.upload-file>div {min-width:0;flex:1}
.upload-file strong {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:13px}
.upload-file span {display:block;font-size:11px;color:var(--muted);margin-top:4px}
.upload-file .icon-button {width:36px;height:36px;min-width:36px;min-height:36px}
#upload-dialog {width:min(540px,calc(100vw - 32px));max-width:none;padding:24px;border-radius:18px}
#upload-dialog .dialog-head {align-items:flex-start;margin-bottom:22px}
#upload-dialog .dialog-head h2 {font-size:21px;letter-spacing:-.5px}
#upload-dialog .dialog-head .icon-button {margin:-4px -4px 0 0}
#upload-dialog .dialog-actions {border:0;margin-top:20px;padding-top:0}
#upload-dialog .dialog-actions .button {border-radius:9px}
#upload-dialog .dialog-actions .primary {min-width:105px}
.student-preview-dialog {width:min(1240px,calc(100vw - 32px));max-width:none;height:calc(100dvh - 48px);max-height:920px;padding:0;border-radius:16px;overflow:hidden}
.student-preview-dialog[open] {display:flex;flex-direction:column}
.student-preview-dialog .dialog-head {flex:none;margin:0;padding:12px 16px 12px 20px;border-bottom:1px solid var(--line)}
.student-preview-dialog .dialog-head h2 {font-size:16px;font-weight:600}
.student-preview-dialog .dialog-head p {font-size:11px;margin-top:2px}
.student-preview-dialog iframe {display:block;width:100%;flex:1;min-height:0;border:0;background:#f4f5f7}
.song-actions .preview-button {border-color:#9aabc4;background:#fff;color:#244d88}
@media(max-width:767px){
 dialog.student-preview-dialog {width:100%;height:100dvh;max-height:100dvh!important;padding:0;border-radius:0;border:0}
 #upload-dialog {padding:20px;width:calc(100vw - 24px)}
 .dropzone {min-height:210px;padding:24px 12px}
 .upload-file .icon-button {width:44px;height:44px;min-width:44px;min-height:44px}
}
.replace-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:20px;
  padding:16px 0;
  border-block:1px solid var(--line)
}
.replace-row>div {
  min-width:0
}
.replace-row strong,.replace-row span {
  display:block
}
.replace-row span {
  font-size:12px;
  margin-top:4px;
  color:var(--muted);
  overflow-wrap:anywhere
}
.student-settings {
  min-width:0;
  margin:24px 0 0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:10px
}
.student-settings legend {
  font-weight:600
}
.settings-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 16px;
  margin-top:12px
}
.setting {
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-height:48px;
  cursor:pointer;
  padding:8px 0
}
.setting input {
  width:18px;
  height:18px;
  flex:none;
  accent-color:var(--blue)
}
.setting strong {
  display:block;
  font-size:13px;
  font-weight:500
}
.setting small {
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
  margin-top:4px
}
.share-dialog {
  width:min(520px,calc(100vw - 32px));
  padding:0;
  border-radius:18px
}
.share-head {
  position:sticky;
  top:0;
  z-index:1;
  min-height:88px;
  margin:0;
  padding:22px 28px;
  background:#fff
}
.share-body {
  padding:0 28px 22px
}
.shared-song {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:60px;
  margin-bottom:20px
}
.share-document {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:none;
  border:1px solid var(--line);
  border-radius:9px
}
.shared-song h3 {
  font-size:16px;
  line-height:23px;
  overflow-wrap:anywhere
}
.shared-song p {
  font-size:13px;
  color:var(--muted);
  margin-top:3px
}
.share-access {
  position:relative;
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  grid-template-rows:24px 18px;
  column-gap:12px;
  min-height:60px;
  padding:9px 12px;
  background:var(--soft);
  border-radius:10px;
  margin-bottom:20px
}
.share-access>img {
  grid-row:1/3;
  align-self:center
}
.share-access select {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer
}
.share-access-value {
  grid-column:2;
  grid-row:1;
  align-self:center;
  padding-right:22px;
  background:url('/admin-assets/access-down.svg') no-repeat right center;
  font-weight:500;
  font-size:14px;
  pointer-events:none
}
.share-access:focus-within {
  outline:3px solid #cad9fd
}
.view-only {
  grid-column:2;
  grid-row:2;
  font-size:12px;
  color:var(--muted);
  pointer-events:none
}
.share-access:has(select:disabled) {
  opacity:.6
}
.share-access select:focus-visible {
  outline:none
}
.notation-field,.share-permissions {
  min-width:0;
  border:0;
  margin:0;
  padding:0
}
.notation-field {
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-bottom:20px
}
.notation-field legend {
  float:left;
  width:100%;
  margin-bottom:10px;
  font-size:13px;
  font-weight:500;
  color:var(--muted)
}
.notation-switch {
  clear:both;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  height:44px;
  padding:4px;
  background:var(--soft);
  border-radius:9px
}
.notation-switch label {
  position:relative;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:13px;
  color:var(--muted)
}
.notation-switch input {
  position:absolute;
  opacity:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:pointer
}
.notation-switch span {
  display:grid;
  place-items:center;
  width:100%;
  height:36px;
  border-radius:6px
}
.notation-switch input:checked+span {
  background:#fff;
  color:var(--ink);
  font-weight:600
}
.notation-switch input:focus-visible+span {
  outline:3px solid #8aaaf1;
  outline-offset:1px
}
.share-permissions legend {
  padding:0;
  margin-bottom:4px;
  font-size:13px;
  font-weight:500;
  color:var(--muted)
}
.switch-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:48px;
  cursor:pointer
}
.switch-row input {
  appearance:none;
  flex:none;
  width:36px;
  height:22px;
  margin:0 4px;
  background:url('/admin-assets/toggle-off.svg') center no-repeat;
  border:0;
  border-radius:11px;
  cursor:pointer
}
.switch-row input:checked {
  background-image:url('/admin-assets/toggle-on.svg')
}
.switch-row:has(input:disabled) {
  opacity:.55
}
.switch-row input:disabled {
  cursor:wait
}
.share-options {
  margin-top:8px
}
.share-options summary {
  display:flex;
  align-items:center;
  min-height:44px;
  cursor:pointer;
  color:var(--muted);
  font-size:12px;
  list-style:none
}
.share-options summary::after {
  content:"";
  width:16px;
  height:16px;
  margin-left:8px;
  background:url('/admin-assets/access-down.svg') no-repeat center
}
.share-options summary::-webkit-details-marker {
  display:none
}
.share-options[open] summary::after {
  transform:rotate(180deg)
}
.link-options {
  display:flex;
  flex-wrap:wrap;
  gap:12px
}
.share-footer {
  position:sticky;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:88px;
  padding:22px 28px;
  border-top:1px solid var(--line);
  background:#fff;
  z-index:1
}
.share-footer #copy-link {
  min-width:176px
}
.share-footer #share-save-state {
  font-size:12px;
  color:var(--muted)
}
.share-footer #share-save-state.error {
  color:var(--red)
}
.toast {
  position:fixed;
  z-index:50;
  right:24px;
  bottom:24px;
  max-width:min(440px,calc(100vw - 32px));
  padding:12px 16px;
  border-radius:10px;
  background:var(--ink);
  color:#fff;
  box-shadow:0 8px 24px #17202b20;
  font-size:13px;
  line-height:1.5;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .16s,transform .16s
}
.toast.visible {
  opacity:1;
  transform:none
}
.toast.error {
  background:var(--red)
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  clip-path:inset(50%)
}
@media(max-width:1100px) and (min-width:768px) {
  .workspace-layout {
    grid-template-columns:280px minmax(0,1fr)
  }
  .song-header {
    flex-wrap:wrap;
    padding:24px
  }
  .song-actions {
    padding-top:0
  }
  .song-preview {
    padding:24px
  }
  .preview-paper {
    padding:24px
  }
  .library-browser {
    padding:20px 16px
  }
  .preview-toolbar>span {
    font-size:12px
  }
  .preview-controls {
    gap:8px
  }
  .track-picker {
    max-width:60%
  }
}
@media(max-width:767px) {
  .app-toolbar {
    position:static;
    padding:14px 24px
  }
  .desktop-create,.desktop-upload,.account-button,.library-settings {
    display:none
  }
  .mobile-settings,.mobile-create,.mobile-upload,.mobile-preview {
    display:inline-flex
  }
  .workspace-layout {
    display:block
  }
  .library-browser {
    position:static;
    top:auto;
    height:auto;
    min-height:calc(100dvh - 64px);
    border:0;
    padding:24px;
    gap:20px
  }
  .library-heading h1 {
    font-size:28px;
    line-height:40px
  }
  .library-heading #result-count {
    display:none
  }
  .library-results {
    overflow:visible;
    flex:none
  }
  .library-heading .mobile-create {
    margin-left:auto
  }
  .mobile-upload {
    width:100%
  }
  .library-filters {
    margin-top:-12px
  }
  .lesson-row {
    min-height:100px
  }
  .lesson-row.active,.lesson-row[aria-current="true"],.lesson-row[aria-pressed="true"] {
    background:transparent
  }
  .lesson-row.active .song-title,.lesson-row[aria-current="true"] .song-title,.lesson-row[aria-pressed="true"] .song-title {
    color:var(--ink)
  }
  .selection-check {
    display:none
  }
  .row-chevron,.song-meta {
    display:block
  }
  .song-detail {
    display:none;
    min-height:100dvh
  }
  .detail-open .app-toolbar,.detail-open .library-browser {
    display:none
  }
  .detail-open .song-detail {
    display:block
  }
  .song-mobile-nav {
    position:sticky;
    top:0;
    z-index:6;
    display:flex;
    align-items:center;
    min-height:72px;
    padding:14px 20px;
    background:#fff
  }
  .song-header {
    display:block;
    min-height:0;
    border:0;
    padding:24px 24px 0;
    background:var(--canvas)
  }
  .song-heading h1 {
    font-size:28px;
    line-height:38px
  }
  .song-metadata {
    font-size:12px;
    margin-top:9px
  }
  .song-actions {
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.1fr) 44px;
    gap:8px;
    margin-top:20px;
    padding:0
  }
  .song-actions #detail-share {
    position:fixed;
    right:20px;
    top:14px;
    z-index:7
  }
  .song-actions #selected-edit {
    min-width:0
  }
  .song-actions .button {
    padding:0 10px
  }
  .song-menu .menu-panel {
    top:48px
  }
  .song-preview {
    padding:20px 24px 32px
  }
  .preview-toolbar {
    min-height:20px;
    margin-bottom:20px
  }
  .preview-toolbar>span {
    font-size:12px
  }
  .preview-toolbar #selected-preview {
    display:none
  }
  .preview-paper {
    min-height:0;
    padding:20px;
    border-radius:10px
  }
  .preview-controls {
    gap:8px;
    margin-bottom:18px
  }
  .track-picker {
    width:172px;
    max-width:65%
  }
  .preview-tempo {
    font-size:12px
  }
  .share-dialog {
    width:100%;
    max-width:100%;
    height:100dvh;
    max-height:100dvh;
    border:0;
    border-radius:0
  }
  .share-head {
    height:72px;
    min-height:72px;
    padding:14px 24px
  }
  .share-head h2 {
    font-size:20px
  }
  .share-body {
    padding:8px 24px 24px;
    min-height:calc(100dvh - 160px)
  }
  .share-footer {
    padding:16px 24px max(16px,env(safe-area-inset-bottom));
    min-height:88px
  }
  .share-footer #copy-link {
    flex:1
  }
  .share-footer #share-save-state {
    position:absolute;
    bottom:100%;
    right:24px;
    padding:4px 8px;
    border-radius:6px;
    background:#fff;
    font-size:11px
  }
  .share-options {
    margin-top:4px
  }
  .access-card {
    padding:28px 24px
  }
  .settings-grid {
    grid-template-columns:1fr
  }
  dialog:not(.share-dialog) {
    padding:24px 20px;
    max-height:calc(100dvh - 24px)
  }
  .replace-row {
    flex-wrap:wrap
  }
  .dialog-actions .spacer {
    display:none
  }
  .dialog-actions .danger {
    margin-right:auto
  }
  .field-label span {
    display:block;
    margin:4px 0 0
  }
  .toast {
    right:16px;
    bottom:max(16px,env(safe-area-inset-bottom))
  }
}
@media(max-width:390px) {
  .app-toolbar {
    padding-inline:20px
  }
  .library-browser,.song-header,.song-preview {
    padding-left:20px;
    padding-right:20px
  }
  .song-actions {
    grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)
  }
  .song-menu {
    grid-column:2;
    justify-self:end;
    margin-top:-4px
  }
  .song-actions .button {
    font-size:12px;
    padding-inline:8px
  }
  .song-actions #detail-share {
    font-size:13px;
    padding-inline:16px
  }
  .song-heading h1 {
    font-size:27px
  }
  .preview-paper {
    padding:16px
  }
  .preview-controls {
    flex-wrap:wrap
  }
  .track-picker {
    max-width:100%
  }
  .share-access select {
    font-size:13px
  }
  .notation-switch label {
    font-size:13px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
}
.lesson-row:not([aria-pressed="true"]) .selection-check {
  visibility:hidden
}
body:has(dialog[open]) {
  overflow:hidden
}

/* Compact sharing: details appear only when needed. */
.share-dialog{max-height:90dvh;width:min(480px,calc(100vw - 24px))}.share-body{overflow-y:auto}.share-intro{font-size:13px;color:#64748b;margin:16px 0 12px}.share-section{border:1px solid #e2e7ed;border-radius:9px;margin:8px 0}.share-section>summary{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;cursor:pointer;font-size:14px;font-weight:600;list-style:none}.share-section>summary::-webkit-details-marker{display:none}.share-section>summary::after{content:'⌄';color:#64748b}.share-section[open]>summary::after{transform:rotate(180deg)}.share-section summary small{display:block;font-size:12px;font-weight:400;color:#64748b;margin-top:3px}.share-section-body{border-top:1px solid #e8edf2;padding:12px 14px}.share-section-body select{width:100%;min-height:36px;border:1px solid #dce2e9;border-radius:6px;background:white;padding:6px 9px;font:inherit;font-size:13px}.share-checks{display:grid;gap:10px;margin:12px 0;max-height:190px;overflow:auto}.share-checks[hidden]{display:none}.share-checks label{display:flex;align-items:center;gap:9px;font-size:13px}.share-checks input{accent-color:#245be8;width:16px;height:16px;flex-shrink:0}.share-hint{font-size:12px;line-height:1.5;color:#64748b;margin:8px 0}.share-section .switch-row{min-height:39px;font-size:13px}.download-permission{border-top:1px solid #e8edf2;margin-top:16px;font-size:13px}.share-section .field-label{font-size:12px;margin-bottom:6px}.share-section .form-status:empty{display:none}

.share-dialog[open]{display:flex;flex-direction:column}.share-dialog .share-head,.share-dialog .share-footer{flex-shrink:0}.share-dialog .share-body{min-height:0;overflow-y:auto}.share-dialog .share-footer{background:white}

/* Portal hierarchy and shared control treatment. */
.workspace-label {margin-right:auto;border-left:1px solid var(--line);padding-left:20px;font-size:12px;color:var(--muted)}
.brand img {width:28px;height:28px}
.access-brand img {width:32px;height:32px}
.button img,.icon-button img {width:18px;height:18px;object-fit:contain}
.button.primary img {filter:brightness(0) invert(1)}
#selected-edit img {filter:brightness(0);opacity:.7}
.button.primary {box-shadow:none}
.button:active {filter:brightness(.94)}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,textarea:hover,select:hover {border-color:#aeb7c5}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,textarea:focus,select:focus {border-color:var(--blue);outline:3px solid #245bda18;outline-offset:0}
.library-heading {padding:0 8px}
.library-heading #result-count {background:var(--soft);border-radius:6px;min-width:24px;text-align:center;padding:3px 6px;font-size:11px}
.search {background:#f6f7f9;border:1px solid var(--line);border-radius:8px;gap:9px}
.search img {width:17px;height:17px}
.search kbd {font:10px Inter,sans-serif;white-space:nowrap;color:#7b828c;border:1px solid #dfe3e9;border-radius:4px;padding:3px 4px}
.library-filters {gap:3px;padding:3px;background:#f2f4f7;border-radius:8px}
.filter {flex:1;padding:0 8px;min-height:32px;min-width:0;border-radius:5px;font-size:12px}
.filter.active {background:#fff;color:var(--ink);box-shadow:0 1px 3px #20212412;font-weight:550}
.filter.active::after {display:none}
.song-mark {border:1px solid #e4e8ee;border-radius:8px;width:34px;height:40px}
.song-mark img {width:18px;height:18px;opacity:.75}
.lesson-row[aria-pressed="true"] {box-shadow:inset 0 0 0 1px #dfe8fc}
.selection-check {width:16px;height:16px}
.library-settings {justify-content:flex-start;background:transparent!important;border-top:1px solid var(--line)!important;border-radius:0;padding:16px 10px 0;min-height:52px;color:var(--muted)}
.song-sharing {padding:3px 8px;border:1px solid var(--line);border-radius:5px;background:#fafbfc;font-size:11px}
.song-sharing img {width:13px;height:13px}
.song-sharing.is-shared {color:#266c52;border-color:#d7e8e0;background:#f0f7f3}
.song-metadata {font-size:12px;margin-top:10px;font-variant-numeric:tabular-nums}
.preview-toolbar {margin-bottom:14px;min-height:36px}
.preview-toolbar>span {font-size:12px;font-weight:550}
.preview-toolbar .preview-button {min-height:44px;font-size:12px;padding:0 16px;background:#fff;border:1px solid #9aabc4;color:#244d88;box-shadow:0 1px 2px #162b4710}
.preview-toolbar .preview-button:hover {background:#e8f0fe;border-color:#6587b8;color:#174ea6}
@media(max-width:767px){dialog.student-preview-dialog[open]{padding:0;width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:0}}
.preview-paper {max-width:1120px;margin:auto}
.preview-controls {padding-bottom:18px;border-bottom:1px solid #eef0f3;margin-bottom:24px}
.track-picker select {min-height:36px!important;background-color:#f5f6f8!important}
.song-preview {max-width:1280px;margin:auto}
.auth-switch {margin-top:18px;font-size:12px}
.auth-switch .text-button {min-height:32px;font-size:12px;padding:0 3px}
.form-status.error {padding:10px 12px;border-radius:7px;background:#fff3f1}
.share-head h2,.dialog-head h2 {font-size:20px;font-weight:600}
.share-dialog {border-radius:16px}
@media(min-width:1600px) {.workspace-layout{grid-template-columns:320px minmax(0,1fr)}.song-header{padding-inline:48px}.song-preview{padding-inline:48px}}
@media(max-width:1000px) and (min-width:768px) {.song-header{gap:16px;padding:24px}.song-heading h1{font-size:26px}.song-actions{gap:6px}.song-actions #selected-edit{min-width:0}.song-actions #detail-share{min-width:0}.song-preview{padding:20px 24px 40px}.preview-paper{padding:24px}.workspace-label{display:none}}
@media(max-width:767px) {
 .access{padding:24px;background:#fff;align-items:start}
 .access-card{display:block;padding:24px 8px;border:0;border-radius:0;box-shadow:none;max-width:420px}
 .access-brand{margin-bottom:48px}
 .access-card h1{font-size:34px}
 .access-fields{padding-top:36px}
 .workspace-label{display:none}
 .app-toolbar{height:64px;padding:10px 24px}
 .app-toolbar .mobile-settings{min-height:40px;background:transparent}
 .library-browser{gap:18px;min-height:calc(100dvh - 64px);padding:24px}
 .library-heading{padding:0}
 .library-heading h1{font-size:26px;line-height:36px}
 .library-filters{margin-top:0}
 .filter{min-height:38px}
 .lesson-row{min-height:88px;padding:12px 8px;border-bottom:1px solid #edf0f4;border-radius:0}
 .lesson-row[aria-pressed="true"]{box-shadow:none}
 .song-mark{width:38px;height:44px}
 .song-actions{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 40px}
 .song-actions #detail-share{min-height:40px}
 .song-actions .button{min-height:42px}
 .song-mobile-nav{min-height:68px}
 .song-header{padding:24px 24px 0}
 .song-preview{padding:20px 24px 32px}
 .song-heading h1{font-size:28px;line-height:36px}
 .song-actions{padding:0;margin-top:20px}
 .preview-paper{padding:20px}
 .preview-controls{padding-bottom:16px}
 .share-dialog{max-height:100dvh;width:100%;border-radius:0}
 .search kbd{display:none}
}
@media(max-width:390px) {.song-actions{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 36px}.song-menu{grid-column:auto;margin-top:0}.song-actions .button{padding:0 8px}.song-preview{padding-inline:16px}.preview-paper{padding:16px}}

/* Filled, tonal and outlined actions share one Material-style geometry. */
.button {border-radius:20px;padding-inline:20px;font-weight:550;letter-spacing:.01em;border-color:#c5c9d0}
.button.quiet {background:#edf2fa;color:#344764}
.button.quiet:hover {background:#e1e8f4}
.button.primary {background:#0b57d0;border-color:transparent;color:#fff}
.button.primary:hover {background:#0847af;border-color:transparent}
.icon-button {border-radius:50%}
.text-button {border-radius:20px}
.text-button:hover {background:#0b57d009;text-decoration:none}
.access-fields .full-width {border-radius:24px}
.song-actions #selected-edit {min-width:112px}
.song-actions .button {padding-inline:18px}
@media(max-width:767px){.song-actions .button{padding-inline:12px}.song-mobile-nav .button{padding-inline:16px}.share-footer #copy-link{border-radius:24px}}

.account-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

#password-dialog{width:min(480px,calc(100vw - 32px))}#password-dialog input{font-size:16px}
#password-dialog .button,.account-actions .button{min-height:44px}