/* SELAH NOTE design layer, "dark studio" (2026-10-30): one look over the home page, the setlists, the score
   reader, the community and the request board. Colours come from tokens.css (dark by default, light in the
   same language); this file sets type, surfaces and components. Loaded last, it changes how things look,
   never what they do. The score sheet stays white paper unless 종이색 악보 is turned off. */
:root{font-size:14px;font-synthesis:none}
body{font-family:var(--font);letter-spacing:-.005em}
h1,h2,h3,.cb-title,.rb-title{font-family:var(--font)}
a:hover{color:var(--accent-text)}
button:hover:not(:disabled),summary:hover{background:var(--surface-2)}
.tnum,#result-count,#library-page,.playback-status,#tempo,.transpose output,.personal-count,.key-badge{font-variant-numeric:tabular-nums}

/* ---------- Controls ---------- */
.button{min-height:40px;padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface-2);color:var(--ink);font-size:13.5px;font-weight:600;transition:background .15s,border-color .15s,color .15s}
.button:hover:not(:disabled){background:var(--raised);border-color:var(--faint)}
.quiet{border-radius:999px;color:var(--muted)}
.quiet:hover:not(:disabled){color:var(--ink)}
input,select,textarea{color-scheme:inherit}
select{accent-color:var(--accent)}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--accent)}
.menu summary{border-radius:999px}
.menu[open]>summary{background:var(--raised)}
.menu-panel{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-l);box-shadow:var(--shadow-3)}

/* ---------- Header: the mark, the main menu and the account, one bar ---------- */
.site-header{background:var(--surface);border-bottom:1px solid var(--line)}
body:not(.reader-mode) .site-header{height:56px;padding-inline:16px 12px;gap:6px;justify-content:flex-start}
.brand{display:flex;align-items:center;gap:10px;flex:none;color:var(--ink);font-family:var(--font);font-size:14px;font-weight:800;letter-spacing:.16em;margin-right:18px}
.brand:hover{color:var(--ink)}
.brand-mark{width:30px;height:30px;border:0;border-radius:9px;background:none;box-shadow:0 0 0 1px #ffffff14,0 4px 14px #36e2b42e;padding:0;overflow:hidden;flex:none}
.brand-mark img{display:block;width:100%;height:100%}
.site-header .theme-switch{margin-left:auto}
.site-header .language-link{margin-left:0;min-height:36px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted)}
.site-header .language-link:hover{background:var(--surface-2);color:var(--ink)}
.theme-switch{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;min-height:40px;padding:0;border:0;border-radius:50%;background:none;color:var(--muted)}
.theme-switch:hover{background:var(--surface-2)!important;color:var(--ink)}
.theme-switch svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-switch .theme-moon{display:none}
:root[data-theme=light] .theme-switch .theme-moon{display:block}
:root[data-theme=light] .theme-switch .theme-sun{display:none}
.notice-bell{width:40px;height:40px;min-height:40px;color:var(--muted)}
.notice-bell:hover{background:var(--surface-2);color:var(--ink)}
.notice-count{box-shadow:0 0 0 2px var(--surface)}
/* The bell's place while sign-in is not known yet but was on last time, so nothing moves when it comes */
.notice-bell-slot{display:none;flex:none;width:40px;height:40px;place-items:center}
:root[data-auth=hint] .notice-bell-slot{display:grid}
:root[data-auth=hint] .notice-bell-slot::before{content:'';width:22px;height:22px;border-radius:50%;background:var(--skeleton)}
/* The account: 로그인 when signed out, the member's initial when signed in, a grey circle until it is known */
.site-header .account-menu>summary{min-height:40px;padding:0;border-radius:999px;color:var(--ink);font-size:13.5px;font-weight:700;gap:0}
.site-header .account-menu>summary:hover{background:none}
.account-login{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;background:var(--accent);color:var(--on-accent);white-space:nowrap;transition:background .15s}
.account-menu>summary:hover .account-login{background:var(--accent-hover)}
.account-avatar{display:none;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--accent-text);font-size:14px;font-weight:800;line-height:1}
.account-menu>summary .account-avatar{margin:3px}
.account-menu[open]>summary .account-avatar,.account-menu>summary:hover .account-avatar{box-shadow:inset 0 0 0 1.5px var(--accent),var(--glow)}
:root[data-auth=hint] .account-menu>summary .account-avatar,:root[data-auth=in] .account-menu>summary .account-avatar{display:grid}
:root[data-auth=hint] .account-login,:root[data-auth=in] .account-login{display:none}
:root[data-auth=hint] .account-menu>summary .account-avatar{background:var(--skeleton);box-shadow:none;color:transparent}
.account-menu .menu-panel{width:300px;padding:14px;gap:8px}
.account-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:4px 2px 10px;border-bottom:1px solid var(--line);margin-bottom:2px}
.account-card .account-avatar{width:40px;height:40px;font-size:16px}
:root[data-auth=in] .account-card .account-avatar{display:grid}
.account-pitch{grid-column:1/-1;margin:0;font-size:13px;line-height:1.6;color:var(--muted);word-break:keep-all}
:root[data-auth=in] .account-pitch{display:none}
#account{font-size:13px;line-height:1.5;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.account-menu .menu-panel>.button{width:100%;justify-content:flex-start}
.account-menu #auth{justify-content:center!important;background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.account-menu #auth:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}
:root[data-auth=in] .account-menu #auth{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink)}
:root[data-auth=in] .account-menu #auth:hover:not(:disabled){background:var(--raised)}
.account-menu .license-link{padding:4px 6px;font-size:12.5px;color:var(--muted)}
.account-menu .license-link:hover{color:var(--ink)}
.delete-account{justify-self:start;font-size:12.5px;color:var(--danger-text)!important}

/* The main menu: tabs in the header; a tab bar along the bottom on phones and tablets */
.main-menu{display:flex;align-items:center;gap:2px;padding:0;border:0;background:none;box-shadow:none;min-width:0}
.main-menu>a,.main-menu>button{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:14px;font-weight:600;white-space:nowrap;box-shadow:none;transition:background .15s,color .15s}
.main-menu>a:hover,.main-menu>button:hover{background:var(--surface-2);color:var(--ink)}
.main-menu [aria-current=page],.main-menu [aria-current=page]:hover{background:var(--accent-soft);color:var(--accent-text);box-shadow:none}
.menu-icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.main-menu .community{position:relative}
.main-menu .community[data-unread]::after{top:2px;right:2px;box-shadow:0 0 0 2px var(--surface)}
@media(max-width:1180px) and (min-width:901px){.main-menu .menu-long{display:none}.main-menu .menu-short{display:inline}.main-menu .menu-icon{display:none}.main-menu>a,.main-menu>button{padding:0 10px}}
@media(max-width:1040px) and (min-width:901px){.brand-name{display:none}.brand{margin-right:8px}}
@media(max-width:900px){
 body:not(.reader-mode) .site-header{height:52px;padding-inline:14px 8px}
 .brand{font-size:13px;letter-spacing:.14em;margin-right:auto}
 .site-header .main-menu{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;height:calc(60px + env(safe-area-inset-bottom));padding:4px 4px env(safe-area-inset-bottom);background:var(--surface);border-top:1px solid var(--line);border-radius:0}
 .site-header .main-menu>a,.site-header .main-menu>button{flex-direction:column;justify-content:center;gap:3px;min-height:52px;height:52px;padding:0 2px;border-radius:12px;background:none;font-size:11px;font-weight:600;line-height:1.15;white-space:normal;text-align:center;word-break:keep-all;overflow:hidden}
 .site-header .main-menu>a:hover,.site-header .main-menu>button:hover{background:none}
 .site-header .main-menu .menu-icon{display:block;width:44px;height:26px;padding:3px 11px;border-radius:999px;transition:background .15s}
 .site-header .main-menu [aria-current=page]{background:none}
 .site-header .main-menu [aria-current=page] .menu-icon{background:var(--accent-soft)}
 .main-menu .menu-long{display:none}.main-menu .menu-short{display:inline}
 .main-menu .community[data-unread]::after{top:2px;right:calc(50% - 26px)}
 body:not(.reader-mode) main{padding-bottom:calc(64px + env(safe-area-inset-bottom))!important}
 body:not(.reader-mode) footer{display:none}
 body:not(.reader-mode) #toast,body:not(.reader-mode) .nb-nudge,body:not(.reader-mode) .live-chip{bottom:calc(72px + env(safe-area-inset-bottom))}
 html:lang(ja) .site-header .main-menu>a,html:lang(ja) .site-header .main-menu>button{font-size:10px;word-break:break-all}
}
@media(max-width:560px){
 body:not(.reader-mode) .site-header{height:52px;min-height:52px;flex-wrap:nowrap;gap:2px;padding-block:0}
 .brand{gap:8px}.brand-mark{width:28px;height:28px}
 .site-header .language-link{padding:0 8px;font-size:12.5px}
 .theme-switch,.notice-bell,.notice-bell-slot{width:38px;height:38px;min-height:38px}
}
@media(max-width:374px){.brand-name{display:none}}
@media(max-height:450px) and (max-width:900px){.site-header .main-menu{display:none}body:not(.reader-mode) main{padding-bottom:6px!important}}

/* ---------- Layout of the home page ---------- */
body:not(.reader-mode) main{padding:14px 16px 10px;gap:16px}
#personal-library{flex-basis:236px;width:236px;padding-right:14px;border-right:1px solid var(--line)}
#library-view{gap:10px}
/* The strip's row stays when the strip is closed (empty), so every list row keeps its place in #library-view's grid */
#library-view .library-filters{display:block;min-height:0}
body:not(.reader-mode) footer{padding:6px 18px;border-top:1px solid var(--line);background:var(--bg);font-size:11.5px;color:var(--faint)}
body:not(.reader-mode) footer b{font-weight:700;letter-spacing:.12em;color:var(--muted)}
footer a:hover{color:var(--ink)}

/* The welcome strip: a dark panel with faint staff lines and a mint glow, until it is closed */
.home-intro{position:relative;display:flex;align-items:center;gap:20px;padding:16px 56px 16px 22px;border:1px solid var(--line);border-radius:var(--radius-l);color:var(--ink);overflow:hidden;background:radial-gradient(90% 180% at 100% 0%,var(--accent-soft) 0%,transparent 55%),var(--surface);box-shadow:none}
.home-intro::after{content:'';position:absolute;right:0;top:14px;bottom:14px;width:min(460px,48%);background:repeating-linear-gradient(transparent 0 10px,var(--accent-line) 10px 11px);opacity:.35;-webkit-mask:linear-gradient(90deg,transparent,#000 70%);mask:linear-gradient(90deg,transparent,#000 70%);pointer-events:none}
.home-intro-text{position:relative;z-index:1;min-width:0}
.home-intro-kicker{margin:0;font-size:11px;font-weight:800;letter-spacing:.22em;color:var(--accent-text)}
.home-intro h2{margin:4px 0 4px;word-break:keep-all;font-family:var(--font);font-size:20px;line-height:1.35;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.home-intro p:not(.home-intro-kicker){margin:0;max-width:680px;word-break:keep-all;text-wrap:pretty;font-size:13.5px;line-height:1.6;color:var(--muted)}
.home-intro-actions{position:relative;z-index:1;display:flex;gap:8px;margin-left:auto;flex:none}
.intro-primary,.intro-secondary{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.intro-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 6px 20px var(--accent-soft)}
.intro-primary:hover{background:var(--accent-hover);color:var(--on-accent)}
.intro-secondary{border:1px solid var(--line-strong);color:var(--ink);background:var(--surface-2)}
.intro-secondary:hover{border-color:var(--faint);color:var(--ink)}
.home-intro-close{position:absolute;right:10px;top:10px;z-index:2;width:36px;height:36px;min-height:36px;border-radius:50%;color:var(--faint);font-size:13px}
.home-intro-close:hover{background:var(--raised)!important;color:var(--ink)}
#library-view.community-mode .home-intro,#library-view.requests-mode .home-intro{display:none!important}
@media(max-width:900px){.home-intro{flex-wrap:wrap;gap:12px}.home-intro-actions{margin-left:0}}
@media(max-width:560px){.home-intro{padding:14px 48px 14px 16px;border-radius:14px}.home-intro h2{font-size:16.5px}.home-intro p:not(.home-intro-kicker){display:none}.home-intro-kicker{font-size:10.5px}.intro-primary,.intro-secondary{min-height:40px;padding:0 14px;font-size:13px}}
@media(max-height:650px){.home-intro{display:none!important}}

/* Search, the score language and refresh: one row */
#library-view .toolbar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.search{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:none;transition:border-color .15s,box-shadow .15s}
.search:hover{border-color:var(--line-strong)}
.search:focus-within{border-color:var(--accent);box-shadow:var(--glow)}
.search svg{width:18px;color:var(--faint)}
#library-view .search input{min-height:42px;font-size:15px;color:var(--ink)}
.search input::placeholder{color:var(--faint)}
.score-language-filter{display:flex;align-items:center;gap:8px;flex:none}
.filter-label{font-size:12px;font-weight:600;color:var(--faint);letter-spacing:.02em}
.language-segments{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.language-segments button{min-width:0;min-height:36px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted)}
.language-segments button:hover:not(.active){background:var(--surface-2);color:var(--ink)}
.language-segments .active,:root .language-segments .active{background:var(--raised);color:var(--ink);font-weight:700;box-shadow:inset 0 0 0 1px var(--line-strong)}
#library-view #refresh,#library-view .toolbar .quiet{flex:none;width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted);font-size:18px}
#library-view #refresh:hover:not(:disabled){color:var(--ink);border-color:var(--line-strong)}
@media(max-width:760px){
 #library-view .toolbar{flex-wrap:wrap;row-gap:8px}
 #library-view .search{flex:1 1 0;min-width:0}
 .score-language-filter{order:3;flex:1 1 100%}
 .score-language-filter .filter-label{display:none}
 .language-segments{flex:1;max-width:none}
 .language-segments button{flex:1;min-height:34px}
}

/* Kinds of score as chips, each with its colour; the count on the right */
#library-view .list-caption{display:flex;align-items:center;gap:10px;min-width:0;margin:0}
.library-chips{gap:6px}
.library-chip{--chip:var(--faint);display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 13px 0 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:13px;font-weight:600;transition:background .15s,border-color .15s,color .15s}
.library-chip::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--chip);flex:none}
.library-chip:hover{border-color:var(--line-strong);color:var(--ink);background:var(--surface-2)}
.library-chip.active,.library-chip.active:hover{border-color:var(--chip);background:var(--surface-2);background:color-mix(in srgb,var(--chip) 15%,var(--surface));color:var(--ink)}
.library-chip[data-chip=all]{--chip:var(--ink)}
.library-chip[data-chip="찬송가"]{--chip:var(--c-hymn)}
.library-chip[data-chip="찬양·CCM"]{--chip:var(--c-ccm)}
.library-chip[data-chip="클래식"]{--chip:var(--c-classic)}
.library-chip[data-chip="첼로"]{--chip:var(--c-cello)}
.library-chip[data-chip="연주·연습"]{--chip:var(--c-play)}
.library-chip.liked-chip{--chip:var(--c-like)}
.library-chip.liked-chip::before{display:none}
.library-chip.liked-chip:not(.active){color:var(--muted)}
#result-count{margin-left:auto;flex:none;font-size:12.5px;font-weight:600;color:var(--faint)}
html.booting #result-count{visibility:hidden}
.list-caption h2{font-family:var(--font);font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
@media(max-width:560px){.library-chip{min-height:34px;padding:0 12px 0 10px;font-size:12.5px}}

/* The list: cards with the colour of their kind along the left edge */
#library-view .score-grid{gap:8px}
#library-view .score-card{--cat:var(--line-strong);position:relative;gap:4px;padding:8px 10px 8px 13px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface);box-shadow:none;color:var(--ink);transition:background .15s,border-color .15s,transform .15s}
#library-view .score-card::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--cat)}
#library-view .score-card[data-category="찬송가"]{--cat:var(--c-hymn)}
#library-view .score-card[data-category="찬양·CCM"]{--cat:var(--c-ccm)}
#library-view .score-card[data-category="클래식"]{--cat:var(--c-classic)}
#library-view .score-card[data-category="첼로"]{--cat:var(--c-cello)}
#library-view .score-card[data-category="연주·연습"]{--cat:var(--c-play)}
#library-view .score-card[data-category="연습"]{--cat:var(--c-practice)}
#library-view .score-card:hover,#library-view .score-card:focus-visible{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink);box-shadow:none;transform:none}
#library-view .score-card:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
#library-view .score-card h3{font-size:13.5px;line-height:18px;font-weight:650;letter-spacing:-.015em;color:var(--ink)}
#library-view .score-card-meta{gap:5px;font-size:11px}
.key-badge,#library-view .key-badge{flex:none;min-width:20px;padding:0 6px;border-radius:5px;background:var(--amber-soft);color:var(--amber-text);font:700 11px/16px var(--font);letter-spacing:.02em;text-align:center;white-space:nowrap}
.language-badge,#library-view .language-badge{padding:0 5px;border-radius:5px;background:none;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--muted);font-size:10.5px;line-height:16px;font-weight:600;letter-spacing:0}
.language-badge[lang=ja]{background:none;color:var(--muted)}
#library-view .score-card-status{font-size:11px;color:var(--faint)}
.private-badge,#library-view .private-badge{color:var(--amber-text);font-size:11px;font-weight:700}
.lyric-hit{display:block;max-width:100%;font-size:11.5px;line-height:1.45;color:var(--accent-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#library-view .score-card:has(.lyric-hit) h3{min-height:18px;max-height:18px;-webkit-line-clamp:1}
#library-view .lyric-hit{flex:none;height:18px;line-height:18px}
.like-score{width:30px;height:30px;min-height:30px;top:3px;right:3px;border-radius:50%;color:var(--faint);font-size:15px}
.like-score:hover{background:var(--raised)!important;color:var(--c-like)}
.like-score.on,.reader-like.on{color:var(--c-like)}
.score-card-wrap>.score-card{padding-right:32px}
.personal-card-add{right:3px;bottom:3px;width:30px;height:30px;min-height:30px;border:0;border-radius:50%;background:transparent;color:var(--faint);font-size:18px;transition:background .15s,color .15s,opacity .15s}
.personal-card-add:hover,.personal-card-add:focus-visible{background:var(--accent-soft);color:var(--accent-text)}
@media(hover:hover) and (min-width:901px){.personal-card-add{opacity:0}.personal-card-wrap:hover .personal-card-add,.personal-card-add:focus-visible{opacity:1}}
.empty{color:var(--muted);line-height:1.9}
.request-song{margin-top:10px}
.pagination .button{min-height:40px;padding:0 18px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600}
.pagination .button:hover{border-color:var(--line-strong);background:var(--surface-2);color:var(--ink)}
#library-page{min-width:64px;text-align:center;font-size:13px;font-weight:700;color:var(--muted)}
#library-view .pagination{gap:14px}
.setlist-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.setlist-bar .button{min-height:36px;padding:0 13px;font-size:13px}
#setlist-meta{font-size:12.5px;color:var(--muted)}
.setlist-card-order{background:var(--accent);color:var(--on-accent);font-weight:800}
.setlist-card-tools button{border-color:var(--line-strong);border-radius:8px;background:var(--surface-2);color:var(--ink)}
@media(prefers-reduced-motion:reduce){#library-view .score-card,.personal-folder{transition:none}}

/* The first paint: until the app draws the list (html.booting) the server's copy stays hidden behind grey
   cards in the grid the list will have (same column and row count as libraryGridLayout), and nothing moves. */
html.booting #score-list::after{content:none}
.list-skeleton{display:none}
html.booting .list-skeleton{display:grid;grid-row:-3/-2;grid-column:1;align-self:stretch;min-height:0;overflow:hidden;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-template-rows:repeat(auto-fill,minmax(68px,1fr));grid-auto-rows:minmax(68px,1fr);gap:8px;pointer-events:none}
html.booting #score-list{grid-row:-3/-2;grid-column:1}
.list-skeleton i{display:block;min-height:0;border-radius:var(--radius-m);border:1px solid var(--line);background:var(--skeleton) linear-gradient(100deg,transparent 30%,var(--skeleton-shine) 50%,transparent 70%) no-repeat fixed;background-size:180% 100%;animation:selah-shimmer 1.6s ease-in-out infinite}
@media(max-width:560px),(max-height:650px){html.booting .list-skeleton{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}
@media(prefers-reduced-motion:reduce){.list-skeleton i{animation:none;background-image:none}}
#library-view.community-mode .list-skeleton,#library-view.requests-mode .list-skeleton{display:none}

/* ---------- 내 콘티 beside the list ---------- */
.personal-sidebar-head{min-height:40px;padding:0 0 8px;background:var(--bg)}
.personal-sidebar-head h2{font-family:var(--font);font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.personal-icon{min-height:32px;padding:0 12px;border:1px solid var(--accent-line);border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font-size:12.5px;font-weight:700}
.personal-icon:hover:not(:disabled){background:var(--accent);color:var(--on-accent)}
.personal-folder-list{gap:6px}
.personal-folder{min-height:56px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface);box-shadow:none;transition:border-color .15s,background .15s}
.personal-folder:hover{background:var(--surface-2);border-color:var(--line-strong)}
.personal-folder.personal-folder-active{background:var(--surface-2);border-color:var(--accent-line);box-shadow:inset 3px 0 0 var(--accent)}
.personal-folder strong{font-size:13px;font-weight:700;color:var(--ink)}
.personal-folder small,.personal-count{font-size:11.5px;color:var(--faint)}
.personal-folder-icon{fill:var(--amber)}
.personal-muted{font-size:12.5px;line-height:1.7;color:var(--muted);word-break:keep-all}
.personal-hint{font-size:12px;color:var(--faint);border-top-color:var(--line);word-break:keep-all}
#personal-library .button[data-personal-action=login]{width:100%;background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
#personal-library .button[data-personal-action=login]:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.personal-skeleton{display:grid;gap:6px}
.personal-skeleton .sk-title{display:block;width:72px;height:16px;margin:12px 0 12px}
.personal-skeleton .sk-folder{display:block;height:56px;border-radius:var(--radius-m)}
#personal-library>.personal-skeleton{padding-top:0}
#personal-library>.personal-skeleton .sk-title{margin:12px 0 14px}
#personal-library .personal-sidebar-head+.personal-skeleton{margin-top:12px}

/* ---------- Dialogs ---------- */
.personal-dialog,.cb-dialog,.account-delete,.app-signin,.usage-report{border:1px solid var(--line-strong);border-radius:20px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-3)}
.personal-dialog::backdrop,.cb-dialog::backdrop,.account-delete::backdrop,.app-signin::backdrop,.usage-report::backdrop,.notice-dialog::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.personal-dialog-head{padding:14px 18px;border-bottom-color:var(--line)}
.personal-dialog-head h2{font-family:var(--font);font-size:17px;font-weight:800;letter-spacing:-.02em}
.personal-dialog-head>button{width:40px;min-width:40px;height:40px;min-height:40px;border-radius:50%;color:var(--muted)}
.personal-dialog input,.personal-dialog textarea,.personal-dialog select{border:1px solid var(--line-strong);border-radius:10px;background:var(--surface-2);color:var(--ink)}
.personal-dialog input:focus,.personal-dialog textarea:focus,.personal-dialog select:focus{outline:none;border-color:var(--accent);box-shadow:var(--glow)}
.personal-dialog .button,.personal-folder-toolbar button{border:1px solid var(--line-strong);border-radius:999px;background:var(--surface-2);box-shadow:none;font-weight:600;color:var(--ink)}
.personal-dialog .button:hover,.personal-folder-toolbar button:hover{border-color:var(--faint);background:var(--raised);color:var(--ink)}
.personal-primary,.personal-dialog .personal-primary,.personal-dialog .personal-primary:hover{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.personal-dialog .personal-primary:hover{background:var(--accent-hover)}
.personal-dialog .personal-danger{color:var(--danger-text);border-color:var(--danger-line)}
.personal-folder-tile{border:1px solid var(--line);border-radius:14px;background:var(--surface-2);box-shadow:none;transition:border-color .15s,background .15s}
.personal-folder-tile:hover,.personal-folder-tile:focus-visible{background:var(--raised);border-color:var(--line-strong);transform:none}
.personal-songs li,.personal-requests li{border-color:var(--line);border-radius:12px}
.personal-song-actions button{border-color:var(--line);border-radius:8px}
.personal-status{border-radius:999px;padding:2px 9px;background:var(--accent-soft);color:var(--accent-text);font-weight:700}
.personal-status[data-status=declined]{background:var(--amber-soft);color:var(--amber-text)}
.personal-status[data-status=reviewing]{background:var(--violet-soft);color:var(--violet-text)}

/* ---------- Toast and footer ---------- */
#toast{border-radius:999px;padding:11px 20px;background:var(--toast-bg);color:var(--toast-ink);box-shadow:var(--shadow-3);font-weight:600;font-size:13.5px}

/* ---------- The score reader: an instrument panel over white paper ---------- */
.reader-dock{background:var(--bg)}
.reader-topline{gap:8px}
.reader-topline .back{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 14px 0 10px;border-radius:999px;font-size:13px;font-weight:700;color:var(--muted)}
.reader-topline .back:hover{background:var(--surface-2);color:var(--ink)}
.reader-topline h1{font-family:var(--font);font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.reader-topline .reader-info>summary,.reader-topline .language-link{min-height:36px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted)}
.reader-like{width:40px;height:40px;min-height:40px}
.reader-controls{border:1px solid var(--line);border-radius:var(--radius-l);background:var(--surface);box-shadow:none}
.transpose button{border-radius:10px;color:var(--ink)}
.transpose output,#tempo,.playback-controls .playback-status{color:var(--accent-text);font-weight:700}
.transpose output{padding:0 8px;min-height:32px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.tempo-value{border-radius:8px}
#tempo{background:transparent}
.play-toggle{background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 4px var(--accent-soft)}
.play-toggle:hover:not(:disabled){background:var(--accent-hover)}
.stop-button{border-color:var(--line-strong);background:var(--surface-2)}
.timeline{background:var(--raised);border-radius:999px}
.segment{color:var(--ink)}
.timeline-loop{position:absolute;top:0;bottom:0;background:var(--amber-soft);box-shadow:inset 0 0 0 2px var(--amber);border-radius:inherit;pointer-events:none}
.playback-controls .audio-menu summary,.capo-menu summary,.view-menu summary{min-height:34px;padding:0 12px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface-2);font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.capo-menu summary::after,.view-menu summary::after{content:" ▾";color:var(--faint);font-weight:400}
.view-controls .button,#perform,#lyrics-screen{min-height:34px;padding:0 13px;font-size:13px}
.tools-bar button{border-color:var(--line);background:var(--surface);color:var(--muted);transition:background .15s,color .15s,border-color .15s}
.tools-bar button:hover:not(:disabled){color:var(--ink);border-color:var(--line-strong);background:var(--surface-2)}
.tools-bar button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.harmony-panel,.keyboard-panel,.visual-panel{border-color:var(--line);background:var(--surface)}
.harmony-panel{border-radius:var(--radius-l)}
.panel-toggle{border-color:var(--line-strong);border-radius:999px;background:var(--surface-2);color:var(--ink)}
.panel-toggle[aria-expanded="true"]{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-text)}
.harmony-symbol{color:var(--ink);font-weight:800}
.reader-bottom{background:var(--bg)}
.tool-panel{border-color:var(--line-strong);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-3)}
.repeat-sheet,.bar-menu{border-color:var(--line-strong);background:var(--surface);box-shadow:var(--shadow-3)}
.repeat-chip{background:var(--surface-2)}
.repeat-chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ink-bar{border-color:var(--line);background:var(--surface)}
.exit-focus{border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-2)}
@media(min-width:561px){.reader-topline h1{font-size:17px}}
/* The score: white paper with black notes by default; with 종이색 악보 off, light notes on the dark page */
.paper{border:1px solid var(--line);border-radius:6px;background:var(--paper-bg);color:var(--paper-ink)}
:root:not([data-theme=light]):not([data-paper=light]) #notation svg.definition-scale{color:var(--notation-ink);fill:var(--notation-ink)}
:root[data-paper=light] #notation svg.definition-scale,:root[data-theme=light] #notation svg.definition-scale{color:#111;fill:#111}
.chord-sheet{color:var(--paper-ink)}
.paper-switch{display:none!important}
:root:not([data-theme=light]) .paper-switch{display:inline-flex!important}
:root:not([data-theme=light]) .paper-switch[aria-pressed=true]{background:#f1f4f7;border-color:#f1f4f7;color:#0a0c0f}
/* The fingerboard keeps its wood and labels; on a dark score the highlighter lightens instead of darkening */
:root:not([data-theme=light]) .fingerboard-svg .fb-neck{fill:#3b2a1e}
:root:not([data-theme=light]) .fingerboard-svg .fb-note text{fill:#3b2a1e}
:root:not([data-theme=light]) .fingerboard-svg .fb-note .fb-finger{fill:#ffe9a8}
:root:not([data-theme=light]):not([data-paper=light]) .score-ink path.mark{mix-blend-mode:screen;opacity:.45}

/* 공연 모드: full screen, the score fitted, a quiet bar to turn pages */
body.performing #exit-focus,body.performing #setlist-panel{display:none!important}
body.performing .paper{cursor:pointer;-webkit-user-select:none;user-select:none}
.perform-bar{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:6px;max-width:calc(100vw - 20px);padding:6px;border:1px solid #ffffff1f;border-radius:999px;background:#0a0c0feb;color:#f1f4f7;box-shadow:0 10px 30px #0000004d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .35s}
.perform-bar[hidden]{display:none}
.perform-bar.resting{opacity:0;pointer-events:none}
.perform-bar button{flex:none;min-height:40px;padding:6px 14px;border:0;border-radius:999px;background:#ffffff1f;color:#f1f4f7;font-size:14px;font-weight:600}
.perform-bar button:hover{background:#ffffff38!important;color:#fff}
#perform-prev,#perform-next{width:44px;padding:0;font-size:22px;line-height:1}
.perform-info{min-width:0;padding:0 8px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:560px){#perform-exit{font-size:12.5px;padding:6px 10px}.perform-info{font-size:12px}}

/* Practice: the practice switches and the guitar capo */
.practice-tools{display:grid;gap:2px;padding-top:8px;border-top:1px solid var(--line)}
.loop-label{margin-left:auto;font-size:12px;font-weight:700;color:var(--amber-text)}
.capo-menu summary{color:var(--accent-text)}
.capo-panel{display:grid;gap:8px;width:300px}
.capo-panel select{width:100%;font-size:16px;border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--surface-2);color:var(--ink)}
.capo-tip{margin:0;font-size:14px}.capo-tip b{color:var(--accent-text)}
.capo-chords{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.capo-chords li{display:grid;justify-items:center;padding:6px 4px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);line-height:1.25}
.capo-chords b{font-size:16px;color:var(--ink)}.capo-chords span{font-size:11px;color:var(--muted)}
body.phone-controls #key-menu-panel .transpose{flex-wrap:wrap}
body.phone-controls #key-menu-panel .capo-menu{flex-basis:100%;margin-top:8px}
body.phone-controls #key-menu-panel .capo-menu summary{width:100%}
body.phone-controls #key-menu-panel .capo-panel{position:static;width:auto;max-height:none;margin-top:8px;padding:10px;box-shadow:none;background:var(--surface-2)}
/* 이용 통계 (administrator) */
.usage-report{width:min(980px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0}
.usage-report form{display:grid;gap:10px;padding:20px}.usage-report h2{margin:0;font-size:18px}.usage-note{margin:0;font-size:13px;color:var(--muted)}
.usage-scroll{overflow:auto;max-height:65dvh}.usage-report table{border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.usage-report th,.usage-report td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}.usage-report tbody th{text-align:left;font-weight:500}
.usage-report thead th{position:sticky;top:0;background:var(--surface);color:var(--muted);font-weight:500}.usage-report form>.button{justify-self:end}
.usage-report h3{margin:14px 0 4px;font-size:15px}.usage-report .usage-error{max-width:420px;white-space:normal;overflow-wrap:anywhere;text-align:left;font-weight:500}
/* 함께 넘기기: a small pill while leading or following */
.live-chip{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:1100;display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:calc(100vw - 24px);padding:6px 8px 6px 12px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);box-shadow:var(--shadow-2);font-size:13px;color:var(--ink)}
.live-chip[hidden]{display:none}
.live-chip button{min-height:30px;padding:2px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--accent-text);font-size:12.5px;font-weight:600}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 0 #ff5d6c80;animation:live-pulse 1.6s infinite}
@keyframes live-pulse{70%{box-shadow:0 0 0 7px #ff5d6c00}100%{box-shadow:0 0 0 0 #ff5d6c00}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}
.setlist-song-settings{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 0 0;margin-top:10px;border-top:1px solid var(--line);font-size:12.5px}
.setlist-settings-label{color:var(--muted)}.setlist-settings-chip{padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.setlist-song-settings .button{min-height:30px;padding:2px 10px;font-size:12.5px}
.setlist-live{padding-top:8px}.setlist-live .button{width:100%}
.band-style{display:grid;gap:6px}.band-style select{width:100%;font-size:16px;border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--surface-2);color:var(--ink)}
/* 보기: the reader's less used view settings, in one menu beside 공연 모드 and 가사 화면 */
.view-controls{flex-wrap:nowrap}
.view-panel{display:grid;gap:10px;width:250px}
.view-field{display:grid;gap:4px;font-size:12.5px;color:var(--muted)}
.view-field:has(select[hidden]){display:none}
#view-menu .view-field select{width:100%;max-width:none;font-size:15px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink)}
#view-menu .view-panel .button{width:100%;justify-content:flex-start;text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
#view-menu .view-panel .button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-text);font-weight:700}
body.phone-controls #more-menu-panel .view-menu{position:static;flex:1 1 100%}
body.phone-controls #more-menu-panel .view-menu>summary{display:none}
body.phone-controls #more-menu-panel .view-menu .menu-panel{position:static;width:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;box-shadow:none;background:none}

/* ---------- Community and request board, in the same surfaces ---------- */
.cb-title,.rb-title{font-weight:800!important;letter-spacing:-.03em}
.cb-avatar:not(.cb-avatar-empty){background:hsl(var(--hue) 30% 20%);color:hsl(var(--hue) 70% 78%);box-shadow:inset 0 0 0 1px hsl(var(--hue) 25% 30%)}
:root[data-theme=light] .cb-avatar:not(.cb-avatar-empty){background:hsl(var(--hue) 45% 92%);color:hsl(var(--hue) 45% 28%);box-shadow:inset 0 0 0 1px hsl(var(--hue) 30% 82%)}
.community-board .primary,.cb-dialog .primary{background:var(--accent);color:var(--on-accent)}
.community-board .primary:hover:not(:disabled),.cb-dialog .primary:hover:not(:disabled){background:var(--accent-hover);opacity:1}
.cb-tabs button[aria-pressed=true],.cb-tabs button[aria-pressed=true]:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* ---------- Piano keys: real key colours in both themes, played keys in the site's mint and amber ---------- */
.keyboard .key.white{background:#fbfcfd;border-color:#c9cfd6}
.keyboard .key.black{background:#16191e;border-color:#0a0c0f}
.keyboard .key.white:hover{background:#eef1f4}
.keyboard .key.black:hover{background:#2a3038}
.keyboard .key span{color:#6b7480}
.keyboard .key.playback{background:#ffd27a}
.keyboard .key.black.playback{background:#d99a2b}
.keyboard .key.user{background:#7a4fd0}
.keyboard .key.black.user{background:#54309f}
.keyboard .key.user span{color:#fff}
.keyboard .key.hint{box-shadow:inset 0 -12px 0 #c8b1f5}
.keyboard .key.black.hint{box-shadow:inset 0 -10px 0 #9a78e6}
.keyboard-panel{border-top:1px solid var(--line)}
.keyboard-hint{color:var(--faint)}
.reader-topline .language-link{display:inline-flex;align-items:center;margin-left:0}
.personal-card-wrap>.score-card,.score-card-wrap>.score-card{padding-right:34px!important}
.like-score{top:4px;right:4px;width:28px;height:28px;min-height:28px}
.personal-card-add{right:4px;bottom:4px;width:28px;height:28px;min-height:28px}
@media(max-width:560px){
 .home-intro{padding:12px 44px 12px 14px;gap:10px}
 .home-intro-kicker{display:none}
 .home-intro h2{margin:0;font-size:15.5px}
 .home-intro-close{right:4px;top:4px}
}
/* A pressed or chosen control keeps its fill under the pointer */
.tools-bar button[aria-pressed=true]:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.repeat-chip.on:hover,.repeat-toggle.on:hover,#repeat-a.on:hover{color:var(--accent-text)}
.repeat-chip.on:hover{background:var(--accent-hover);color:var(--on-accent)}
.panel-toggle[aria-expanded="true"]:hover:not(:disabled){background:var(--accent-soft);color:var(--accent-text)}
.practice-toggle[aria-pressed="true"],.practice-toggle[aria-pressed="true"]:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.visual-mode button[aria-pressed=true],.visual-mode button[aria-pressed=true]:hover:not(:disabled),.ink-tools button[aria-pressed=true]:hover:not(:disabled){color:var(--ink)}
.visual-mode button[aria-pressed=true],.visual-mode button[aria-pressed=true]:hover:not(:disabled){background:var(--accent);color:var(--on-accent)}
/* Small form controls in the reader's panels, in one style */
.tool-panel select,.tool-panel input:is([type=number],[type=text]),.keyboard-tools select,.practice-what,.note-spelling select,.visual-bar select,.ink-bar select,.practice-mic-device,.access-controls select{min-height:36px;padding:0 10px;border:1px solid var(--line-strong);border-radius:10px;background-color:var(--surface-2);color:var(--ink);font-size:14px}
.tool-panel select:focus,.tool-panel input:focus,.keyboard-tools select:focus,.note-spelling select:focus{outline:none;border-color:var(--accent);box-shadow:var(--glow)}
.tool-panel-head h3{font-size:16px;font-weight:800;letter-spacing:-.02em}
.tuner-string{border-color:var(--line-strong);background:var(--surface-2)}
.tuner-meter{border-radius:999px}
/* Setlist dialog: a little room between the folders and the 콘티 만들기 button */
.personal-dialog-body .personal-folder-grid+.button,.personal-dialog-body .personal-muted+.button{margin-top:14px}
/* While a score loads: faint staff lines breathing on the paper, and a word underneath */
.score-loading{display:grid;justify-items:center;gap:14px;margin:48px auto;color:var(--paper-muted);font-size:14px;font-weight:600}
.score-loading::before{content:'';width:min(420px,80%);height:49px;background:repeating-linear-gradient(transparent 0 11px,var(--paper-line) 11px 12px);-webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);animation:score-breathe 1.4s ease-in-out infinite alternate}
@keyframes score-breathe{from{opacity:.35}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.score-loading::before{animation:none}}
/* Japanese pages: proportional kana in the interface (not on the score) */
html:lang(ja) body{font-feature-settings:"palt";letter-spacing:.01em}
html:lang(ja) #paper-wrap{font-feature-settings:normal;letter-spacing:normal}
html:lang(ja) .personal-sidebar-head{flex-wrap:wrap;row-gap:6px}
.personal-icon{white-space:nowrap}
/* On a phone the chips scroll sideways and fade out before the count */
@media(max-width:560px){#library-view .library-chips{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:22px}}
/* ---------- Tap targets on phones: 40px or more for everything a thumb aims at ---------- */
@media(max-width:560px){
 .theme-switch,.notice-bell,.notice-bell-slot{width:40px;height:40px;min-height:40px}
 .site-header .language-link{min-height:40px}
 .home-intro-close{width:40px;height:40px;min-height:40px;right:2px;top:2px}
 .library-chip{min-height:40px}
 .language-segments button{min-height:38px}
 .pagination .button{min-height:44px}
 .account-menu .license-link{display:flex;align-items:center;min-height:40px}
}
/* The ♥ and ＋ on a card stay small to leave the title room; their touch area reaches 40px */
.like-score::after,.personal-card-add::after{content:'';position:absolute;inset:-6px}
body.phone-controls .play-toggle{width:44px;height:44px;min-height:44px}
body.phone-controls .repeat-toggle{min-height:40px}
body.phone-controls .key-menu summary,body.phone-controls .more-menu summary{min-height:40px;border-radius:999px;background:var(--surface-2)}
body.phone-controls .reader-topline .back{min-width:44px;min-height:44px;justify-content:center;font-size:24px;padding:0}
.reader-topline .reader-like,.reader-topline .theme-switch{width:40px;height:40px;min-height:40px}
.reader-topline .reader-info>summary,.reader-topline .language-link{min-height:40px}
/* The chord panel beside the score is on the same paper (shut, its button stays on the dark page) */
:root[data-theme=dark][data-paper=light] .harmony-panel:not(.collapsed){--ink:#1d2b25;--muted:#5f6a63;--faint:#7d8780;--line:#e7e2d7;--line-strong:#d7d0c1;--green:#1f5a45;--green-deep:#163f31;--green-soft:#eaf2ed;--green-tint:#f3f8f5;--surface:#fffdf9;--raised:#fffdf9;--surface-2:#f3f8f5;background:var(--paper-bg,#fbf9f3);border-color:#3a433e;color:#1d2922;color-scheme:light}
:root[data-theme=dark][data-paper=light] .harmony-panel:not(.collapsed) .panel-toggle{border-color:#d2dbd4}
:root[data-theme=dark][data-paper=light] .harmony-panel:not(.collapsed) .panel-toggle[aria-expanded="true"]{background:#e8f1ec;border-color:#b9cfc2}
:root[data-theme=dark][data-paper=light] .harmony-panel:not(.collapsed) .harmony-name{color:#4d5f55}
:root[data-theme=dark][data-paper=light] .harmony-panel:not(.collapsed) .note-chips span{background:#eef4f0;color:#1d2922}
:root[data-theme=dark][data-paper=light] .harmony-panel:not(.collapsed) .button{border-color:#d2dbd4;color:#1f5a45}
:root[data-theme=dark][data-paper=light] .harmony-panel:not(.collapsed) :is(.setlist-songs a:hover,.setlist-songs a:focus-visible){background:#eef4f0}
:root[data-theme=dark][data-paper=light] .harmony-panel:not(.collapsed) .setlist-songs li.current>span{background:#e8f1ec}