@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy.css');


:root{--bg:#000;--text:#e9e9e9;--muted:#858585;--red:#ff6262;--blue:#6e9fff;--green:#54d892;--lyric-size:21px;--app-title-size:24px}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:"Paperlogy",system-ui,-apple-system,"Noto Sans KR",sans-serif}button{font:inherit;color:inherit}.screen{display:none;height:100%}.screen.on{display:block}#list{overflow:auto;padding:18px 14px 28px}#appTitle{font-size:var(--app-title-size);margin:5px 0 5px;white-space:pre-line;line-height:1.18}.desc{color:var(--muted);font-size:13px;line-height:1.5;margin-bottom:15px}.song{display:block;width:100%;text-align:left;border:0;background:#111;padding:15px 16px;margin:7px 0;border-radius:12px;font-size:16px;font-weight:750}.legend{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin:16px 2px}.red{color:var(--red);font-weight:850}.blue{color:var(--blue);font-weight:850}.green{color:var(--green);font-weight:850}
#player{position:relative;overflow:hidden}.header{height:64px;position:absolute;z-index:10;top:0;left:0;right:0;padding:9px 12px;background:#000;border-bottom:1px solid #1d1d1d;display:flex;align-items:center;gap:10px}.back{border:0;background:#181818;border-radius:9px;padding:9px 11px}.headtext{min-width:0;flex:1}#title{font-size:17px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#speedText{font-size:11px;color:var(--muted);margin-top:2px}
#viewport{position:absolute;top:64px;bottom:72px;left:0;right:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}#viewport::-webkit-scrollbar{display:none}#lyrics{padding:28vh 22px 56vh;font-size:var(--lyric-size);line-height:1.72;word-break:keep-all}.line{min-height:1.72em;margin:0 0 .12em}.line.blank{min-height:1.2em}
.controls{height:72px;position:absolute;z-index:10;bottom:0;left:0;right:0;padding:8px 10px max(8px,env(safe-area-inset-bottom));background:#000;border-top:1px solid #1d1d1d;display:grid;grid-template-columns:82px 1fr 58px;gap:8px}.controls button{border:0;border-radius:11px;background:#181818;font-weight:800}#play{background:#eee;color:#111;font-size:16px}.more-btn{font-size:24px;line-height:1}.practice-sheet{display:none;position:absolute;z-index:25;left:10px;right:10px;bottom:82px;background:#111;border:1px solid #2b2b2b;border-radius:16px;padding:14px;box-shadow:0 12px 34px rgba(0,0,0,.45)}.practice-sheet.on{display:block}.practice-sheet h3{margin:0 0 12px;font-size:16px}.sheet-row{display:grid;grid-template-columns:84px 44px 1fr 44px;gap:8px;align-items:center;margin:10px 0}.sheet-label{font-size:13px;color:#bbb;font-weight:800}.sheet-value{text-align:center;background:#080808;border:1px solid #2d2d2d;border-radius:10px;padding:10px 8px;font-weight:850}.sheet-row button{border:0;border-radius:10px;background:#242424;padding:10px 0;font-weight:900}.sheet-note{font-size:11px;color:#777;line-height:1.4;margin-top:8px}

.list-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.head-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}.settings-btn,.share-btn{border:0;background:#181818;border-radius:10px;padding:9px 12px;font-weight:800;flex:0 0 auto}.share-btn{background:#242424}
.modal{display:none;position:fixed;z-index:100;inset:0;background:rgba(0,0,0,.78);padding:18px;align-items:center;justify-content:center}.modal.on{display:flex}.modal-card{width:min(520px,100%);max-height:88vh;overflow:auto;background:#111;border:1px solid #2b2b2b;border-radius:16px;padding:18px}.modal-card h2{font-size:20px;margin:0 0 14px}.field{display:block;margin:11px 0}.field span{display:block;color:#aaa;font-size:12px;margin-bottom:5px}.field input,.field textarea{width:100%;border:1px solid #333;border-radius:9px;background:#080808;color:#eee;padding:11px 12px;font-size:16px;font-family:inherit}.field textarea{min-height:76px;resize:vertical;line-height:1.4}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}.modal-actions button{border:0;border-radius:10px;background:#242424;padding:10px 14px;font-weight:800}.modal-actions .primary{background:#eee;color:#111}.error{min-height:1.3em;color:#ff7474;font-size:12px;margin-top:7px}.admin-note{color:#777;font-size:11px;line-height:1.45;margin-top:10px}

.search-wrap{margin:14px 0 10px}.song-search{width:100%;border:1px solid #2c2c2c;border-radius:11px;background:#0b0b0b;color:#eee;padding:12px 13px;font-size:15px}.section-title{font-size:13px;color:#aaa;font-weight:800;margin:16px 2px 7px}.song-row{display:grid;grid-template-columns:1fr 46px;gap:7px;align-items:stretch}.song-row .song{margin:4px 0}.fav-btn{border:0;background:#181818;border-radius:12px;margin:4px 0;font-size:22px;color:#777}.fav-btn.on{color:#ffd65a}.empty-note{color:#777;font-size:13px;padding:8px 3px 2px}.scroll-hint{font-size:11px;color:#777;margin-top:3px}.manual-scrolling #lyrics{opacity:.96}
.promo-carousel{position:relative;width:100%;max-width:100%;margin:10px 0 16px;border:1px solid #343434;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:3.68/1;min-height:0;isolation:isolate;touch-action:pan-y;box-shadow:0 8px 24px rgba(0,0,0,.28)}.promo-carousel[hidden]{display:none}.promo-bg,.promo-shade,.promo-copy{display:none!important}.promo-main{position:absolute;z-index:1;inset:0;display:block;width:100%;max-width:100%;height:100%;object-fit:cover;object-position:center;background:#000;filter:none;opacity:0;transition:opacity .48s cubic-bezier(.4,0,.2,1);transform:none;will-change:opacity}.promo-main.is-active{opacity:1;z-index:2}.promo-main[hidden]{display:none}.promo-carousel.active .promo-main{transform:none}.promo-placeholder{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;color:#bbb;font-size:14px;line-height:1.5}.promo-placeholder[hidden]{display:none}.ad-dots{position:absolute;z-index:4;left:auto;right:8px;bottom:6px;display:flex;justify-content:flex-end;align-items:center;gap:4px;pointer-events:none}.ad-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.42);transition:width .22s ease,background .22s ease}.ad-dot.on{width:11px;border-radius:99px;background:rgba(255,255,255,.92)}.field-check{display:flex;align-items:center;gap:9px;margin:11px 0;color:#ddd;font-size:14px}.field-check input{width:18px;height:18px}.file-note{color:#777;font-size:11px;line-height:1.45;margin-top:5px}.ad-editor{border:1px solid #292929;border-radius:12px;padding:12px;margin:10px 0;background:#0b0b0b}.ad-editor-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.ad-editor-title{font-size:13px;font-weight:850}.ad-remove,.ad-add{border:0;border-radius:9px;background:#242424;color:#eee;padding:8px 10px;font-weight:800}.ad-add{width:100%;margin-top:8px}.ad-editor .field{margin:8px 0}.ad-editor .field span{font-size:11px}.ad-editor select{width:100%;border:1px solid #333;border-radius:9px;background:#080808;color:#eee;padding:11px 12px;font-size:15px}

.user-settings-card{width:min(480px,100%)}.settings-section{border-top:1px solid #252525;padding-top:14px;margin-top:14px}.settings-section:first-of-type{border-top:0;padding-top:0;margin-top:0}.settings-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;background:#181818;border-radius:12px;padding:13px 14px;margin:8px 0;text-align:left}.settings-item-main{min-width:0}.settings-item-title{font-size:14px;font-weight:850}.settings-item-value{font-size:12px;color:#999;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.settings-item-arrow{color:#888;font-size:20px}.music-options{display:grid;gap:7px;margin-top:8px}.music-option{display:flex;align-items:center;gap:10px;border:1px solid #2e2e2e;border-radius:11px;padding:11px 12px;background:#0b0b0b}.music-option input{width:18px;height:18px}.admin-entry{background:#222}.music-open-btn{border:0;background:#1d1d1d;color:#eee;border-radius:10px;padding:8px 10px;font-weight:800;white-space:nowrap}.header{padding-right:10px}.headtext{min-width:0}.music-sheet-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0;padding:10px 0;border-bottom:1px solid #242424}.music-sheet-name{font-size:13px;font-weight:850}.music-sheet-value{font-size:12px;color:#999;margin-top:3px}.sheet-change-btn{border:0;border-radius:9px;background:#242424;padding:9px 11px;font-weight:800}.user-note{font-size:11px;color:#777;line-height:1.45;margin-top:10px}

/* v0.6.7 안정화: YouTube 영역 단일 정의 */
#play:disabled{opacity:.55;cursor:wait}
#player{--youtube-panel-height:0px}
#player .youtube-practice{
  display:none;position:absolute;top:74px;left:14px;right:14px;
  width:auto;margin:0;z-index:12;aspect-ratio:16/9;
  border-radius:14px;overflow:hidden;background:#111;border:1px solid #292929;
  box-shadow:0 10px 28px rgba(0,0,0,.55)
}
#player .youtube-practice.on{display:block}
#player .youtube-practice iframe{display:block;width:100%;height:100%;border:0}
.youtube-status{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;background:#111;color:#aaa;font-size:13px;z-index:2;white-space:pre-line}
.youtube-status[hidden]{display:none}
#player.youtube-mode #viewport{top:calc(74px + var(--youtube-panel-height) + 12px)}
#player:not(.youtube-mode) #viewport{top:64px}
#player.youtube-mode #lyrics{padding-top:22vh;padding-bottom:56vh}
.line.sync-active{opacity:1!important;filter:none;font-weight:inherit}
.line.sync-preview{opacity:1!important;filter:brightness(1.12)}
.line.sync-past{opacity:.42}.line.sync-future{opacity:.68}
.sync-manual .line:not(.sync-preview){opacity:.38}.sync-manual .line.sync-preview{opacity:1}

/* v0.6.3 관리자 퀵 편집 */
.quick-edit-trigger{width:18px;height:34px;padding:0;border:0;background:transparent;color:#777;opacity:.22;font-size:22px;line-height:1;flex:0 0 18px;touch-action:none;user-select:none;-webkit-user-select:none}.quick-edit-trigger:active{opacity:.5}.quick-admin-card{width:min(360px,100%)}
.quick-editor{display:none;position:absolute;z-index:30;left:8px;right:8px;bottom:80px;background:rgba(15,15,15,.98);border:1px solid #303030;border-radius:15px;padding:12px;box-shadow:0 18px 40px rgba(0,0,0,.58)}.quick-editor.on{display:block}.quick-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.quick-editor-head strong{font-size:14px}.quick-editor-head button{border:0;border-radius:8px;background:#252525;padding:7px 10px;font-weight:800}.quick-editor-head #quickEditorMeta{font-size:11px;color:#888;margin-top:3px}.quick-editor-line{margin-top:10px;padding:10px 11px;min-height:42px;background:#080808;border-radius:10px;font-size:13px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quick-editor-time{text-align:center;font-variant-numeric:tabular-nums;font-size:23px;font-weight:900;letter-spacing:.02em;padding:9px 0}.quick-editor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.quick-editor-grid button{border:0;border-radius:9px;background:#242424;padding:10px 6px;font-size:12px;font-weight:850}.quick-editor-grid .quick-primary{background:#eee;color:#111}.quick-editor-note{font-size:10px;color:#737373;line-height:1.4;margin-top:8px}.line.quick-selected{outline:1px solid rgba(255,255,255,.35);outline-offset:4px;border-radius:4px}.quick-editing #viewport{padding-bottom:230px}

/* v0.6.4: single settings entry + hidden admin access */
.sheet-actions{display:flex;gap:7px}.sheet-open-btn{border:0;border-radius:9px;background:#eee;color:#111;padding:9px 11px;font-weight:850}.version-entry{display:block;margin:15px auto 0;border:0;background:transparent;color:#3f3f3f;font-size:10px;padding:10px 18px;letter-spacing:.01em}.version-entry:active{color:#666}.header .headtext{padding-right:4px}

.json-preview-card{width:min(620px,100%)}.json-filename{font-size:13px;font-weight:850;color:#ddd;background:#080808;border:1px solid #303030;border-radius:9px;padding:10px 12px;margin-bottom:9px;word-break:break-all}.json-preview-text{width:100%;height:42vh;min-height:240px;resize:vertical;background:#070707;color:#e9e9e9;border:1px solid #303030;border-radius:10px;padding:12px;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}.json-guide{font-size:12px;color:#999;line-height:1.5;margin-top:10px}.json-guide b{color:#ddd}

/* v0.6.7 안정화: 모바일 동적 화면 높이와 하단 안전영역 */
:root{--control-base:72px;--control-safe:env(safe-area-inset-bottom,0px);--control-height:calc(var(--control-base) + var(--control-safe))}
html,body{height:100%;min-height:100dvh;overflow:hidden}
.screen{height:100dvh;min-height:100dvh}
#list{overflow:auto;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
#viewport{bottom:var(--control-height)}
.controls{height:var(--control-height);padding:8px 10px calc(8px + var(--control-safe))}
.practice-sheet{bottom:calc(var(--control-height) + 10px)}
.quick-editor{bottom:calc(var(--control-height) + 8px)}
@supports not (height:100dvh){.screen{height:100%;min-height:100%}}

/* v0.6.12 YouTube 영상 표시 안정화 */
#player .youtube-practice{
  aspect-ratio:auto;
  min-height:180px;
  background:#000;
  isolation:isolate;
}
#youtubePlayer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  background:#000;
}
#youtubePlayer iframe{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  opacity:1!important;
  visibility:visible!important;
}
.youtube-status{z-index:3}
.youtube-status[hidden]{display:none!important}

/* v0.6.13 lyric editor */
.quick-editor-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0}.quick-editor-tabs button{border:1px solid #303030;background:#171717;color:#aaa;border-radius:10px;padding:9px;font-weight:800}.quick-editor-tabs button.on{background:#eee;color:#111;border-color:#eee}.lyric-part-list{display:grid;gap:8px;max-height:26vh;overflow:auto;margin:8px 0}.lyric-part-row{display:grid;grid-template-columns:92px 1fr 34px;gap:6px;align-items:center}.lyric-part-row select,.lyric-part-row input{min-width:0;border:1px solid #343434;background:#121212;color:#fff;border-radius:9px;padding:9px;font:inherit}.lyric-part-row button{height:36px;border:1px solid #3a3a3a;background:#1a1a1a;color:#bbb;border-radius:9px}.lyric-edit-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:8px 0}.lyric-edit-actions button{border:1px solid #353535;background:#1a1a1a;color:#ddd;border-radius:10px;padding:10px;font-weight:800}.lyric-edit-actions .quick-primary{background:#eee;color:#111}.lyric-line-actions{margin-top:7px}.quick-editor.quick-lyrics-mode .quick-editor-time{display:none}@media(max-height:700px){.lyric-part-list{max-height:19vh}}

/* v0.6.21 integrated editor: simplified settings */
.quick-editor-tabs{grid-template-columns:repeat(3,1fr)}
.offset-summary{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:8px 0 10px}
.offset-summary>div{background:#0a0a0a;border:1px solid #2d2d2d;border-radius:10px;padding:10px}
.offset-summary span{display:block;color:#858585;font-size:10px;margin-bottom:4px}
.offset-summary strong{font-size:14px}
.offset-adjust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
.offset-adjust-grid button{border:1px solid #353535;background:#1a1a1a;color:#ddd;border-radius:9px;padding:10px 4px;font-size:12px;font-weight:800}
.offset-direct{display:block;margin:10px 0}.offset-direct span{display:block;color:#aaa;font-size:11px;margin-bottom:6px}.offset-direct input{width:100%;border:1px solid #383838;background:#0b0b0b;color:#fff;border-radius:10px;padding:11px 12px;font-size:16px}
.quick-editor.quick-offset-mode .quick-editor-time{display:none}


/* v0.6.15 direct YouTube video editor */
.quick-editor-tabs{grid-template-columns:repeat(4,1fr)}
.quick-editor-tabs button{padding:9px 4px;font-size:12px}
.video-editor-summary{display:grid;gap:3px;background:#0a0a0a;border:1px solid #2d2d2d;border-radius:10px;padding:10px;margin:8px 0}
.video-editor-summary span{color:#858585;font-size:10px}
.video-editor-summary strong{font-size:12px;line-height:1.35;word-break:break-all}
.video-editor-summary small{color:#777;font-size:10px}
.video-editor-field{display:block;margin:10px 0}
.video-editor-field span{display:block;color:#aaa;font-size:11px;margin-bottom:6px}
.video-editor-field input,.video-editor-field select{width:100%;min-width:0;border:1px solid #383838;background:#0b0b0b;color:#fff;border-radius:10px;padding:11px 12px;font-size:14px;font-family:inherit}
.video-editor-actions{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:7px;margin-top:10px}
.video-editor-actions button{border:1px solid #353535;background:#1a1a1a;color:#ddd;border-radius:10px;padding:10px 5px;font-size:11px;font-weight:800}
.video-editor-actions .quick-primary{background:#eee;color:#111;border-color:#eee}
.video-editor-actions button:disabled{opacity:.45}
.video-editor-status{min-height:1.4em;color:#8fd3a8;font-size:11px;line-height:1.4;margin-top:8px}
.quick-editor.quick-video-mode .quick-editor-time{display:none}
@media(max-width:380px){.quick-editor-tabs button{font-size:11px}.video-editor-actions{grid-template-columns:1fr 1fr}.video-editor-actions .quick-primary{grid-column:1/-1}}

/* v0.6.21 hidden integrated editor entry and mobile-safe panel */
.quick-editor{max-height:calc(100dvh - var(--control-height) - 24px);overflow-y:auto;overscroll-behavior:contain}
.quick-editor-head{position:sticky;top:-12px;z-index:3;background:rgba(15,15,15,.98);padding-top:12px}
.quick-editor-capabilities{font-size:10px;color:#bdbdbd;margin-top:3px}
.quick-editor-tabs{position:sticky;top:47px;z-index:3;background:rgba(15,15,15,.98);padding:4px 0 6px;margin:6px 0 8px!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
.quick-editor-tabs button{display:block!important;min-width:0!important;visibility:visible!important;opacity:1!important}
#quickOffsetPane:not([hidden]),#quickVideoPane:not([hidden]){display:block!important}
@media(max-width:360px){.quick-editor{left:4px;right:4px;padding:10px}.quick-editor-tabs button{font-size:10px!important;padding:8px 2px!important}}

.quick-export-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0 0 5px}.quick-export-actions button{border:1px solid #353535;background:#1a1a1a;color:#ddd;border-radius:10px;padding:10px 7px;font-size:12px;font-weight:850}.quick-export-actions .quick-primary{background:#eee;color:#111;border-color:#eee}.quick-export-note{font-size:10px;color:#858585;line-height:1.4;margin:0 0 8px}.quick-export-actions button:disabled{opacity:.55}.quick-editor-tabs{top:47px}.quick-export-actions{position:sticky;top:94px;z-index:3;background:rgba(15,15,15,.98);padding:2px 0 4px}
@media(max-width:360px){.quick-export-actions button{font-size:11px;padding:9px 4px}}


/* v0.6.21 compact editor: 영상 확인을 위한 소형 타임코드 패널 */
.quick-editor-head-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.quick-editor-title{min-width:0}
.quick-editor.compact{
  left:auto;
  right:8px;
  width:min(430px,calc(100% - 16px));
  max-height:min(42dvh,310px);
  padding:8px;
  border-radius:13px;
  background:rgba(15,15,15,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.quick-editor.compact .quick-editor-head{top:-8px;padding-top:8px;background:rgba(15,15,15,.94)}
.quick-editor.compact .quick-editor-head strong{font-size:12px}
.quick-editor.compact .quick-editor-capabilities{display:none}
.quick-editor.compact .quick-editor-head #quickEditorMeta{font-size:10px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.quick-editor.compact .quick-editor-head button{padding:5px 8px;font-size:11px}
.quick-editor.compact .quick-editor-tabs{position:static;top:auto;padding:2px 0 4px;margin:4px 0 5px!important;background:transparent}
.quick-editor.compact .quick-editor-tabs button{padding:6px 2px!important;font-size:10px!important;border-radius:8px}
.quick-editor.compact .quick-export-actions,
.quick-editor.compact .quick-export-note,
.quick-editor.compact .quick-editor-note{display:none!important}
.quick-editor.compact .quick-editor-line{margin-top:4px;padding:6px 8px;min-height:30px;font-size:11px;border-radius:8px}
.quick-editor.compact .quick-editor-time{font-size:18px;padding:4px 0 5px}
.quick-editor.compact .quick-editor-grid{gap:5px}
.quick-editor.compact .quick-editor-grid button{padding:7px 3px;font-size:10px;border-radius:7px}
.quick-editor.compact #quickDelete,
.quick-editor.compact #quickExport,
.quick-editor.compact #quickResetLocal{display:none}
.quick-editor.compact.quick-lyrics-mode,
.quick-editor.compact.quick-offset-mode,
.quick-editor.compact.quick-video-mode{max-height:min(52dvh,390px)}
.quick-editing.editor-compact #viewport{padding-bottom:175px}
.quick-editing:not(.editor-compact) #viewport{padding-bottom:230px}
@media(max-width:600px){
  .quick-editor.compact{left:6px;right:6px;width:auto;max-height:min(40dvh,285px)}
}
@media(max-height:650px){
  .quick-editor.compact{max-height:min(44dvh,250px)}
  .quick-editor.compact .quick-editor-head #quickEditorMeta{max-width:180px}
}

.settings-data-card{display:grid;gap:10px;padding:14px;border:1px solid #d9dce5;border-radius:14px;background:#f7f8fb}
.settings-data-card p,.data-update-card p{margin:0;color:#555;line-height:1.5;font-size:14px}
.data-version-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;border-top:1px solid #e1e3ea;border-bottom:1px solid #e1e3ea;font-size:13px}
.settings-refresh-btn{width:100%}
.data-update-card{max-width:420px}
.data-update-note{font-weight:700;color:#222!important}
.data-update-actions{align-items:stretch}
.data-update-actions button{flex:1}


/* v0.6.28 user settings visibility and data refresh feedback */
.user-settings-card{background:#111;color:#f5f5f5;border-color:#343434;box-shadow:0 22px 70px rgba(0,0,0,.66)}
.user-settings-card>h2{font-size:22px;letter-spacing:-.02em;margin-bottom:16px}
.settings-data-card{display:grid;gap:14px;padding:16px;border:1px solid #3a3a3a;border-radius:16px;background:#191919;color:#f5f5f5;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.settings-data-title{display:flex;align-items:center;gap:11px}
.settings-data-title>div{display:grid;gap:2px}
.settings-data-title strong{font-size:17px;color:#fff}
.settings-data-title small{font-size:12px;line-height:1.4;color:#aaa}
.settings-data-icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:11px;background:#f2f2f2;color:#111;font-size:22px;font-weight:900}
.settings-data-card p,.data-update-card p{margin:0;color:#c8c8c8;line-height:1.6;font-size:14px}
.data-version-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 0;border-top:1px solid #343434;border-bottom:1px solid #343434;color:#aaa;font-size:13px}
.data-version-row strong{color:#fff;font-variant-numeric:tabular-nums}
.settings-refresh-btn{width:100%;min-height:48px;border:1px solid #fff!important;border-radius:12px!important;background:#fff!important;color:#111!important;font-size:15px;font-weight:900!important;box-shadow:0 5px 16px rgba(255,255,255,.08)}
.settings-refresh-btn:active{transform:translateY(1px)}
.settings-refresh-btn:disabled{opacity:.7;cursor:wait}
.refresh-data-status{min-height:20px;padding:0 2px;color:#a8d7ff;font-size:12px;font-weight:750;line-height:1.45}
.refresh-data-status:empty{display:none}
.user-settings-card>.modal-actions{margin-top:14px}
.user-settings-card>.modal-actions .primary{min-width:92px;background:#2b2b2b;color:#fff;border:1px solid #444}
.data-update-card{max-width:420px;background:#151515;color:#fff;border-color:#3a3a3a}
.data-update-card h2{color:#fff}
.data-update-note{font-weight:800;color:#fff!important}
.data-update-actions{align-items:stretch}
.data-update-actions button{flex:1;min-height:46px}
.data-update-actions .primary{background:#fff;color:#111}
@media(max-width:420px){
 .modal{padding:12px}
 .user-settings-card{padding:16px}
 .settings-data-card{padding:15px}
}

/* v0.6.29 clean settings UI */
.user-settings-card{
  width:min(460px,100%);
  padding:20px!important;
  background:linear-gradient(180deg,#121418 0%,#0d0f13 100%)!important;
  border:1px solid #2a2f37!important;
  border-radius:22px!important;
  box-shadow:0 24px 70px rgba(0,0,0,.68)!important;
}
.user-settings-card>h2{
  margin:0 0 8px!important;
  font-size:24px!important;
  font-weight:900;
  letter-spacing:-.03em;
  color:#f8fafc!important;
}
.user-settings-subtitle{
  margin:0 0 16px;
  color:#98a2b3;
  font-size:13px;
  line-height:1.55;
}
.user-settings-card .settings-section{
  margin-top:0!important;
  padding-top:0!important;
  border-top:0!important;
}
.user-settings-card .settings-data-card{
  display:grid;
  gap:14px;
  padding:17px!important;
  background:#181c22!important;
  border:1px solid #2a313b!important;
  border-radius:18px!important;
  color:#eef2f7!important;
  box-shadow:none!important;
}
.user-settings-card .settings-data-title{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.user-settings-card .settings-data-title strong{
  display:block;
  font-size:18px!important;
  line-height:1.25;
  color:#f8fafc!important;
}
.user-settings-card .settings-data-title small{
  display:block;
  margin-top:4px;
  font-size:12px!important;
  color:#aab4c3!important;
  line-height:1.45;
}
.user-settings-card .settings-data-icon{
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:12px;
  background:#232a34!important;
  color:#edf2f7!important;
  border:1px solid #313947;
  font-size:18px!important;
  font-weight:900;
}
.user-settings-card .settings-data-card p{
  color:#d8dee7!important;
  font-size:14px!important;
  line-height:1.65!important;
}
.user-settings-card .data-version-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px!important;
  border:1px solid #2b313a!important;
  border-radius:12px;
  background:#11151a!important;
  color:#97a0ad!important;
  font-size:13px!important;
}
.user-settings-card .data-version-row strong{
  color:#f8fafc!important;
  font-size:14px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}
.user-settings-card .settings-refresh-btn{
  width:100%;
  min-height:50px;
  border:1px solid #363f4c!important;
  border-radius:14px!important;
  background:#f3f4f6!important;
  color:#0f1720!important;
  font-size:15px!important;
  font-weight:900!important;
  letter-spacing:-.01em;
  box-shadow:none!important;
}
.user-settings-card .settings-refresh-btn:disabled{
  opacity:.76;
  cursor:wait;
}
.user-settings-card .refresh-data-status{
  min-height:20px;
  padding-left:2px;
  color:#9fd0ff!important;
  font-size:12px;
  font-weight:800;
  line-height:1.45;
}
.user-settings-card>.modal-actions{
  margin-top:14px!important;
}
.user-settings-card>.modal-actions .primary{
  min-width:96px;
  background:#20252d!important;
  color:#f3f4f6!important;
  border:1px solid #363d48!important;
  border-radius:12px!important;
}

.data-update-card{
  background:linear-gradient(180deg,#121418 0%,#0d0f13 100%)!important;
  border:1px solid #2a2f37!important;
  border-radius:22px!important;
  color:#eef2f7!important;
  box-shadow:0 24px 70px rgba(0,0,0,.68)!important;
}
.data-update-card h2{color:#f8fafc!important;margin-bottom:10px}
.data-update-card p{color:#cfd6df!important;line-height:1.6!important}
.data-update-note{color:#f8fafc!important;font-weight:800!important}
.data-update-actions button{
  min-height:48px;
  border-radius:12px!important;
}
.data-update-actions button:not(.primary){
  background:#20252d!important;
  color:#eef2f7!important;
  border:1px solid #353c47;
}
.data-update-actions .primary{
  background:#f3f4f6!important;
  color:#0f1720!important;
}

@media (max-width:420px){
  .user-settings-card{padding:18px!important;border-radius:18px!important}
  .user-settings-card>h2{font-size:22px!important}
  .user-settings-subtitle{font-size:12px}
  .user-settings-card .settings-data-card{padding:15px!important}
}


/* v0.6.30 home site settings entry */
.user-settings-card .settings-section + .settings-section{margin-top:12px!important}
.site-settings-entry{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  min-height:76px;
  padding:16px 17px;
  border:1px solid #2a313b;
  border-radius:16px;
  background:#181c22;
  color:#eef2f7;
  text-align:left;
  box-shadow:none;
}
.site-settings-entry:active{transform:translateY(1px);background:#1d2229}
.site-settings-entry-main{display:grid;gap:5px;min-width:0}
.site-settings-entry-main strong{font-size:17px;line-height:1.25;color:#f8fafc}
.site-settings-entry-main small{font-size:12px;line-height:1.45;color:#aab4c3}
.site-settings-entry-arrow{flex:0 0 auto;color:#cbd3df;font-size:30px;font-weight:300;line-height:1}
#adminModal .modal-card{background:linear-gradient(180deg,#121418 0%,#0d0f13 100%);border-color:#2a2f37;border-radius:22px}
#adminModal #settingsPane>h2:first-child{font-size:24px;letter-spacing:-.03em}

/* v0.6.31 compact home settings */
.user-settings-card>.settings-section:first-child{margin-top:0!important;padding-top:0!important;border-top:0!important}
.site-settings-entry-main strong{font-size:18px}

/* v0.6.32 관리자 설정 내보내기·불러오기 */
.admin-transfer-section{margin-top:20px;padding:16px;border:1px solid #2d333d;border-radius:15px;background:#15191f}
.admin-transfer-section h2{margin:0 0 7px!important;font-size:16px!important;color:#f5f7fa}
.admin-transfer-section p{margin:0 0 13px;color:#aeb7c4;font-size:12px;line-height:1.55}
.admin-transfer-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.admin-transfer-actions button{min-height:44px;border:1px solid #353d49;border-radius:11px;background:#222831;color:#f3f5f7;font-weight:850}
.admin-transfer-actions button:first-child{background:#f1f3f5;color:#111820;border-color:#f1f3f5}
.admin-transfer-status{min-height:18px;margin-top:9px;color:#9fd0ff;font-size:12px;font-weight:750;line-height:1.4}
.admin-transfer-status:empty{display:none}
@media(max-width:380px){.admin-transfer-actions{grid-template-columns:1fr}}


/* v0.6.33 hidden administrator settings access */
.data-version-trigger{
  width:100%;
  font:inherit;
  text-align:left;
  cursor:default;
  -webkit-tap-highlight-color:transparent;
}
.data-version-trigger:focus{outline:none}
.data-version-trigger:active{transform:none}

/* v0.6.34 long-press admin settings entry */
.data-version-trigger{
  position:relative;
  overflow:hidden;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.data-version-trigger::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:#e7edf5;
}
.data-version-trigger.holding::after{
  width:100%;
  transition:width 5s linear;
}
.data-version-trigger.holding{
  border-color:#46515f!important;
  background:#151a20!important;
}


/* v0.6.35 invisible administrator long press */
.data-version-trigger{
  -webkit-tap-highlight-color:transparent!important;
  background:#11151a!important;
  border-color:#2b313a!important;
  transition:none!important;
}
.data-version-trigger::after{display:none!important;content:none!important}
.data-version-trigger.holding,
.data-version-trigger:active,
.data-version-trigger:focus,
.data-version-trigger:focus-visible{
  background:#11151a!important;
  border-color:#2b313a!important;
  box-shadow:none!important;
  outline:none!important;
  transform:none!important;
}

/* v0.6.36 player controls */
.header{padding-right:10px}
.header-more-btn{
  flex:0 0 44px;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:11px;
  background:#181818;
  color:#eee;
  font-size:24px;
  font-weight:900;
  line-height:1;
}
.controls{grid-template-columns:82px 1fr 92px!important}
.next-btn{
  padding:0 8px;
  font-size:14px;
  line-height:1.2;
  white-space:nowrap;
}
.next-btn:disabled{
  opacity:.42;
  cursor:default;
}
.practice-sheet{top:72px;right:10px;bottom:auto;left:auto;width:min(360px,calc(100% - 20px))}


/* v0.7.1 practice screen visual refresh — compact mini player */
:root{
  --control-base:60px;
  --practice-surface:#101114;
  --practice-surface-2:#181a1f;
  --practice-border:#252830;
}
#player .header{
  height:62px;
  padding:8px 10px;
  gap:9px;
  background:rgba(0,0,0,.96);
  border-bottom:1px solid rgba(255,255,255,.07);
}
#player .back,
#player .header-more-btn{
  background:#14161a;
  border:1px solid #22252b;
  border-radius:12px;
}
#player .back{padding:9px 12px;font-size:13px;font-weight:700}
#player #title{font-size:18px;font-weight:700;letter-spacing:-.015em}
#player #speedText{font-size:10px;color:#9699a2;margin-top:2px}
#player .scroll-hint{font-size:10px;color:#5f626a;margin-top:2px}

#player .youtube-practice{
  top:70px;
  left:8px;
  right:8px;
  border-radius:18px;
  border:1px solid #22252b;
  box-shadow:0 12px 34px rgba(0,0,0,.48);
}
#player.youtube-mode #viewport{top:calc(70px + var(--youtube-panel-height) + 10px)}
#player:not(.youtube-mode) #viewport{top:62px}
#player.youtube-mode #lyrics{padding-top:20vh;padding-bottom:46vh}
#player #lyrics{padding-left:24px;padding-right:24px;line-height:1.68}
#player .line{margin-bottom:.10em;transition:opacity 90ms ease-out,filter 90ms ease-out,text-shadow 90ms ease-out}
#player .line.sync-active{opacity:1!important;filter:none!important;text-shadow:0 0 6px rgba(255,255,255,.09)}
#player #lyrics.sync-before-first .line:not(.blank){opacity:.68;filter:none;text-shadow:none}

#player .controls.practice-controls{
  height:var(--control-height);
  grid-template-columns:minmax(0,1fr) minmax(0,1.28fr) minmax(0,1fr)!important;
  justify-content:stretch;
  align-items:center;
  gap:8px;
  padding:7px 14px calc(7px + var(--control-safe));
  background:rgba(7,8,10,.97);
  border-top:1px solid rgba(255,255,255,.06);
  box-shadow:0 -8px 24px rgba(0,0,0,.18);
}
#player .practice-controls .transport-btn{
  width:100%;
  min-width:0;
  height:48px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.055);
  border-radius:15px;
  background:#17181b;
  color:#eceef1;
  font-weight:750;
  line-height:1;
  -webkit-tap-highlight-color:transparent;
  transition:background 90ms ease-out,transform 70ms ease-out,border-color 90ms ease-out;
}
#player .practice-controls .transport-btn:active{
  transform:scale(.975);
  background:#202227;
  border-color:rgba(255,255,255,.09);
}
#player .practice-controls .transport-side{font-size:22px}
#player .practice-controls .transport-play{
  width:100%;
  height:48px;
  min-width:0;
  background:#2a2c31;
  color:#f4f5f7;
  font-size:0;
  font-weight:800;
  border-color:rgba(255,255,255,.08);
  box-shadow:none;
}
#player .practice-controls .transport-play .play-label{
  font-size:22px;
  line-height:1;
  transform:translateX(1px);
}
#player .practice-controls .transport-play:active{background:#34373d;transform:scale(.98)}
#player .practice-controls .transport-play:disabled{opacity:.55}
#player .practice-controls .next-btn:disabled{opacity:.32}
#player .practice-sheet{top:70px;right:10px;bottom:auto}
#player .quick-editor{bottom:calc(var(--control-height) + 8px)}
@media(max-width:380px){
  #player .controls.practice-controls{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr)!important;gap:7px;padding-left:10px;padding-right:10px}
  #player .practice-controls .transport-btn,#player .practice-controls .transport-play{height:46px}
  #player #lyrics{padding-left:20px;padding-right:20px}
}
@media (prefers-reduced-motion:reduce){#player .line,#player .practice-controls .transport-btn{transition:none}}


/* v0.7.3 bottom transport — restore legacy bar proportions; keep icon side controls */
:root{--control-base:72px}
#player .controls.practice-controls{
  height:var(--control-height);
  grid-template-columns:82px minmax(0,1fr) 92px!important;
  gap:8px;
  padding:8px 10px calc(8px + var(--control-safe));
  background:#000;
  border-top:1px solid #1d1d1d;
  box-shadow:none;
}
#player .practice-controls .transport-btn{
  width:100%;
  height:56px;
  border:0;
  border-radius:11px;
  background:#181818;
  color:#eee;
  font-weight:800;
  box-shadow:none;
}
#player .practice-controls .transport-side{
  font-size:24px;
}
#player .practice-controls .transport-play{
  width:100%;
  height:56px;
  background:#eee;
  color:#111;
  font-size:16px;
  border:0;
  border-radius:11px;
  font-weight:800;
}
#player .practice-controls .transport-play .play-label{
  font-size:16px;
  line-height:1;
  transform:none;
}
#player .practice-controls .transport-btn:active{
  transform:none;
  filter:brightness(1.08);
}
#player .practice-controls .transport-play:active{
  background:#ddd;
  transform:none;
}
@media(max-width:380px){
  #player .controls.practice-controls{
    grid-template-columns:82px minmax(0,1fr) 92px!important;
    gap:8px;
    padding-left:10px;
    padding-right:10px;
  }
  #player .practice-controls .transport-btn,
  #player .practice-controls .transport-play{height:56px}
}

/* v0.7.5 transport optical-balance test
   Keep legacy bar/button geometry unchanged.
   Only tune SVG icon rendering, center label spacing and visual scale. */
#player .practice-controls .transport-btn{
  display:flex;
  align-items:center;
  justify-content:center;
}
#player .practice-controls .transport-icon{
  width:24px;
  height:24px;
  display:block;
  flex:0 0 24px;
  transform:translateY(-1px);
}
#player .practice-controls .transport-icon-stroke{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#player .practice-controls .transport-icon-fill{
  fill:currentColor;
  stroke:none;
}
#player .practice-controls .transport-play .play-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font:inherit;
  font-size:18px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  transform:none;
}
#player .practice-controls .transport-play .play-label .transport-icon{
  width:26px;
  height:26px;
  flex-basis:26px;
}
#player .practice-controls .transport-play .play-text{
  display:inline-block;
}
#player .practice-controls .transport-side{
  font-size:inherit;
}


/* v0.7.6 center-control optical alignment test
   Keep button geometry and type scale from v0.7.5.
   Shift the icon+label group slightly left, and optically correct only the play triangle. */
#player .practice-controls .transport-play .play-label{
  transform:translateX(-3px);
}
#player .practice-controls .transport-play .play-label .transport-icon-fill path{
  transform:translateX(1px) scale(1.04);
  transform-box:fill-box;
  transform-origin:center;
}


/* v0.7.7 stable transport test
   - move center content further left for optical centering
   - keep a persistent icon/text DOM so play/pause transitions do not flash
   - keep center button opacity stable while YouTube is preparing/buffering */
#player .practice-controls .transport-play .play-label{
  transform:translateX(-6px);
  min-height:26px;
}
#player .practice-controls .transport-play .play-icon-play,
#player .practice-controls .transport-play .play-icon-pause{
  flex:0 0 26px;
}
#player .practice-controls .transport-play .play-icon-play path{
  transform:translateX(1px) scale(1.04);
  transform-box:fill-box;
  transform-origin:center;
}
/* v0.7.8 pause-icon state fix: switch icons only from data-state. */
#player .practice-controls .transport-play .play-label[data-state="play"] .play-icon-play{display:block!important}
#player .practice-controls .transport-play .play-label[data-state="play"] .play-icon-pause{display:none!important}
#player .practice-controls .transport-play .play-label[data-state="pause"] .play-icon-play{display:none!important}
#player .practice-controls .transport-play .play-label[data-state="pause"] .play-icon-pause{display:block!important}
#player .practice-controls .transport-play:disabled{
  opacity:1!important;
}
#player .practice-controls .transport-play[aria-busy="true"]{
  opacity:1!important;
}


/* v0.8.1 practice header renewal */
#player{--practice-header-height:62px}
#player .header{
  height:auto;
  min-height:62px;
  align-items:center;
}
#player .headtext{
  display:flex;
  align-items:center;
  min-height:36px;
}
#player #title{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  white-space:normal;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.18;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
#player #speedText,
#player .scroll-hint{display:none!important}
#player .youtube-practice{
  top:calc(var(--practice-header-height) + 8px);
}
#player.youtube-mode #viewport{
  top:calc(var(--practice-header-height) + 8px + var(--youtube-panel-height) + 10px);
}
#player:not(.youtube-mode) #viewport{
  top:var(--practice-header-height);
}
#player .practice-sheet{
  top:calc(var(--practice-header-height) + 8px);
}


/* v0.8.2 practice header balance test
   - true screen-centered song title
   - equal left/right header buttons
   - administrator-adjustable practice title size */
#player{--practice-title-size:18px}
#player .header{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 48px;
  column-gap:10px;
  padding-left:10px;
  padding-right:10px;
}
#player .back,
#player .header-more-btn{
  width:48px;
  height:48px;
  min-width:48px;
  min-height:48px;
  padding:0;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  justify-self:center;
}
#player .back{font-size:13px;font-weight:700;white-space:nowrap}
#player .header-more-btn{font-size:24px;font-weight:900;line-height:1}
#player .headtext{
  width:100%;
  min-width:0;
  justify-content:center;
  text-align:center;
}
#player #title{
  width:100%;
  font-size:var(--practice-title-size);
  text-align:center;
  margin:0 auto;
}


/* v0.8.3 song manager */
.admin-settings-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 18px;padding:4px;background:#0b0c0f;border:1px solid #282c33;border-radius:14px}
.admin-settings-tab{min-height:42px;border:0;border-radius:10px;background:transparent;color:#8e96a3;font-weight:850}
.admin-settings-tab.on{background:#f2f3f5;color:#111}
#adminSongsPane select{width:100%;min-height:48px;padding:0 13px;border:1px solid #333840;border-radius:12px;background:#0a0b0d;color:#f4f4f5;font:inherit}
.song-manager-thumbnail-field{display:grid;gap:10px}
.song-thumb-preview{height:150px;border:1px dashed #3a4049;border-radius:14px;background:#090a0c;display:grid;place-items:center;overflow:hidden;color:#767f8c;font-size:13px}
.song-thumb-preview img{width:100%;height:100%;object-fit:cover;display:block}
.song-thumb-file-btn{min-height:44px;display:grid;place-items:center;border:1px solid #363c45;border-radius:12px;background:#191c21;color:#f2f4f7;font-weight:850;cursor:pointer}
.song-manager-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.song-manager-actions button{min-height:46px;border:1px solid #343941;border-radius:12px;background:#1a1d22;font-weight:850}
.song-manager-actions .primary{background:#f2f3f5;color:#111;border-color:#f2f3f5}
.song-row.has-thumb .song{display:flex;align-items:center;gap:12px;padding:9px 12px}
.song-thumb{width:44px;height:44px;flex:0 0 44px;border-radius:10px;object-fit:cover;background:#202020}
.song-title-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* v0.8.4 song manager add/delete */
.song-manager-top-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.song-manager-select-field{margin:0}
#songManagerAdd{min-height:48px;padding:0 14px;border:1px solid #363c45;border-radius:12px;background:#191c21;color:#f4f5f7;font-weight:850;white-space:nowrap}
.song-manager-mode-note{margin:-2px 0 14px;color:#8f98a5;font-size:12px}
.song-manager-delete{width:100%;min-height:44px;margin-top:10px;border:1px solid #6b3036;border-radius:12px;background:#241315;color:#ff9ba4;font-weight:850}
.song-manager-delete:active{transform:scale(.99)}
@media (max-width:420px){.song-manager-top-actions{grid-template-columns:1fr}.song-manager-top-actions #songManagerAdd{width:100%}}


/* v0.8.5 album cover auto + multiline song title */
#songManagerTitle{width:100%;min-height:74px;resize:vertical;line-height:1.45}
.song-thumb-auto-btn,.song-thumb-bulk-btn{min-height:44px;border:1px solid #363c45;border-radius:12px;background:#191c21;color:#f2f4f7;font-weight:850}
.song-thumb-bulk-btn{margin-top:4px;background:#101820;border-color:#29425b;color:#b9d9ff}
.song-thumb-auto-btn:disabled,.song-thumb-bulk-btn:disabled{opacity:.55;cursor:wait}
#player #title{white-space:pre-line}


/* v0.8.5b admin header + multiline song title fix */
#adminModal #settingsPane{position:relative}
.admin-settings-head{position:sticky;top:-18px;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-18px -18px 14px;padding:16px 18px 12px;background:linear-gradient(180deg,#121418 76%,rgba(18,20,24,.94) 100%);border-bottom:1px solid #262b33}
.admin-settings-head h2{margin:0!important;font-size:24px!important;letter-spacing:-.03em}
.admin-settings-head-actions{display:flex;gap:8px;flex:0 0 auto}
.admin-settings-head-actions button{min-width:58px;height:40px;padding:0 13px;border-radius:11px;font-weight:850;border:1px solid #373d47}
.admin-top-save{background:#f2f3f5!important;color:#111!important;border-color:#f2f3f5!important}
.admin-top-close{background:#1b1f25!important;color:#f1f3f5!important}
.admin-bottom-secondary{justify-content:flex-start}
#songManagerTitle{display:block;width:100%;min-height:88px!important;resize:vertical;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45;font-family:inherit;font-size:16px}
.song-manager-create-primary{width:100%;min-height:52px;margin:2px 0 8px;border:1px solid #e6e8eb;border-radius:14px;background:#f2f3f5;color:#111;font-size:16px;font-weight:900;letter-spacing:-.2px}
.song-manager-create-primary:active{transform:scale(.99);background:#e5e7ea}
.song-manager-top-actions{display:block;margin-bottom:10px}.song-manager-select-field{width:100%}#songManagerSelect{width:100%}
@media(max-width:380px){.admin-settings-head{gap:8px;padding-left:14px;padding-right:14px}.admin-settings-head h2{font-size:21px!important}.admin-settings-head-actions button{min-width:52px;padding:0 10px}}


/* v0.8.5b2 thumbnail restore visibility */
.song-manager-thumbnail-field{margin-top:18px;padding:16px;border:1px solid #2e343d;border-radius:16px;background:#0d0f12}
.song-manager-section-title{display:block;font-size:15px;font-weight:900;color:#f3f4f6;margin-bottom:2px}
.song-manager-thumbnail-field .song-thumb-preview{height:168px;background:#07080a}
.song-manager-thumbnail-field .song-thumb-auto-btn{background:#f2f3f5;color:#111;border-color:#f2f3f5}
.song-manager-thumbnail-field .song-thumb-file-btn,.song-manager-thumbnail-field #songThumbUrl,.song-manager-thumbnail-field .song-thumb-bulk-btn{width:100%}


/* v0.8.6 album-cover-first song list */
.song-row{display:grid;grid-template-columns:minmax(0,1fr) 52px;gap:8px;align-items:stretch;margin:7px 0}
.song-row .song{min-height:64px;border-radius:14px;padding:8px 12px}
.song-row.has-thumb .song{display:flex;align-items:center;gap:12px;padding:8px 10px}
.song-thumb{width:52px;height:52px;flex:0 0 52px;border-radius:12px;object-fit:cover;background:#202124;box-shadow:0 0 0 1px rgba(255,255,255,.07)}
.song-copy{display:flex;min-width:0;flex:1;flex-direction:column;justify-content:center;align-items:flex-start;gap:3px;text-align:left}
.song-title-text{display:-webkit-box;min-width:0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;text-overflow:ellipsis;font-size:16.5px;line-height:1.22;font-weight:820}
.song-album-text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7f8792;font-size:11.5px;line-height:1.2;font-weight:650}
.song-row .fav-btn{width:52px;min-width:52px;border-radius:14px}
.song-manager-album-note{margin:0 0 2px;color:#8d96a3;font-size:12px;line-height:1.35}
@media(max-width:380px){.song-row{grid-template-columns:minmax(0,1fr) 48px}.song-thumb{width:48px;height:48px;flex-basis:48px}.song-row .fav-btn{width:48px;min-width:48px}.song-title-text{font-size:16px}}

/* v0.8.6b: administrator cover search result picker */
.song-cover-results{display:grid;gap:10px;margin:10px 0 4px;max-height:360px;overflow:auto;padding-right:2px}
.song-cover-result{width:100%;display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;align-items:center;text-align:left;background:#17171a;border:1px solid #303036;border-radius:14px;padding:8px;color:#fff}
.song-cover-result img{width:58px;height:58px;object-fit:cover;border-radius:10px;background:#2a2a2f}
.song-cover-result-copy{min-width:0;display:grid;gap:2px}
.song-cover-result-copy strong,.song-cover-result-copy>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song-cover-result-copy>span{font-size:12px;color:#aaa}
.song-cover-type{width:max-content;max-width:100%;padding:2px 7px;border-radius:999px;background:#29292e;color:#ddd!important;font-size:11px!important;margin-top:3px}
.song-cover-result.recommended{border-color:#62626a}
.song-cover-result.selected{outline:2px solid #fff;outline-offset:-2px}


/* v0.8.6c: compact contextual admin actions + verified cover result */
.admin-settings-head-actions{display:flex;gap:6px;flex-wrap:nowrap;align-items:center}
.admin-settings-head-actions button{min-width:48px;height:38px;padding:0 10px;font-size:13px}
.admin-top-reset{background:#1b1f25!important;color:#f1f3f5!important;border-color:#373d47!important}
.admin-top-delete{background:#2a1417!important;color:#ff9ba4!important;border-color:#6b3036!important}
.song-cover-artist{color:#f0f2f4!important;font-weight:800!important}
@media(max-width:390px){
  .admin-settings-head{align-items:flex-start}
  .admin-settings-head-actions{gap:5px}
  .admin-settings-head-actions button{min-width:43px;height:36px;padding:0 7px;font-size:12px}
}

/* v0.8.6e admin top actions */
.admin-settings-head{align-items:flex-start}
.admin-settings-head-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:70%}
.admin-settings-head-actions button{min-height:36px;padding:8px 10px;border-radius:10px;font-weight:800}
.admin-top-delete{background:#3a1518!important;color:#ff9aa1!important;border:1px solid #6a2a30!important}
.admin-bottom-secondary{display:none!important}
.song-manager-delete{display:none!important}


/* v0.8.6f 사용자 썸네일 선택 */
.user-settings-card>h2{margin-bottom:4px!important}
.user-settings-subtitle{margin:0 0 16px!important;color:#9a9a9a!important;font-size:12px!important;line-height:1.45}
.thumbnail-settings-section{margin-top:0!important;padding-top:0!important;border-top:0!important}
.thumbnail-setting-title{font-size:14px;font-weight:850;color:#f2f2f2;margin-bottom:9px}
.thumbnail-mode-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.thumbnail-mode-option{display:flex;align-items:center;gap:9px;min-height:58px;padding:11px 12px;border:1px solid #343434;border-radius:13px;background:#171717;cursor:pointer}
.thumbnail-mode-option:has(input:checked){border-color:#ededed;background:#222}
.thumbnail-mode-option input{width:18px;height:18px;accent-color:#fff;flex:0 0 auto}
.thumbnail-mode-option span{display:grid;gap:2px;min-width:0}
.thumbnail-mode-option strong{font-size:13px;color:#f5f5f5}
.thumbnail-mode-option small{font-size:10px;color:#898989;line-height:1.25}
@media(max-width:380px){.thumbnail-mode-options{grid-template-columns:1fr}.thumbnail-mode-option{min-height:52px}}
/* v0.8.6f1 thumbnail mode functional UI */
.user-settings-title{margin:0 0 4px;font-size:20px;line-height:1.25}
.user-settings-note{margin:0 0 16px;color:#9a9a9a;font-size:12px;line-height:1.45}
.thumbnail-settings-section{margin:0 0 16px!important;padding:0!important;border:0!important}
.compact-settings-data-card .settings-data-title,.compact-settings-data-card>p{display:none!important}

/* v0.8.7 home list renewal */
.list-head{align-items:center;gap:14px}
.head-actions{gap:5px}
.settings-btn,.share-btn{background:transparent!important;border:0!important;border-radius:9px!important;padding:7px 8px!important;font-size:13px!important;font-weight:750!important;color:#e8e8e8!important}
.search-wrap{margin:15px 0 8px}
.song-search{min-height:48px;border-radius:14px;padding:12px 15px;background:#0d0d0e}
.song-list-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:17px 2px 7px}
.song-list-heading .section-title{margin:0;color:#e7e7e7;font-size:14px}
.order-edit-btn{border:0;background:transparent;color:#8f8f94;padding:6px 2px;font-size:12px;font-weight:800}
.order-edit-btn.active{color:#f0f0f0}
.song-row{display:flex!important;align-items:stretch!important;gap:0!important;margin:8px 0!important;position:relative}
.song-row .song{width:100%;min-height:62px!important;margin:0!important;border-radius:15px!important;padding:7px 14px!important;background:#111112!important}
.song-row.has-thumb .song{gap:16px!important;padding:7px 12px!important}
.song-thumb{width:48px!important;height:48px!important;flex:0 0 48px!important;border-radius:11px!important;box-shadow:0 0 0 1px rgba(255,255,255,.06)!important}
body:not(.thumbnail-video-mode) .song-thumb{aspect-ratio:1/1}
.song-title-text{font-size:16px!important;font-weight:780!important;line-height:1.25}
.fav-btn{display:none!important}
.order-handle{width:48px;min-width:48px;margin-left:6px;border:0;border-radius:14px;background:#171719;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;touch-action:none}
.order-handle span{display:block;width:18px;height:2px;border-radius:2px;background:#8b8b90}
.song-order-editing .song-row .song{opacity:.96}
.reordering .song-row{user-select:none}
.reordering .order-handle{cursor:grabbing}
@media(max-width:380px){.song-row .song{min-height:58px!important}.song-thumb{width:44px!important;height:44px!important;flex-basis:44px!important}.song-row.has-thumb .song{gap:14px!important}.order-handle{width:44px;min-width:44px}}
body.thumbnail-video-mode .song-thumb{width:80px!important;height:45px!important;flex:0 0 80px!important;border-radius:9px!important;object-fit:cover!important}
@media(max-width:380px){body.thumbnail-video-mode .song-thumb{width:76px!important;height:43px!important;flex-basis:76px!important}}

/* v0.8.8 order/sort refinement */
.song-sort-controls{display:flex;align-items:center;gap:6px;margin:0 2px 9px;min-height:32px;overflow-x:auto;scrollbar-width:none}
.song-sort-controls::-webkit-scrollbar{display:none}.song-sort-label{font-size:11px;color:#77777d;font-weight:800;flex:0 0 auto}
.song-sort-btn{border:1px solid #2a2a2e;background:#121214;color:#aaaab0;border-radius:10px;padding:7px 10px;font-size:11px;font-weight:800;white-space:nowrap;flex:0 0 auto}
.song-sort-btn:disabled{opacity:.45}.song-sort-status{font-size:10px;color:#77777d;white-space:nowrap}
.song-row.drag-active .song,.song-row.drag-active .order-handle{background:#1c1c1f;border-color:#4a4a50!important;box-shadow:0 7px 18px rgba(0,0,0,.28)}
.song-row.drag-active{outline:1px solid #49494f;outline-offset:-1px;border-radius:15px}
.reordering .song-row{user-select:none}.reordering .song-row:not(.drag-active){transition:transform .12s ease}
.reordering .song-row.drag-active{transition:none!important}

/* v0.8.9 simplified sorting + visible drag selection */
.song-sort-controls{gap:8px;margin:1px 2px 10px;overflow:visible;min-height:38px}
.song-sort-label,.song-sort-status{display:none!important}
.song-sort-btn{min-height:36px;padding:0 14px;border:1px solid #303034;background:#151517;color:#b8b8bd;border-radius:12px;font-size:12px;font-weight:800}
.song-sort-btn.active{background:#ededee;color:#111;border-color:#ededee}
.song-row.drag-active{position:relative;z-index:8;outline:none!important}
.song-row.drag-active .song{background:#202023!important;box-shadow:inset 0 0 0 1px #696970,0 6px 16px rgba(0,0,0,.28)!important}
.song-row.drag-active .order-handle{background:#202023!important;box-shadow:inset 0 0 0 1px #696970,0 6px 16px rgba(0,0,0,.28)!important}
.song-row.drag-active .order-handle span{background:#e7e7e9!important}
.song-row.drag-active .song-title-text{color:#fff!important}
.reordering .song-row.drag-active{transition:none!important}


/* v0.8.10 order editor cleanup */
.song-sort-controls[hidden]{display:none!important}
.song-sort-controls{display:flex;align-items:center;gap:8px;margin:2px 2px 10px;min-height:38px}
.song-sort-btn{min-height:36px;padding:0 14px;border:1px solid #303034;background:#151517;color:#c3c3c8;border-radius:12px;font-size:12px;font-weight:800}
.song-sort-btn.active{background:#ededee;color:#111;border-color:#ededee}
.song-order-reset-btn{margin-left:auto;color:#a9a9ae;background:transparent;border-color:#2a2a2e}
.song-row.drag-active{position:relative;z-index:9}
.song-row.drag-active .song,.song-row.drag-active .order-handle{background:#202023!important;box-shadow:inset 0 0 0 1px #66666d,0 5px 14px rgba(0,0,0,.26)!important}
.song-row.drag-active .order-handle span{background:#f0f0f2!important}
.reordering .song-row.drag-active{transition:none!important}
.haptic-settings-section{margin:14px 0 16px}
.haptic-setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:58px;padding:11px 12px;border:1px solid #343434;border-radius:13px;background:#171717}
.haptic-setting-row span{display:flex;flex-direction:column;gap:3px;min-width:0}
.haptic-setting-row strong{font-size:14px}
.haptic-setting-row small{font-size:11px;color:#8d8d92;line-height:1.35}
.haptic-setting-row input{width:20px;height:20px;accent-color:#ededee}
/* v0.8.11 data update + reorder responsiveness */
.last-data-update{font-size:12px;color:#8e8e93;margin:2px 2px 10px;line-height:1.4}
.data-refresh-result-card{position:relative;max-width:420px}
.modal-x{position:absolute;right:14px;top:12px;border:0;background:transparent;color:#aaa;font-size:25px;line-height:1;padding:4px 7px}
.data-refresh-lead{color:#ddd;font-weight:750;margin:6px 0 12px}
.data-refresh-changes{max-height:42vh;overflow:auto;border-top:1px solid #29292c;border-bottom:1px solid #29292c}
.data-refresh-change{display:flex;flex-direction:column;gap:3px;padding:11px 2px;border-bottom:1px solid #202023}
.data-refresh-change:last-child{border-bottom:0}.data-refresh-change strong{font-size:14px;color:#f4f4f5}.data-refresh-change span{font-size:12px;color:#aaa}
.reordering .song-row.drag-active{transition:none!important;will-change:transform;touch-action:none;z-index:20}
.reordering .song-row:not(.drag-active){transition:transform .06s linear!important}


/* v0.8.12 reorder boundary + first-position fix */
.reordering .song-row.drag-active{transition:none!important;will-change:transform;touch-action:none;z-index:20}

/* v0.8.17 user ad visibility toggle */
.user-ad-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0 12px;padding:15px 16px;border:1px solid #303036;border-radius:14px;background:#18181c}.user-ad-toggle-row>span{display:flex;flex-direction:column;gap:4px}.user-ad-toggle-row strong{font-size:15px;color:#f2f2f2}.user-ad-toggle-row small{font-size:11px;color:#85858e}.user-switch{position:relative;display:inline-flex;flex:0 0 auto}.user-switch input{position:absolute;opacity:0;pointer-events:none}.user-switch-ui{display:block;width:46px;height:27px;border-radius:999px;background:#3a3a40;position:relative;transition:.18s}.user-switch-ui:after{content:'';position:absolute;width:21px;height:21px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.18s}.user-switch input:checked+.user-switch-ui{background:#f2f2f2}.user-switch input:checked+.user-switch-ui:after{transform:translateX(19px);background:#111}

/* v0.8.18: compact carousel indicator at bottom-right */


/* v0.8.19 ONDOOR light-cool home renewal — home only */
#list{--home-bg:#f2f7fb;--home-card:#fff;--home-navy:#071a3d;--home-blue:#238cf3;--home-muted:#73829a;--home-line:#e2eaf3;background:var(--home-bg);color:var(--home-navy);padding:22px 18px 34px}
#list .list-head{align-items:center;margin:2px 2px 0}
#list #appTitle{margin:0;font-size:clamp(28px,7.1vw,42px)!important;line-height:1.05;font-weight:900;letter-spacing:-1.2px;color:var(--home-navy)}
#list .head-actions{gap:5px}
#list .settings-btn,#list .share-btn{color:var(--home-navy)!important;background:transparent!important;padding:7px 5px!important;font-size:13px!important}
#list .desc{margin:10px 2px 18px;color:#46556d;font-size:13.5px;line-height:1.55}
#list .search-wrap{position:relative;margin:0 0 13px}
#list .search-wrap:before{content:'⌕';position:absolute;left:17px;top:50%;transform:translateY(-52%) rotate(-15deg);z-index:1;color:var(--home-navy);font-size:30px;font-weight:400;pointer-events:none}
#list .song-search{min-height:58px;border:1px solid var(--home-line);border-radius:19px;background:#fff;color:var(--home-navy);padding:13px 18px 13px 54px;font-size:15px;box-shadow:0 5px 16px rgba(35,73,112,.06)}
#list .song-search::placeholder{color:#9aa7ba}
#list .promo-carousel{margin:0 0 14px;border:1px solid #dce7f2;border-radius:20px;background:#eaf3fb;box-shadow:0 7px 18px rgba(35,73,112,.08)}
#list .promo-main{background:#eaf3fb}
#list .home-tabs{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;min-height:60px;margin:0 0 14px;border:1px solid var(--home-line);border-radius:19px;background:#fff;box-shadow:0 5px 16px rgba(35,73,112,.06);overflow:hidden}
#list .home-tab{position:relative;min-width:0;height:60px;border:0;background:transparent;color:var(--home-navy);font-size:14px;font-weight:820;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 8px}
#list .home-tab+.home-tab:before{content:'';position:absolute;left:0;top:16px;bottom:16px;width:1px;background:#e3eaf2}
#list .home-tab.active{color:var(--home-blue)}
#list .home-tab.active:after{content:'';position:absolute;left:20%;right:20%;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--home-blue)}
#list .home-tab-icon{font-size:23px;line-height:1;font-weight:500}
#list .song-sort-controls{margin:-4px 2px 10px}
#list .song-sort-btn{border-color:#dce6ef;background:#fff;color:#6e7d91}
#list .song-sort-btn.active{background:var(--home-blue);border-color:var(--home-blue);color:#fff}
#list .song-order-reset-btn{background:transparent;color:#7e8b9d}
#list .song-row{gap:8px!important;margin:8px 0!important}
#list .song-row .song{min-height:72px!important;border:1px solid #e5ecf3!important;border-radius:17px!important;background:#fff!important;color:var(--home-navy)!important;padding:8px 14px!important;box-shadow:0 4px 13px rgba(35,73,112,.055)}
#list .song-row.has-thumb .song{gap:15px!important;padding:8px 10px!important}
#list .song-thumb{width:100px!important;height:56px!important;flex:0 0 100px!important;aspect-ratio:auto!important;border-radius:10px!important;object-fit:cover!important;background:#e9eff5!important;box-shadow:none!important}
#list .song-title-text{color:var(--home-navy)!important;font-size:16.5px!important;font-weight:820!important}
#list .fav-btn{display:flex!important;width:50px;min-width:50px;margin:0!important;border:0!important;border-radius:17px!important;background:#fff!important;color:var(--home-blue)!important;align-items:center;justify-content:center;font-size:29px;line-height:1;box-shadow:0 4px 13px rgba(35,73,112,.055)}
#list .fav-btn.on{color:var(--home-blue)!important}
#list .order-handle{width:50px;min-width:50px;margin-left:0;border:1px solid #e5ecf3;border-radius:17px;background:#fff;box-shadow:0 4px 13px rgba(35,73,112,.055)}
#list .order-handle span{background:#9eabba}
#list.song-order-editing .song-row .song,#list .song-order-editing .song-row .song{opacity:1}
#list .song-row.drag-active .song,#list .song-row.drag-active .order-handle{background:#f7fbff!important;box-shadow:inset 0 0 0 1px #9bc9f7,0 6px 16px rgba(35,73,112,.12)!important}
#list .empty-note{color:#8593a6;padding:18px 6px;text-align:center}
#list .legend{color:#8390a2;border-top:1px solid #e0e8f0;padding-top:13px;margin-top:10px}
#list .ondoor-footer{display:flex;align-items:center;gap:13px;margin:25px 0 8px;color:#8fa2ba}
#list .ondoor-rule{height:1px;background:#cbd9e7;flex:1}
#list .ondoor-wordmark{display:flex;align-items:center;gap:3px;opacity:.9}
#list .ondoor-text{font-size:16px;font-weight:900;letter-spacing:-.5px}
#list .ondoor-o{position:relative;width:22px;height:22px;border-radius:50%;background:#8fa2ba;display:block;overflow:hidden}
#list .ondoor-house{position:absolute;left:5px;right:5px;bottom:3px;height:11px;background:var(--home-bg);display:block}
#list .ondoor-house:before{content:'';position:absolute;left:0;top:-5px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--home-bg)}
#list .ondoor-house i{position:absolute;left:4px;bottom:0;width:4px;height:7px;border-radius:3px 3px 0 0;background:#8fa2ba}
@media(max-width:430px){#list{padding:18px 14px 30px}#list #appTitle{font-size:28px!important;letter-spacing:-.8px}#list .desc{font-size:12.5px}.head-actions{gap:1px}#list .settings-btn,#list .share-btn{font-size:12px!important;padding:6px 3px!important}#list .song-thumb{width:88px!important;height:50px!important;flex-basis:88px!important}#list .song-row .song{min-height:66px!important}#list .fav-btn,#list .order-handle{width:46px;min-width:46px}#list .home-tab{font-size:13px;gap:5px}.home-tab-icon{font-size:20px!important}}

/* v0.8.20 home UI fidelity fix — match approved mobile mockup */
#list .list-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start!important;
  gap:8px!important;
  margin:1px 1px 0!important;
}
#list .home-title-wrap{min-width:0;padding-top:5px}
#list #appTitle{
  display:flex!important;
  align-items:center;
  gap:7px;
  min-width:0;
  margin:0!important;
  font-size:clamp(23px,6.45vw,36px)!important;
  line-height:1!important;
  letter-spacing:-1.25px!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
#list .home-title-text{display:block;min-width:0;white-space:nowrap}
#list .home-title-heart{
  display:block;
  flex:0 0 auto;
  color:var(--home-blue);
  font-size:.94em;
  line-height:.92;
  transform:translateY(1px);
}
#list .head-actions{
  display:flex!important;
  align-items:flex-start!important;
  gap:3px!important;
  flex:0 0 auto;
}
#list .settings-btn,#list .share-btn{
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  width:47px;
  min-width:47px;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--home-navy)!important;
  font-size:11px!important;
  line-height:1.05;
  font-weight:760!important;
}
#list .head-action-icon{
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid #e7edf4;
  box-shadow:0 4px 12px rgba(35,73,112,.075);
}
#list .head-action-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#list .head-action-label{display:block;white-space:nowrap}
#list .desc{margin:7px 2px 14px!important}

/* slimmer search */
#list .search-wrap{margin:0 0 11px!important}
#list .song-search{
  min-height:48px!important;
  height:48px;
  border-radius:16px!important;
  padding:10px 16px 10px 47px!important;
  font-size:14px!important;
  box-shadow:0 4px 12px rgba(35,73,112,.05)!important;
}
#list .search-wrap:before{
  content:''!important;
  position:absolute!important;
  left:17px!important;
  top:15px!important;
  width:13px!important;
  height:13px!important;
  border:2.2px solid var(--home-navy)!important;
  border-radius:50%!important;
  transform:none!important;
  font-size:0!important;
  background:transparent!important;
  box-sizing:border-box;
}
#list .search-wrap:after{
  content:'';
  position:absolute;
  left:28px;
  top:27px;
  width:8px;
  height:2.2px;
  border-radius:2px;
  background:var(--home-navy);
  transform:rotate(45deg);
  transform-origin:left center;
  pointer-events:none;
}

/* slimmer home mode tabs */
#list .home-tabs{
  min-height:48px!important;
  height:48px;
  margin:0 0 11px!important;
  border-radius:16px!important;
  box-shadow:0 4px 12px rgba(35,73,112,.05)!important;
}
#list .home-tab{
  height:48px!important;
  min-height:48px!important;
  gap:6px!important;
  padding:0 6px!important;
  font-size:13px!important;
}
#list .home-tab+.home-tab:before{top:12px!important;bottom:12px!important}
#list .home-tab.active:after{height:3px;left:22%;right:22%}
#list .home-tab-icon{font-size:20px!important}

/* one unified song card: title/thumbnail + favorite/order control */
#list .song-row{
  display:flex!important;
  align-items:stretch!important;
  gap:0!important;
  min-height:70px;
  margin:7px 0!important;
  overflow:hidden;
  border:1px solid #e4ebf2;
  border-radius:16px;
  background:#fff;
  box-shadow:0 4px 12px rgba(35,73,112,.05);
}
#list .song-row .song{
  flex:1 1 auto;
  width:auto!important;
  min-width:0;
  min-height:68px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:5px 10px!important;
}
#list .song-row.has-thumb .song{gap:14px!important;padding:5px 10px!important}
#list .fav-btn,
#list .order-handle{
  flex:0 0 52px;
  width:52px!important;
  min-width:52px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--home-blue)!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  padding:0!important;
}
#list .fav-btn:active{background:#f5faff!important}
#list .fav-star-svg{width:27px;height:27px;display:block;overflow:visible}
#list .fav-btn.on .fav-star-svg{filter:none}
#list .order-handle{flex-direction:column;gap:4px;touch-action:none}
#list .order-handle span{width:18px;height:2px;background:#9eabba}
#list .song-title-text{font-size:16px!important;line-height:1.22!important;font-weight:820!important}

/* thumbnail modes: album covers stay square, video thumbnails stay 16:9 */
body:not(.thumbnail-video-mode) #list .song-thumb{
  width:60px!important;
  height:60px!important;
  flex:0 0 60px!important;
  aspect-ratio:1/1!important;
  border-radius:10px!important;
  object-fit:cover!important;
}
body.thumbnail-video-mode #list .song-thumb{
  width:100px!important;
  height:56px!important;
  flex:0 0 100px!important;
  aspect-ratio:16/9!important;
  border-radius:10px!important;
  object-fit:cover!important;
}
#list .song-row.drag-active{border-color:#9bc9f7;box-shadow:0 6px 16px rgba(35,73,112,.12)!important}
#list .song-row.drag-active .song,#list .song-row.drag-active .order-handle{background:#f7fbff!important;box-shadow:none!important}

/* footer stays readable but secondary */
#list .ondoor-footer{margin-top:23px!important;color:#8398b3!important}
#list .ondoor-wordmark{opacity:.72!important;gap:4px!important}
#list .ondoor-o{width:21px!important;height:21px!important;background:#8398b3!important}
#list .ondoor-text{font-size:15px!important;color:#8398b3!important}
#list .ondoor-rule{background:#d4e0eb!important}
#list .ondoor-house i{background:#8398b3!important}

@media(max-width:430px){
  #list .list-head{gap:5px!important}
  #list #appTitle{font-size:clamp(22px,6.35vw,27px)!important;gap:5px!important;letter-spacing:-1.05px!important}
  #list .settings-btn,#list .share-btn{width:43px;min-width:43px;font-size:10px!important}
  #list .head-action-icon{width:37px;height:37px}
  #list .head-action-icon svg{width:20px;height:20px}
  #list .desc{margin-top:8px!important;font-size:12.5px!important}
  #list .song-search{height:46px;min-height:46px!important}
  #list .search-wrap:before{top:14px!important}
  #list .search-wrap:after{top:26px}
  #list .home-tabs,#list .home-tab{height:46px!important;min-height:46px!important}
  #list .home-tab{font-size:12.5px!important;gap:4px!important}
  #list .home-tab-icon{font-size:18px!important}
  #list .song-row{min-height:66px}
  #list .song-row .song{min-height:64px!important}
  body:not(.thumbnail-video-mode) #list .song-thumb{width:56px!important;height:56px!important;flex-basis:56px!important}
  body.thumbnail-video-mode #list .song-thumb{width:92px!important;height:52px!important;flex-basis:92px!important}
  #list .fav-btn,#list .order-handle{width:48px!important;min-width:48px!important;flex-basis:48px}
  #list .fav-star-svg{width:26px;height:26px}
}

@media(max-width:360px){
  #list #appTitle{font-size:22px!important;letter-spacing:-1.2px!important}
  #list .settings-btn,#list .share-btn{width:40px;min-width:40px}
  #list .head-action-icon{width:35px;height:35px}
  #list .home-tab{font-size:12px!important}
}

/* v0.8.21 compact home hierarchy — banner first, icon-only header actions */
#list .list-head{
  align-items:center!important;
  min-height:44px;
  margin:0 1px!important;
}
#list .home-title-wrap{padding-top:0!important}
#list #appTitle{
  font-size:clamp(22px,6.05vw,34px)!important;
  line-height:.98!important;
}
#list .head-actions{
  gap:6px!important;
  align-items:center!important;
}
#list .settings-btn,#list .share-btn{
  width:39px!important;
  min-width:39px!important;
  height:39px!important;
  display:grid!important;
  place-items:center!important;
}
#list .head-action-icon{
  width:39px!important;
  height:39px!important;
  box-shadow:0 3px 10px rgba(35,73,112,.065)!important;
}
#list .head-action-label{display:none!important}
#list .desc{
  margin:5px 2px 10px!important;
  line-height:1.42!important;
}

/* Banner now leads the content; search follows it */
#list .promo-carousel{
  margin:0 0 9px!important;
  border-radius:18px!important;
}
#list .search-wrap{margin:0 0 8px!important}
#list .song-search{
  min-height:43px!important;
  height:43px!important;
  border-radius:15px!important;
  padding:8px 15px 8px 45px!important;
  font-size:13.5px!important;
}
#list .search-wrap:before{
  left:16px!important;
  top:13px!important;
  width:12px!important;
  height:12px!important;
  border-width:2px!important;
}
#list .search-wrap:after{
  left:26px!important;
  top:24px!important;
  width:7px!important;
  height:2px!important;
}

#list .home-tabs,
#list .home-tab{
  height:43px!important;
  min-height:43px!important;
}
#list .home-tabs{
  margin-bottom:9px!important;
  border-radius:15px!important;
}
#list .home-tab{
  font-size:12.5px!important;
  gap:5px!important;
}
#list .home-tab+.home-tab:before{top:10px!important;bottom:10px!important}
#list .home-tab-icon{font-size:18px!important}

@media(max-width:430px){
  #list{padding-top:13px!important}
  #list .list-head{min-height:40px!important;gap:5px!important}
  #list #appTitle{font-size:clamp(21px,5.85vw,25px)!important;gap:4px!important;letter-spacing:-.95px!important}
  #list .head-actions{gap:4px!important}
  #list .settings-btn,#list .share-btn{width:36px!important;min-width:36px!important;height:36px!important}
  #list .head-action-icon{width:36px!important;height:36px!important}
  #list .head-action-icon svg{width:19px!important;height:19px!important}
  #list .desc{margin:4px 2px 9px!important;font-size:12.2px!important}
  #list .song-search{height:41px!important;min-height:41px!important}
  #list .search-wrap:before{top:12px!important}
  #list .search-wrap:after{top:23px!important}
  #list .home-tabs,#list .home-tab{height:41px!important;min-height:41px!important}
  #list .home-tab{font-size:12px!important}
}

@media(max-width:360px){
  #list #appTitle{font-size:20.5px!important}
  #list .settings-btn,#list .share-btn{width:34px!important;min-width:34px!important;height:34px!important}
  #list .head-action-icon{width:34px!important;height:34px!important}
}


/* v0.8.22 footer ONDOOR logo replacement */
#list .ondoor-footer{margin-top:23px!important;margin-bottom:8px!important;gap:13px!important;align-items:center!important}
#list .ondoor-footer-logo{display:block!important;width:auto!important;height:23px!important;max-width:168px!important;object-fit:contain!important;opacity:.60!important;filter:none!important;flex:0 0 auto!important}
#list .ondoor-rule{height:1px!important;background:#d4e0eb!important;flex:1!important}
@media (max-width:480px){#list .ondoor-footer-logo{height:21px!important;max-width:150px!important}}


/* v0.8.23 — footer placement + unified cheer color */
/* All cheer-highlight colors render in one blue while ordinary lyric text remains unchanged. */
.line .red,.line .blue,.line .green{color:var(--blue)!important;font-weight:850!important}
#list #legendRed,#list #legendGreen{display:none!important}
#list #legendBlue{color:var(--home-blue)!important}

/* Footer becomes a quiet bottom-right signature; no divider rules. */
#list .ondoor-footer{
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  width:100%!important;
  margin:10px 0 2px!important;
  padding:0 2px 0 0!important;
  gap:0!important;
}
#list .ondoor-rule{display:none!important}
#list .ondoor-footer-logo{
  display:block!important;
  width:auto!important;
  height:18px!important;
  max-width:132px!important;
  object-fit:contain!important;
  opacity:.52!important;
  filter:none!important;
  flex:0 0 auto!important;
}
@media (max-width:480px){
  #list .ondoor-footer{margin-top:9px!important;padding-right:1px!important}
  #list .ondoor-footer-logo{height:17px!important;max-width:122px!important}
}

/* v0.8.26 SAFE footer cleanup — visual-only. Keep legend DOM so app bootstrap is untouched. */
#list .legend{
  display:none!important;
  margin:0!important;
  padding:0!important;
  min-height:0!important;
  height:0!important;
  overflow:hidden!important;
}
#list .ondoor-footer{
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  width:100%!important;
  margin:6px 0 0!important;
  padding:0 2px 4px 0!important;
  min-height:0!important;
  gap:0!important;
}
#list .ondoor-footer::before,
#list .ondoor-footer::after{display:none!important;content:none!important;}
#list .ondoor-footer-logo{
  height:14px!important;
  width:auto!important;
  max-width:104px!important;
  opacity:.36!important;
  display:block!important;
}
@media (max-width:480px){
  #list .ondoor-footer{margin-top:5px!important;padding:0 1px 3px 0!important;}
  #list .ondoor-footer-logo{height:13px!important;max-width:96px!important;}
}

/* v0.8.29 ONDOOR home color hierarchy — visual-only safe override */
#list{
  --home-bg:#DCEEFF!important;
  --home-card:#F8FCFF!important;
  --home-soft:#F3F8FD!important;
  --home-soft-2:#F5FAFF!important;
  background:#DCEEFF!important;
}
/* Primary song surfaces stay brightest, without pure white glare */
#list .song-row{
  background:#F8FCFF!important;
}
/* Secondary controls use a slightly bluer white for visual hierarchy */
#list .song-search,
#list .home-tabs{
  background:#F3F8FD!important;
}
#list .head-action-icon{
  background:#F5FAFF!important;
}
/* Keep reorder/favorite controls integrated into the same song card */
#list .song-row .song,
#list .fav-btn,
#list .order-handle{
  background:transparent!important;
}

/* v0.8.30 practice header refinement + timecode editor lyric visibility */
#player{
  --practice-header-height:64px;
}
#player .header{
  min-height:64px;
  height:64px;
  grid-template-columns:56px minmax(0,1fr) 56px;
  column-gap:10px;
  padding:8px 10px;
  background:#05070a;
  border-bottom:1px solid #171b21;
}
#player .back,
#player .header-more-btn{
  width:56px;
  min-width:56px;
  height:44px;
  min-height:44px;
  padding:0;
  border:1px solid #242b34;
  border-radius:14px;
  background:#11151b;
  box-shadow:none;
}
#player .back{
  color:#f5f7fa;
  font-size:13px;
  font-weight:700;
  letter-spacing:-.02em;
  white-space:nowrap;
}
#player .header-more-btn{
  color:#e7eaf0;
  font-size:23px;
  font-weight:900;
  line-height:1;
}
#player .headtext{
  min-height:44px;
  align-items:center;
  justify-content:center;
}
#player #title{
  max-width:100%;
  font-size:var(--practice-title-size,18px);
  font-weight:700;
  line-height:1.18;
  letter-spacing:-.02em;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  white-space:normal;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:keep-all;
  overflow-wrap:anywhere;
  text-align:center;
}
#player .youtube-practice{
  top:calc(var(--practice-header-height) + 8px);
}
#player.youtube-mode #viewport{
  top:calc(var(--practice-header-height) + 8px + var(--youtube-panel-height) + 10px);
}
#player:not(.youtube-mode) #viewport{
  top:var(--practice-header-height);
}
#player .practice-sheet{
  top:calc(var(--practice-header-height) + 8px);
}

/* Keep the selected lyric visually readable while the compact timecode editor is open. */
#player.quick-editing.editor-compact #lyrics{
  padding-bottom:calc(56vh + 176px);
}
#player .line.quick-selected{
  outline:1px solid rgba(110,159,255,.42);
  outline-offset:5px;
  border-radius:5px;
}

/* v0.8.32: restored original practice header; persistent admin edit session retained */
/* Compact timecode editor: right-aligned so lyrics remain visible on the left. */
#player .quick-editor.compact{
  left:auto!important;
  right:10px!important;
  width:min(430px,74vw)!important;
  max-width:74vw!important;
}
@media(max-width:600px){
  #player .quick-editor.compact{
    left:auto!important;
    right:10px!important;
    width:74vw!important;
    max-width:74vw!important;
    max-height:min(40dvh,285px);
  }
  #player .quick-editor.compact .quick-editor-head #quickEditorMeta{max-width:38vw}
}

/* v0.8.45 — robust responsive home using a real hero wrapper.
   The song list remains normal document flow below .home-hero, so it cannot overlap the banner. */
.home-hero,.home-hero-banner,.home-hero-tools{display:block}

/* Compact wide phone / narrow tablet: only increase list density. */
@media (min-width:640px) and (max-width:899px){
  #list #songs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
  #list #songs>.song-row{margin:0!important;min-width:0}
  #list #songs>.empty-note{grid-column:1/-1}
  body.song-order-editing #list #songs{grid-template-columns:1fr}
}

@media (min-width:900px) and (min-height:600px){
  #list.screen.on{display:block!important;width:100%!important;max-width:none!important;padding:24px clamp(24px,3vw,44px) 34px!important;background:#DCEEFF!important}
  #list>.list-head{width:100%!important;margin:0!important}
  #list>.desc{width:100%!important;margin:6px 2px 15px!important;font-size:13px!important}

  #list>.home-hero{display:grid!important;grid-template-columns:minmax(0,820px) minmax(300px,360px)!important;gap:24px!important;align-items:start!important;justify-content:start!important;width:100%!important;margin:0 0 18px!important}
  #list>.home-hero>.home-hero-banner{min-width:0!important;width:100%!important}
  #list>.home-hero>.home-hero-banner>.promo-carousel{width:100%!important;max-width:820px!important;aspect-ratio:3.68/1!important;margin:0!important;border-radius:18px!important}
  #list>.home-hero>.home-hero-tools{display:flex!important;flex-direction:column!important;gap:12px!important;min-width:0!important;width:100%!important}
  #list>.home-hero>.home-hero-tools>.search-wrap{width:100%!important;height:56px!important;margin:0!important}
  #list>.home-hero>.home-hero-tools>.search-wrap .song-search{width:100%!important;height:56px!important;min-height:56px!important;border-radius:16px!important;font-size:14px!important}
  #list>.home-hero>.home-hero-tools>.search-wrap:before{top:21px!important}
  #list>.home-hero>.home-hero-tools>.search-wrap:after{top:32px!important}
  #list>.home-hero>.home-hero-tools>.home-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;width:100%!important;height:54px!important;min-height:54px!important;margin:0!important;padding:5px!important;border:1px solid rgba(255,255,255,.72)!important;border-radius:16px!important;background:rgba(248,252,255,.78)!important;box-shadow:0 4px 12px rgba(35,73,112,.045)!important;overflow:visible!important}
  #list>.home-hero>.home-hero-tools>.home-tabs .home-tab{width:100%!important;min-width:0!important;height:44px!important;min-height:44px!important;margin:0!important;padding:0 6px!important;border:1px solid transparent!important;border-radius:12px!important;background:transparent!important;box-shadow:none!important;color:var(--home-navy)!important;justify-content:center!important;gap:5px!important;font-size:12.5px!important;font-weight:820!important;line-height:1!important;white-space:nowrap!important}
  #list>.home-hero>.home-hero-tools>.home-tabs .home-tab:before,#list>.home-hero>.home-hero-tools>.home-tabs .home-tab:after{display:none!important;content:none!important}
  #list>.home-hero>.home-hero-tools>.home-tabs .home-tab.active{color:var(--home-blue)!important;border-color:#A8D4FB!important;background:#EAF5FF!important}
  #list>.home-hero>.home-hero-tools>.home-tabs .home-tab-icon{font-size:17px!important;line-height:1!important;flex:0 0 auto!important}
  #list>.home-hero>.home-hero-tools>.home-tabs .order-edit-label{white-space:nowrap!important}

  #list>#songSortControls{width:100%!important;margin:0 0 10px!important}
  #list>#songs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px 12px!important;width:100%!important;min-width:0!important;margin:0!important}
  #list>#songs>.song-row{margin:0!important;min-width:0}
  #list>#songs>.empty-note{grid-column:1/-1}
  body.song-order-editing #list>#songs{grid-template-columns:1fr!important}
  #list>.ondoor-footer{width:100%!important;margin-top:12px!important}
}

@media (min-width:1360px) and (min-height:600px){
  #list>#songs{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.song-order-editing #list>#songs{grid-template-columns:1fr!important}
}


/* v0.8.46 — Wide content width alignment
   Header, hero, filters and song grid share the exact same horizontal frame.
   Max width = banner 820px + gap 24px + tools 360px = 1204px. */
@media (min-width:900px) and (min-height:600px){
  #list>.list-head,
  #list>.desc,
  #list>.home-hero,
  #list>#songSortControls,
  #list>#songs,
  #list>#favoritesSection,
  #list>.legend,
  #list>.ondoor-footer{
    width:100%!important;
    max-width:1204px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  #list>.list-head{
    margin-top:0!important;
    margin-bottom:0!important;
  }

  #list>.desc{
    margin-top:6px!important;
    margin-bottom:15px!important;
  }

  #list>.home-hero{
    margin-top:0!important;
    margin-bottom:18px!important;
  }

  #list>#songSortControls{
    margin-top:0!important;
    margin-bottom:10px!important;
  }

  #list>#songs{
    margin-top:0!important;
    margin-bottom:0!important;
  }

  #list>.ondoor-footer{
    margin-top:12px!important;
  }
}


/* v0.8.47 — Wide finishing pass
   1) Center the search/tabs stack vertically against the banner.
   2) Keep the same multi-column song grid while editing order. */
@media (min-width:900px) and (min-height:600px){
  #list>.home-hero{
    align-items:stretch!important;
  }

  #list>.home-hero>.home-hero-tools{
    align-self:stretch!important;
    justify-content:center!important;
  }

  /* Wide tablet / compact desktop: order editing stays 2 columns. */
  body.song-order-editing #list>#songs{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Large desktop: order editing stays 3 columns. */
@media (min-width:1360px) and (min-height:600px){
  body.song-order-editing #list>#songs{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}


/* v0.8.48 — Wide reorder UX refinement
   - Right-side tool panel returns to top alignment.
   - Order editing uses column-major flow: top→bottom, then next column.
     This makes vertical dragging correspond to adjacent song order. */
@media (min-width:900px) and (min-height:600px){
  #list>.home-hero{
    align-items:start!important;
  }

  #list>.home-hero>.home-hero-tools{
    align-self:start!important;
    justify-content:flex-start!important;
  }

  body.song-order-editing #list>#songs{
    display:grid!important;
    grid-template-columns:repeat(var(--order-edit-cols,2),minmax(0,1fr))!important;
    grid-template-rows:repeat(var(--order-edit-rows,1),auto)!important;
    grid-auto-flow:column!important;
    align-items:stretch!important;
  }
}


/* v0.8.49 — smoother order-edit motion
   Layout-shift animation is handled with FLIP in legacy.js.
   Disable the old ultra-short linear transform transition that caused snapping. */
.reordering #list .song-row:not(.drag-active){
  transition:none!important;
  will-change:transform;
}
.reordering #list .song-row.drag-active{
  transition:none!important;
  will-change:transform;
}


/* v0.8.50 — link sharing + notices */
#list .notice-btn{
  display:grid!important;
  place-items:center!important;
  width:39px!important;
  min-width:39px!important;
  height:39px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--home-navy)!important;
}
#list .notice-btn .head-action-icon{
  position:relative;
}
#list .notice-unread-dot{
  position:absolute;
  top:5px;
  right:5px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--home-blue,#3BA7FF);
  border:2px solid #F8FCFF;
  box-sizing:content-box;
}
@media(max-width:430px){
  #list .notice-btn{
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
  }
}
@media(max-width:360px){
  #list .notice-btn{
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
  }
}

.notice-modal{
  background:rgba(10,25,43,.38)!important;
  backdrop-filter:blur(4px);
}
.notice-modal-card{
  width:min(560px,100%)!important;
  max-height:min(78vh,720px)!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(198,220,240,.95)!important;
  border-radius:24px!important;
  background:#F8FCFF!important;
  color:#082650!important;
  box-shadow:0 24px 70px rgba(27,75,120,.20)!important;
}
.notice-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:22px 22px 15px;
  border-bottom:1px solid #DFECF7;
}
.notice-modal-kicker{
  margin-bottom:3px;
  color:#3BA7FF;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}
.notice-modal-card h2{
  margin:0!important;
  color:#082650!important;
  font-size:25px!important;
  line-height:1.15;
}
.notice-modal-close{
  width:38px;
  height:38px;
  border:0;
  border-radius:12px;
  background:#EDF6FE;
  color:#082650;
  font-size:27px;
  line-height:1;
  cursor:pointer;
}
.notice-list{
  max-height:calc(min(78vh,720px) - 82px);
  overflow:auto;
  padding:14px 18px 20px;
}
.notice-item{
  padding:17px 16px;
  border:1px solid #DEEBF6;
  border-radius:17px;
  background:#fff;
}
.notice-item + .notice-item{margin-top:10px}
.notice-item-top{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.notice-category{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  background:#EAF5FF;
  color:#218EE8;
  font-size:11px;
  font-weight:900;
}
.notice-pin{
  color:#3BA7FF;
  font-size:11px;
  font-weight:850;
}
.notice-date{
  margin-left:auto;
  color:#8798AA;
  font-size:11px;
}
.notice-title{
  margin:0 0 10px;
  color:#082650;
  font-size:17px;
  font-weight:900;
  line-height:1.35;
}
.notice-body{
  display:grid;
  gap:7px;
  color:#4D6277;
  font-size:13px;
  line-height:1.6;
}
.notice-body p{margin:0}
.notice-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  margin-top:13px;
  padding:0 13px;
  border-radius:11px;
  background:#EAF5FF;
  color:#147FD2;
  font-size:12px;
  font-weight:850;
  text-decoration:none;
}
.notice-empty{
  padding:42px 20px;
  color:#7C8FA1;
  text-align:center;
  font-size:13px;
}
.home-toast{
  position:fixed;
  z-index:220;
  left:50%;
  bottom:max(24px,calc(env(safe-area-inset-bottom) + 18px));
  transform:translate(-50%,10px);
  max-width:calc(100vw - 32px);
  padding:11px 15px;
  border-radius:13px;
  background:rgba(8,38,80,.94);
  color:white;
  font-size:13px;
  font-weight:780;
  box-shadow:0 10px 28px rgba(8,38,80,.22);
  opacity:0;
  transition:opacity .16s ease,transform .16s ease;
  pointer-events:none;
}
.home-toast.on{
  opacity:1;
  transform:translate(-50%,0);
}


/* v0.8.51 — notice accordion + ONDOOR logo */
.notice-modal-head{
  align-items:center!important;
}
.notice-modal-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  min-width:0;
}
.notice-modal-logo{
  display:block;
  width:auto;
  height:20px;
  max-width:132px;
  object-fit:contain;
  opacity:.92;
}
.notice-modal-card h2{
  font-size:24px!important;
}
.notice-modal-kicker{display:none!important}

/* Collapsed by default: only title + chevron */
.notice-item{
  padding:0!important;
  overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.notice-item.open{
  border-color:#CFE4F6;
  box-shadow:0 6px 18px rgba(28,78,124,.07);
}
.notice-summary{
  width:100%;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  border:0;
  background:transparent;
  color:#082650;
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.notice-summary-title{
  min-width:0;
  font-size:17px;
  font-weight:900;
  line-height:1.35;
}
.notice-summary-arrow{
  flex:0 0 auto;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  color:#6F8296;
  transition:transform .22s cubic-bezier(.22,1,.36,1),color .18s ease;
}
.notice-summary-arrow svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.notice-item.open .notice-summary-arrow{
  transform:rotate(180deg);
  color:#3BA7FF;
}
.notice-details{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .24s cubic-bezier(.22,1,.36,1),opacity .16s ease;
}
.notice-item.open .notice-details{
  grid-template-rows:1fr;
  opacity:1;
}
.notice-details-inner{
  min-height:0;
  overflow:hidden;
  padding:0 18px;
}
.notice-item.open .notice-details-inner{
  padding-bottom:18px;
}
.notice-details .notice-item-top{
  margin:0 0 11px!important;
  padding-top:1px;
}
.notice-details .notice-body{
  padding-top:0;
}
.notice-summary:focus-visible{
  outline:2px solid rgba(59,167,255,.55);
  outline-offset:-3px;
  border-radius:15px;
}

@media(max-width:480px){
  .notice-modal-logo{
    height:18px;
    max-width:118px;
  }
  .notice-summary{
    min-height:60px;
    padding:15px 16px;
  }
  .notice-summary-title{
    font-size:16px;
  }
  .notice-details-inner{
    padding-left:16px;
    padding-right:16px;
  }
}


/* v0.8.52 — notice header refinement + clearer load states */
.notice-modal-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
}
.notice-modal-head>h2{
  margin:0!important;
  flex:0 0 auto;
}
.notice-modal-brand{
  display:none!important;
}
.notice-modal-head-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:13px;
  min-width:0;
}
.notice-modal-logo{
  display:block;
  width:auto;
  height:20px;
  max-width:118px;
  object-fit:contain;
  opacity:.78;
}
.notice-empty.notice-load-error{
  color:#71869A;
}
.notice-empty.notice-load-error::before{
  content:'↻';
  display:block;
  margin-bottom:8px;
  color:#3BA7FF;
  font-size:21px;
  font-weight:800;
}

@media(max-width:480px){
  .notice-modal-head-actions{
    gap:9px;
  }
  .notice-modal-logo{
    height:17px;
    max-width:103px;
  }
}


/* v0.8.55 — Wide practice layout
   Compact/mobile UI is intentionally unchanged.
   Wide only rearranges the existing video + lyric regions. */
#player .wide-font-control{display:none}

@media (min-width:900px) and (min-height:600px){
  #player{
    --wide-practice-x:clamp(24px,3vw,48px);
    --wide-practice-gap:clamp(22px,2.2vw,36px);
    --wide-practice-midpoint:50%;
    background:#05070a;
  }

  /* Keep the existing top bar exactly as the app's navigation/header. */
  #player .header{
    z-index:20;
  }

  /* Existing YouTube player, simply moved into the left column. */
  #player .youtube-practice{
    top:calc(var(--practice-header-height) + 22px)!important;
    left:var(--wide-practice-x)!important;
    right:auto!important;
    width:calc(var(--wide-practice-midpoint) - (var(--wide-practice-gap) / 2) - var(--wide-practice-x))!important;
    max-width:none!important;
    margin:0!important;
    border-radius:16px;
  }

  /* Existing lyric viewport, simply moved into the right column.
     No tabs, timestamps, or alternate lyric presentation are introduced. */
  #player.youtube-mode #viewport{
    top:calc(var(--practice-header-height) + 12px)!important;
    bottom:var(--control-height)!important;
    left:calc(var(--wide-practice-midpoint) + (var(--wide-practice-gap) / 2))!important;
    right:var(--wide-practice-x)!important;
    border-left:1px solid #202630;
  }

  #player.youtube-mode #lyrics{
    /* Keep the existing lyric component and active-line behavior;
       only give the wider column slightly more breathing room. */
    padding-left:clamp(28px,3vw,52px)!important;
    padding-right:clamp(18px,2.2vw,38px)!important;
  }

  /* If a song has no usable YouTube video, keep lyrics full-width instead
     of leaving an empty left column. */
  #player:not(.youtube-mode) #viewport{
    top:var(--practice-header-height)!important;
    bottom:var(--control-height)!important;
    left:0!important;
    right:0!important;
    border-left:0!important;
  }

  /* Bottom controls stay one bar; Wide adds the only always-visible
     font-size control at the far right. */
  #player .controls.practice-controls{
    grid-template-columns:minmax(92px,.72fr) minmax(190px,1.28fr) minmax(92px,.72fr) minmax(190px,230px)!important;
    gap:10px!important;
    padding-left:var(--wide-practice-x)!important;
    padding-right:var(--wide-practice-x)!important;
    align-items:center;
  }

  #player .wide-font-control{
    min-width:0;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    color:#8c939d;
  }

  #player .wide-font-label{
    flex:0 0 auto;
    font-size:12px;
    font-weight:750;
    white-space:nowrap;
  }

  #player .wide-font-stepper{
    height:40px;
    display:grid;
    grid-template-columns:42px minmax(64px,74px) 42px;
    align-items:stretch;
    overflow:hidden;
    border:1px solid #272d35;
    border-radius:12px;
    background:#0c0f13;
  }

  #player .wide-font-stepper button{
    width:auto!important;
    min-width:0!important;
    height:100%!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#dce1e8!important;
    font-size:20px!important;
    font-weight:600!important;
  }

  #player .wide-font-stepper button:first-child{border-right:1px solid #272d35!important}
  #player .wide-font-stepper button:last-child{border-left:1px solid #272d35!important}

  #player #wideFontPercent{
    display:grid;
    place-items:center;
    color:#f0f3f6;
    font-size:13px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
  }
}


/* v0.8.57 — iPad / tablet rapid-tap zoom guard
   Rapid taps on prev/next can be interpreted by Safari as a double-tap zoom.
   `manipulation` keeps normal pan/pinch gestures but removes double-tap zoom
   from the practice UI and its controls. */
@media (min-width:900px) and (min-height:600px){
  #player{
    touch-action:manipulation;
  }

  #player button,
  #player .practice-controls,
  #player .wide-font-control,
  #player .wide-font-stepper{
    touch-action:manipulation!important;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
  }

  /* Lyrics must remain naturally vertically scrollable. */
  #player #viewport{
    touch-action:pan-y pinch-zoom;
  }
}


/* v1.0.0-rc.3 — phone landscape practice layout
   Portrait phone UI stays unchanged.
   Landscape phones use the same 50:50 video/lyrics structure as Wide practice. */
@media (orientation:landscape) and (min-width:640px) and (max-height:599px){
  #player{
    --landscape-practice-left:max(12px,env(safe-area-inset-left,0px));
    --landscape-practice-right:max(12px,env(safe-area-inset-right,0px));
    --landscape-practice-gap:16px;
    background:#05070a;
    touch-action:manipulation;
  }

  /* Keep the existing header and current controls; only rearrange the
     existing video + lyric areas into two equal screen halves. */
  #player .youtube-practice{
    top:calc(var(--practice-header-height) + 8px)!important;
    left:var(--landscape-practice-left)!important;
    right:auto!important;
    width:calc(50% - (var(--landscape-practice-gap) / 2) - var(--landscape-practice-left))!important;
    max-width:none!important;
    max-height:calc(100dvh - var(--practice-header-height) - var(--control-height) - 16px)!important;
    min-height:0!important;
    margin:0!important;
    border-radius:12px!important;
  }

  #player.youtube-mode #viewport{
    top:calc(var(--practice-header-height) + 4px)!important;
    bottom:var(--control-height)!important;
    left:calc(50% + (var(--landscape-practice-gap) / 2))!important;
    right:var(--landscape-practice-right)!important;
    border-left:1px solid #202630;
  }

  #player.youtube-mode #lyrics{
    padding-top:20vh!important;
    padding-bottom:44vh!important;
    padding-left:clamp(18px,2.6vw,28px)!important;
    padding-right:clamp(14px,2vw,24px)!important;
  }

  /* No video: preserve the existing full-width lyrics behavior. */
  #player:not(.youtube-mode) #viewport{
    top:var(--practice-header-height)!important;
    bottom:var(--control-height)!important;
    left:0!important;
    right:0!important;
    border-left:0!important;
  }

  /* A phone has less horizontal room than a tablet/PC, so keep the
     familiar 3-button transport bar and do not add the Wide font stepper. */
  #player .wide-font-control{
    display:none!important;
  }

  #player .controls.practice-controls{
    grid-template-columns:82px minmax(0,1fr) 92px!important;
    gap:8px!important;
    padding-left:max(10px,env(safe-area-inset-left,0px))!important;
    padding-right:max(10px,env(safe-area-inset-right,0px))!important;
  }

  /* Prevent rapid previous/next taps from triggering browser smart zoom. */
  #player button,
  #player .practice-controls{
    touch-action:manipulation!important;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
  }

  #player #viewport{
    touch-action:pan-y pinch-zoom;
  }
}

@supports not (height:100dvh){
  @media (orientation:landscape) and (min-width:640px) and (max-height:599px){
    #player .youtube-practice{
      max-height:calc(100vh - var(--practice-header-height) - var(--control-height) - 16px)!important;
    }
  }
}


/* v1.0.0-rc.4 — compact phone landscape chrome
   On short landscape phones, reduce only the practice header/footer height.
   The 50:50 video/lyrics layout and portrait phone UI remain unchanged. */
@media (orientation:landscape) and (min-width:640px) and (max-height:480px){
  #player{
    --practice-header-height:50px;
    --control-height:calc(58px + env(safe-area-inset-bottom,0px));
  }

  #player .header{
    min-height:50px!important;
    height:50px!important;
    grid-template-columns:42px minmax(0,1fr) 42px!important;
    column-gap:8px!important;
    padding-left:max(7px,env(safe-area-inset-left,0px))!important;
    padding-right:max(7px,env(safe-area-inset-right,0px))!important;
  }

  #player .back,
  #player .header-more-btn{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    border-radius:11px!important;
  }

  #player .back{
    font-size:12px!important;
  }

  #player .header-more-btn{
    font-size:21px!important;
  }

  #player #title{
    font-size:min(var(--practice-title-size),16px)!important;
    line-height:1.12!important;
  }

  #player .controls.practice-controls{
    height:var(--control-height)!important;
    padding-top:5px!important;
    padding-bottom:calc(5px + env(safe-area-inset-bottom,0px))!important;
  }

  #player .practice-controls .transport-btn,
  #player .practice-controls .transport-play{
    height:46px!important;
    border-radius:10px!important;
  }

  #player .practice-controls .transport-side{
    font-size:20px!important;
  }

  #player .practice-controls .transport-play .play-label{
    min-height:22px!important;
  }

  #player .practice-controls .transport-play .play-icon-play,
  #player .practice-controls .transport-play .play-icon-pause{
    flex-basis:23px!important;
  }

  #player .practice-controls .transport-icon{
    width:23px!important;
    height:23px!important;
  }
}

/* Extra-short landscape phones get one more small reduction so the
   media area does not get squeezed by browser/device safe areas. */
@media (orientation:landscape) and (min-width:640px) and (max-height:400px){
  #player{
    --practice-header-height:46px;
    --control-height:calc(54px + env(safe-area-inset-bottom,0px));
  }

  #player .header{
    min-height:46px!important;
    height:46px!important;
  }

  #player .back,
  #player .header-more-btn{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
  }

  #player .controls.practice-controls{
    padding-top:4px!important;
    padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))!important;
  }

  #player .practice-controls .transport-btn,
  #player .practice-controls .transport-play{
    height:42px!important;
  }
}


/* v1.0.0-rc.7 — compact landscape header alignment */
@media (orientation:landscape) and (min-width:640px) and (max-height:480px){
  #player .header{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    grid-template-columns:none!important;
    column-gap:0!important;
  }

  #player .back,
  #player .header-more-btn{
    position:absolute!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    margin:0!important;
    z-index:2!important;
  }

  #player .back{
    left:max(8px,env(safe-area-inset-left,0px))!important;
  }

  #player .header-more-btn{
    right:max(8px,env(safe-area-inset-right,0px))!important;
  }

  #player .headtext{
    position:absolute!important;
    top:0!important;
    bottom:0!important;
    left:56px!important;
    right:56px!important;
    width:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    pointer-events:none;
  }

  #player #title{
    width:100%!important;
    margin:0!important;
    padding:0!important;
    text-align:center!important;
    line-height:1.1!important;
  }
}

@media (orientation:landscape) and (min-width:640px) and (max-height:400px){
  #player .headtext{
    left:50px!important;
    right:50px!important;
  }

  #player #title{
    font-size:min(var(--practice-title-size),15px)!important;
  }
}


/* v1.0.0-rc.10 — desktop lyric grab-scroll */
@media (hover:hover) and (pointer:fine){
  #player.on #viewport{
    cursor:grab;
  }

  #player.on #viewport.desktop-lyric-dragging{
    cursor:grabbing;
    -webkit-user-select:none;
    user-select:none;
  }

  #player.on #viewport.desktop-lyric-dragging #lyrics,
  #player.on #viewport.desktop-lyric-dragging .line{
    -webkit-user-select:none;
    user-select:none;
  }
}