:root{
  --bg:#f7f2e8;
  --card:#fffdf8;
  --muted:#655848;
  --text:#1d1814;
  --line:#d8c8ac;
  --btn:#8d2035;
  --btn2:#eadcc4;
  --ok:#1f9d62;
  --warn:#9b681d;
  --bad:#d14a4a;
  --shadow: 0 10px 28px rgba(58,38,18,.13);
  --radius: 16px;
}
html[data-theme="night"]{
  --bg:#0e0c0c;
  --card:#181514;
  --muted:#c8ae82;
  --text:#fff4dd;
  --line:#3d2d24;
  --btn:#b78a2f;
  --btn2:#4b1822;
  --warn:#d4a348;
  --shadow: 0 12px 32px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background: var(--bg);
  color:var(--text);
}
a{color:inherit}
.topbar{
  position:sticky; top:0;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:14px 18px;
  z-index:10;
}
.brand{
  display:flex;
  gap:12px;
  align-items:center;
  min-height:54px;
}
.logo{
  width:54px;
  height:54px;
  flex:0 0 54px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.title{font-weight:900;letter-spacing:0}
.subtitle{color:var(--muted);font-size:12px;margin-top:2px}
.nav{display:flex; gap:10px; align-items:center}
.nav a,.navButton{
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
  color:var(--muted);
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card) 78%, transparent);
  font-weight:800;
  cursor:pointer;
}
.navSelect{
  min-height:42px;
  padding:10px 38px 10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card) 78%, transparent);
  color:var(--text);
  font-weight:800;
  cursor:pointer;
}
.topbarBandSwitch{
  display:flex;
  align-items:center;
}
.srOnly{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.nav a.active{
  color:var(--text);
  border-color: color-mix(in srgb, var(--btn) 55%, var(--line));
  background: color-mix(in srgb, var(--btn) 13%, var(--card));
}
.adminSwitch{
  font-size:12px;
  opacity:.86;
}
.container{max-width: min(1600px, calc(100vw - 28px)); width:100%; margin:18px auto; padding:0 14px}
.adminContainer{max-width:min(1680px, calc(100vw - 28px))}
.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
  margin-bottom:16px;
}
h1{margin:0 0 10px 0;font-size:24px}
h2{margin:0 0 10px 0;font-size:18px}
.muted{color:var(--muted)}
.mono{font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px}
.grid{display:grid;grid-template-columns: repeat(2,minmax(0,1fr)); gap:12px}
.grid2{display:grid;grid-template-columns: repeat(2,minmax(0,1fr)); gap:12px}
@media (max-width:820px){
  .grid,.grid2{grid-template-columns: 1fr}
  .nav{gap:6px}
  .nav a{padding:9px 10px}
  .topbarBandSwitch{flex:1 1 100%}
  .navSelect{width:100%; min-width:0}
  .adminLayout,
  .adminSplit,
  .adminSectionGrid,
  .adminThemeGrid,
  .adminInstrumentMatrix,
  .adminIconGrid,
  .adminToggleRow,
  .settingsExceptionsLayout,
  .settingsExceptionsGrid,
  .settingsPreviewList{grid-template-columns:1fr}
  .adminHero{
    flex-direction:column;
    align-items:flex-start;
  }
  .adminSidebar{position:static}
  .adminChoiceGrid,
  .adminColorGrid,
  .settingsSectionMembers{grid-template-columns:1fr}
  .settingsSectionCardHead{
    flex-direction:column;
    align-items:stretch;
  }
  .changeLogItem{
    flex-direction:column;
  }
  .changeLogDate{
    width:auto;
    min-width:0;
  }
  .playerIdentityGrid{
    grid-template-columns:1fr;
  }
}
.stat{padding:14px;border-radius:14px;border:1px solid var(--line);background: color-mix(in srgb, var(--card) 78%, var(--bg))}
.statLabel{color:var(--muted);font-size:12px}
.statValue{font-size:28px;font-weight:800;margin-top:6px}
.adminLayout{
  display:grid;
  grid-template-columns:260px minmax(0, 1fr);
  gap:18px;
  align-items:start;
}
.adminSidebar{
  position:sticky;
  top:88px;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  box-shadow:var(--shadow);
}
.adminSidebarBlock{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.adminSidebarEyebrow,
.adminEyebrow{
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}
.adminSidebarTitle{
  font-size:22px;
  font-weight:900;
}
.adminSidebarNav,
.adminContextList{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.adminNavItem,
.adminContextLink{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  text-decoration:none;
  background:color-mix(in srgb, var(--card) 84%, var(--bg));
  font-weight:800;
}
.adminNavItem.active,
.adminContextLink.active{
  background:color-mix(in srgb, var(--btn) 14%, var(--card));
  border-color:color-mix(in srgb, var(--btn) 42%, var(--line));
}
.adminContent{min-width:0}
.adminHero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.adminHero h1{
  margin:4px 0 8px;
  font-size:34px;
}
.adminLead{
  max-width:760px;
  margin:0;
  color:var(--muted);
  line-height:1.5;
}
.adminHeroActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.adminSectionGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
  margin-bottom:16px;
}
.adminStatCard{
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  box-shadow:var(--shadow);
}
.adminStatLabel{
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}
.adminStatValue{
  margin-top:8px;
  font-size:34px;
  font-weight:900;
}
.adminStatMeta{
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
}
.adminSplit{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}
.adminCard{margin-bottom:16px}
.adminSectionHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.adminList,
.adminChecklist,
.adminToggleList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.adminTopSongs,
.changeLogList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.adminTopSongRow,
.changeLogItem{
  display:flex;
  gap:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 84%, var(--bg));
}
.adminTopSongOrder{
  width:34px;
  min-width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:color-mix(in srgb, var(--btn) 12%, var(--card));
  color:var(--muted);
  font-weight:900;
}
.adminTopSongMain,
.changeLogBody{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.adminTopSongTitle,
.changeLogTitle{
  font-size:16px;
  font-weight:900;
}
.adminTopSongMeta,
.changeLogDate,
.changeLogDetails{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
.changeLogDate{
  width:148px;
  min-width:148px;
  font-weight:900;
}
.adminToggleRow{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.adminListRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 84%, var(--bg));
}
.adminToggle{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 84%, var(--bg));
  font-weight:800;
}
.adminToggle.compact{
  min-height:40px;
  margin-top:6px;
}
.adminSettingsForm .grid2{gap:16px}
.settingsTabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.settingsTab{
  min-height:42px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 86%, var(--bg));
  color:var(--muted);
  font-weight:900;
  cursor:pointer;
}
.settingsTab.is-active{
  background:var(--btn);
  color:white;
  border-color:color-mix(in srgb, var(--btn) 76%, white);
}
.settingsPanel{display:none}
.settingsPanel.is-active{display:block}
.settingsSectionList{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.settingsSectionCard{
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb, var(--card) 88%, var(--bg));
}
.settingsSectionCardHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.adminInstrumentMatrix{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.settingsSectionMembers{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}
.adminInstrumentCard,
.adminIconCard{
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb, var(--card) 88%, var(--bg));
}
.adminInstrumentHeader,
.adminIconPreviewWrap{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.adminInstrumentTitle{
  font-size:16px;
  font-weight:900;
}
.adminChoiceGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
.adminChoice{
  min-height:40px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 82%, var(--bg));
}
.adminChoice.checked{
  background:color-mix(in srgb, var(--btn) 10%, var(--card));
  border-color:color-mix(in srgb, var(--btn) 35%, var(--line));
}
.adminChoice.locked{
  opacity:.88;
}
.adminChoice input{
  width:18px;
  height:18px;
  accent-color:var(--btn);
}
.adminIconGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.adminIconPreview{
  width:64px;
  height:64px;
  flex:0 0 64px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--btn) 28%, var(--line));
  background:color-mix(in srgb, var(--btn) 10%, var(--card));
}
.adminIconPreview .instrumentIcon{
  width:40px;
  height:40px;
}
.settingsExceptionsLayout{
  display:grid;
  grid-template-columns:240px minmax(0, 1fr);
  gap:16px;
}
.settingsInstrumentNav{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.settingsInstrumentBtn{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 86%, var(--bg));
  color:var(--text);
  font-weight:800;
  cursor:pointer;
  text-align:left;
}
.settingsInstrumentBtn.is-active{
  background:color-mix(in srgb, var(--btn) 14%, var(--card));
  border-color:color-mix(in srgb, var(--btn) 42%, var(--line));
}
.settingsInstrumentBtn .partResultIcon{
  flex:0 0 42px;
}
.settingsInstrumentPanels{min-width:0}
.settingsInstrumentPanel{display:none}
.settingsInstrumentPanel.is-active{display:block}
.settingsInstrumentHeader{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.settingsExceptionsGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.settingsExceptionCard{
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb, var(--card) 88%, var(--bg));
}
.settingsExceptionCard h3{
  margin:0 0 10px;
  font-size:16px;
}
.settingsPreviewControls{
  max-width:420px;
  margin-bottom:14px;
}
.settingsPreviewList{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
.settingsPreviewItem{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 88%, var(--bg));
}
.adminThemeGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}
.adminThemeColumn{
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb, var(--card) 88%, var(--bg));
}
.adminThemeColumn h3{
  margin:0 0 12px;
  font-size:16px;
}
.adminColorGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.adminColorField{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:48px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 82%, var(--bg));
}
.adminColorField span{
  font-size:13px;
  font-weight:800;
}
.adminColorField input[type="color"]{
  width:46px;
  min-width:46px;
  height:32px;
  padding:0;
  border:none;
  background:transparent;
}
.loginContainer{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.loginCard{
  width:min(520px, 100%);
  padding:24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
  box-shadow:var(--shadow);
}
.loginLogo{
  width:72px;
  margin-bottom:16px;
}
.loginActions{
  justify-content:flex-start;
}
.actions{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
.inlineForm{display:inline}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
  padding:10px 14px;
  border-radius: 14px;
  background: var(--btn);
  border:1px solid color-mix(in srgb, var(--btn) 76%, white);
  color:white;
  font-weight:700;
  cursor:pointer;
}
.btn.secondary{
  background: var(--btn2);
  color: var(--text);
  border-color:var(--line);
}
.btn-youtube {
    background: #e60000;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-youtube .yt-play {
    font-size: 1.1em;
}
.form .row{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
label{font-weight:700; font-size:13px}
input[type="text"], input[type="search"], input[type="file"], textarea, select{
  width:100%;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card) 92%, white);
  color: var(--text);
  outline:none;
}
textarea{resize:vertical}
.hint{color:var(--muted); font-size:12px}
.alert{
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  margin: 10px 0 14px 0;
  background: color-mix(in srgb, var(--card) 82%, var(--bg));
}
.alert.success{border-color: color-mix(in srgb, var(--ok) 52%, var(--line))}
.alert.warn,
.alert.warning{border-color: rgba(199,134,42,.55)}
.alert.error{border-color: rgba(209,74,74,.55)}
.pill{
  padding:6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 82%, var(--bg));
  border:1px solid var(--line);
  color: var(--muted);
  font-size:12px;
}
.tableWrap{overflow:auto;border-radius:14px;border:1px solid var(--line)}
.table{width:100%; border-collapse: collapse; min-width: 0; background: color-mix(in srgb, var(--card) 78%, var(--bg)); table-layout: fixed;}
.table th, .table td{padding:10px 10px; border-bottom: 1px solid var(--line); text-align:left; vertical-align:top}
.table th{color: var(--muted); font-size:12px; font-weight:800; letter-spacing:.2px}
.table tr:hover td{background: color-mix(in srgb, var(--btn) 9%, var(--card))}
.list{margin:8px 0 0 18px;color:var(--muted);line-height:1.6}
.sep{border:none;border-top:1px solid var(--line); margin:16px 0}
.kv{padding:12px;border-radius:14px;border:1px solid var(--line);background: color-mix(in srgb, var(--card) 82%, var(--bg))}
.kv .k{color:var(--muted);font-size:12px;font-weight:800}
.kv .v{margin-top:6px}
.pdfFrameWrap{border-radius:14px; overflow:hidden; border:1px solid var(--line); background: color-mix(in srgb, var(--card) 82%, var(--bg))}
.pdfFrame{width:100%; height: 70vh; border:0}
.footer{
  color: var(--muted);
  padding: 16px;
  text-align:center;
  font-size: 12px;
}


.btn.danger{
  background: rgba(209,74,74,.92);
}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid var(--line); background: color-mix(in srgb, var(--card) 82%, var(--bg))}
.badge.ok{border-color: color-mix(in srgb, var(--ok) 52%, var(--line))}
.badge.warn{border-color: rgba(199,134,42,.55)}
.badge.bad{border-color: rgba(209,74,74,.55)}
.link{color: var(--text); text-decoration:none; border-bottom: 1px dotted color-mix(in srgb, var(--text) 45%, transparent)}
.rotateAssetBtn{
  border:0;
  padding:0;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  font:inherit;
  border-bottom:1px dotted color-mix(in srgb, var(--text) 45%, transparent);
}
.rotateAssetBtn:disabled{
  cursor:wait;
  opacity:.65;
}
.link:hover{border-bottom-color: var(--text)}
.nowrap{white-space:nowrap}
.sepDot{color: var(--muted); padding: 0 6px}

.hidden{display:none !important}

.prefilled{outline: 2px solid color-mix(in srgb, var(--btn) 35%, transparent); background: color-mix(in srgb, var(--btn) 6%, transparent)}


/* Upload UI tweaks */
.fieldRow{display:flex; align-items:flex-end; gap:10px}
.fieldRow .fieldMain{flex:1; display:flex; flex-direction:column; gap:6px}
.fieldRow .fieldBtns{display:flex; gap:8px; padding-bottom:2px}
.btn.small{padding:8px 10px;border-radius:12px;font-size:12px}
.btn.small.secondary{background: color-mix(in srgb, var(--btn) 14%, var(--card)); border-color: color-mix(in srgb, var(--btn) 28%, var(--line))}
.btn.small.danger{background: rgba(209,74,74,.22); border-color: rgba(209,74,74,.28)}
input.readonly, textarea.readonly{
  background: color-mix(in srgb, var(--card) 70%, var(--bg)) !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}
.notice{
  padding:10px 12px; border-radius: 14px;
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card) 82%, var(--bg));
  margin: 10px 0 0 0;
  color: var(--muted);
}
.notice.error{border-color: rgba(209,74,74,.55); color: var(--text)}

.playerBody .container{
  max-width:min(980px, calc(100vw - 24px));
  margin-top:22px;
}
.playerPage{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.playerIdentity{
  padding:18px;
}
.playerIdentityHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.playerIdentityHead h2{
  margin:4px 0 0;
  font-size:26px;
}
.playerIdentityGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.playerIdentityCard{
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb, var(--card) 88%, var(--bg));
}
.playerIdentityCard h3{
  margin:0 0 8px;
  font-size:19px;
}
.playerHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:16px 0 2px;
}
.playerHeaderTitle{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.playerHeaderToggle{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  text-align:left;
}
.playerHeaderToggleText{
  min-width:0;
}
.playerHeaderToggle .playerPartLine{
  display:block;
}
.playerHeaderToggle:focus-visible{
  outline:2px solid color-mix(in srgb, var(--btn) 45%, white);
  outline-offset:6px;
  border-radius:14px;
}
.playerHeader h1{
  font-size:38px;
  line-height:1;
  margin:0 0 6px;
}
.playerHeaderActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.playerPartLine{
  color:var(--muted);
  font-weight:900;
}
.playerBandNameBtn{
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:900;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb, var(--btn) 55%, transparent);
}
.playerBandNameBtn:hover{
  color:var(--text);
}
.playerBandNameBtn:focus-visible{
  outline:2px solid color-mix(in srgb, var(--btn) 45%, white);
  outline-offset:4px;
  border-radius:8px;
}
.playerBandNameText{
  color:inherit;
}
.playerPartSeparator{
  opacity:.72;
  margin:0 6px;
}
.compactBtn{
  min-height:38px;
  padding:9px 11px;
  border-radius:12px;
}
.playerSetup,
.playerSearch,
.songResult,
.emptyState{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
}
.playerSetup,
.playerSearch{
  padding:16px;
}
.playerSetupTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.playerSetupTopActions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.setupInstrumentPreview,
.instrumentIconBadge{
  width:56px;
  height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb, var(--btn) 28%, var(--line));
  border-radius:14px;
  background:color-mix(in srgb, var(--btn) 10%, var(--card));
  color:var(--btn);
  flex:0 0 56px;
}
.instrumentIcon{
  width:34px;
  height:34px;
  display:block;
  object-fit:contain;
}
.adminSetupLink{
  color:var(--muted);
  text-decoration:none;
  font-weight:900;
  font-size:12px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 82%, var(--bg));
}
.playerIdentityBadge,
.playerIdentityValue{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 84%, var(--bg));
  color:var(--text);
  font-weight:900;
}
.playerIdentityField{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.playerSetup.is-hidden,
.playerSearch.is-hidden,
.playerResults.is-hidden,
.numberPad.is-hidden,
.recentSongs.is-hidden,
.titleSongList.is-hidden,
.numberModeAction.is-hidden,
.voiceChoice.is-hidden{
  display:none;
}
.setupGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-bottom:12px;
}
.setupGrid > label{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.setupGrid > label > span,
.voiceChoiceWrap > span{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  font-weight:900;
}
.voiceChoiceWrap{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.voiceMulti{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:8px;
  max-height:280px;
  overflow:auto;
  padding-right:4px;
}
.setupGrid .voiceChoice{
  min-height:43px;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 80%, var(--bg));
  cursor:pointer;
}
.setupGrid .voiceChoice.is-hidden{
  display:none;
}
.voiceChoiceAll{
  background:color-mix(in srgb, var(--btn) 10%, var(--card));
  border-color:color-mix(in srgb, var(--btn) 30%, var(--line));
}
.voiceChoice input{
  width:18px;
  height:18px;
  accent-color:var(--btn);
}
.voiceChoice span{
  color:var(--text);
  text-transform:none;
  font-size:15px;
  line-height:1.25;
}
.playerPrimaryBtn,
.playerSearchBtn{
  min-height:58px;
  font-size:17px;
}
.searchModeSwitch{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-bottom:12px;
}
.searchModeSwitch label{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 76%, var(--bg));
  color:var(--muted);
  font-size:17px;
  font-weight:900;
  cursor:pointer;
}
.searchModeSwitch label.active{
  background:var(--btn);
  border-color:color-mix(in srgb, var(--btn) 76%, white);
  color:white;
}
.searchModeSwitch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.playerSearchRow{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:10px;
  align-items:stretch;
}
.playerSearchBox{
  position:relative;
  min-width:0;
}
.playerSearchInput{
  min-height:58px;
  font-size:26px;
  font-weight:900;
  letter-spacing:0;
}
.playerSearchActions{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(92px, auto);
  gap:8px;
}
.playerSearchActions .playerSearchBtn{
  min-width:92px;
  padding-left:16px;
  padding-right:16px;
}
.titleSuggest{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  z-index:25;
  max-height:320px;
  overflow:auto;
  padding:7px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  box-shadow:var(--shadow);
}
.titleSuggest.is-hidden{
  display:none;
}
.titleSuggestItem{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 11px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  text-align:left;
}
.titleSuggestItem:hover,
.titleSuggestItem:focus{
  background:color-mix(in srgb, var(--btn) 9%, var(--card));
  outline:none;
}
.titleSuggestName{
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.titleSuggestMeta{
  flex:0 0 auto;
  color:var(--muted);
  font-weight:900;
  font-size:13px;
}
.titleSongList{
  margin-top:12px;
  max-height:min(52vh, 520px);
  overflow:auto;
  padding:7px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb, var(--card) 86%, var(--bg));
}
.titleSongItem{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 11px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  text-align:left;
}
.titleSongItem:hover,
.titleSongItem:focus{
  background:color-mix(in srgb, var(--btn) 9%, var(--card));
  outline:none;
}
.titleSongEmpty{
  padding:14px;
  color:var(--muted);
  font-weight:900;
  text-align:center;
}
.numberPad{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin-top:12px;
}
.numberPad button{
  min-height:60px;
  border-radius:14px;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--card) 80%, var(--bg));
  color:var(--text);
  font-size:24px;
  font-weight:900;
  cursor:pointer;
}
.numberPad button[type="submit"]{
  grid-column:1/-1;
  background:var(--btn);
  color:white;
  border-color:color-mix(in srgb, var(--btn) 76%, white);
}
.recentSongs{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.recentSongsTitle{
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:8px;
}
.recentSongList{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
.recentSongItem{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-height:58px;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 82%, var(--bg));
  color:var(--text);
  text-decoration:none;
}
.recentSongName{
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.recentSongMeta{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.playerResults{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-bottom:26px;
}
.resultCount{
  color:var(--muted);
  font-size:13px;
  font-weight:900;
  padding:0 4px;
}
.emptyState{
  padding:26px 18px;
  color:var(--muted);
  font-size:18px;
  font-weight:900;
  text-align:center;
}
.songResult{
  padding:0;
  overflow:hidden;
}
.songResultTitle{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:15px 16px;
  text-decoration:none;
  border-bottom:1px solid var(--line);
  font-size:20px;
  font-weight:900;
}
.songResultTitle b{
  flex:0 0 auto;
  padding:5px 10px;
  border-radius:999px;
  background:color-mix(in srgb, var(--btn) 13%, var(--card));
  color:var(--muted);
  font-size:14px;
}
.partResultList{
  display:flex;
  flex-direction:column;
}
.partResultRow{
  position:relative;
}
.partResult{
  display:grid;
  grid-template-columns:42px minmax(0, 1fr);
  align-items:center;
  gap:12px;
  padding:13px 52px 13px 16px;
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.partResult:last-child{
  border-bottom:0;
}
.partResult.preferred{
  background:color-mix(in srgb, var(--btn) 8%, var(--card));
}
.partResult.selectedPart{
  border-left:4px solid var(--btn);
  padding-left:12px;
  background:color-mix(in srgb, var(--btn) 13%, var(--card));
}
.partResultIcon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:color-mix(in srgb, var(--btn) 10%, var(--card));
  color:var(--btn);
}
.partResultIcon .instrumentIcon{
  width:28px;
  height:28px;
}
.partResultText{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.partName{
  font-weight:900;
}
.partResult.selectedPart .partName{
  font-size:21px;
  line-height:1.15;
}
.partNotes{
  color:var(--muted);
  line-height:1.35;
}
.partTags{
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}
.partPlayers{
  color:var(--text);
  font-size:13px;
  font-weight:900;
}
.partFavoriteForm{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  margin:0;
}
.partFavoriteBtn{
  width:20px;
  height:20px;
  min-width:20px;
  padding:0;
  border:0;
  background:transparent;
  color:#C99A23;
  font-size:19px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  opacity:.9;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}
.partFavoriteBtn.active{
  color:#E0B63F;
  opacity:1;
}
.playerPlaylists{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  box-shadow:var(--shadow);
}
.playerPlaylists.is-hidden{
  display:none;
}
.playlistStripHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}
.playlistStripHeader a{
  text-transform:none;
  text-decoration:none;
  color:var(--text);
}
.playlistStrip{
  display:flex;
  gap:8px;
  overflow:auto;
  padding-bottom:2px;
}
.playlistPill{
  flex:0 0 auto;
  min-height:46px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 82%, var(--bg));
  color:var(--text);
  text-decoration:none;
  font-weight:900;
}
.playlistPill.active{
  border-color:color-mix(in srgb, var(--btn) 45%, var(--line));
  background:color-mix(in srgb, var(--btn) 13%, var(--card));
}
.playlistPill b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  height:26px;
  padding:0 7px;
  border-radius:999px;
  background:color-mix(in srgb, var(--btn) 12%, var(--card));
  color:var(--muted);
  font-size:12px;
}
.playlistPlayerCard{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(360px, 460px);
  gap:14px;
  min-height:min(620px, calc(100svh - 285px));
  padding-top:10px;
  border-top:1px solid var(--line);
}
.playlistPlayerMain{
  min-width:0;
  min-height:0;
  overflow:auto;
  padding-right:2px;
}
.playlistPlayerMain h2{
  margin:4px 0 8px;
  font-size:24px;
}
.playlistProgress,
.playlistCurrentNo{
  color:var(--muted);
  font-weight:900;
}
.playlistCurrentNo{
  font-size:18px;
}
.playlistCurrentSongTitle{
  margin:8px 0 6px;
  color:var(--text);
  font-size:16px;
  font-weight:900;
}
.playlistPartList{
  margin-top:10px;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:color-mix(in srgb, var(--card) 92%, var(--bg));
}
.playlistCurrentPart{
  margin-top:12px;
  display:grid;
  grid-template-columns:42px minmax(0, 1fr);
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb, var(--btn) 8%, var(--card));
}
.playlistCurrentPart span:last-child{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.playlistCurrentPart em{
  color:var(--muted);
  font-style:normal;
  font-weight:800;
}
.playlistOrderList{
  max-height:min(620px, calc(100svh - 305px));
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.playlistOrderColumn{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.playlistOrderList a{
  display:grid;
  grid-template-columns:38px 72px minmax(0, 1fr);
  align-items:center;
  gap:8px;
  min-height:54px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:color-mix(in srgb, var(--card) 84%, var(--bg));
  text-decoration:none;
}
.playlistOrderList a.active{
  border-color:color-mix(in srgb, var(--btn) 45%, var(--line));
  background:color-mix(in srgb, var(--btn) 13%, var(--card));
}
.playlistOrderList span{
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}
.playlistOrderList b{
  color:var(--text);
}
.playlistOrderList em{
  min-width:0;
  color:var(--muted);
  font-style:normal;
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.playlistQrOpenBtn{
  width:100%;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid color-mix(in srgb, var(--btn) 38%, var(--line));
  border-radius:12px;
  background:color-mix(in srgb, var(--btn) 12%, var(--card));
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}
.qrIcon{
  width:26px;
  height:26px;
  flex:0 0 26px;
  border:2px solid currentColor;
  border-radius:5px;
  background:
    linear-gradient(currentColor, currentColor) 4px 4px/6px 6px no-repeat,
    linear-gradient(currentColor, currentColor) 16px 4px/4px 4px no-repeat,
    linear-gradient(currentColor, currentColor) 4px 16px/5px 5px no-repeat,
    linear-gradient(currentColor, currentColor) 15px 15px/7px 7px no-repeat,
    linear-gradient(currentColor, currentColor) 12px 8px/3px 3px no-repeat,
    linear-gradient(currentColor, currentColor) 9px 13px/3px 3px no-repeat;
}
.playlistQrModal{
  position:fixed;
  inset:0;
  z-index:90;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.55);
}
.playlistQrModal.is-hidden{
  display:none;
}
.playlistQrDialog{
  width:min(440px, calc(100vw - 28px));
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
  box-shadow:0 18px 60px rgba(0,0,0,.36);
}
.playlistQrDialogHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.playlistQrDialogHead h2{
  margin:2px 0 0;
}
.playlistBottomNav{
  position:sticky;
  bottom:12px;
  z-index:30;
  display:grid;
  grid-template-columns:1fr 1.3fr 1fr;
  gap:8px;
  max-width:min(680px, calc(100vw - 28px));
  margin:0 auto 10px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:16px;
  background:color-mix(in srgb, var(--card) 90%, transparent);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow);
}
.playlistBottomNav .btn{
  min-height:50px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  text-decoration:none;
}
.playlistBottomNav .btn span,
.playlistBottomNav .btn strong{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.playlistBottomNav .btn span{
  font-size:12px;
  opacity:.82;
}
.playlistBottomNav.is-hidden{
  display:none;
}
.pdfPlaylistBottomNav{
  position:fixed;
  left:50%;
  right:auto;
  bottom:max(12px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(760px, calc(100vw - 28px));
  margin:0;
  z-index:42;
}
.pdfViewerBody.hasPlaylistNav .pdfViewerScroll{
  scroll-padding-bottom:92px;
}
.btn.disabled{
  opacity:.45;
  pointer-events:none;
}
.playlistForm{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.playlistForm label{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.playlistAdminLayout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(340px, .95fr);
  gap:18px;
  align-items:start;
}
.playlistSideColumn{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.playlistQrCard{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.playlistQrBox{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.playlistQrSvg{
  width:min(360px, 100%);
  aspect-ratio:1;
}
.playlistQrSvg svg{
  display:block;
  width:100%;
  height:100%;
}
.playlistQrText{
  display:block;
  max-width:100%;
  overflow:auto;
  padding:8px 9px;
  border-radius:10px;
  background:color-mix(in srgb, var(--bg) 75%, black);
  color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
}
.profileAdminList{
  display:grid;
  gap:10px;
}
.profileAdminItem{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb, var(--card) 84%, var(--bg));
}
.profileAdminItem.active{
  border-color:color-mix(in srgb, var(--btn) 42%, var(--line));
  background:color-mix(in srgb, var(--btn) 10%, var(--card));
}
.profileAdminMeta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.profileAdminMeta strong{
  font-size:18px;
}
.profileAdminMeta span{
  color:var(--muted);
  font-weight:700;
}
.profileAdminActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.profileBandGrid{
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
}
.playerBandDialog{
  width:min(760px, calc(100vw - 28px));
}
.playerBandForm{
  display:grid;
  gap:14px;
}
.playerBandChooserGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:12px;
}
.playerBandChooserCard{
  min-height:110px;
  display:grid;
  grid-template-columns:64px minmax(0, 1fr);
  align-items:center;
  gap:14px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:color-mix(in srgb, var(--card) 86%, var(--bg));
  color:var(--text);
  cursor:pointer;
  text-align:left;
}
.playerBandChooserCard.active{
  border-color:color-mix(in srgb, var(--btn) 42%, var(--line));
  background:color-mix(in srgb, var(--btn) 12%, var(--card));
}
.playerBandChooserLogo{
  width:64px;
  height:64px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  overflow:hidden;
  background:color-mix(in srgb, var(--btn) 8%, var(--card));
}
.playerBandChooserLogo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.playerBandChooserText{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.playerBandChooserText strong{
  font-size:20px;
}
.playerBandChooserText small{
  color:var(--muted);
  font-size:14px;
  font-weight:700;
}
.smallText{
  font-size:12px;
  margin:0;
}
.playlistHelp{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.playlistHelp > div{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 84%, var(--bg));
}
.playlistHelp code,
.playlistExportCode{
  display:block;
  max-width:100%;
  overflow:auto;
  padding:8px 9px;
  border-radius:10px;
  background:color-mix(in srgb, var(--bg) 75%, black);
  color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
}
.playlistAdminList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.playlistAdminItem{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb, var(--card) 84%, var(--bg));
}
.playlistAdminItem h3{
  margin:0 0 4px;
}
.playlistAdminActions{
  display:flex;
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
.playlistAdminActions form{
  margin:0;
}
.playlistWarnings{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.playlistWarnings span{
  padding:5px 8px;
  border:1px solid rgba(199,134,42,.55);
  border-radius:999px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.displayPrefPlayer.is-hidden,
.displayPrefTag.is-hidden,
.displayPrefNote.is-hidden{
  display:none;
}
.partEditNote,
.versionNote,
.editNoteInline{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:4px 8px;
  border-radius:999px;
  background:color-mix(in srgb, var(--btn) 12%, var(--card));
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}
.partEditNote{
  width:fit-content;
}
.editNoteInline{
  margin-left:8px;
  vertical-align:middle;
}
.mediaPreviewWrap{
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--card) 82%, var(--bg));
  padding:12px;
}
.imagePreview{
  display:block;
  max-width:100%;
  max-height:76vh;
  margin:0 auto;
  object-fit:contain;
}
.audioPlayer{
  width:100%;
  min-height:44px;
}
.mediaViewerStage{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 14px;
}
.mediaViewerCard{
  width:min(760px, 100%);
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
  box-shadow:var(--shadow);
  text-align:center;
}
.mediaViewerCard h1{
  margin:12px 0 6px;
}
.mediaViewerIcon{
  width:72px;
  height:72px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  border:1px solid color-mix(in srgb, var(--btn) 28%, var(--line));
  background:color-mix(in srgb, var(--btn) 10%, var(--card));
}
.mediaViewerIcon .instrumentIcon{
  width:42px;
  height:42px;
}
.mediaViewerMetaLine{
  color:var(--muted);
  font-weight:800;
}
.mediaViewerPlayer{
  margin-top:18px;
}
.mediaViewerNotes{
  margin-top:16px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--card) 84%, var(--bg));
  color:var(--muted);
  text-align:left;
}
.sharedMetaPanel{
  margin:0 12px 12px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb, var(--card) 88%, var(--bg));
  box-shadow:var(--shadow);
}
.sharedMetaPanel[hidden]{
  display:none;
}
.sharedMetaPanel.compact{
  margin:18px 0 0;
}
.sharedMetaHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.sharedMetaHeader h3{
  margin:0 0 4px;
  font-size:16px;
}
.sharedMetaCurrent{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-bottom:12px;
}
.sharedMetaValue{
  min-height:44px;
  display:flex;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 82%, var(--bg));
  color:var(--text);
  font-weight:800;
}
.sharedMetaHint{
  color:var(--muted);
  font-size:12px;
}
.sharedMetaForm{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  align-items:end;
}
.sharedMetaActions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  grid-column:1 / -1;
}
.sharedMetaStatus{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.sharedMetaStatus.error{
  color:var(--bad);
}
.sharedMetaStatus.ok{
  color:var(--ok);
}
@media (max-width:720px){
  .topbar{
    align-items:flex-start;
    gap:10px;
  }
  .nav{
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  .topbarBandSwitch{
    width:100%;
  }
  .navSelect{
    width:100%;
  }
  .playerHeader{
    flex-direction:column;
  }
  .playerHeaderActions{
    width:100%;
    justify-content:flex-start;
  }
  .setupGrid,
  .playerSearchRow,
  .recentSongList{
    grid-template-columns:1fr;
  }
  .playerSearchActions{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    grid-auto-flow:row;
    grid-auto-columns:unset;
  }
  .voiceMulti{grid-template-columns:1fr}
  .partResult{grid-template-columns:40px minmax(0, 1fr)}
  .playlistPlayerCard,
  .playlistAdminLayout,
  .playlistAdminItem,
  .profileAdminItem,
  .playerBandChooserGrid{
    grid-template-columns:1fr;
  }
  .playlistPlayerCard{
    min-height:0;
  }
  .playlistOrderList{
    max-height:42vh;
  }
  .playlistOrderList a{
    grid-template-columns:30px 64px minmax(0, 1fr);
  }
  .playlistBottomNav{
    left:14px;
    right:14px;
    grid-template-columns:1fr 1.25fr 1fr;
  }
  .playerSearchBtn{
    width:100%;
  }
  .sharedMetaCurrent,
  .sharedMetaForm{
    grid-template-columns:1fr;
  }
}

.titleRow{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.songTitle{margin:0;font-size:30px;line-height:1.1}
.internalBadge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 12px;border-radius:999px;
  background: color-mix(in srgb, var(--btn) 14%, var(--card));
  border:1px solid color-mix(in srgb, var(--btn) 36%, var(--line));
  font-weight:900;
  font-size:18px;
}
.floatingBar{
  position:fixed;
  left:0; right:0; bottom:0;
  padding:12px 14px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(10px);
  border-top:1px solid var(--line);
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  z-index: 20;
}
@media (min-width: 900px){
  .floatingBar{justify-content:flex-end; padding-right: calc((100vw - min(1600px, calc(100vw - 28px)))/2 + 14px);}
}

.editorShell{position:sticky;top:74px;z-index:12}
.editorTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.editorActions{margin-top:0}
.editorShell.toolsCollapsed .pdfToolbar{display:none}
.editorShell.toolsCollapsed{padding-block:12px}
.pdfToolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.scanTools{
  flex-direction:row;
  align-items:center;
}
.scanTools span{
  margin-right:2px;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}
.versionControl{max-width:100%}
.versionSelect{
  width:min(380px, 58vw);
  max-width:100%;
  padding:7px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--card) 86%, var(--bg));
  color:var(--text);
  font-weight:800;
}
.versionSelect option{
  background:var(--card);
  color:var(--text);
}
.toolBtn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;
  padding:8px 11px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--btn2);
  color:var(--text);
  font-weight:800;
  cursor:pointer;
}
.toolBtn.active{
  background:var(--btn);
  border-color:color-mix(in srgb, var(--btn) 76%, white);
  color:white;
}
.toolControl{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb, var(--card) 84%, var(--bg))}
.toolControl input{accent-color:var(--btn)}
.editNoteControl{
  min-width:min(360px, 100%);
}
.editNoteControl input{
  min-width:220px;
  padding:7px 9px;
  border-radius:10px;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--card) 92%, white);
  color:var(--text);
}
.tableActions{display:flex;gap:8px;flex-wrap:wrap}
.quickVoicePanel{
  margin-top:14px;
  padding:10px 0 0;
  border-top:1px solid var(--line);
}
.quickVoiceTitle{
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:8px;
}
.quickVoiceList{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.voiceChip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  max-width:100%;
  padding:7px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--card) 82%, var(--bg));
  color:var(--text);
  text-decoration:none;
  font-weight:800;
}
.voiceChip.active{
  background:var(--btn);
  border-color:color-mix(in srgb, var(--btn) 76%, white);
  color:white;
}
.voiceChip span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.voiceChip em{
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-style:normal;
  opacity:.82;
  font-size:12px;
}
.colorControl{gap:7px}
.swatch{
  width:24px;
  height:24px;
  flex:0 0 24px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.24);
  background:var(--swatch);
  cursor:pointer;
  padding:0;
}
.swatch.active{
  outline:2px solid var(--text);
  outline-offset:2px;
}
.textFormatBar{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:7px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--card) 84%, var(--bg));
}
.textFormatBar.disabled{
  opacity:.5;
}
.textSizeControl{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-weight:900;
}
.textSizeInput{
  width:118px;
  accent-color:var(--btn);
}
.textSizeValue{
  min-width:24px;
  color:var(--text);
  text-align:right;
  font-weight:900;
}
.formatBtn{
  min-width:32px;
  min-height:28px;
  padding:5px 8px;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--btn2);
  color:var(--text);
  cursor:pointer;
  font-weight:900;
}
.formatBtn.active{
  background:var(--btn);
  color:white;
}
.formatBtn.danger{
  background:rgba(209,74,74,.22);
  border-color:rgba(209,74,74,.38);
}
.pdfEditorStage{max-width:min(1300px, calc(100vw - 28px));margin:0 auto 96px auto;padding:0 14px}
.pdfEditPage{
  position:relative;
  max-width:100%;
  margin:0 auto 18px auto;
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.pdfRenderCanvas,.pdfAnnotationCanvas{display:block;width:100%;height:auto}
.pdfRenderCanvas{position:relative;z-index:1}
.pdfAnnotationCanvas{
  position:absolute;
  inset:0;
  touch-action:none;
  cursor:crosshair;
  z-index:2;
}
.cropSelection{
  position:absolute;
  z-index:7;
  border:2px dashed var(--btn);
  background:color-mix(in srgb, var(--btn) 14%, transparent);
  box-shadow:0 0 0 9999px rgba(0,0,0,.18);
  pointer-events:none;
}
.textNote{
  position:absolute;
  z-index:4;
  min-width:90px;
  max-width:calc(100% - 8px);
  min-height:42px;
  padding:6px 34px 10px 38px;
  border:1px solid transparent;
  border-radius:6px;
  background:rgba(255,255,255,.01);
  color:#d60000;
  touch-action:manipulation;
}
.textNote.selected{
  border-color:var(--btn);
  background:rgba(255,255,255,.18);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--btn) 18%, transparent);
}
.textHandle{
  position:absolute;
  left:4px;
  top:4px;
  width:30px;
  height:30px;
  border:0;
  border-radius:6px;
  background:rgba(20,18,16,.78);
  color:white;
  cursor:move;
  line-height:30px;
  padding:0;
  touch-action:none;
  user-select:none;
}
.textResizeHandle{
  position:absolute;
  right:4px;
  bottom:4px;
  width:30px;
  height:30px;
  border:0;
  border-radius:6px;
  background:rgba(20,18,16,.78);
  color:white;
  cursor:nwse-resize;
  line-height:30px;
  padding:0;
  font-size:12px;
  touch-action:none;
  user-select:none;
}
.textContent{
  min-height:24px;
  outline:none;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  touch-action:manipulation;
}
.textContent:empty::before{
  content:attr(data-placeholder);
  color:rgba(214,0,0,.45);
}
.pageBadge{
  position:absolute;
  right:10px;
  top:10px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(20,18,16,.72);
  color:#fff4dd;
  font-size:12px;
  font-weight:800;
  pointer-events:none;
  z-index:5;
}

.pdfViewerBody{
  overflow:hidden;
  background:var(--bg);
  overscroll-behavior:none;
}
.pdfViewerShell{
  width:100vw;
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.pdfViewerBar{
  flex:0 0 auto;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter:blur(10px);
  z-index:20;
}
.pdfViewerBody.viewerBarHidden .pdfViewerBar{
  display:none;
}
.viewerBarReveal{
  position:fixed;
  right:16px;
  top:16px;
  z-index:30;
  min-height:48px;
  padding:11px 16px;
  border-radius:999px;
  border:2px solid color-mix(in srgb, #d7a53d 70%, white);
  background:#8d2035;
  color:#fff4dd;
  box-shadow:0 12px 32px rgba(0,0,0,.36), 0 0 0 4px rgba(215,165,61,.22);
  font-weight:900;
  font-size:16px;
  cursor:pointer;
  display:none;
}
.pdfViewerBody.viewerBarHidden .viewerBarReveal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.viewerRotateAction{
  border-color:color-mix(in srgb, #d7a53d 70%, var(--line));
  background:color-mix(in srgb, #d7a53d 42%, var(--btn2));
}
.viewerRotateFloating{
  position:fixed;
  right:16px;
  top:78px;
  z-index:30;
  min-height:46px;
  padding:10px 15px;
  border-radius:999px;
  border:2px solid color-mix(in srgb, #d7a53d 70%, white);
  background:#8d2035;
  color:#fff4dd;
  box-shadow:0 12px 30px rgba(0,0,0,.28), 0 0 0 4px rgba(215,165,61,.18);
  font-weight:900;
  font-size:16px;
  cursor:pointer;
}
.viewerRotateFloating:disabled{
  cursor:wait;
  opacity:.72;
}
.pdfViewerBody.viewerBarHidden .viewerRotateFloating{
  top:16px;
  right:108px;
}
.pdfViewerTitle{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.viewerLogo{
  width:40px;
  height:auto;
  flex:0 0 40px;
}
.viewerLogoLink{
  width:40px;
  flex:0 0 40px;
  display:block;
  line-height:0;
  text-decoration:none;
}
.pdfViewerName{
  font-weight:900;
  line-height:1.15;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:46vw;
}
.pdfViewerMeta{
  color:var(--muted);
  font-size:12px;
  margin-top:3px;
}
.pdfViewerControls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.viewerVoiceControl{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  padding:6px 8px;
  border-radius:12px;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--card) 82%, var(--bg));
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}
.voiceSelect{
  width:min(280px, 44vw);
  max-width:100%;
  padding:7px 9px;
  border-radius:10px;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--card) 86%, var(--bg));
  color:var(--text);
  font-weight:800;
}
.voiceSelect option{
  background:var(--card);
  color:var(--text);
}
.pdfViewerControls .toolBtn,
.pdfViewerTitle .toolBtn{
  text-decoration:none;
  min-height:36px;
}
.pdfViewerScroll{
  flex:1 1 auto;
  overflow:auto;
  touch-action:pan-x pan-y;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  background:color-mix(in srgb, var(--bg) 70%, #888);
  user-select:none;
}
.pdfViewerPages{
  min-height:100%;
  min-width:100%;
  width:max-content;
  padding:14px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
  transform-origin:0 0;
}
.pdfViewerPage{
  position:relative;
  margin-left:auto;
  margin-right:auto;
  background:white;
  box-shadow:0 8px 26px rgba(0,0,0,.35);
}
.pdfViewerPage canvas{
  display:block;
  max-width:none;
}
.pdfViewerStatus{
  margin:32px auto;
  color:var(--muted);
  font-weight:800;
}
@media (max-width:760px){
  .pdfViewerBar{
    align-items:flex-start;
    flex-direction:column;
  }
  .pdfViewerName{max-width:calc(100vw - 26px)}
  .pdfViewerControls{justify-content:flex-start}
  .viewerVoiceControl{width:100%}
  .voiceSelect{width:100%}
  .viewerRotateFloating{
    top:auto;
    right:14px;
    bottom:86px;
  }
  .pdfViewerBody.viewerBarHidden .viewerRotateFloating{
    top:auto;
    right:14px;
    bottom:86px;
  }
}

@media (pointer:coarse){
  .textNote{
    min-height:50px;
    padding-left:46px;
    padding-right:46px;
  }
  .textHandle,
  .textResizeHandle{
    width:38px;
    height:38px;
    line-height:38px;
    font-size:15px;
  }
  .textSizeInput{width:150px}
}