:root{--background:#eef2f7;--foreground:#172033;--muted:#657287;--line:#d8dee8;--panel:#fff;--panel-soft:#f8fafc;--accent:#2563eb;--accent-strong:#1d4ed8;--accent-soft:#eaf1ff;--danger:#b42318;--drawer-width:292px;--drawer-collapsed-width:78px;--page-width:920px;--wide-page-width:1160px;--font-sans:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", Arial, sans-serif}*{box-sizing:border-box}html,body{min-height:100%}body{background:radial-gradient(circle at top left, #2563eb1f, transparent 34rem), linear-gradient(135deg, #f8fafc 0%, var(--background) 100%);color:var(--foreground);font-family:var(--font-sans);margin:0}button,input,select,textarea{font:inherit}.appShell{min-height:100vh;padding-left:var(--drawer-width);transition:padding-left .18s}.appShell.isCollapsed{padding-left:0}.mobileTopBar,.scrim{display:none}.sidebar{z-index:25;width:var(--drawer-width);border-right:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);visibility:visible;background:#ffffffeb;flex-direction:column;gap:22px;height:100vh;padding:18px 14px;transition:transform .18s,box-shadow .18s,visibility linear;display:flex;position:fixed;top:0;left:0;overflow:hidden;transform:translate(0);box-shadow:8px 0 26px #1720330d}.brand{align-items:center;min-height:54px;padding:8px 54px 8px 8px;display:flex}.brandText{min-width:0}.brandText h1{margin:0;font-size:20px;line-height:1.1}.iconButton{width:38px;height:38px;color:var(--foreground);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:999px;place-items:center;font-size:24px;font-weight:700;line-height:1;display:inline-grid}.iconButton:hover{border-color:var(--line);background:var(--panel-soft)}.desktopSidebarToggle{z-index:26;top:18px;left:calc(var(--drawer-width) - 52px);transition:left .18s,transform .18s;position:fixed}.appShell.isCollapsed .desktopSidebarToggle{left:14px;transform:translate(0)}.toolNav{gap:6px;display:grid}.toolTab{width:100%;min-height:46px;color:var(--foreground);cursor:pointer;text-align:left;background:0 0;border:1px solid #0000;border-radius:8px;padding:11px 14px}.toolTab:hover{background:var(--panel-soft)}.toolTab[aria-current=page]{background:var(--accent-soft);color:var(--accent-strong);border-color:#c9d8ff}.toolLabel{min-width:0}.toolLabel span{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-weight:800;display:inline-block;overflow:hidden}.appShell.isCollapsed .sidebar{pointer-events:none;box-shadow:none;visibility:hidden;transition:transform .18s,box-shadow .18s,visibility 0s linear .18s;transform:translate(-100%)}.contentPane{place-items:start center;min-width:0;padding:clamp(24px,5vw,56px);display:grid;overflow-x:hidden}.toolStack{width:min(var(--page-width), 100%);justify-items:center;gap:18px;display:grid}.wideResultStack{width:min(var(--wide-page-width), 100%)}.toolPage,.resultCard{width:min(var(--page-width), 100%);background:#fffffff0;border:1px solid #d8dee8c7;border-radius:8px;padding:clamp(24px,4vw,40px);box-shadow:0 24px 70px #1720331a}.resultCard{padding:clamp(18px,3vw,28px)}.wideResultStack .resultCard{width:min(var(--wide-page-width), 100%)}.heading{margin-bottom:24px}.eyebrow{color:var(--accent);text-transform:uppercase;margin:0 0 8px;font-size:13px;font-weight:800}h2{margin:0;font-size:clamp(28px,4vw,40px);line-height:1.12}.form{gap:16px;display:grid}.field{gap:10px;display:grid}label{font-weight:800}.labelLine{justify-content:space-between;align-items:center;gap:12px;display:flex}.inlineCheckbox{color:var(--muted);white-space:nowrap;align-items:center;gap:6px;font-size:13px;font-weight:700;display:inline-flex}.inputRow{gap:10px;display:flex}.optionsGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.threeColumns{grid-template-columns:repeat(3,minmax(0,1fr))}.imageMetaGrid{grid-template-columns:repeat(2,minmax(0,1fr))}input:not([type=checkbox]),select,textarea,.customSelectButton{border:1px solid var(--line);width:100%;color:var(--foreground);background:#fff;border-radius:8px}input:not([type=checkbox]),select,.customSelectButton{min-width:0;height:46px;padding:13px 14px;line-height:1.2}.customSelect{min-width:0;position:relative}.customSelect.isOpen{z-index:120}.customSelectButton{font:inherit;text-align:left;cursor:pointer;justify-content:space-between;align-items:center;gap:10px;display:flex}.customSelectButton:hover,.customSelectButton:focus-visible{border-color:#b9c9ee}.customSelectButton:focus-visible{outline-offset:2px;outline:3px solid #4373dc2e}.customSelectValue{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.customSelectValue.isPlaceholder{color:var(--muted)}.customSelectChevron{width:18px;height:18px;color:var(--muted);fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.2px;flex:none;transition:transform .16s}.customSelect.isOpen .customSelectChevron{transform:rotate(180deg)}.customSelectMenu{z-index:160;overscroll-behavior:contain;scrollbar-color:#9aa6b8 transparent;scrollbar-width:auto;background:#fff;border:1px solid #cfd7e4;border-radius:8px;padding:6px;position:fixed;overflow-y:auto;box-shadow:0 16px 34px #17203324}.customSelectMenu::-webkit-scrollbar{width:14px}.customSelectMenu::-webkit-scrollbar-track{background:0 0;border-radius:999px;margin:6px 0}.customSelectMenu::-webkit-scrollbar-thumb{background:#9aa6b8;border:4px solid #fff;border-radius:999px;min-height:28px}.customSelectMenu::-webkit-scrollbar-thumb:hover{background:#7f8a9b}.customSelectMenu::-webkit-scrollbar-button{width:0;height:0;display:none}.customSelectOption{width:100%;min-height:34px;color:var(--foreground);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:8px 10px;display:block}.customSelectOption:hover,.customSelectOption.isHighlighted{background:var(--panel-soft)}.customSelectOption.isSelected{background:var(--accent-soft);color:var(--accent-strong);font-weight:800}textarea{resize:vertical;padding:14px;line-height:1.6}.inputRow button,.copyButton{color:#fff;cursor:pointer;background:var(--accent);border:0;border-radius:8px;justify-content:center;align-items:center;font-weight:800;display:inline-grid}.inputRow button:hover:not(:disabled),.copyButton:hover:not(:disabled){background:var(--accent-strong)}button:disabled{cursor:not-allowed;opacity:.55}.inputRow button{flex:0 0 104px;height:46px}.message{margin:0;line-height:1.6}.error{color:var(--danger)}.warning{color:#9a5b00}.checkbox{color:var(--muted);align-items:center;gap:10px;font-weight:400;display:flex}.inlineCheckbox input[type=checkbox],.checkbox input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:var(--accent);flex:none;margin:0;padding:0;display:block}.result{gap:12px;display:grid}.copyButton{justify-self:start;padding:11px 16px}.songEntryPage{--entry-label-height:17.5px;width:min(var(--wide-page-width), 100%)}.songEntryPage .heading{margin-bottom:18px}.songEntryPage .entryForm{gap:12px}.songEntryPage .field{grid-template-rows:var(--entry-label-height) minmax(0, auto);align-content:start;gap:5px}.songEntryPage .optionsGrid{gap:9px 10px}.songEntryPage label{font-size:14px;line-height:1.25}.songEntryPage .field>.labelLine{height:var(--entry-label-height);min-height:var(--entry-label-height)}.songEntryPage .labelLine{align-items:center;gap:8px;line-height:1.25;overflow:visible}.songEntryPage .inlineCheckbox{gap:4px;height:1.25em;font-size:12px;line-height:1.25}.songEntryPage input:not([type=checkbox]),.songEntryPage select,.songEntryPage .customSelectButton{height:36px;padding:8px 9px;line-height:1.2}.songEntryPage .customSelectOption{min-height:30px;padding:7px 8px}.songEntryPage .inputRow button{height:36px;padding:8px 10px}.songEntryPage .inlineCheckbox input[type=checkbox],.songEntryPage .checkbox input[type=checkbox]{width:12px;height:12px;min-height:0;padding:0}.songEntryPage textarea{padding:8px 9px;line-height:1.4}.songEntryPage .colorTextareaShell{z-index:1;min-height:36px;position:relative}.songEntryPage .colorTextareaShell:focus-within{z-index:15}.songEntryPage .colorTextarea{resize:vertical;white-space:pre-wrap;min-height:36px;max-height:180px;position:absolute;inset:0 0 auto;overflow-y:hidden}.songEntryPage .sectionTitle{padding-top:2px}.songEntryPage .sectionTitle h3{font-size:17px}.songEntryPage .compactSectionTitle{padding-top:0}.songEntryPage .compactSectionTitle h3{font-size:15px}.songEntryPage .sortableList{gap:8px}.songEntryPage .staffSortableList{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}.compactHeading{justify-content:space-between;align-items:end;gap:18px;display:flex}.saveStatus{color:var(--muted);flex:none;font-size:14px}.stepTabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:22px;display:grid}.stepTab{border:1px solid var(--line);min-height:42px;color:var(--foreground);cursor:pointer;background:#fff;border-radius:8px;padding:10px 12px;font-weight:800}.stepTab[aria-selected=true]{background:var(--accent-soft);color:var(--accent-strong);border-color:#c9d8ff}.entryForm{gap:18px}.sectionTitle{justify-content:space-between;align-items:center;gap:14px;padding-top:6px;display:flex}.sectionTitle h3{margin:0;font-size:18px}.secondaryButton,.removeButton,.inputWithMiniAction button{border:1px solid var(--line);color:var(--foreground);cursor:pointer;background:#fff;border-radius:8px;justify-content:center;align-items:center;font-weight:800;display:inline-grid}.secondaryButton{height:36px;padding:8px 10px}.secondaryButton:hover:not(:disabled),.removeButton:hover:not(:disabled),.inputWithMiniAction button:hover:not(:disabled){background:var(--panel-soft)}.removeButton{flex:none;height:36px;padding:8px 10px}.sortableList{align-items:start;gap:12px;display:grid}.sortableItem{opacity:1;background:#fff;border:1px solid #cfd7e4;border-radius:8px;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;padding:10px;transition:opacity .14s,transform .16s,box-shadow .16s,border-color .16s,background-color .16s;display:grid;position:relative;transform:translateY(0);box-shadow:0 8px 24px #1720330d}.sortableItem.isDragging{border-style:dashed;border-color:var(--accent);background:var(--accent-soft);opacity:.48;transform:scale(.985);box-shadow:0 4px 14px #17203314}.sortableItem input:not([type=checkbox]),.sortableItem select,.sortableItem .customSelectButton{height:36px;padding:8px 10px;font-size:14px}.sortableItem label{font-size:13px}.songEntryPage .sortableItem{gap:8px;padding:8px}.songEntryPage .sortableItem>*{min-width:0}.dragHandle{width:24px;height:34px;color:var(--muted);cursor:grab;background:0 0;border:1px solid #0000;border-radius:6px;place-items:center;font-size:18px;line-height:1;display:inline-grid}.dragHandle:active{cursor:grabbing}.dragHandle:hover{border-color:var(--line);background:var(--panel-soft)}.inputWithMiniAction{grid-template-columns:minmax(0,1fr) auto;gap:8px;display:grid}.inputWithMiniAction button{min-width:58px;height:36px;padding:8px 10px;font-size:13px}.submissionGrid{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));align-items:center;gap:8px;display:grid}.submissionSortableItem{align-items:start}.vocalistGrid,.staffGrid{align-items:end;gap:8px;display:grid}.vocalistGrid{grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr))}.vocalistTemplateRow,.staffNameRow{grid-template-columns:minmax(0,1fr) auto;gap:8px;display:grid}.submissionActions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.submissionActions input:not([type=checkbox]){flex:0 128px;min-width:88px}.submissionActions .checkbox{min-height:36px}.staffGrid{grid-template-columns:minmax(84px,.7fr) minmax(128px,1fr)}.staffNameRow .removeButton{align-self:end}.emptyText{color:var(--muted);margin:0}.entryOutput{min-height:560px;padding-top:46px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:13px}.outputTextareaWrap{position:relative}.outputFloatingActions{z-index:2;gap:10px;display:flex;position:absolute;top:8px;right:8px}.outputIconButton{border:1px solid var(--line);width:34px;height:34px;color:var(--muted);cursor:pointer;background:#ffffffeb;border-radius:8px;place-items:center;display:inline-grid}.outputIconButton:hover{background:var(--accent-soft);color:var(--accent-strong);border-color:#c9d8ff}.outputIconButton.danger:hover{color:var(--danger);background:#fff1f0;border-color:#f3b8b2}.outputIconButton.success{color:#18794e;background:#ecfdf3;border-color:#9fd4b0}.outputIconButton svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;width:17px;height:17px}.thumbnailResult{gap:18px;display:grid}.resultHeader{justify-content:space-between;align-items:end;gap:18px;display:flex}.resultHeader h3{margin:0;font-size:24px}.resultHeader span{color:var(--muted);flex:none;font-size:14px}.thumbnailGrid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;display:grid}.thumbnailCard{border:1px solid var(--line);background:#fff;border-radius:8px;gap:12px;min-width:0;padding:12px;display:grid}.thumbnailImageWrap{aspect-ratio:16/9;background:#edf1f7;border-radius:6px;position:relative;overflow:hidden}.thumbnailImageWrap img{object-fit:contain;width:100%;height:100%;display:block}.thumbnailBadge{color:#fff;overflow-wrap:anywhere;background:#172033d1;border-radius:999px;max-width:calc(100% - 20px);padding:6px 9px;font-size:13px;font-weight:800;position:absolute;top:10px;left:10px}.thumbnailMeta{justify-content:space-between;align-items:start;gap:12px;min-width:0;display:flex}.thumbnailMeta div{gap:5px;min-width:0;display:grid}.thumbnailMeta strong,.thumbnailMeta small{overflow-wrap:anywhere}.thumbnailMeta small{color:var(--muted)}.thumbnailUrl{color:var(--muted);overflow-wrap:anywhere;font-size:13px;line-height:1.45;text-decoration:none}.thumbnailUrl:hover{color:var(--accent-strong);text-decoration:underline}@media (max-width:1180px){.songEntryPage .submissionSortableItem{grid-template-columns:24px minmax(0,1fr);align-items:start}.songEntryPage .submissionSortableItem>.submissionGrid,.songEntryPage .submissionSortableItem>.submissionActions{grid-column:2}.songEntryPage .submissionActions{grid-template-columns:minmax(0,1fr) auto auto;width:100%;display:grid}.songEntryPage .submissionActions input:not([type=checkbox]){width:100%;min-width:0}}@media (max-width:980px){.songEntryPage .sortableItem{grid-template-columns:24px minmax(0,1fr);align-items:start}.songEntryPage .sortableItem>.submissionGrid,.songEntryPage .sortableItem>.submissionActions,.songEntryPage .sortableItem>.vocalistGrid,.songEntryPage .sortableItem>.staffGrid{grid-column:2}}@media (max-width:760px){.appShell,.appShell.isCollapsed{min-height:100vh;padding-top:58px;padding-left:0;display:block}.mobileTopBar{z-index:30;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#fffffff0;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:8px;height:58px;padding:8px 14px;display:grid;position:fixed;top:0;left:0;right:0}.mobileTopBar strong{font-size:18px}.scrim{z-index:35;opacity:0;pointer-events:none;background:#1720336b;border:0;border-radius:0;transition:opacity .16s;display:block;position:fixed;inset:0}.scrim.isVisible{opacity:1;pointer-events:auto}.sidebar{z-index:40;border-right:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);visibility:visible;pointer-events:auto;background:#ffffffeb;width:min(280px,100vw - 56px);height:100vh;padding:18px 14px;transition:transform .18s;position:fixed;top:0;bottom:0;left:0;transform:translate(-105%);box-shadow:8px 0 26px #1720330d}.sidebar.isOpen{transform:translate(0)}.desktopSidebarToggle{display:none}.brand{justify-content:start;padding-inline:8px}.appShell.isCollapsed .brandText,.appShell.isCollapsed .toolLabel,.appShell.isCollapsed .toolNav{display:grid}.contentPane{padding:16px}.toolPage{padding:22px}.resultCard{padding:18px}.inputRow{flex-direction:column}.inputRow button{flex-basis:auto;padding:13px 14px}.optionsGrid,.threeColumns,.submissionGrid,.vocalistGrid,.staffGrid,.imageMetaGrid{grid-template-columns:1fr}.compactHeading,.sectionTitle{flex-direction:column;align-items:start}.songEntryPage .actionSectionTitle{flex-direction:row;align-items:center;width:100%}.songEntryPage .actionSectionTitle h3{min-width:0}.songEntryPage .actionSectionTitle .secondaryButton{flex:none;margin-left:auto}.mobileInlineActionRow{flex-direction:row;align-items:stretch}.mobileInlineActionRow input{min-width:0}.mobileInlineActionRow button{white-space:nowrap;flex:none;padding:8px 10px}.saveStatus{flex:0 auto}.stepTabs{grid-template-columns:repeat(2,minmax(0,1fr))}.resultHeader{flex-direction:column;align-items:start}}