:root{
--font-lyric: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-chord: 'Outfit', system-ui, sans-serif;
--font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-display: 'Space Grotesk', system-ui, sans-serif;
--font-data: 'Plus Jakarta Sans', system-ui, sans-serif;
--paper-base:#121212;
--paper-raised-base:#181818;
--theme-tint:#121212;
--font-scale:1;
--paper:var(--paper-base);
--paper-raised:var(--paper-raised-base);
--paper:color-mix(in srgb, var(--paper-base) 93%, var(--theme-tint) 7%);
--paper-raised:color-mix(in srgb, var(--paper-raised-base) 90%, var(--theme-tint) 10%);
--ink:#F2EEE5;
--ink-soft:#A8A196;
--ink-faint:#857E73;
--brass:#D3A44E;
--brass-dark:#E6BA6C;
--rubric:#E2726B;
--green:#72B593;
--line:#272727;
--line-strong:#3A3A3A;
--danger:#E2726B;
--note:#B7D48A;
--note-bg:#1A2216;
--radius:6px;
--sp-1:4px;
--sp-2:8px;
--sp-3:12px;
--sp-4:16px;
--sp-5:24px;
--sp-6:32px;
--radius-control:6px;
--radius-surface:10px;
--radius-pill:100px;
--text-xs:11px;
--text-sm:12px;
--text-base:14px;
--text-lg:18px;
--text-xl:24px;
--text-2xl:30px;
--sidebar-w:236px;
}
html.light-theme{
--paper-base:#FAF8F4;
--paper-raised-base:#FFFFFF;
--theme-tint:#FAF8F4;
--paper:var(--paper-base);
--paper-raised:var(--paper-raised-base);
--paper:color-mix(in srgb, var(--paper-base) 93%, var(--theme-tint) 7%);
--paper-raised:color-mix(in srgb, var(--paper-raised-base) 90%, var(--theme-tint) 10%);
--ink:#221E18;
--ink-soft:#5C5548;
--ink-faint:#767063;
--brass:#AD7B2C;
--brass-dark:#8A611F;
--rubric:#C0473D;
--green:#33754F;
--line:#E7E1D4;
--line-strong:#D2C9B6;
--danger:#C0473D;
--note:#3F6B34;
--note-bg:#EAF2E2;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
background:var(--paper);
padding-left:env(safe-area-inset-left);
padding-right:env(safe-area-inset-right);
background:
radial-gradient(ellipse 800px 600px at 12% -8%, color-mix(in srgb, var(--theme-tint) 12%, transparent), transparent 60%),
radial-gradient(ellipse 800px 600px at 100% 105%, color-mix(in srgb, var(--theme-tint) 9%, transparent), transparent 60%),
var(--paper);
color:var(--ink);
font-family:var(--font-ui);
-webkit-font-smoothing:antialiased;
min-height:100vh;
}
::selection{background:color-mix(in srgb, var(--brass) 35%, var(--paper));}
button{font-family:inherit;cursor:pointer;}
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
outline:2px solid var(--brass); outline-offset:2px; border-radius:var(--radius-control);
}
input,select,textarea{font-family:inherit;}
a{color:inherit;}
.app{
display:grid;
grid-template-columns:var(--sidebar-w) minmax(0, 1fr);
min-height:100vh;
}
@media (max-width:820px){
.app{grid-template-columns:minmax(0, 1fr);}
}
.sidebar{
border-right:1px solid var(--line);
background:var(--paper-raised);
display:flex;
flex-direction:column;
padding:22px 18px;
gap:var(--sp-4);
position:sticky; top:0; height:100vh; overflow-y:auto;
}
@media (max-width:820px){
.sidebar{
position:fixed; inset:0 auto 0 0; z-index:100; width:270px; max-width:82vw;
transform:translateX(-100%); border-top:none; overflow-y:auto; visibility:hidden;
transition:transform .25s ease, box-shadow .25s ease, visibility 0s linear .25s;
}
.sidebar.mobile-open{ transform:translateX(0); box-shadow:2px 0 28px rgba(0,0,0,.4); visibility:visible; transition-delay:0s; }
.sidebar .nav-section-label{ display:none; }
.sidebar .nav button[data-nav="today"], .sidebar .nav button[data-nav="library"], .sidebar .nav button[data-nav="setlists"]{ display:none; }
.mobile-sidebar-backdrop{
display:none; position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.45);
}
.mobile-sidebar-backdrop.show{ display:block; }
.bottom-nav{
position:fixed; left:0; right:0; bottom:0; z-index:95;
display:grid; grid-template-columns:repeat(4, 1fr);
background:var(--paper-raised); border-top:1px solid var(--line-strong);
padding:4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
}
.bottom-nav button{
position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
min-height:52px; border:none; background:none; border-radius:var(--radius);
color:var(--ink-faint); font-family:var(--font-ui); font-size:11.5px; font-weight:600;
}
.bottom-nav button svg{ width:20px; height:20px; }
.bottom-nav button.active{ color:var(--ink); }
.bottom-nav button.active svg{ color:var(--brass); }
.bottom-nav .notif-badge{ position:absolute; top:4px; right:calc(50% - 20px); }
.main{ padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
.toast{ bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
.sidebar{ padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width:821px){
.bottom-nav, .mobile-sidebar-backdrop{ display:none; }
}
.brand{display:flex; align-items:center; gap:var(--sp-2); padding:2px 4px 10px; flex-wrap:wrap;}
.today-head{ padding:4px 0 18px; }
.today-eyebrow{ font-size:12px; letter-spacing:.08em; text-transform:uppercase;
color:var(--brass); font-weight:600; }
.today-title{ font-size:clamp(28px, 5vw, 40px); line-height:1.1; margin:6px 0 8px; }
.today-meta{ color:var(--ink-faint); font-size:14px; }
.today-list{ border-top:1px solid var(--line); }
.today-row{ display:flex; align-items:center; gap:14px; width:100%;
padding:16px 6px; border:none; border-bottom:1px solid var(--line);
background:none; text-align:left; cursor:pointer; color:inherit; font:inherit; }
.today-row:hover{ background:var(--paper-raised); }
.today-row.playing{ background:color-mix(in srgb, var(--brass) 14%, transparent); }
.today-num{ flex:none; width:28px; font-size:15px; color:var(--ink-faint);
font-variant-numeric:tabular-nums; }
.today-song{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.today-song-title{ font-size:19px; line-height:1.25; font-weight:500;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.today-song-alt{ font-size:13px; color:var(--ink-faint);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.today-now{ flex:none; font-size:11px; font-weight:600; color:var(--brass);
display:inline-flex; align-items:center; gap:4px; }
.today-key{ flex:none; min-width:38px; text-align:center; font-size:15px;
font-weight:600; padding:4px 9px; border-radius:var(--radius);
background:var(--paper-raised); color:var(--ink-soft); }
.today-actions{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.today-actions .btn{ flex:1; min-width:160px; }
@media (max-width:560px){
.today-row{ padding:14px 4px; gap:10px; }
.today-song-title{ font-size:17px; }
}
.lib-letter{ position:sticky; top:0; z-index:2;
background:var(--paper); color:var(--ink-faint);
font-size:11px; font-weight:700; letter-spacing:.1em;
padding:8px 6px 6px; border-bottom:1px solid var(--line); }
.projector-credit{ position:fixed; left:0; right:0; bottom:14px; text-align:center;
font-family:var(--font-ui); font-size:13px; letter-spacing:.02em;
opacity:.55; padding:0 24px; pointer-events:none; }
button, .song-row, .today-row, .chip, .tiny-btn, .icon-btn, .btn,
.key-pill, [role="button"], [data-open-song],
[data-nav], summary, label, select, input[type="checkbox"], input[type="radio"]{
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
button:active, .btn:active, .tiny-btn:active, .icon-btn:active,
.chip:active{
transform: scale(0.97);
filter: brightness(0.94);
}
.song-row:active, .today-row:active, [role="button"]:active{
background: var(--paper-raised);
}
button, .btn, .tiny-btn, .icon-btn, .chip{
transition: transform .09s ease-out, filter .09s ease-out, background .15s ease;
}
button:active, .btn:active, .tiny-btn:active, .icon-btn:active{
transition-duration: 0s;
}
@media (prefers-reduced-motion: reduce){
button:active, .btn:active, .tiny-btn:active, .icon-btn:active,
.chip:active{ transform:none; }
}
.dropdown{ position:relative; display:inline-block; }
.dropdown-menu{
position:absolute; top:calc(100% + 4px); left:0; z-index:60;
min-width:210px; padding:var(--sp-1);
background:var(--paper-raised); border:1px solid var(--line-strong);
border-radius:var(--radius); box-shadow:0 8px 28px rgba(0,0,0,.22);
display:flex; flex-direction:column; gap:1px;
}
.dropdown:last-child .dropdown-menu{ left:auto; right:0; }
.context-menu{
position:fixed; z-index:200; min-width:210px; padding:var(--sp-1);
background:var(--paper-raised); border:1px solid var(--line-strong);
border-radius:var(--radius); box-shadow:0 10px 34px rgba(0,0,0,.28);
display:flex; flex-direction:column; gap:1px;
}
.dropdown-item{
display:flex; align-items:center; gap:var(--sp-2);
width:100%; text-align:left; border:none; background:none;
font-family:var(--font-ui); font-size:13.5px; color:var(--ink-soft);
padding:9px 10px; border-radius:var(--radius-control); cursor:pointer;
white-space:nowrap;
}
.dropdown-item:hover{ background:var(--paper); color:var(--ink); }
.dropdown-item.danger{ color:var(--rubric); }
.dropdown-item.danger:hover{ background:rgba(226,114,107,.12); }
.dropdown-icon{ flex:none; width:18px; text-align:center; opacity:.85; }
.dropdown-sep{ height:1px; background:var(--line); margin:var(--sp-1) 4px; }
@media (max-width:560px){
.context-menu{
left:8px !important; right:8px; top:auto !important; bottom:8px;
min-width:0;
}
.dropdown-item{ padding:13px 12px; font-size:15px; }
}
.empty-import{ max-width:460px; margin:0 auto; padding:28px 16px 40px; }
.empty-import p{ color:var(--ink-faint); font-size:14px; line-height:1.55; margin:8px 0 22px; }
.empty-import-actions{ display:flex; flex-direction:column; gap:10px; text-align:left; }
.empty-import-actions .btn{
display:flex; align-items:center; gap:14px; width:100%;
padding:14px 16px; text-align:left; height:auto;
}
.empty-import-actions .btn > span:last-child{ display:flex; flex-direction:column; gap:2px; }
.empty-import-actions strong{ font-size:14.5px; font-weight:600; }
.empty-import-actions small{ font-size:12px; opacity:.75; font-weight:400; }
.empty-import-actions code{
font-family:ui-monospace, Menlo, Consolas, monospace; font-size:11px;
padding:1px 4px; border-radius:3px; background:rgba(128,128,128,.18);
}
.empty-import-icon{ flex:none; font-size:20px; width:24px; text-align:center; }
.empty-import-or{ margin-top:20px !important; font-size:13px; }
.link-btn{
border:none; background:none; padding:0; font:inherit; cursor:pointer;
color:var(--brass); text-decoration:underline;
}
.panel-primary{
display:flex; align-items:center; gap:var(--sp-2);
padding-bottom:var(--sp-3); flex-wrap:wrap;
}
.panel-key{ display:flex; align-items:center; gap:var(--sp-2); flex:1; min-width:0; }
.panel-key label{
font-family:var(--font-ui); font-size:11px; font-weight:600;
letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
}
.panel-primary .btn{ flex:none; }
.panel-section{ margin-top:var(--sp-3); border-top:1px solid var(--line); padding-top:var(--sp-2); }
.panel-section-title{
font-family:var(--font-ui); font-size:10.5px; font-weight:700;
letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
margin-bottom:var(--sp-1);
}
.panel-row{
display:flex; align-items:center; justify-content:space-between;
gap:var(--sp-2); padding:4px 0;
}
.panel-row-label{ font-family:var(--font-ui); font-size:13.5px; color:var(--ink-soft); }
.panel-row-control{
font-family:var(--font-ui); font-size:13px; padding:6px 8px;
border:1px solid var(--line-strong); border-radius:var(--radius-control);
background:var(--paper-raised); color:var(--ink); max-width:60%;
}
.panel-link{
display:flex; align-items:center; gap:var(--sp-2); width:100%;
padding:7px 8px; margin:0 -8px; border:none; background:none;
font-family:var(--font-ui); font-size:14px; color:var(--ink-soft);
text-align:left; cursor:pointer; border-radius:var(--radius-control);
}
.panel-link:hover{ background:var(--paper-raised); color:var(--ink); }
.panel-link.active{ color:var(--brass); }
.panel-link-icon{ flex:none; width:20px; text-align:center; opacity:.9; }
.panel-link-meta{
margin-left:auto; font-size:12px; color:var(--ink-faint);
font-variant-numeric:tabular-nums;
}
.panel-link-go{ flex:none; margin-left:auto; color:var(--ink-faint); font-size:16px; }
.panel-link-meta + .panel-link-go{ margin-left:var(--sp-2); }
.panel-footer{
display:flex; flex-wrap:wrap; gap:var(--sp-1);
margin-top:var(--sp-3); border-top:1px solid var(--line); padding-top:var(--sp-2);
}
@media (pointer: coarse){
.panel-link{ padding:12px 8px; }
.panel-row{ padding:8px 0; }
.panel-row-control{ padding:9px 10px; font-size:14px; }
}
.settings-group{
margin:0 0 var(--sp-3);
border:1px solid var(--line);
border-radius:var(--radius);
background:var(--paper-raised);
padding:var(--sp-3) var(--sp-3) var(--sp-2);
}
.settings-group > summary{
list-style:none; cursor:pointer; display:flex; flex-direction:column;
gap:1px; margin:calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) 0;
padding:var(--sp-3); border-radius:var(--radius);
}
.settings-group > summary::-webkit-details-marker{ display:none; }
.settings-group > summary:hover{ background:var(--paper); }
.settings-group > summary::after{
content:'›'; position:absolute; right:var(--sp-3);
font-size:20px; color:var(--ink-faint);
transform:rotate(90deg); transition:transform .18s ease;
}
.settings-group[open] > summary::after{ transform:rotate(-90deg); }
.settings-group > summary{ position:relative; }
.settings-group-head{ display:flex; flex-direction:column; gap:1px; margin-bottom:var(--sp-2); }
.settings-group-title{
font-family:var(--font-ui); font-size:11px; font-weight:700;
letter-spacing:.1em; text-transform:uppercase; color:var(--brass);
}
.settings-group-note{
font-family:var(--font-ui); font-size:12.5px; color:var(--ink-faint);
}
.settings-group .field{
margin-top:0 !important; padding-top:var(--sp-2) !important;
padding-bottom:var(--sp-1);
border-top:1px solid var(--line) !important;
}
.settings-group .field:first-of-type{
padding-top:0 !important; border-top:none !important;
}
@media (max-width:560px){
.settings-group{ padding:var(--sp-3); }
}
.splash-screen{
position:fixed; inset:0; z-index:9999; background:var(--paper);
display:flex; align-items:center; justify-content:center;
animation:splashFadeOut .6s ease forwards; animation-delay:3.4s;
}
.splash-screen.splash-dismiss{
animation:splashFadeOut .32s ease forwards; animation-delay:0s;
}
.splash-logo{
font-family:var(--font-display); font-weight:700; color:var(--ink);
font-size:100px; letter-spacing:.01em;
animation:splashShrink 1.4s cubic-bezier(.6,-0.1,.3,1.15) forwards;
animation-delay:1.4s;
}
@keyframes splashShrink{
from{ font-size:100px; }
to{ font-size:var(--text-xl); }
}
@keyframes splashFadeOut{ from{ opacity:1; } to{ opacity:0; visibility:hidden; } }
#picker-sign-in-btn.splash-fade-in{ opacity:0; animation:pickerButtonFadeIn .45s ease forwards; animation-delay:.15s; }
@keyframes pickerButtonFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@media (max-width:820px){
.splash-logo{ font-size:64px; }
@keyframes splashShrink{
from{ font-size:64px; }
to{ font-size:var(--text-xl); }
}
} }
@keyframes logoLineDraw{ from{stroke-dashoffset:42;} to{stroke-dashoffset:0;} }
@keyframes logoPop{ 0%{opacity:0; transform:scale(.3);} 70%{opacity:1; transform:scale(1.15);} 100%{opacity:1; transform:scale(1);} }
.brand .mark{
font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); letter-spacing:.01em;
line-height:1.2; color:var(--ink);
}
.org-label{
display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
padding:0 4px 14px; margin-top:-6px; font-size:var(--text-sm); color:var(--ink-soft);
}
.org-label span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.org-label button{
flex:none; border:none; background:none; color:var(--brass-dark); font-size:11.5px;
text-decoration:underline; padding:2px;
}
.nav{display:flex; flex-direction:column; gap:2px;}
.nav-section-label{
font-size:var(--text-xs); color:var(--ink-faint); margin:14px 4px 4px; letter-spacing:.02em;
}
.nav button{
display:flex; align-items:center; gap:var(--sp-2);
background:none; border:none; text-align:left;
padding:8px 9px; border-radius:var(--radius);
font-size:14.5px; color:var(--ink-soft);
}
.nav button svg{flex:none; opacity:.75;}
.nav button:hover{background:color-mix(in srgb, var(--ink-faint) 14%, var(--paper));}
.nav button.active{background:color-mix(in srgb, var(--brass) 16%, var(--paper)); color:var(--ink); font-weight:500;}
.admin-box{
margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
font-size:var(--text-sm);
}
.account-wrap{ position:relative; }
.account-chip{
width:100%; display:flex; align-items:center; gap:var(--sp-2); text-align:left;
padding:8px 10px; border:1px solid var(--line-strong); border-radius:var(--radius);
background:var(--paper-raised); color:var(--ink);
}
.account-chip:hover{ border-color:var(--brass); }
.account-avatar{
flex:none; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
background:color-mix(in srgb, var(--ink-faint) 18%, var(--paper)); color:var(--ink-soft);
font-family:var(--font-ui); font-weight:700; font-size:13px;
}
.account-chip.admin .account-avatar{ background:color-mix(in srgb, var(--green) 18%, var(--paper)); color:var(--green); }
.account-text{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.account-name{ font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-role{ font-size:11.5px; color:var(--ink-faint); }
.account-caret{ flex:none; color:var(--ink-faint); font-size:11px; }
.account-chip .notif-badge, .account-item .notif-badge{ position:static; }
.account-menu{
position:absolute; left:0; right:0; bottom:calc(100% + 6px); z-index:60;
display:flex; flex-direction:column; gap:1px; padding:var(--sp-1);
background:var(--paper-raised); border:1px solid var(--line-strong); border-radius:var(--radius);
box-shadow:0 8px 28px rgba(0,0,0,.18);
}
.account-item{
display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); width:100%;
text-align:left; padding:8px 10px; border:none; border-radius:var(--radius);
background:none; color:var(--ink-soft); font-size:13px;
}
.account-item:hover{ background:var(--paper); color:var(--ink); }
.account-item-split{ cursor:default; }
.account-item-split:hover{ background:none; }
.account-item-split .tiny-btn + .tiny-btn{ margin-left:4px; }
.main{padding:20px 30px 90px; max-width:900px; min-width:0;}
.main-song-view{ max-width:1200px; }
.song-view-layout{ display:flex; gap:var(--sp-5); align-items:flex-start; }
.song-main-col{ flex:1; min-width:0; }
.song-side-panel{
flex:none; width:260px; position:sticky; top:20px;
display:flex; flex-direction:column; gap:var(--sp-3);
max-height:calc(100vh - 40px); overflow-y:auto;
}
@media (max-width:1000px){
.song-view-layout{ flex-direction:column; }
.song-side-panel{ width:100%; position:static; max-height:none; }
}
@media (max-width:820px){ .main{padding:14px 14px 78px;} }
.topbar{
display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4); flex-wrap:wrap;
}
.search-wrap{
flex:1; min-width:200px; position:relative;
}
.search-wrap input{
width:100%; padding:9px 12px 9px 32px; border:1px solid var(--line-strong);
border-radius:var(--radius); background:var(--paper-raised); font-size:var(--text-base); color:var(--ink);
}
.search-wrap input:focus{outline:2px solid var(--brass); outline-offset:1px;}
.search-wrap svg{position:absolute; left:9px; top:50%; transform:translateY(-50%); opacity:.5;}
.sync-btn{
border:1px solid var(--line-strong); background:var(--paper-raised); border-radius:var(--radius);
padding:8px 12px; font-size:var(--text-sm); color:var(--ink-soft); display:flex; align-items:center; gap:var(--sp-1);
}
.sync-btn:hover{border-color:var(--brass);}
.sync-btn.offline{ color:var(--danger); border-color:var(--danger); }
.sync-btn svg{opacity:.65;}
h1.page-title{
font-family:var(--font-ui); font-weight:600; font-size:var(--text-xl); margin:0 0 4px;
}
.page-sub{color:var(--ink-soft); font-size:var(--text-base); margin:0 0 14px;}
.chips{display:flex; gap:var(--sp-2); margin-bottom:var(--sp-3); flex-wrap:wrap;}
.chip{
border:1px solid var(--line-strong); background:var(--paper-raised); color:var(--ink-soft);
padding:5px 12px; border-radius:var(--radius-pill); font-size:12.5px;
}
.chip.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.song-list{display:flex; flex-direction:column; border-top:1px solid var(--line);}
.bulk-select-bar{
position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between;
gap:var(--sp-3); padding:12px 16px; background:var(--paper-raised); border-top:1px solid var(--line-strong);
border-radius:var(--radius); margin-top:var(--sp-2); box-shadow:0 -2px 12px rgba(0,0,0,.1);
}
.song-row{
display:flex; align-items:center; gap:var(--sp-3); padding:13px 4px;
border-bottom:1px solid var(--line); background:none; border-left:none; border-right:none; border-top:none;
width:100%; text-align:left;
}
[data-context-menu-song]{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.song-row:hover{background:color-mix(in srgb, var(--ink-faint) 10%, var(--paper));}
.song-row .title-block{flex:1; min-width:0;}
.song-row .t{font-size:15.5px; font-weight:700; color:var(--ink);}
.song-row .t-alt{font-style:italic; font-size:13.5px; color:var(--ink-soft); margin-top:1px;}
.song-row .meta{display:flex; gap:var(--sp-2); align-items:center; flex:none;}
.key-pill{
font-family:var(--font-chord); font-size:var(--text-sm); font-weight:600; letter-spacing:.02em; color:var(--brass-dark);
border:1px solid var(--line-strong); border-radius:var(--radius-pill); padding:2px 8px;
}
.star-btn{
background:none; border:none; font-size:var(--text-base); color:var(--line-strong); line-height:1;
padding:0 2px; flex:none;
}
.star-btn.active{ color:var(--brass); }
.star-chip.active{ background:var(--brass); border-color:var(--brass); color:var(--paper); }
.empty-state{
padding:40px 10px; text-align:center; color:var(--ink-faint); font-size:var(--text-base);
}
.empty-state .big{font-family:var(--font-lyric); font-size:var(--text-lg); color:var(--ink-soft); margin-bottom:var(--sp-1);}
.song-header{
display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-4); flex-wrap:wrap;
padding-bottom:12px; border-bottom:2px solid var(--ink);
margin-bottom:var(--sp-4);
}
.back-link{
display:flex; align-items:center; gap:var(--sp-1); font-size:var(--text-sm); color:var(--ink-soft);
background:none; border:none; padding:0; margin-bottom:var(--sp-2);
}
.back-link:hover{color:var(--ink);}
.song-title-en{font-family:var(--font-display); font-weight:700; font-size:var(--text-2xl); line-height:1.15;}
.song-title-alt{font-style:italic; font-size:var(--text-lg); color:var(--brass-dark); margin-top:var(--sp-1);}
.song-tags{margin-top:var(--sp-2); display:flex; gap:var(--sp-1); flex-wrap:wrap;}
.ref-link{
display:inline-flex; align-items:center; gap:var(--sp-1); margin-top:var(--sp-2);
font-size:12.5px; color:var(--brass-dark); text-decoration:none;
}
.ref-link:hover{ text-decoration:underline; }
.tempo-display{
display:inline-flex; align-items:center; gap:var(--sp-1); margin-top:var(--sp-1);
font-size:var(--text-sm); color:var(--ink-soft); font-family:var(--font-data); font-variant-numeric:tabular-nums;
}
.metronome-pulse-dot{
width:12px; height:12px; border-radius:50%; background:var(--line-strong); flex:none;
}
.metronome-pulse-dot.pulse-flash{ animation:metronomeFlash .12s ease-out; }
.metronome-pulse-dot.pulse-flash.pulse-strong{ animation-name:metronomeFlashStrong; }
@keyframes metronomeFlash{ 0%{ background:var(--brass); transform:scale(1.3); } 100%{ background:var(--line-strong); transform:scale(1); } }
@keyframes metronomeFlashStrong{ 0%{ background:var(--rubric); transform:scale(1.5); } 100%{ background:var(--line-strong); transform:scale(1); } }
.tempo-pulse{
width:8px; height:8px; border-radius:50%; background:var(--brass);
animation-name:tempoPulse; animation-iteration-count:infinite; animation-timing-function:ease-in-out;
}
@keyframes tempoPulse{ 0%,100%{ opacity:.3; transform:scale(.85); } 50%{ opacity:1; transform:scale(1.15); } }
.presence-indicator{
display:inline-flex; align-items:center; gap:var(--sp-1); margin-top:var(--sp-1);
font-size:var(--text-sm); color:var(--green); font-family:var(--font-ui);
}
.presence-dot{
width:7px; height:7px; border-radius:50%; background:var(--green);
animation:presencePulse 2s ease-in-out infinite;
}
@keyframes presencePulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
.capo-hint{ font-size:11.5px; color:var(--ink-faint); text-align:right; margin-top:-2px; }
.perf-mode{
position:fixed; inset:0; z-index:500; background:var(--paper);
display:flex; flex-direction:column; padding:0 22px 40px; overflow-y:auto;
}
.perf-topbar{
display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2) var(--sp-3);
flex-wrap:wrap; position:absolute; top:0; left:0; right:0; background:var(--paper); z-index:2;
padding:18px 22px 8px; max-height:70vh; overflow-y:auto;
transition:transform .22s ease, opacity .18s ease;
}
.perf-topbar.collapsed{ transform:translateY(-100%); opacity:0; pointer-events:none; }
.perf-topbar-row{ display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.perf-group{ display:inline-flex; align-items:center; gap:4px; }
.perf-display-panel{
flex-basis:100%; display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4);
padding:var(--sp-2) var(--sp-3); border:1px solid var(--line-strong);
border-radius:var(--radius); background:var(--paper-raised);
}
.perf-display-row{ display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-ui); font-size:var(--text-sm); color:var(--ink-soft); margin:0; }
.perf-display-row select{ padding:5px 8px; }
.perf-bar-handle{
position:fixed; top:10px; left:10px; z-index:502; width:40px; height:40px; border-radius:50%;
border:1px solid var(--line-strong); background:var(--paper-raised); color:var(--ink-soft);
font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center;
box-shadow:0 2px 10px rgba(0,0,0,.12);
}
@media (prefers-reduced-motion: reduce){ .perf-topbar{ transition:none; } }
@media (max-width:520px){ .perf-exit-label{ display:none; } .perf-exit{ padding:8px 10px; } }
.perf-title{ font-family:var(--font-display); font-size:var(--text-lg); font-weight:700; color:var(--ink); }
.perf-pos{ font-family:var(--font-data); font-variant-numeric:tabular-nums; font-size:var(--text-sm); font-weight:400; color:var(--ink-faint); }
.perf-exit{
display:flex; align-items:center; gap:var(--sp-1); border:1px solid var(--line-strong);
background:var(--paper-raised); color:var(--ink-soft); padding:8px 14px;
border-radius:var(--radius); font-size:var(--text-sm);
}
.perf-controls{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.perf-body{
flex:1; font-family:var(--font-lyric); line-height:1.25;
max-width:820px; margin:0 auto; width:100%; overflow-x:auto;
padding-top:calc(var(--perf-bar-h, 120px) + var(--sp-3));
scroll-padding-top:var(--perf-bar-h, 120px);
}.stage-drummer-view{ text-align:center; padding-top:40px; }
.stage-drummer-tempo{ font-family:var(--font-data); font-variant-numeric:tabular-nums; font-weight:700; font-size:48px; color:var(--brass); margin-bottom:var(--sp-6); }
.stage-drummer-sections{ display:flex; flex-direction:column; gap:var(--sp-4); align-items:center; }
.stage-drummer-section{ font-family:var(--font-ui); font-weight:700; font-size:var(--text-2xl); color:var(--ink); }
.stage-sound-view{ max-width:420px; margin:40px auto; }
.stage-sound-row{ display:flex; justify-content:space-between; gap:var(--sp-4); padding:12px 0; border-bottom:1px solid var(--line); font-size:var(--text-base); }
.stage-sound-row span:first-child{ color:var(--ink-faint); font-family:var(--font-ui); font-size:var(--text-sm); text-transform:uppercase; letter-spacing:.05em; }
.perf-nav-btn{
position:fixed; top:50%; transform:translateY(-50%); width:46px; height:46px;
border-radius:50%; border:1px solid var(--line-strong); background:var(--paper-raised);
color:var(--ink-soft); display:flex; align-items:center; justify-content:center; z-index:501;
}
.perf-nav-btn:hover{ border-color:var(--brass); color:var(--ink); }
.perf-nav-btn[disabled]{ opacity:.2; pointer-events:none; }
.perf-prev{ left:16px; }
.perf-next{ right:16px; }
.perf-next svg{ transform:rotate(180deg); }
@media (max-width:820px){
.perf-mode{ padding:0 16px 32px; }
.perf-topbar{ padding:14px 16px 8px; }
.perf-nav-btn{ width:40px; height:40px; }
.perf-prev{ left:8px; } .perf-next{ right:8px; }
}
.projector-mode{
position:fixed; inset:0; z-index:600;
background-color:var(--proj-bg, #000);
background-image:var(--proj-bg-image, none);
background-size:cover; background-position:center;
display:flex; flex-direction:column; align-items:var(--proj-align-items, center); justify-content:center;
padding:60px; text-align:var(--proj-text-align, center); overflow:hidden;
}
.projector-title{
position:absolute; top:34px; left:0; right:0; text-align:center;
font-family:var(--font-display); font-size:var(--text-xl); color:#6B6558; letter-spacing:.02em;
}
.projector-section-label{ color:var(--brass); font-weight:600; }
.projector-body{
font-family:var(--proj-font, var(--font-lyric)); font-size:var(--proj-size, 52px); line-height:1.5;
max-width:1100px; color:var(--proj-text, #8C8677);
animation:var(--proj-anim, projectorSlideUp) .5s ease;
}
@keyframes projectorSlideUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes projectorFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes projectorSlideSide{ from{ opacity:0; transform:translateX(24px); } to{ opacity:1; transform:translateX(0); } }
@keyframes projectorNone{ from{ opacity:1; } to{ opacity:1; } }
.projector-line{ transition:color .5s ease, transform .5s ease; margin-bottom:.25em; }
.projector-line.active{ color:var(--proj-active, var(--brass)); transform:scale(1.04); }
.projector-exit{
position:fixed; top:20px; right:20px; width:42px; height:42px; border-radius:50%;
border:1px solid #333; background:rgba(255,255,255,.04); color:#6B6558;
display:flex; align-items:center; justify-content:center; z-index:601;
}
.projector-exit:hover{ border-color:var(--brass); color:var(--brass); }
.projector-waiting{ gap:var(--sp-4); }
.projector-org-logo-big{ max-width:220px; max-height:140px; object-fit:contain; }
.projector-org-logo-corner{
position:fixed; max-width:120px; max-height:60px; object-fit:contain; opacity:.85; z-index:601;
top:var(--proj-logo-top, auto); bottom:var(--proj-logo-bottom, 20px);
left:var(--proj-logo-left, 20px); right:var(--proj-logo-right, auto);
}
.projector-waiting-title{ font-family:var(--font-display); font-size:var(--text-2xl); color:#8C8677; margin-top:var(--sp-4); }
.projector-waiting-sub{ font-family:var(--font-ui); font-size:var(--text-base); color:#4A463C; margin-top:var(--sp-2); }
@media (max-width:820px){
.projector-mode{ padding:30px 20px; }
.projector-body{ font-size:var(--text-2xl); }
.projector-title{ font-size:var(--text-base); top:20px; }
}
.rehearsal-mode{
position:fixed; inset:0; z-index:600; background:var(--paper);
display:flex; flex-direction:column; align-items:center; padding:20px 22px 40px; overflow-y:auto;
}
.rehearsal-title{ font-family:var(--font-display); font-size:var(--text-lg); margin:8px 0 14px; text-align:center; }
.pitch-panel{
display:flex; flex-direction:column; align-items:center; gap:var(--sp-2);
background:var(--paper-raised); border:1px solid var(--line-strong); border-radius:var(--radius-surface);
padding:20px; margin-bottom:var(--sp-4); width:100%; max-width:340px;
}
.pitch-note{ font-family:var(--font-data); font-variant-numeric:tabular-nums; font-size:48px; font-weight:600; color:var(--ink); line-height:1; }
.pitch-meter{
position:relative; width:100%; height:8px; background:var(--line); border-radius:var(--radius-control); margin:6px 0;
}
.pitch-meter-center{
position:absolute; left:50%; top:-4px; width:2px; height:16px; background:var(--ink-faint); transform:translateX(-50%);
}
.pitch-cents-needle{
position:absolute; top:-6px; left:50%; width:4px; height:20px; border-radius:var(--radius-control);
background:var(--brass); transform:translateX(-50%); transition:left .1s linear;
}
.pitch-status{ font-family:var(--font-ui); font-size:var(--text-sm); font-weight:600; color:var(--ink-soft); }
.pitch-status.good{ color:var(--green); }
.pitch-status.off-pitch{ color:var(--brass); }
.pitch-status.wrong-key{ color:var(--rubric); }
.rehearsal-lyrics{
font-family:var(--font-lyric); font-size:calc(19px * var(--font-scale)); line-height:1.5;
max-width:640px; width:100%; color:var(--ink-soft); overflow-x:auto;
}
.tagpill{font-size:var(--text-xs); color:var(--green); border:1px solid color-mix(in srgb, var(--green) 35%, var(--paper)); background:color-mix(in srgb, var(--green) 12%, var(--paper)); padding:2px 8px; border-radius:var(--radius-pill);}
.chat-modal{ display:flex; flex-direction:column; }
.chat-messages{
display:flex; flex-direction:column; gap:var(--sp-2); max-height:340px; min-height:200px;
overflow-y:auto; padding:4px 2px; margin:10px 0;
}
.chat-msg{ max-width:82%; align-self:flex-start; }
.chat-msg.mine{ align-self:flex-end; text-align:right; }
.chat-msg-author{ font-size:10.5px; color:var(--ink-faint); margin-bottom:2px; }
.chat-msg-text{
display:inline-block; background:var(--paper-raised); border:1px solid var(--line);
border-radius:var(--radius-surface); padding:7px 12px; font-size:13.5px; color:var(--ink); text-align:left;
}
.chat-msg.mine .chat-msg-text{ background:rgba(211,164,78,.14); border-color:var(--brass); }
.chat-input-row{ display:flex; gap:var(--sp-2); }
.notif-badge{
position:absolute; top:-4px; right:-4px; background:var(--rubric); color:#fff;
font-size:var(--text-xs); font-weight:700; min-width:16px; height:16px; border-radius:var(--radius-pill);
display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.chat-input-row input{ flex:1; }
.song-controls{display:flex; flex-direction:column; gap:var(--sp-2); align-items:flex-end;}
.control-row{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;}
.control-row label{font-size:var(--text-sm); color:var(--ink-soft);}
select.key-select{
font-family:var(--font-chord); font-size:var(--text-base); padding:5px 8px;
border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--paper-raised);
color:var(--rubric); font-weight:600;
}
.icon-btn{
display:flex; align-items:center; gap:var(--sp-1); border:1px solid var(--line-strong);
background:var(--paper-raised); padding:6px 11px; border-radius:var(--radius); font-size:12.5px; color:var(--ink-soft);
}
.icon-btn:hover{border-color:var(--brass); color:var(--ink);}
.icon-btn.reset{opacity:.8;}
.song-body{
font-family:var(--font-lyric); font-size:calc(18px * var(--font-scale)); line-height:1.15;
overflow-x:auto;
}
.line{display:flex; flex-wrap:wrap; align-items:flex-end; row-gap:2px;}
.seg-word{display:inline-flex; flex:none; align-items:flex-end;}
.seg{display:inline-flex; flex-direction:column; align-items:flex-start; white-space:pre; flex:none;}
.chord-bubble-placeholder{
display:inline-block; font-family:var(--font-chord); font-size:1em; font-weight:600;
border:1px solid transparent; visibility:hidden; line-height:1.1; margin-bottom:-1px;
width:0; padding:0; overflow:hidden;
}
.chord-bubble{
display:inline-block; font-family:var(--font-chord); font-weight:600; font-size:1em;
color:var(--rubric); background:rgba(226,114,107,.14); border-radius:var(--radius-control);
padding:0 5px; border:1px solid transparent;
line-height:1.1; margin-bottom:-1px;
user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.chord-bubble.editable{ cursor:pointer; }
.chord-bubble.touch-dragging{ transform:scale(1.15); box-shadow:0 4px 12px rgba(0,0,0,.35); opacity:.9; }
.chord-bubble[draggable="true"]{ cursor:grab; -webkit-user-drag:element; user-select:none; -webkit-user-select:none; }
.chord-bubble[draggable="true"]:active{ cursor:grabbing; }
.chord-bubble.editable:hover, .chord-bubble.editable:focus{
background:rgba(226,114,107,.28); border-color:var(--rubric);
}
.chord-edit-input{
font-family:var(--font-chord); font-weight:600; font-size:1em; color:var(--rubric);
background:var(--paper-raised); border:1px solid var(--rubric); border-radius:var(--radius-control);
padding:0 5px; width:5em; box-sizing:content-box;
}
.section-header{
font-family:var(--font-display); font-weight:700; font-size:calc(12.5px * var(--font-scale)); letter-spacing:.04em;
color:var(--brass-dark); margin:10px 0 4px; scroll-margin-top:var(--sp-5);
}
.copied-from{ font-family:var(--font-ui); font-size:12.5px; color:var(--ink-faint); margin-top:2px; }
.copied-from .link-btn{ font-size:12.5px; }
.cross-org-actions{ flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.cross-org-row .title-block{ min-width:0; }
@media (max-width:560px){
.cross-org-row{ flex-wrap:wrap; }
.cross-org-actions{ width:100%; justify-content:flex-start; margin-top:6px; }
}
.version-tag{
display:inline-block; font-family:var(--font-ui); font-size:11.5px; font-weight:600; vertical-align:2px;
color:var(--brass-dark); border:1px solid color-mix(in srgb, var(--brass) 40%, transparent);
border-radius:999px; padding:0 7px; margin-left:4px;
}
.version-count{ font-family:var(--font-ui); font-size:11.5px; color:var(--ink-faint); white-space:nowrap; }
.version-chips{ margin-top:6px; }
.version-chips .chip-meta{ font-family:var(--font-chord); font-size:.85em; opacity:.7; margin-left:2px; }
.chords-only-row{ align-items:center; }
.chords-only-row .bar-sep{
white-space:pre; font-family:var(--font-chord); font-weight:600; color:var(--ink-faint);
font-size:.95em; line-height:1.1;
}
.time-change{
display:inline-block; font-family:var(--font-data); font-variant-numeric:tabular-nums; font-weight:700;
font-size:calc(12px * var(--font-scale)); color:var(--brass-dark);
border:1px solid color-mix(in srgb, var(--brass) 45%, transparent); border-radius:999px;
padding:1px 8px; margin:6px 0 4px;
}
.time-change::before{ content:'Time '; font-weight:600; opacity:.75; }
.section-nav{
position:fixed; top:50%; transform:translateY(-50%);
right:max(14px, calc(100vw - var(--sidebar-w) - 900px - 40px));
display:flex; flex-direction:column; gap:var(--sp-1); z-index:30;
}
.section-nav button{
width:30px; height:30px; border-radius:50%; border:1px solid var(--line-strong);
background:var(--paper-raised); color:var(--ink-soft); font-size:10.5px; font-weight:600;
display:flex; align-items:center; justify-content:center; font-family:var(--font-ui);
}
.section-nav button:hover{ border-color:var(--brass); color:var(--ink); }
@media (max-width:980px){
.section-nav{
display:flex; position:sticky; top:0; right:auto; transform:none;
flex-direction:row; overflow-x:auto; gap:var(--sp-2); z-index:35;
background:var(--paper); padding:10px 0 8px; margin-bottom:var(--sp-1);
-webkit-overflow-scrolling:touch;
}
.section-nav button{ flex:none; width:auto; height:auto; border-radius:var(--radius-pill); padding:6px 14px; }
}
.section-nav.perf{
position:fixed; top:76px; right:14px; z-index:502; transform:none;
}
@media (max-width:980px){
.section-nav.perf{
position:fixed; top:auto; bottom:70px; right:8px; left:auto;
flex-direction:column; overflow:visible; background:none; padding:0; margin:0;
}
.section-nav.perf button{ width:28px; height:28px; border-radius:50%; padding:0; }
}
.line-wrap{ position:relative; }
.conductor-line{ transition:background-color .4s ease, box-shadow .4s ease; border-radius:var(--radius-control); }
.conductor-line.conductable{ cursor:pointer; }
.conductor-line.conductable:hover{ background:rgba(211,164,78,.07); }
.conductor-line.active{
background:rgba(211,164,78,.16); box-shadow:inset 3px 0 0 var(--brass);
padding-left:8px; margin-left:-8px;
}
.line-row{ display:flex; align-items:flex-start; gap:var(--sp-1); }
.line-content{ flex:1; min-width:0; }
.note-add-btn{
flex:none; width:18px; height:18px; border-radius:50%; border:1px solid var(--line-strong);
background:none; color:var(--ink-faint); font-size:var(--text-xs); line-height:1; opacity:.45;
display:flex; align-items:center; justify-content:center; margin-top:var(--sp-1);
}
.note-add-btn:hover{ opacity:1; border-color:var(--note); color:var(--note); }
.line-note{
font-family:var(--font-ui); font-size:var(--text-sm); line-height:1.4; color:var(--note);
background:var(--note-bg); border-left:2px solid var(--note); padding:3px 8px;
margin:2px 0 5px; border-radius:var(--radius-control); cursor:pointer; max-width:80%;
}
.note-edit-row{ display:flex; gap:var(--sp-1); align-items:flex-start; margin:4px 0 6px; }
.note-edit-row textarea{
flex:1; font-family:var(--font-ui); font-size:var(--text-sm); padding:5px 8px;
border:1px solid var(--note); border-radius:var(--radius-control); background:var(--paper-raised);
color:var(--ink); resize:vertical;
}
.song-setlist-nav{
margin-top:var(--sp-4); padding-top:14px; border-top:1px solid var(--line);
display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
}
.setlist-nav-pos{ font-size:11.5px; color:var(--ink-faint); text-align:center; flex:1; }
.setlist-nav-btn{
display:flex; align-items:center; gap:var(--sp-1); border:1px solid var(--line-strong);
background:var(--paper-raised); border-radius:var(--radius); padding:8px 12px;
font-size:12.5px; color:var(--ink-soft); max-width:38%;
}
.setlist-nav-btn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.setlist-nav-btn:hover{ border-color:var(--brass); color:var(--ink); }
.setlist-nav-btn.next svg{ transform:rotate(180deg); }
.setlist-card{
border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--paper-raised);
padding:14px 16px; margin-bottom:var(--sp-2); display:flex; align-items:center; gap:var(--sp-3); cursor:pointer;
}
.setlist-card:hover{border-color:var(--brass);}
.setlist-card .n{font-family:var(--font-ui); font-size:var(--text-lg); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.setlist-card .d{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
.setlist-card .count{margin-left:auto; font-size:var(--text-sm); color:var(--ink-faint); flex:none;}
.setlist-card > div:first-child{ flex:1; min-width:0; }
.set-builder-split{ display:flex; gap:var(--sp-3); }
.set-builder-panel{
flex:1; min-width:0; border:1px solid var(--line-strong); border-radius:var(--radius);
padding:10px; max-height:340px; overflow-y:auto;
}
.set-builder-panel.drag-over{ border-color:var(--brass); background:color-mix(in srgb, var(--brass) 6%, var(--paper)); }
.set-builder-list{ display:flex; flex-direction:column; gap:2px; }
.set-builder-item{
display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
padding:8px 6px; border-radius:var(--radius); font-size:13.5px; cursor:grab;
}
.set-builder-item:hover{ background:color-mix(in srgb, var(--ink-faint) 10%, var(--paper)); }
.set-builder-item .t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:820px){ .set-builder-split{ flex-direction:column; } .set-builder-panel{ max-height:220px; } }
.setlist-song-row.set-editor-row{ flex-wrap:wrap; row-gap:6px; }
.setlist-song-row.set-editor-row .t{ flex:1 1 150px; min-width:120px; white-space:normal; overflow-wrap:anywhere; cursor:default; }
@media (max-width:560px){
.setlist-song-row.set-editor-row .t{ flex:1 1 calc(100% - 44px); }
.setlist-song-row.set-editor-row select{ flex:1 1 auto; max-width:none; margin-left:32px; }
}
.setlist-song-row{
display:flex; align-items:center; gap:var(--sp-3); padding:11px 4px; border-bottom:1px solid var(--line);
}
.setlist-song-row select{ flex:none; max-width:120px; }
.setlist-song-row.drag-over{ background:color-mix(in srgb, var(--brass) 10%, var(--paper)); }
.drag-handle{ flex:none; color:var(--ink-faint); cursor:grab; display:flex; }
.drag-handle:active{ cursor:grabbing; }
.setlist-song-row.now-playing{ background:rgba(114,181,147,.08); }
.now-playing-badge{
flex:none; display:flex; align-items:center; gap:var(--sp-1); font-size:var(--text-xs); font-weight:600;
color:var(--green); background:rgba(114,181,147,.15); padding:2px 8px; border-radius:var(--radius-pill);
}
.icon-btn.following{ border-color:var(--green); color:var(--green); }
.lead-btn.leading{ border-color:var(--green); color:var(--green); font-weight:600; }
.lead-hint{
margin-top:var(--sp-3); padding:8px 12px; border-radius:var(--radius);
background:rgba(114,181,147,.12); color:var(--ink); font-size:var(--text-sm);
}
.lead-bar{
display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
margin:var(--sp-2) 0 var(--sp-3); padding:8px 10px; border-radius:var(--radius);
background:rgba(114,181,147,.12); border:1px solid rgba(114,181,147,.45);
}
.lead-bar.off{ background:none; border-color:var(--line); }
.lead-bar-label{ flex:1; text-align:center; font-weight:600; color:var(--green); font-size:var(--text-sm); white-space:nowrap; }
.lead-bar-hint{ flex:1; font-size:var(--text-xs); color:var(--ink-faint); min-width:160px; }
.lead-bar .tiny-btn{ min-height:40px; padding:0 12px; }
.lead-bar .lead-next{ font-weight:700; border-color:var(--green); color:var(--green); }
.icon-btn.active, .tiny-btn.active{ border-color:var(--brass); color:var(--brass); }
.order-num{
font-family:var(--font-data); font-variant-numeric:tabular-nums; font-size:var(--text-sm); color:var(--ink-faint); width:20px; flex:none;
}
.setlist-song-row .t{font-size:var(--text-base); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer;}
.setlist-song-row .t:hover{color:var(--brass-dark);}
.tiny-btn{border:1px solid var(--line-strong); background:var(--paper-raised); border-radius:var(--radius); font-size:var(--text-xs); padding:4px 7px; color:var(--ink-soft);}
html.org-theme-transition,
html.org-theme-transition body{
transition: background-color 1.6s cubic-bezier(.22,.61,.36,1),
color 1.6s cubic-bezier(.22,.61,.36,1);
}
.org-welcome{
position:fixed; inset:0; z-index:9999;
display:flex; align-items:center; justify-content:center;
background:#0C0C0C;
animation:orgWelcomeWash 1.8s cubic-bezier(.22,.61,.36,1) forwards;
pointer-events:none;
}
.org-welcome-inner{ text-align:center; animation:orgWelcomeIn .55s cubic-bezier(.22,.61,.36,1) both; }
.org-welcome-name{
font-family:var(--font-display); font-weight:700;
font-size:clamp(28px, 6vw, 52px); letter-spacing:-.015em; color:#F5F1E8;
}
@keyframes orgWelcomeIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes orgWelcomeWash{
0%   { background-color:#0C0C0C; opacity:1; }
40%  { background-color:color-mix(in srgb, var(--welcome-accent, #D3A44E) 20%, #0C0C0C); opacity:1; }
68%  { background-color:color-mix(in srgb, var(--welcome-accent, #D3A44E) 20%, #0C0C0C); opacity:1; }
100% { background-color:color-mix(in srgb, var(--welcome-accent, #D3A44E) 20%, #0C0C0C); opacity:0; visibility:hidden; }
}
@media (prefers-reduced-motion: reduce){
html.org-theme-transition, html.org-theme-transition body{ transition:none; }
.org-welcome{ animation-duration:.8s; }
.org-welcome-inner{ animation:none; }
}
.notation-toolbar{ display:flex; align-items:stretch; gap:0; flex-wrap:wrap; background:var(--paper-raised); border:1px solid var(--line-strong); border-radius:var(--radius); padding:6px; margin-top:var(--sp-2); }
.notation-toolbar-group{ display:flex; align-items:center; gap:2px; padding:0 10px; border-right:1px solid var(--line); }
.notation-toolbar-group:last-child{ border-right:none; }
.notation-icon-btn{
display:flex; align-items:center; justify-content:center; width:38px; height:38px;
border:1px solid transparent; background:none; border-radius:var(--radius-control); color:var(--ink-soft);
}
.notation-icon-btn:hover{ background:var(--line); }
.notation-icon-btn.active{ background:var(--brass); color:var(--paper); }
.notation-icon-btn:disabled{ opacity:.35; cursor:default; }
.notation-icon-btn svg{ display:block; }
@media (max-width:820px){
.tiny-btn{ padding:9px 11px; font-size:12.5px; min-height:36px; }
}
.tiny-btn:hover{border-color:var(--brass);}
.tiny-btn.danger:hover{border-color:var(--danger); color:var(--danger);}
.btn{
border:1px solid var(--ink); background:var(--ink); color:var(--paper);
padding:9px 16px; border-radius:var(--radius); font-size:13.5px; font-weight:500;
}
.btn:hover{background:color-mix(in srgb, var(--ink) 85%, var(--paper));}
.btn.secondary{background:var(--paper-raised); color:var(--ink); border-color:var(--line-strong);}
.btn.secondary:hover{border-color:var(--brass);}
.btn.danger{background:var(--paper-raised); color:var(--danger); border-color:color-mix(in srgb, var(--danger) 40%, var(--paper));}
.btn.danger:hover{background:color-mix(in srgb, var(--danger) 14%, var(--paper));}
.btn[disabled]{opacity:.45; cursor:not-allowed;}
.overlay{
position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:700;
display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal{
background:var(--paper-raised); border-radius:var(--radius); max-width:560px; width:100%;
max-height:88vh; overflow:auto; padding:22px 24px; border:1px solid var(--line-strong);
}
.modal h2{font-family:var(--font-ui); font-size:var(--text-xl); margin:0 0 4px;}
.modal .modal-sub{font-size:var(--text-sm); color:var(--ink-soft); margin:0 0 12px;}
.field{margin-bottom:var(--sp-2);}
.field label{display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:var(--sp-1);}
.field input[type=text], .field input[type=date], .field input[type=time], .field input[type=email], .field input[type=number], .field input[type=url], .field input[type=search], .field select, .field textarea{
width:100%; padding:8px 10px; border:1px solid var(--line-strong); border-radius:var(--radius);
background:var(--paper); font-size:var(--text-base); color:var(--ink);
}
.field textarea{font-family:var(--font-ui); font-size:var(--text-sm); line-height:1.6; resize:vertical;}
#f-content{
font-family:ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
white-space:pre; overflow-wrap:normal; overflow-x:auto; font-size:var(--text-sm); line-height:1.5;
}
.editor-tabs{ display:flex; gap:var(--sp-1); margin-bottom:var(--sp-2); }
.editor-tab{
border:1px solid var(--line-strong); background:var(--paper-raised); color:var(--ink-soft);
padding:6px 14px; border-radius:var(--radius); font-size:12.5px;
}
.editor-tab.active{ background:var(--brass); color:var(--paper); border-color:var(--brass); }
.editor-split{ display:block; }
.editor-pane-write{ width:100%; }
.editor-pane-preview{
width:100%; border:1px solid var(--line-strong); border-radius:var(--radius);
padding:12px; min-height:296px; overflow-y:auto; font-size:var(--text-base);
}
.editor-pane-write.tab-hidden, .editor-pane-preview.tab-hidden{ display:none; }
.field-hint{font-size:11.5px; color:var(--ink-faint); margin-top:var(--sp-1);}
.theme-swatch-row{ display:flex; gap:var(--sp-2); }
.projector-theme-preview{
background-color:var(--pt-preview-bg, #000);
background-image:var(--pt-preview-bg-image, none);
background-size:cover; background-position:center;
border-radius:var(--radius); padding:24px 16px;
text-align:var(--pt-preview-align, center); margin-bottom:var(--sp-2); overflow:hidden;
}
.projector-theme-preview-line{
font-family:var(--pt-preview-font, var(--font-lyric)); font-size:calc(var(--pt-preview-size, 52px) * 0.3);
color:var(--pt-preview-text, #8C8677); line-height:1.5;
}
.projector-theme-preview-line.active{ color:var(--pt-preview-active, #D3A44E); }
.theme-editor-grid{ display:flex; gap:var(--sp-4); }
.conflict-diff-pane{
font-family:ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
font-size:12.5px; line-height:1.6; background:var(--paper); border:1px solid var(--line-strong);
border-radius:var(--radius); padding:10px; max-height:320px; overflow-y:auto; white-space:pre-wrap;
}
.theme-editor-grid input[type=color]{ width:100%; height:32px; padding:0; border:1px solid var(--line-strong); border-radius:var(--radius); background:none; cursor:pointer; }
.preset-gallery{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.preset-swatch{
width:44px; height:44px; border-radius:var(--radius); border:2px solid var(--line-strong);
font-family:var(--font-lyric); font-size:var(--text-base); font-weight:600; flex:none;
}
.preset-swatch:hover{ border-color:var(--brass); }
.org-picker-list{ display:flex; flex-direction:column; gap:var(--sp-2); }
.org-picker-card{
display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
padding:16px 18px; border:1px solid var(--line-strong); border-radius:var(--radius);
background:var(--paper-raised); font-size:var(--text-base); font-weight:500; color:var(--ink);
text-align:left;
}
.org-picker-card > span:first-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.org-picker-card:hover{ border-color:var(--brass); }
.context-menu-backdrop{ position:fixed; inset:0; z-index:200; }
.context-menu-sep{ height:1px; background:var(--line); margin:4px 0; }
.context-menu{
position:fixed; z-index:201; background:var(--paper-raised); border:1px solid var(--line-strong);
border-radius:var(--radius); box-shadow:0 8px 28px rgba(0,0,0,.35); min-width:190px;
padding:5px; display:flex; flex-direction:column;
max-height:calc(100vh - 20px); overflow-y:auto;
}
.context-menu button{
display:flex; align-items:center; gap:var(--sp-2); padding:8px 10px; border-radius:var(--radius-control);
background:none; border:none; color:var(--ink); font-size:13.5px; text-align:left;
}
.context-menu button:hover{ background:color-mix(in srgb, var(--ink-faint) 12%, var(--paper)); }
.context-menu button.danger{ color:var(--danger); }
.context-menu button.danger:hover{ background:color-mix(in srgb, var(--danger) 12%, var(--paper)); }
.org-picker-arrow{ color:var(--ink-faint); flex:none; }
.theme-swatch{
width:32px; height:32px; border-radius:50%; border:2px solid transparent;
cursor:pointer; padding:0;
}
.theme-swatch.active{ border-color:var(--ink); box-shadow:0 0 0 2px var(--paper); }
.modal-actions{display:flex; justify-content:flex-end; gap:var(--sp-2); margin-top:var(--sp-3); flex-wrap:wrap;}
.editor-title-row{ display:flex; gap:var(--sp-3); align-items:flex-end; }
.editor-title-field{ flex:1; min-width:0; }
.editor-key-field{ flex:none; width:120px; }
.editor-more{ margin-top:var(--sp-3); }
.editor-more > summary{ margin-bottom:0; }
.editor-more[open] > summary{ margin-bottom:var(--sp-2); }
.editor-actions{
position:sticky; bottom:-22px; margin:var(--sp-3) -24px -22px; padding:12px 24px;
background:var(--paper-raised); border-top:1px solid var(--line); z-index:2;
}
@media (max-width:520px){ .editor-key-field{ width:96px; } }
.toast{
position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
background:var(--ink); color:var(--paper); padding:10px 18px; border-radius:var(--radius);
font-size:var(--text-sm); z-index:800; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
display:flex; align-items:center; gap:var(--sp-2);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px); pointer-events:auto;}
.toast-action{
background:none; border:1px solid var(--paper); color:var(--paper);
border-radius:var(--radius-pill); padding:3px 11px; font-size:var(--text-sm); font-weight:600;
}
.toast-action:hover{ background:var(--paper); color:var(--ink); }
#print-area{display:none;}
@media print{
body *{visibility:hidden;}
#print-area, #print-area *{visibility:visible;}
#print-area{display:block; position:absolute; left:0; top:0; width:100%; padding:0 8mm;}
.print-song{page-break-after:always; padding-top:10mm;}
.print-song:last-child{page-break-after:auto;}
.print-title{font-family:var(--font-display); font-size:var(--text-xl); font-weight:700; margin-bottom:2px;}
.print-title-alt{font-style:italic; font-size:var(--text-sm); color:#8B611F; margin-bottom:var(--sp-2);}
.print-key{font-family:var(--font-ui); font-size:var(--text-sm); color:#8B2E2E; margin-bottom:var(--sp-3);}
.print-body{font-family:var(--font-lyric); font-size:var(--text-base); line-height:1.8;}
.print-body .chord-bubble{color:#8B2E2E; font-weight:600; background:none; padding:0; border:none;}
.print-part{ margin-top:14px; break-inside:avoid; page-break-inside:avoid; }
.print-part-name{ font-family:var(--font-ui); font-size:11px; font-weight:600;
text-transform:uppercase; letter-spacing:.08em; color:#555; margin-bottom:4px; }
.print-staff{ background:#fff; }
.print-staff svg{ max-width:100%; }
.print-chord-grid{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-4); padding-bottom:12px; border-bottom:1px solid #ddd; }
.print-chord-cell{ text-align:center; }
.print-chord-name{ font-family:var(--font-lyric); font-size:var(--text-xs); font-weight:600; color:#221E18; margin-bottom:2px; }
.print-chord-cell svg{
--ink:#221E18; --ink-soft:#5A5548; --ink-faint:#8A8578;
--line-strong:#ccc; --rubric:#8B2E2E; --paper:#fff;
}
.print-summary{ padding:10px 0; }
.print-summary-table{ width:100%; border-collapse:collapse; margin-top:var(--sp-4); font-family:var(--font-ui); }
.print-summary-table th{ text-align:left; font-size:var(--text-xs); color:#8A8578; font-weight:600; border-bottom:2px solid #221E18; padding:6px 8px; }
.print-summary-table td{ font-size:var(--text-base); color:#221E18; padding:8px; border-bottom:1px solid #ddd; }
.print-summary-num{ width:28px; color:#8A8578; }
.print-summary-key{ width:60px; font-weight:600; }
.print-summary-dur{ width:70px; text-align:right; color:#5A5548; }
.print-summary-table tfoot td{ font-weight:600; border-top:2px solid #221E18; border-bottom:none; }
.print-cover{
display:flex; flex-direction:column; align-items:center; justify-content:center;
height:250mm; text-align:center;
}
.print-cover-title{font-family:var(--font-display); font-size:var(--text-2xl); font-weight:700;}
.print-cover-subtitle{font-family:var(--font-ui); font-size:var(--text-sm); color:#5C5346; margin-top:var(--sp-2);}
.print-cover-org{font-family:var(--font-ui); font-size:var(--text-xs); color:#8C8272; margin-top:44px; letter-spacing:.03em;}
.print-toc-row{font-family:var(--font-data); font-variant-numeric:tabular-nums; font-size:var(--text-base); margin-bottom:var(--sp-2);}
@page{
margin: 16mm 14mm 18mm 14mm;
@bottom-center{
content: counter(page);
font-family:var(--font-ui);
font-size: 9pt;
color: #8A8578;
}
}
.print-song.lyrics-only .print-body-lines{
column-count: 2;
column-gap: 10mm;
column-fill: auto;
}
.print-song.lyrics-only .section-header{
break-after: avoid-column;
page-break-after: avoid;
}
.print-song.lyrics-only .print-body-lines > div{
break-inside: avoid-column;
}
.print-credit{ margin-top:10px; padding-top:6px; border-top:1px solid #E3DDD1;
font-family:var(--font-ui); font-size:9.5px; color:#6A6456;
break-inside:avoid; page-break-inside:avoid; }
.print-song-number{ font-family:var(--font-ui); font-size:26px;
font-weight:700; color:#C0B8A8; float:right; line-height:1; margin-left:8mm; }
.print-toc-row{ display:flex; gap:8px; align-items:baseline; }
.print-toc-num{ flex:none; width:26px; text-align:right; color:#8A8578;
font-variant-numeric:tabular-nums; }
.print-toc-title{ flex:1; }
.print-body.has-marks{ position:relative; padding-left:11mm; }
.print-body-lines{ }
.print-marks{ position:absolute; left:0; top:0; width:9mm; }
.print-mark{ position:absolute; top:0;
font-family:var(--font-ui); font-size:12px; font-weight:700;
color:#8B2E2E; border:1px solid #8B2E2E; border-radius:2px;
width:16px; height:16px; line-height:15px; text-align:center; }
.print-notes{ margin-top:10px; padding:8px 10px; border-left:3px solid #C0B8A8;
break-inside:avoid; page-break-inside:avoid; }
.print-notes-head{ font-family:var(--font-ui); font-size:10px;
font-weight:700; text-transform:uppercase; letter-spacing:.08em;
color:#8A8578; margin-bottom:5px; }
.print-note-row{ display:flex; gap:10px; font-size:var(--text-sm); margin-bottom:3px; }
.print-note-line{ flex:0 0 42%; color:#5A5548; font-family:var(--font-lyric);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.print-note-text{ flex:1; color:#221E18; font-family:var(--font-ui); }
.print-index-grid{ column-count:2; column-gap:10mm; font-family:var(--font-data); font-variant-numeric:tabular-nums; }
.print-index-row{ display:flex; align-items:baseline; gap:4px;
font-size:var(--text-sm); margin-bottom:3px; break-inside:avoid; }
.print-index-title{ flex:none; max-width:80%; overflow:hidden;
text-overflow:ellipsis; white-space:nowrap; }
.print-index-title.alt{ font-style:italic; color:#5A5548; }
.print-index-dots{ flex:1; border-bottom:1px dotted #bbb; transform:translateY(-3px); }
.print-index-num{ flex:none; color:#221E18; font-variant-numeric:tabular-nums; }
}
.dup-list{ max-height:50vh; overflow-y:auto; border:1px solid var(--line); border-radius:var(--radius); }
.dup-row{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); cursor:pointer; }
.dup-row:last-child{ border-bottom:none; }
.dup-row input{ margin-top:3px; flex:none; }
.dup-text{ display:flex; flex-direction:column; min-width:0; }
.dup-title{ font-weight:600; overflow-wrap:anywhere; }
.dup-meta{ font-size:12px; color:var(--ink-soft); overflow-wrap:anywhere; }
.cross-org-btn{ white-space:nowrap; }
@media (max-width:560px){ .cross-org-btn-label{ display:none; } }
.editor-heading-btn{ margin-left:auto; align-self:center; }
.key-bar-top{ display:none; }
@media (max-width:1000px){
.key-bar-top{
display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
margin:var(--sp-2) 0 var(--sp-3);
}
.key-bar-label{ font-size:var(--text-sm); color:var(--ink-soft); font-weight:600; }
.key-bar-top .key-select{ min-width:84px; }
.key-step{
min-width:40px; min-height:40px; border:1px solid var(--line-strong); border-radius:var(--radius);
background:var(--paper-raised); color:var(--ink); font-size:18px; line-height:1;
}
.key-step:hover{ border-color:var(--brass); }
.song-side-panel .panel-key{ display:none; }
}
.restore-summary{ margin:10px 0; padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:var(--text-sm); }
.restore-option{ display:flex; gap:10px; align-items:flex-start; margin:10px 0; font-size:var(--text-sm); cursor:pointer; }
.restore-option input{ margin-top:3px; flex:none; }
.auto-backups{ margin-top:10px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; gap:6px; }
.auto-backup-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:var(--text-sm); flex-wrap:wrap; }
.auto-backup-meta{ color:var(--ink-soft); }
.auto-backups #backup-now-btn{ align-self:flex-start; margin-top:4px; }
.editor-find{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px; margin-bottom:var(--sp-2); border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--paper-raised); }
.editor-find input[type="text"]{ flex:1 1 140px; min-width:0; padding:6px 8px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--paper); color:var(--ink); font-size:13px; }
.editor-find-chords{ display:flex; align-items:center; gap:4px; font-size:12.5px; white-space:nowrap; }
.editor-find-count{ font-size:12px; color:var(--ink-soft); min-width:5em; }
.editor-find-actions{ display:flex; gap:4px; flex-wrap:wrap; margin-left:auto; }
.notation-loading{ padding:14px 4px; font-size:var(--text-sm); color:var(--ink-soft); }
.dup-notice{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:0 0 var(--sp-4); padding:10px 12px; border:1px solid color-mix(in srgb, var(--rubric) 40%, var(--paper)); background:color-mix(in srgb, var(--rubric) 8%, var(--paper)); border-radius:var(--radius); font-size:var(--text-sm); }
.dup-notice-actions{ display:flex; gap:6px; align-items:center; }
.dup-likely{ font-size:12px; color:var(--rubric); font-weight:600; }
.back-to-leader{
position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:650;
padding:12px 20px; border-radius:var(--radius-pill); border:1px solid var(--green);
background:var(--green); color:#fff; font-weight:700; font-size:var(--text-base);
box-shadow:0 6px 20px rgba(0,0,0,.22); min-height:46px;
}
.back-to-leader[hidden]{ display:none; }
.live-status{
position:fixed; left:0; right:0; margin:0 auto; width:fit-content; top:calc(10px + env(safe-area-inset-top, 0px)); z-index:700;
max-width:min(calc(100vw - 32px), 520px); padding:10px 16px; border-radius:var(--radius);
background:var(--rubric); color:#fff; font-size:var(--text-sm); font-weight:600; text-align:center;
box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.live-status[hidden]{ display:none; }
.perf-next-up{
margin:28px 0 12px; padding:12px 14px; border-top:1px dashed var(--line-strong);
font-family:var(--font-ui); font-size:max(15px, .62em); color:var(--ink-soft);
}
.perf-next-label{ text-transform:uppercase; letter-spacing:.06em; font-size:.8em; font-weight:700; color:var(--ink-faint); margin-right:6px; }
.perf-next-key{ display:inline-block; margin-left:6px; padding:1px 8px; border-radius:var(--radius-pill); border:1px solid var(--line-strong); font-family:var(--font-data); font-size:.85em; }
.perf-leading{ color:var(--green); font-weight:600; }
.lead-bar-count{ display:block; font-weight:500; font-size:var(--text-xs); color:var(--ink-soft); }
.start-service-btn{ font-weight:700; }
.icon-btn.start-service-btn{ border-color:var(--green); color:var(--green); }
.qr-wrap{ display:inline-block; padding:8px; background:#fff; border-radius:var(--radius-control); line-height:0; }
.qr-wrap .qr-code{ display:block; max-width:100%; height:auto; }
.qr-big{ margin:8px auto 10px; }
.audience-link{ font-family:var(--font-data); font-size:var(--text-xs); color:var(--ink-faint); word-break:break-all; margin:0 auto 4px; max-width:340px; }
.live-link-actions{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-2); }
.live-link-status{ font-size:var(--text-sm); color:var(--ink-soft); }
.live-link-status.ok{ color:var(--green); font-weight:600; }
.live-link-status.bad{ color:var(--rubric); }