.wpc-app,
.wpc-auth-shell {
  --wpc-bg: #040a12;
  --wpc-deep: #02070d;
  --wpc-surface: #071321;
  --wpc-surface-2: #0b1b2c;
  --wpc-text: #f7fbff;
  --wpc-soft: #c4d1de;
  --wpc-muted: #7f93a7;
  --wpc-cyan: #20ddff;
  --wpc-blue: #2aa2ff;
  --wpc-lime: #b8f000;
  --wpc-danger: #ff6b61;
  --wpc-line: rgba(67, 213, 255, .16);
  --wpc-line-strong: rgba(67, 213, 255, .3);
  --wpc-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --wpc-display: "Segoe UI Variable Display", "Aptos Display", "Segoe UI", system-ui, sans-serif;
  --wpc-mono: "Cascadia Code", "Cascadia Mono", Consolas, monospace;
  box-sizing: border-box;
  color: var(--wpc-text);
  color-scheme: dark;
  font-family: var(--wpc-ui);
}

.wpc-app *, .wpc-app *::before, .wpc-app *::after,
.wpc-auth-shell *, .wpc-auth-shell *::before, .wpc-auth-shell *::after { box-sizing: border-box; }
.wpc-app button, .wpc-app input, .wpc-app textarea, .wpc-app select,
.wpc-auth-shell button, .wpc-auth-shell input { font: inherit; }
.wpc-app button, .wpc-auth-shell button { cursor: pointer; }
.wpc-app button:focus-visible, .wpc-app input:focus-visible, .wpc-app textarea:focus-visible, .wpc-app select:focus-visible,
.wpc-auth-shell button:focus-visible, .wpc-auth-shell input:focus-visible, .wpc-auth-shell a:focus-visible { outline: 2px solid var(--wpc-cyan); outline-offset: 2px; }

.wpc-app { position: fixed; z-index: 999999; inset: 0; overflow: hidden; background: var(--wpc-bg); }
.wpc-shell { display: grid; grid-template-columns: 292px minmax(0, 1fr); width: 100%; height: 100%; min-height: 620px; overflow: hidden; background: var(--wpc-bg); }
.wpc-sidebar { position: relative; z-index: 30; overflow-y: auto; padding: 20px 20px 18px; border-right: 1px solid var(--wpc-line); background: linear-gradient(180deg, #050b14, #030810); scrollbar-color: #173349 transparent; }
.wpc-sidebar::before { position: absolute; inset: 0 0 auto; height: 160px; background: radial-gradient(circle at 18% 0%, rgba(32,221,255,.1), transparent 68%); content: ''; pointer-events: none; }
.wpc-brand { position: relative; height: 65px; margin: -3px 0 10px; overflow: hidden; }
.wpc-brand img { display: block; width: 100%; height: 65px; object-fit: cover; object-position: center; filter: drop-shadow(0 0 14px rgba(32,221,255,.12)); }
.wpc-user { position: relative; display: grid; grid-template-columns: 29px minmax(0,1fr) auto; align-items: center; gap: 8px; margin-bottom: 13px; padding: 8px; border: 1px solid var(--wpc-line); border-radius: 10px; background: rgba(255,255,255,.025); }
.wpc-user > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: linear-gradient(135deg, var(--wpc-cyan), var(--wpc-blue)); color: #00131c; font-size: 11px; font-weight: 900; }
.wpc-user div { min-width: 0; }
.wpc-user strong, .wpc-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpc-user strong { color: var(--wpc-text); font-size: 9px; }
.wpc-user small { margin-top: 2px; color: #617b90; font-size: 7px; }
.wpc-user a { color: #7892a8; font-size: 7px; text-decoration: none; }
.wpc-user a:hover { color: var(--wpc-cyan); }
.wpc-import { position: relative; width: 100%; border: 0; border-radius: 11px; padding: 11px 13px; overflow: hidden; background: linear-gradient(135deg, var(--wpc-cyan), var(--wpc-blue)); color: #00131c; box-shadow: 0 8px 28px rgba(32,221,255,.13), inset 0 1px rgba(255,255,255,.35); font-size: 10px; font-weight: 900; text-align: left; transition: filter .18s, transform .18s; }
.wpc-import:hover { filter: brightness(1.08); transform: translateY(-1px); }
.wpc-import span { margin-right: 7px; font-size: 15px; }
.wpc-search { display: flex; align-items: center; gap: 7px; margin-top: 11px; padding: 8px 10px; border: 1px solid var(--wpc-line); border-radius: 10px; background: rgba(255,255,255,.025); color: #668199; }
.wpc-search:focus-within { border-color: var(--wpc-line-strong); background: rgba(32,221,255,.035); }
.wpc-search input { min-width: 0; width: 100%; border: 0; outline: 0; padding: 0; background: transparent; color: var(--wpc-text); font-size: 9px; }
.wpc-search input::placeholder { color: #60778c; }
.wpc-library-title { display: flex; align-items: center; justify-content: space-between; padding: 19px 8px 6px; color: #5e7890; font-size: 7px; font-weight: 900; letter-spacing: .18em; }
.wpc-library-title button { border: 0; padding: 0; background: transparent; color: #7d98af; font-size: 18px; line-height: 1; }
.wpc-library-title button:hover { color: var(--wpc-cyan); }
.wpc-setlist { margin-top: 7px; }
.wpc-setlist-head, .wpc-song-row { display: flex; align-items: center; min-width: 0; }
.wpc-setlist-head > button:first-child { display: grid; min-width: 0; flex: 1; grid-template-columns: 16px minmax(0,1fr) auto; align-items: center; gap: 5px; border: 0; padding: 5px 7px 7px; background: transparent; color: var(--wpc-soft); text-align: left; }
.wpc-setlist-head strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.wpc-setlist-head small { color: #526b80; font-size: 7px; }
.wpc-chevron { display: inline-block; color: var(--wpc-cyan); transition: transform .18s; }
.wpc-chevron.is-collapsed { transform: rotate(-90deg); }
.wpc-song { display: grid; min-width: 0; flex: 1; grid-template-columns: 25px minmax(0,1fr); align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 9px; padding: 7px; background: transparent; color: #8fa1b2; text-align: left; }
.wpc-song:hover { border-color: rgba(67,213,255,.1); background: rgba(255,255,255,.035); color: white; }
.wpc-song.is-active { border-color: rgba(67,213,255,.18); background: linear-gradient(100deg, rgba(32,221,255,.12), rgba(42,162,255,.055)); color: white; box-shadow: inset 3px 0 var(--wpc-cyan); }
.wpc-song > span:first-child { display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid #21415a; border-radius: 6px; color: #6f8ca3; font-size: 7px; }
.wpc-song > span:nth-child(2) { overflow: hidden; font-size: 9px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.wpc-song small { display: block; overflow: hidden; margin-top: 2px; color: #60788c; font-size: 7px; font-weight: 500; text-overflow: ellipsis; }
.wpc-delete { display: grid; flex: 0 0 21px; width: 21px; height: 21px; place-items: center; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #557086; opacity: 0; font-size: 15px; line-height: 1; }
.wpc-setlist-head:hover .wpc-delete, .wpc-song-row:hover .wpc-delete, .wpc-delete:focus-visible { opacity: 1; }
.wpc-delete:hover { background: rgba(255,107,97,.12); color: #ff8b83; }
.wpc-empty-list { margin: 5px 12px 11px; color: #506a80; font-size: 7px; }
.wpc-sync { display: flex; align-items: center; gap: 6px; margin: 20px 8px 0; color: #526d82; font-size: 7px; }
.wpc-sync::before { color: var(--wpc-lime); content: '●'; text-shadow: 0 0 9px rgba(184,240,0,.55); }
.wpc-sync[data-mode="pending"]::before, .wpc-sync[data-mode="saving"]::before { color: var(--wpc-cyan); }
.wpc-sync[data-mode="error"] { color: #ff877e; cursor: pointer; }
.wpc-sync[data-mode="error"]::before { color: var(--wpc-danger); }
.wpc-sidebar-close { display: none; }

.wpc-stage { position: relative; display: grid; min-width: 0; grid-template-rows: auto minmax(0,1fr) auto; padding: 0 27px; overflow: hidden; background-color: var(--wpc-bg); background-image: radial-gradient(rgba(32,221,255,.11) .65px, transparent .65px), radial-gradient(circle at 92% 0%, rgba(42,162,255,.09), transparent 26%); background-size: 17px 17px, auto; }
.wpc-song-header { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(210px,1fr) auto auto; align-items: center; gap: 18px; padding: 15px 2px 12px; border-bottom: 1px solid var(--wpc-line); }
.wpc-song-title > span { color: var(--wpc-cyan); font-size: 7px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.wpc-song-title h1 { overflow: hidden; margin: 4px 0 2px; max-width: 540px; color: var(--wpc-text); font: 760 23px/1 var(--wpc-display); letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.wpc-song-title p { margin: 0; color: var(--wpc-muted); font-size: 8px; }
.wpc-song-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.wpc-song-tags button { border: 1px solid rgba(32,221,255,.19); border-radius: 999px; padding: 3px 7px; background: rgba(32,221,255,.05); color: #78dff1; font-size: 10px; line-height: 14px; font-weight: 750; cursor: pointer; }
.wpc-song-tags button:hover { border-color: rgba(32,221,255,.45); background: rgba(32,221,255,.11); color: #c5f7ff; }
.wpc-meta { display: flex; gap: 6px; }
.wpc-meta span { padding: 7px 8px; border: 1px solid var(--wpc-line); border-radius: 8px; background: rgba(255,255,255,.03); color: #7890a5; font-size: 7px; }
.wpc-meta strong { margin-left: 3px; color: var(--wpc-text); font-size: 9px; }
.wpc-actions { display: flex; align-items: center; gap: 5px; }
.wpc-actions > div { display: flex; align-items: center; border: 1px solid var(--wpc-line); border-radius: 8px; background: rgba(255,255,255,.03); }
.wpc-actions button { min-height: 30px; border: 1px solid var(--wpc-line); border-radius: 8px; padding: 6px 8px; background: rgba(255,255,255,.035); color: var(--wpc-soft); font-size: 8px; font-weight: 850; }
.wpc-actions > div button { min-height: 28px; border: 0; border-radius: 0; padding: 5px 7px; background: transparent; }
.wpc-actions > div span { min-width: 30px; color: #7f96a9; font-size: 7px; font-weight: 850; text-align: center; }
.wpc-actions button:hover { border-color: var(--wpc-line-strong); background: rgba(32,221,255,.07); color: white; }
.wpc-actions button:disabled { cursor: not-allowed; opacity: .42; }
.wpc-actions .wpc-save-tone { border-color: rgba(184,240,0,.3); background: rgba(184,240,0,.07); color: #dfff84; }
.wpc-actions .wpc-save-tone:not(:disabled):hover { border-color: rgba(184,240,0,.55); background: rgba(184,240,0,.13); color: #efffc1; }
.wpc-actions .wpc-present { border-color: transparent; background: linear-gradient(135deg, var(--wpc-cyan), var(--wpc-blue)); color: #00131c; }
.wpc-sheet { --wpc-font: 13px; position: relative; min-height: 0; margin: 13px 0 9px; overflow: auto; border: 1px solid var(--wpc-line); border-radius: 13px; background: linear-gradient(145deg, rgba(12,29,46,.95), rgba(6,17,29,.97)); box-shadow: 0 18px 60px rgba(0,0,0,.26); scrollbar-color: #1c4660 transparent; }
.wpc-sheet::before { position: absolute; inset: 0 auto auto; width: 42%; height: 1px; background: linear-gradient(90deg, var(--wpc-cyan), transparent); content: ''; }
.wpc-sheet-top { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--wpc-line); background: rgba(7,19,33,.94); color: #667f94; backdrop-filter: blur(10px); font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wpc-columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; min-height: calc(100% - 28px); padding: 14px 8px; }
.wpc-columns-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.wpc-columns-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.wpc-columns-5 { grid-template-columns: repeat(5,minmax(0,1fr)); }
.wpc-columns-6 { grid-template-columns: repeat(6,minmax(0,1fr)); }
.wpc-columns-5 .wpc-column, .wpc-columns-6 .wpc-column { padding-inline: 7px; }
.wpc-column { min-width: 0; height: 100%; padding: 0 10px; border-left: 1px solid rgba(67,213,255,.1); }
.wpc-column:first-child { border-left: 0; }
.wpc-music-section { margin: 0 0 15px; }
.wpc-music-section > header { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.wpc-music-section h2 { display: flex; min-width: 0; flex: 1; align-items: center; gap: 8px; margin: 0; color: #a8bdce; font: 800 8px/1 var(--wpc-ui); letter-spacing: .13em; text-transform: uppercase; }
.wpc-music-section h2::after { height: 1px; flex: 1; background: linear-gradient(90deg, rgba(67,213,255,.2), transparent); content: ''; }
.wpc-music-section h2 em { border: 1px solid rgba(184,240,0,.26); border-radius: 12px; padding: 3px 5px; background: rgba(184,240,0,.07); color: var(--wpc-lime); font: 850 7px/1 var(--wpc-ui); letter-spacing: 0; }
.wpc-move { display: flex; gap: 3px; opacity: .48; }
.wpc-music-section:hover .wpc-move, .wpc-move:focus-within { opacity: 1; }
.wpc-move button { display: grid; width: 21px; height: 19px; place-items: center; border: 1px solid rgba(32,221,255,.18); border-radius: 5px; padding: 0; background: rgba(32,221,255,.045); color: #8baabd; font-size: 9px; }
.wpc-move button:hover:not(:disabled) { border-color: rgba(32,221,255,.46); background: rgba(32,221,255,.11); color: var(--wpc-cyan); }
.wpc-move button:disabled { cursor: default; opacity: .2; }
.wpc-move .wpc-section-edit { border-color: rgba(184,240,0,.2); background: rgba(184,240,0,.045); color: #c5e86b; }
.wpc-move .wpc-section-edit:hover { border-color: rgba(184,240,0,.48); background: rgba(184,240,0,.11); color: var(--wpc-lime); }
.wpc-lines { overflow: hidden; font: 460 var(--wpc-font)/1.3 var(--wpc-mono); font-variant-ligatures: none; white-space: pre; }
.wpc-lines p { min-height: 1.25em; overflow: visible; margin: 0; color: #d8e4ed; text-shadow: 0 1px rgba(0,0,0,.25); }
.wpc-lines .is-chord { color: var(--wpc-cyan); font-weight: 800; text-shadow: 0 0 13px rgba(32,221,255,.14); }
.wpc-footer { display: flex; align-items: center; justify-content: space-between; padding: 0 3px 9px; color: #637c91; font-size: 7px; }
.wpc-footer button { border: 0; padding: 0; background: transparent; color: inherit; font-size: inherit; }
.wpc-footer button:hover { color: var(--wpc-cyan); }
.wpc-footer kbd { display: inline-grid; min-width: 19px; height: 19px; place-items: center; border: 1px solid var(--wpc-line); border-radius: 5px; background: rgba(255,255,255,.03); color: #8fa7ba; font-family: inherit; }
.wpc-empty-stage { display: grid; align-content: center; justify-items: center; min-height: 0; text-align: center; }
.wpc-empty-stage > span, .wpc-loading span, .wpc-load-error > span { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 14px; border-radius: 15px; background: linear-gradient(135deg, var(--wpc-cyan), var(--wpc-blue)); color: #00131c; box-shadow: 0 0 35px rgba(32,221,255,.17); font: 900 22px/1 var(--wpc-display); }
.wpc-empty-stage > p { margin: 0; color: var(--wpc-cyan); font-size: 7px; font-weight: 900; letter-spacing: .18em; }
.wpc-empty-stage h1 { margin: 7px 0; font: 760 27px/1.08 var(--wpc-display); }
.wpc-empty-stage small { max-width: 380px; margin-bottom: 18px; color: var(--wpc-muted); font-size: 9px; }
.wpc-empty-stage button { border: 0; border-radius: 10px; padding: 11px 14px; background: linear-gradient(135deg, var(--wpc-cyan), var(--wpc-blue)); color: #00131c; font-size: 9px; font-weight: 900; }
.wpc-mobile-menu, .wpc-scrim { display: none; }

.wpc-modal-backdrop { position: fixed; z-index: 1000001; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(1,4,8,.82); backdrop-filter: blur(10px); }
.wpc-modal { width: min(850px,100%); max-height: calc(100vh - 44px); overflow: auto; border: 1px solid var(--wpc-line-strong); border-radius: 17px; background: linear-gradient(145deg,#0b1b2c,#06111d); color: var(--wpc-text); box-shadow: 0 34px 120px rgba(0,0,0,.55); }
.wpc-modal > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 25px 16px; border-bottom: 1px solid var(--wpc-line); }
.wpc-modal > header span { color: var(--wpc-cyan); font-size: 7px; font-weight: 900; letter-spacing: .18em; }
.wpc-modal > header h2 { margin: 4px 0 5px; color: var(--wpc-text); font: 760 23px/1.08 var(--wpc-display); }
.wpc-modal > header p { margin: 0; color: var(--wpc-muted); font-size: 8px; }
.wpc-modal > header > button { border: 0; padding: 0; background: transparent; color: #7690a5; font-size: 25px; }
.wpc-import-layout { display: grid; grid-template-columns: minmax(0,1fr) 210px; }
.wpc-fields { padding: 20px 25px; }
.wpc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 13px; }
.wpc-compact { grid-template-columns: 72px 82px minmax(105px,1fr); }
.wpc-url-import { margin-bottom: 15px; border: 1px solid rgba(32,221,255,.18); border-radius: 12px; padding: 14px; background: linear-gradient(135deg,rgba(32,221,255,.055),rgba(29,140,255,.025)); }
.wpc-url-import > label { margin-bottom: 7px; color: #c7d9e5; }
.wpc-url-import > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.wpc-url-import > div > button { display: flex; min-width: 116px; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 9px; padding: 0 13px; background: linear-gradient(135deg,var(--wpc-cyan),var(--wpc-blue)); color: #00131c; font-size: 8px; font-weight: 900; }
.wpc-url-import > div > button:disabled { cursor: wait; opacity: .72; }
.wpc-url-import > small { display: block; margin-top: 8px; color: #7892a5; font-size: 7px; line-height: 1.45; }
.wpc-import-divider { display: flex; align-items: center; gap: 10px; margin: 0 0 13px; color: #617b8f; font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wpc-import-divider::before, .wpc-import-divider::after { height: 1px; flex: 1; background: var(--wpc-line); content: ''; }
.wpc-spinner { width: 13px; height: 13px; border: 2px solid rgba(0,19,28,.28); border-top-color: #00131c; border-radius: 50%; animation: wpc-spin .65s linear infinite; }
@keyframes wpc-spin { to { transform: rotate(360deg); } }
.wpc-modal label { display: grid; gap: 6px; color: #91a7b9; font-size: 8px; font-weight: 800; }
.wpc-modal input, .wpc-modal select, .wpc-modal textarea { width: 100%; border: 1px solid var(--wpc-line); border-radius: 9px; outline: 0; background: rgba(1,8,14,.58); color: var(--wpc-text); font-size: 10px; }
.wpc-modal input, .wpc-modal select { height: 36px; padding: 0 10px; }
.wpc-modal input:focus, .wpc-modal select:focus, .wpc-modal textarea:focus { border-color: rgba(32,221,255,.55); box-shadow: 0 0 0 3px rgba(32,221,255,.08); }
.wpc-paste textarea { height: 260px; resize: vertical; padding: 12px; font: 450 10px/1.4 var(--wpc-mono); white-space: pre; }
.wpc-preview { padding: 20px; border-left: 1px solid var(--wpc-line); background: rgba(255,255,255,.018); }
.wpc-preview > small { color: var(--wpc-cyan); font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.wpc-preview > div { display: flex; align-items: center; gap: 9px; margin: 14px 0 16px; }
.wpc-preview > div strong { color: white; font: 760 34px/1 var(--wpc-display); }
.wpc-preview > div span { color: #758ea2; font-size: 7px; line-height: 1.3; text-transform: uppercase; }
.wpc-preview section { display: flex; flex-wrap: wrap; gap: 6px; }
.wpc-preview section span { padding: 6px 8px; border: 1px solid var(--wpc-line); border-radius: 20px; background: rgba(32,221,255,.035); color: #acc0d0; font-size: 7px; font-weight: 850; }
.wpc-preview section p { margin: 0; color: #70889b; font-size: 8px; line-height: 1.5; }
.wpc-preview > p { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--wpc-line); color: #7990a3; font-size: 8px; }
.wpc-preview > p strong { color: var(--wpc-cyan); }
.wpc-preview > .wpc-harmony-result { display: grid; gap: 4px; margin: 18px 0 0; border-top: 1px solid var(--wpc-line); padding-top: 14px; }
.wpc-preview > .wpc-harmony-result > span { color: #7892a5; font-size: 12px; line-height: 18px; font-weight: 850; letter-spacing: .1em; }
.wpc-preview > .wpc-harmony-result > strong { color: var(--wpc-cyan); font: 780 28px/1.1 var(--wpc-display); }
.wpc-harmony-result > small { color: #7892a5; font-size: 12px; line-height: 18px; }
.wpc-edit-song-modal { width: min(980px,100%); }
.wpc-edit-compact { grid-template-columns: minmax(150px,1.2fr) minmax(110px,.7fr) minmax(135px,1fr); }
.wpc-edit-note { margin: 5px 0 0; border: 1px solid rgba(32,221,255,.14); border-radius: 10px; padding: 12px 14px; background: rgba(32,221,255,.035); color: #829bae; font-size: 13px; line-height: 20px; }
.wpc-edit-note strong { color: #c9d9e4; }
.wpc-tags-field { margin: -2px 0 13px; }
.wpc-tags-field small { color: #7892a5; font-size: 12px; line-height: 18px; font-weight: 500; }
.wpc-setlist-picker { position: relative; z-index: 12; margin: 0 0 14px; }
.wpc-setlist-picker summary { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(32,221,255,.19); border-radius: 10px; padding: 9px 38px 9px 12px; background: rgba(32,221,255,.035); color: #a9bfce; cursor: pointer; list-style: none; }
.wpc-setlist-picker summary::-webkit-details-marker { display: none; }
.wpc-setlist-picker summary::after { position: absolute; top: 13px; right: 14px; color: var(--wpc-cyan); font-size: 15px; content: '⌄'; transition: transform .16s ease; }
.wpc-setlist-picker[open] summary { border-color: rgba(32,221,255,.4); background: rgba(32,221,255,.075); }
.wpc-setlist-picker[open] summary::after { transform: rotate(180deg); }
.wpc-setlist-picker summary > span { font-size: 14px; line-height: 20px; font-weight: 800; }
.wpc-setlist-picker summary > strong { color: #77dfee; font-size: 12px; line-height: 18px; font-weight: 750; }
.wpc-setlist-menu { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; left: 0; max-height: 285px; overflow: auto; border: 1px solid rgba(32,221,255,.3); border-radius: 11px; padding: 11px; background: #081827; box-shadow: 0 20px 50px rgba(0,0,0,.55); }
.wpc-setlist-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.wpc-modal label.wpc-setlist-option { display: flex; align-items: center; gap: 9px; min-width: 0; border: 1px solid var(--wpc-line); border-radius: 9px; padding: 8px 10px; background: rgba(255,255,255,.025); color: #b0c3d1; cursor: pointer; }
.wpc-modal label.wpc-setlist-option:has(input:checked) { border-color: rgba(32,221,255,.38); background: rgba(32,221,255,.085); color: #e4faff; }
.wpc-modal .wpc-setlist-option input { width: 17px; height: 17px; flex: 0 0 17px; margin: 0; accent-color: var(--wpc-cyan); }
.wpc-setlist-option > span { min-width: 0; overflow: hidden; font-size: 13px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.wpc-setlist-option small { display: block; color: #71899c; font-size: 11px; line-height: 15px; font-weight: 500; }
.wpc-setlist-menu > small { display: block; margin-top: 9px; color: #7892a5; font-size: 12px; line-height: 18px; }
.wpc-marker-toolbar { display: grid; gap: 8px; margin: 8px 0 10px; border: 1px solid rgba(32,221,255,.15); border-radius: 10px; padding: 10px; background: rgba(32,221,255,.035); }
.wpc-marker-toolbar > span { color: #91a7b9; font-size: 12px; line-height: 18px; font-weight: 800; }
.wpc-marker-toolbar > div { display: flex; flex-wrap: wrap; gap: 6px; }
.wpc-marker-toolbar button { min-height: 32px; border: 1px solid rgba(32,221,255,.22); border-radius: 8px; padding: 5px 9px; background: rgba(32,221,255,.06); color: #aeeeff; font: 800 12px/18px var(--wpc-display); cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.wpc-marker-toolbar button:hover { border-color: rgba(32,221,255,.52); background: rgba(32,221,255,.12); transform: translateY(-1px); }
.wpc-marker-toolbar button:focus-visible { outline: 2px solid var(--wpc-cyan); outline-offset: 2px; }
.wpc-marker-help { display: block; margin-top: 8px; color: #7892a5; font-size: 12px; line-height: 18px; font-weight: 500; }
.wpc-marker-help strong { color: var(--wpc-cyan); font-family: var(--wpc-mono); }
.wpc-section-modal { width: min(760px,100%); }
.wpc-section-fields { grid-template-columns: minmax(180px,1fr) 120px 150px; }
.wpc-section-content textarea { min-height: 270px; resize: vertical; padding: 12px; font: 450 14px/21px var(--wpc-mono); white-space: pre; }
.wpc-modal label.wpc-split-repeat { display: flex; align-items: flex-start; gap: 11px; margin-top: 14px; border: 1px solid rgba(184,240,0,.18); border-radius: 11px; padding: 13px 14px; background: rgba(184,240,0,.035); cursor: pointer; }
.wpc-split-repeat input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; accent-color: var(--wpc-lime); }
.wpc-split-repeat span { display: grid; gap: 3px; }
.wpc-split-repeat strong { color: #dce9cf; font-size: 14px; line-height: 19px; }
.wpc-split-repeat small { color: #839b77; font-size: 12px; line-height: 18px; font-weight: 500; }
.wpc-modal form > footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 25px; border-top: 1px solid var(--wpc-line); }
.wpc-modal form > footer > span { color: #667f93; font-size: 7px; }
.wpc-modal form > footer > div { display: flex; gap: 8px; }
.wpc-modal form > footer button { min-height: 35px; border: 1px solid var(--wpc-line); border-radius: 9px; padding: 7px 12px; background: rgba(255,255,255,.025); color: #9db0c0; font-size: 8px; font-weight: 900; }
.wpc-modal form > footer .is-primary { border: 0; background: linear-gradient(135deg,var(--wpc-cyan),var(--wpc-blue)); color: #00131c; }
.wpc-toast { position: fixed; z-index: 1000002; right: 24px; bottom: 22px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--wpc-line-strong); border-radius: 11px; padding: 11px 14px; background: #0b1a29; color: white; box-shadow: 0 14px 44px rgba(0,0,0,.4); font-size: 9px; font-weight: 750; animation: wpc-toast-in .22s ease-out; }
.wpc-toast span { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: var(--wpc-lime); color: #132000; font-size: 8px; }
@keyframes wpc-toast-in { from { opacity: 0; transform: translateY(8px); } }

.wpc-feedback-widget { position: fixed; z-index: 1000000; right: 22px; bottom: 20px; }
.wpc-feedback-trigger { position: relative; display: grid; width: 76px; height: 76px; place-items: center; border: 1px solid rgba(32,221,255,.48); border-radius: 50%; padding: 0; overflow: visible; background: radial-gradient(circle at 50% 36%,#12324b,#06111d 70%); box-shadow: 0 12px 40px rgba(0,0,0,.55),0 0 28px rgba(32,221,255,.18); transition: transform .2s ease,box-shadow .2s ease; }
.wpc-feedback-trigger::after { position: absolute; top: 3px; right: 2px; width: 13px; height: 13px; border: 2px solid #06111d; border-radius: 50%; background: var(--wpc-lime); box-shadow: 0 0 12px rgba(184,240,0,.7); content: ''; }
.wpc-feedback-trigger:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 17px 50px rgba(0,0,0,.6),0 0 34px rgba(32,221,255,.27); }
.wpc-feedback-trigger img { display: block; width: 88px; max-width: none; height: 88px; margin-top: -8px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.42)); pointer-events: none; }
.wpc-feedback-trigger > span { position: absolute; right: 86px; display: grid; width: max-content; max-width: 190px; gap: 1px; border: 1px solid var(--wpc-line); border-radius: 10px; padding: 9px 12px; background: rgba(7,19,33,.96); color: white; box-shadow: 0 10px 30px rgba(0,0,0,.32); opacity: 0; transform: translateX(8px); transition: opacity .18s,transform .18s; pointer-events: none; text-align: left; }
.wpc-feedback-trigger:hover > span,.wpc-feedback-trigger:focus-visible > span { opacity: 1; transform: translateX(0); }
.wpc-feedback-trigger > span strong { font-size: 13px; line-height: 18px; }
.wpc-feedback-trigger > span small { color: #7f98aa; font-size: 11px; line-height: 16px; }
.wpc-feedback-panel { position: absolute; right: 0; bottom: 90px; width: min(370px,calc(100vw - 28px)); max-height: min(610px,calc(100vh - 130px)); overflow: auto; border: 1px solid var(--wpc-line-strong); border-radius: 17px; background: linear-gradient(145deg,#0c2033,#06111d); color: var(--wpc-text); box-shadow: 0 28px 90px rgba(0,0,0,.62); animation: wpc-feedback-in .2s ease-out; }
@keyframes wpc-feedback-in { from { opacity: 0; transform: translateY(9px) scale(.98); } }
.wpc-feedback-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--wpc-line); padding: 19px 20px 16px; background: radial-gradient(circle at 5% 0%,rgba(32,221,255,.11),transparent 55%); }
.wpc-feedback-panel > header span { color: var(--wpc-cyan); font-size: 11px; line-height: 16px; font-weight: 900; letter-spacing: .14em; }
.wpc-feedback-panel > header h2 { margin: 4px 0 5px; color: white; font: 760 22px/28px var(--wpc-display); letter-spacing: -.025em; }
.wpc-feedback-panel > header p { margin: 0; color: #849caf; font-size: 13px; line-height: 19px; }
.wpc-feedback-panel > header button { border: 0; padding: 0; background: transparent; color: #7891a4; font-size: 25px; line-height: 1; }
.wpc-feedback-panel form { display: grid; gap: 14px; padding: 18px 20px 20px; }
.wpc-feedback-panel label { display: grid; gap: 7px; color: #abc0cf; font-size: 13px; line-height: 18px; font-weight: 800; }
.wpc-feedback-panel select,.wpc-feedback-panel textarea { width: 100%; border: 1px solid var(--wpc-line); border-radius: 9px; outline: 0; background: rgba(1,8,14,.64); color: var(--wpc-text); font-size: 14px; line-height: 20px; }
.wpc-feedback-panel select { height: 43px; padding: 0 11px; }
.wpc-feedback-panel textarea { min-height: 135px; resize: vertical; padding: 11px 12px; }
.wpc-feedback-panel select:focus,.wpc-feedback-panel textarea:focus { border-color: rgba(32,221,255,.58); box-shadow: 0 0 0 3px rgba(32,221,255,.08); }
.wpc-feedback-panel form > small { color: #6f899d; font-size: 11px; line-height: 17px; }
.wpc-feedback-submit { display: flex; min-height: 43px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 9px; padding: 9px 14px; background: linear-gradient(135deg,var(--wpc-cyan),var(--wpc-blue)); color: #00131c; font-size: 14px; line-height: 20px; font-weight: 900; }
.wpc-feedback-submit:disabled { cursor: wait; opacity: .72; }
.wpc-app.is-presenting .wpc-feedback-widget { display: none; }

.wpc-loading, .wpc-load-error { display: grid; width: 100%; height: 100%; place-content: center; justify-items: center; background: var(--wpc-bg); text-align: center; }
.wpc-loading strong { color: var(--wpc-soft); font-size: 10px; }
.wpc-load-error h2 { margin: 0 0 7px; font: 760 23px/1.1 var(--wpc-display); }
.wpc-load-error p { margin: 0 0 16px; color: var(--wpc-muted); font-size: 9px; }
.wpc-load-error button { border: 0; border-radius: 9px; padding: 9px 12px; background: var(--wpc-cyan); color: #00131c; font-size: 8px; font-weight: 900; }

/* Legible interface scale. Chord and lyric body keeps --wpc-font unchanged. */
.wpc-import { font-size: 14px; line-height: 20px; }
.wpc-search input { font-size: 14px; line-height: 20px; }
.wpc-library-title { font-size: 12px; line-height: 16px; letter-spacing: .12em; }
.wpc-setlist-head strong { font-size: 14px; line-height: 20px; }
.wpc-setlist-head small { font-size: 12px; line-height: 16px; }
.wpc-song > span:first-child { font-size: 12px; }
.wpc-song > span:nth-child(2) { font-size: 14px; line-height: 20px; }
.wpc-song small { font-size: 12px; line-height: 16px; }
.wpc-empty-list { font-size: 12px; line-height: 18px; }
.wpc-sync { font-size: 11px; line-height: 16px; }
.wpc-song-title > span { font-size: 12px; line-height: 16px; letter-spacing: .12em; }
.wpc-song-title p { font-size: 14px; line-height: 20px; }
.wpc-meta span { font-size: 12px; line-height: 16px; }
.wpc-meta strong { font-size: 14px; }
.wpc-actions button { min-height: 38px; padding: 8px 10px; font-size: 13px; line-height: 18px; }
.wpc-actions > div button { min-height: 36px; padding: 7px 9px; }
.wpc-actions > div span { min-width: 40px; font-size: 12px; line-height: 16px; }
.wpc-sheet-top { font-size: 11px; line-height: 16px; }
.wpc-music-section h2 { font-size: 12px; line-height: 16px; letter-spacing: .1em; }
.wpc-music-section h2 em { font-size: 11px; line-height: 15px; }
.wpc-move button { font-size: 11px; }
.wpc-footer { font-size: 11px; line-height: 16px; }
.wpc-empty-stage p { font-size: 14px; line-height: 21px; }
.wpc-empty-stage button { font-size: 14px; line-height: 20px; }
.wpc-modal > header span { font-size: 12px; line-height: 16px; letter-spacing: .12em; }
.wpc-modal > header p { font-size: 14px; line-height: 20px; }
.wpc-modal label { font-size: 14px; line-height: 20px; }
.wpc-modal input, .wpc-modal select, .wpc-modal textarea { font-size: 14px; line-height: 20px; }
.wpc-modal input, .wpc-modal select { height: 42px; }
.wpc-url-import > div > button { min-height: 42px; font-size: 14px; line-height: 20px; }
.wpc-url-import > small, .wpc-import-divider { font-size: 12px; line-height: 18px; }
.wpc-paste textarea { font-size: 14px; line-height: 21px; }
.wpc-preview > small, .wpc-preview section span, .wpc-preview section p, .wpc-preview > p, .wpc-modal form > footer > span { font-size: 12px; line-height: 18px; }
.wpc-modal form > footer button { min-height: 42px; font-size: 14px; line-height: 20px; }
.wpc-toast { font-size: 14px; line-height: 20px; }
.wpc-toast span { font-size: 12px; }

.wpc-auth-shell { position: fixed; z-index: 999999; inset: 0; display: grid; place-items: center; padding: 22px; overflow: auto; background-color: var(--wpc-bg); background-image: radial-gradient(rgba(32,221,255,.11) .65px, transparent .65px), radial-gradient(circle at 50% 0%, rgba(42,162,255,.13), transparent 34%); background-size: 17px 17px, auto; }
.wpc-auth-card { width: min(450px,100%); border: 1px solid var(--wpc-line-strong); border-radius: 18px; padding: 27px; background: linear-gradient(145deg,rgba(11,27,44,.98),rgba(6,17,29,.99)); box-shadow: 0 30px 100px rgba(0,0,0,.5); }
.wpc-auth-card > img { display: block; width: 100%; height: 96px; object-fit: cover; object-position: center; }
.wpc-auth-card > p { margin: 4px 0 18px; color: var(--wpc-muted); font-size: 14px; line-height: 20px; text-align: center; }
.wpc-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; }
.wpc-auth-tabs > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wpc-auth-tabs > label { border-bottom: 1px solid var(--wpc-line); padding: 12px; color: #7e97aa; font-size: 14px; line-height: 20px; font-weight: 850; text-align: center; cursor: pointer; transition: color .16s, border-color .16s; }
#wpc-auth-login:checked + label, #wpc-auth-register:checked + label { border-bottom-color: var(--wpc-cyan); color: var(--wpc-cyan); }
.wpc-auth-panels { grid-column: 1 / -1; padding-top: 18px; }
.wpc-login-panel, .wpc-register-panel { display: none; }
#wpc-auth-login:checked ~ .wpc-auth-panels .wpc-login-panel,
#wpc-auth-register:checked ~ .wpc-auth-panels .wpc-register-panel { display: block; }
.wpc-auth-card form p { margin: 0 0 13px; }
.wpc-auth-card form label { display: block; color: #a9bdcc; font-size: 14px; line-height: 20px; font-weight: 750; }
.wpc-auth-card input[type="text"], .wpc-auth-card input[type="email"], .wpc-auth-card input[type="password"] { width: 100%; height: 46px; margin-top: 7px; border: 1px solid var(--wpc-line); border-radius: 9px; padding: 0 13px; background: rgba(1,8,14,.58); color: var(--wpc-text); font-size: 16px; line-height: 24px; }
.wpc-auth-card input[type="text"]:focus, .wpc-auth-card input[type="email"]:focus, .wpc-auth-card input[type="password"]:focus { border-color: rgba(32,221,255,.55); box-shadow: 0 0 0 3px rgba(32,221,255,.08); }
.wpc-auth-card .login-remember label { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.wpc-auth-card input[type="submit"] { width: 100%; min-height: 46px; border: 0; border-radius: 10px; background: linear-gradient(135deg,var(--wpc-cyan),var(--wpc-blue)); color: #00131c; font-size: 14px; line-height: 20px; font-weight: 850; cursor: pointer; }
.wpc-register-form { display: grid; gap: 13px; }
.wpc-register-form > button { width: 100%; min-height: 46px; margin-top: 2px; border: 0; border-radius: 10px; background: linear-gradient(135deg,var(--wpc-cyan),var(--wpc-blue)); color: #00131c; font-size: 14px; line-height: 20px; font-weight: 850; }
.wpc-confirm-help { display: flex; align-items: center; gap: 9px; margin: 0 !important; border: 1px solid rgba(32,221,255,.1); border-radius: 9px; padding: 11px 12px; background: rgba(32,221,255,.035); color: #8ca5b7; font-size: 12px; line-height: 18px; }
.wpc-confirm-help span { color: var(--wpc-cyan); font-size: 16px; }
.wpc-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.wpc-auth-notice { display: grid; gap: 3px; margin-bottom: 14px; border: 1px solid; border-radius: 10px; padding: 10px 11px; }
.wpc-auth-notice strong { font-size: 14px; line-height: 20px; }
.wpc-auth-notice span { font-size: 13px; line-height: 20px; }
.wpc-auth-notice.is-success { border-color: rgba(184,240,0,.24); background: rgba(184,240,0,.055); color: #cce98a; }
.wpc-auth-notice.is-error { border-color: rgba(255,107,97,.28); background: rgba(255,107,97,.065); color: #ffaaa4; }
.wpc-signup-disabled { border: 1px dashed var(--wpc-line); border-radius: 10px; padding: 18px; text-align: center; }
.wpc-signup-disabled strong { color: var(--wpc-soft); font-size: 16px; line-height: 24px; }
.wpc-signup-disabled p { margin: 7px 0 0; color: var(--wpc-muted); font-size: 14px; line-height: 20px; }
.wpc-auth-links { display: flex; justify-content: flex-end; gap: 12px; margin-top: 15px; }
.wpc-auth-links a { color: var(--wpc-cyan); font-size: 14px; line-height: 20px; text-decoration: none; }
.wpc-auth-card > small { display: block; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--wpc-line); color: #7f97aa; font-size: 12px; line-height: 18px; text-align: center; }

/* Branded password creation */
.wpc-password-shell { min-height: 100vh; padding: 30px 20px; }
.wpc-password-card { position: relative; width: min(510px,100%); overflow: hidden; border: 1px solid rgba(67,213,255,.25); border-radius: 22px; padding: 34px; background: linear-gradient(145deg,rgba(11,27,44,.99),rgba(4,13,23,.99)); box-shadow: 0 32px 100px rgba(0,0,0,.56), 0 0 0 1px rgba(255,255,255,.015) inset; }
.wpc-password-card::before { position: absolute; top: 0; right: 0; left: 0; height: 4px; background: linear-gradient(90deg,var(--wpc-cyan),var(--wpc-blue)); content: ""; }
.wpc-password-card.is-centered { text-align: center; }
.wpc-password-brand { display: inline-flex; width: 205px; height: 62px; align-items: center; margin-bottom: 25px; }
.wpc-password-brand img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.wpc-password-card.is-centered .wpc-password-brand { justify-content: center; }
.wpc-password-card.is-centered .wpc-password-brand img { object-position: center; }
.wpc-password-kicker { display: block; margin-bottom: 9px; color: var(--wpc-cyan); font-size: 12px; line-height: 17px; font-weight: 850; letter-spacing: .14em; }
.wpc-password-card h1 { margin: 0 0 12px; color: #fff; font: 770 clamp(28px,5vw,38px)/1.1 var(--wpc-display); letter-spacing: -.04em; }
.wpc-password-card > p { margin: 0 0 24px; color: #98afc0; font-size: 16px; line-height: 25px; }
.wpc-password-form { display: grid; gap: 16px; }
.wpc-password-form label { display: grid; gap: 8px; color: #b8cad6; font-size: 14px; line-height: 20px; font-weight: 750; text-align: left; }
.wpc-password-form input[type="password"] { width: 100%; height: 50px; border: 1px solid var(--wpc-line-strong); border-radius: 10px; padding: 0 14px; background: rgba(1,8,14,.68); color: var(--wpc-text); font-size: 16px; line-height: 24px; }
.wpc-password-form input[type="password"]:focus { border-color: rgba(32,221,255,.62); box-shadow: 0 0 0 3px rgba(32,221,255,.09); }
.wpc-password-form button, .wpc-password-primary { display: flex; min-height: 50px; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 11px; padding: 13px 18px; background: linear-gradient(135deg,var(--wpc-cyan),var(--wpc-blue)); box-shadow: 0 13px 30px rgba(15,151,255,.18); color: #00131c; font-size: 15px; line-height: 22px; font-weight: 850; text-decoration: none; }
.wpc-password-form button span { font-size: 19px; }
.wpc-password-rule { display: flex; align-items: flex-start; gap: 10px; border: 1px solid rgba(32,221,255,.1); border-radius: 10px; padding: 12px; background: rgba(32,221,255,.035); }
.wpc-password-rule > span { display: grid; width: 21px; height: 21px; flex: 0 0 21px; place-items: center; border-radius: 50%; background: rgba(184,240,0,.12); color: var(--wpc-lime); font-size: 12px; font-weight: 900; }
.wpc-password-rule p { margin: 0; color: #8fa7b9; font-size: 12px; line-height: 18px; }
.wpc-password-notice { display: grid; gap: 3px; margin: 0 0 18px; border: 1px solid rgba(255,105,105,.24); border-radius: 10px; padding: 12px 14px; background: rgba(255,77,77,.07); color: #ffb2b2; font-size: 13px; line-height: 19px; }
.wpc-password-notice strong { color: #ffd1d1; }
.wpc-password-card > small { display: block; margin-top: 21px; padding-top: 15px; border-top: 1px solid var(--wpc-line); color: #7f97aa; font-size: 12px; line-height: 18px; text-align: center; }
.wpc-password-card > small span { margin-right: 4px; color: var(--wpc-lime); }
.wpc-password-card.is-centered .wpc-password-primary { margin-top: 5px; }
.wpc-password-back { display: inline-block; margin-top: 18px; color: var(--wpc-cyan); font-size: 14px; line-height: 20px; text-decoration: none; }

/* Public presentation page */
.wpc-public-shell.wpc-auth-shell {
  display: block;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  background-image: radial-gradient(rgba(32,221,255,.095) .65px, transparent .65px), radial-gradient(circle at 82% 12%, rgba(42,162,255,.13), transparent 28%), radial-gradient(circle at 10% 38%, rgba(32,221,255,.06), transparent 22%);
  background-size: 17px 17px, auto, auto;
}
.wpc-public-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  width: min(1180px, calc(100% - 48px));
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  border-bottom: 1px solid var(--wpc-line);
  background: rgba(4,10,18,.82);
  backdrop-filter: blur(18px);
}
.wpc-public-brand { display: block; width: 220px; height: 64px; }
.wpc-public-brand img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; filter: drop-shadow(0 0 18px rgba(32,221,255,.1)); }
.wpc-public-header nav { display: flex; align-items: center; gap: 7px; }
.wpc-public-header nav a, .wpc-public-actions a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wpc-line);
  border-radius: 10px;
  padding: 10px 17px;
  color: #a8bdce;
  font-size: 14px;
  line-height: 20px;
  font-weight: 850;
  text-decoration: none;
  transition: border-color .18s, color .18s, transform .18s, background .18s;
}
.wpc-public-header nav a:hover, .wpc-public-actions a:hover { border-color: var(--wpc-line-strong); color: white; transform: translateY(-1px); }
.wpc-public-header nav a.is-primary, .wpc-public-actions a.is-primary { border-color: transparent; background: linear-gradient(135deg,var(--wpc-cyan),var(--wpc-blue)); color: #00131c; box-shadow: 0 9px 28px rgba(32,221,255,.12); }
.wpc-public-main { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.wpc-public-hero { display: grid; min-height: 590px; grid-template-columns: minmax(0,.9fr) minmax(470px,1.1fr); align-items: center; gap: 62px; padding: 62px 0 54px; }
.wpc-public-copy { position: relative; z-index: 2; }
.wpc-public-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 19px; color: #94abbd; font-size: 12px; line-height: 16px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.wpc-public-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--wpc-lime); box-shadow: 0 0 14px rgba(184,240,0,.75); }
.wpc-public-copy h1 { max-width: 590px; margin: 0; color: var(--wpc-text); font: 780 clamp(42px,4.35vw,62px)/.98 var(--wpc-display); letter-spacing: -.055em; }
.wpc-public-copy h1 em { color: var(--wpc-cyan); font-style: normal; text-shadow: 0 0 32px rgba(32,221,255,.13); }
.wpc-public-copy > p { max-width: 590px; margin: 23px 0 0; color: #9db0c0; font-size: 16px; line-height: 26px; }
.wpc-public-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.wpc-public-actions a { min-height: 48px; padding: 12px 20px; font-size: 14px; line-height: 20px; }
.wpc-public-actions a span { margin-left: 10px; font-size: 16px; line-height: 0; }
.wpc-public-proof { display: flex; flex-wrap: wrap; gap: 11px 18px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--wpc-line); }
.wpc-public-proof span { color: #8299ab; font-size: 12px; line-height: 18px; font-weight: 700; }
.wpc-public-proof strong { margin-right: 3px; color: var(--wpc-cyan); font-size: 13px; }
.wpc-public-preview { position: relative; border: 1px solid rgba(67,213,255,.25); border-radius: 17px; padding: 8px; background: linear-gradient(145deg,rgba(13,31,49,.92),rgba(4,12,21,.97)); box-shadow: 0 34px 100px rgba(0,0,0,.45), 0 0 70px rgba(32,221,255,.05); transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }
.wpc-public-preview::before { position: absolute; z-index: -1; inset: 13% -8% -12% 12%; border-radius: 50%; background: rgba(32,221,255,.09); filter: blur(58px); content: ''; }
.wpc-preview-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px 11px 13px; color: #7791a5; font-size: 11px; line-height: 16px; letter-spacing: .08em; }
.wpc-preview-bar > span { display: flex; gap: 4px; }
.wpc-preview-bar i { width: 5px; height: 5px; border-radius: 50%; background: #1d3d54; }
.wpc-preview-bar i:first-child { background: var(--wpc-cyan); box-shadow: 0 0 8px rgba(32,221,255,.55); }
.wpc-preview-bar strong { color: #8aa3b5; font-size: 11px; }
.wpc-preview-bar em { justify-self: end; color: #527087; font-style: normal; }
.wpc-preview-song { overflow: hidden; border: 1px solid rgba(67,213,255,.12); border-radius: 12px; background: #06111d; }
.wpc-preview-song > header { display: flex; align-items: center; justify-content: space-between; padding: 14px 15px 12px; border-bottom: 1px solid rgba(67,213,255,.12); }
.wpc-preview-song > header small, .wpc-preview-song > header strong { display: block; }
.wpc-preview-song > header small { margin-bottom: 4px; color: var(--wpc-cyan); font-size: 11px; line-height: 16px; font-weight: 850; letter-spacing: .1em; }
.wpc-preview-song > header strong { color: white; font: 760 18px/24px var(--wpc-display); }
.wpc-preview-song > header > span { border: 1px solid rgba(67,213,255,.17); border-radius: 7px; padding: 7px 9px; color: #829bae; font-size: 11px; line-height: 16px; }
.wpc-preview-song > header b { margin-left: 3px; color: white; }
.wpc-preview-columns { display: grid; min-height: 300px; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 14px 6px 18px; }
.wpc-preview-columns section { position: relative; min-width: 0; padding: 0 10px; border-left: 1px solid rgba(67,213,255,.1); }
.wpc-preview-columns section:first-child { border-left: 0; }
.wpc-preview-columns section > b { display: flex; align-items: center; gap: 6px; margin: 7px 0 10px; color: #9bb2c2; font-size: 11px; line-height: 16px; letter-spacing: .08em; }
.wpc-preview-columns section > b::after { height: 1px; flex: 1; background: linear-gradient(90deg,rgba(67,213,255,.2),transparent); content: ''; }
.wpc-preview-columns code, .wpc-preview-columns p { display: block; overflow: hidden; margin: 0; font: 550 11px/17px var(--wpc-mono); text-overflow: clip; white-space: nowrap; }
.wpc-preview-columns code { color: var(--wpc-cyan); }
.wpc-preview-columns p { min-height: 10px; color: #c5d4de; }
.wpc-repeat { position: absolute; top: 2px; right: 10px; border: 1px solid rgba(184,240,0,.22); border-radius: 10px; padding: 3px 6px; color: var(--wpc-lime); font-size: 11px; line-height: 16px; font-weight: 850; }
.wpc-public-features { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 0 0 80px; }
.wpc-public-features article { display: flex; gap: 17px; min-height: 158px; border: 1px solid var(--wpc-line); border-radius: 14px; padding: 24px; background: linear-gradient(145deg,rgba(11,27,44,.68),rgba(6,17,29,.8)); }
.wpc-public-features article > span { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid rgba(32,221,255,.2); border-radius: 10px; background: rgba(32,221,255,.05); color: var(--wpc-cyan); font-size: 12px; line-height: 16px; font-weight: 850; }
.wpc-public-features h2 { margin: 2px 0 9px; color: #eaf5fc; font: 750 18px/24px var(--wpc-display); }
.wpc-public-features p { margin: 0; color: #849cae; font-size: 14px; line-height: 22px; }
.wpc-public-access { display: grid; grid-template-columns: minmax(0,.75fr) minmax(400px,1fr); align-items: center; gap: 70px; scroll-margin-top: 92px; margin-bottom: 78px; border: 1px solid var(--wpc-line); border-radius: 20px; padding: 52px; background: radial-gradient(circle at 4% 0%,rgba(32,221,255,.1),transparent 34%), linear-gradient(145deg,rgba(11,27,44,.92),rgba(4,12,21,.96)); box-shadow: 0 30px 100px rgba(0,0,0,.28); }
.wpc-access-intro > span, .wpc-auth-heading > span { color: var(--wpc-cyan); font-size: 12px; line-height: 16px; font-weight: 850; letter-spacing: .12em; }
.wpc-access-intro h2 { max-width: 420px; margin: 13px 0 16px; color: white; font: 770 clamp(29px,3.2vw,43px)/1.05 var(--wpc-display); letter-spacing: -.045em; }
.wpc-access-intro p { max-width: 480px; margin: 0; color: #94aabc; font-size: 16px; line-height: 25px; }
.wpc-public-shell .wpc-auth-card { width: 100%; border-color: rgba(67,213,255,.23); padding: 29px; background: rgba(4,13,22,.82); box-shadow: 0 24px 70px rgba(0,0,0,.34); }
.wpc-auth-heading { margin-bottom: 18px; }
.wpc-auth-heading h2 { margin: 8px 0 6px; color: white; font: 760 24px/32px var(--wpc-display); letter-spacing: -.025em; }
.wpc-auth-heading p { margin: 0; color: #8ba2b4; font-size: 14px; line-height: 20px; }
.wpc-public-shell .wpc-auth-card > small span { margin-right: 4px; color: var(--wpc-lime); text-shadow: 0 0 8px rgba(184,240,0,.45); }
.wpc-public-footer { display: flex; width: min(1180px,calc(100% - 48px)); align-items: center; justify-content: space-between; margin: 0 auto; border-top: 1px solid var(--wpc-line); padding: 16px 0 22px; color: #71899c; font-size: 12px; line-height: 18px; }
.wpc-public-footer img { width: 145px; height: 42px; object-fit: contain; object-position: left center; opacity: .62; }

@media (max-width: 980px) {
  .wpc-public-hero { grid-template-columns: 1fr; gap: 48px; padding-top: 58px; }
  .wpc-public-copy { max-width: 720px; }
  .wpc-public-preview { width: min(720px,100%); margin: 0 auto; transform: none; }
  .wpc-public-features { grid-template-columns: 1fr; padding-top: 48px; }
  .wpc-public-features article { min-height: 0; }
  .wpc-public-access { grid-template-columns: 1fr; gap: 32px; }
  .wpc-access-intro { max-width: 620px; }
}

@media (max-width: 620px) {
	.wpc-password-shell { padding: 14px; }
	.wpc-password-card { border-radius: 17px; padding: 27px 20px; }
	.wpc-password-brand { width: 180px; height: 54px; margin-bottom: 20px; }
	.wpc-password-card > p { font-size: 15px; line-height: 23px; }
  .wpc-public-header, .wpc-public-main, .wpc-public-footer { width: min(100% - 28px,1180px); }
  .wpc-public-header { min-height: 67px; }
  .wpc-public-brand { width: 158px; height: 53px; }
  .wpc-public-header nav { gap: 4px; }
  .wpc-public-header nav a { min-height: 42px; padding: 9px 11px; font-size: 13px; line-height: 18px; }
  .wpc-public-hero { min-height: 0; gap: 36px; padding: 48px 0 22px; }
  .wpc-public-copy h1 { font-size: clamp(36px,11.5vw,48px); }
  .wpc-public-copy > p { font-size: 16px; line-height: 25px; }
  .wpc-public-actions { display: grid; }
  .wpc-public-actions a { width: 100%; }
  .wpc-public-proof { display: grid; gap: 9px; }
  .wpc-public-preview { padding: 5px; }
  .wpc-preview-columns { min-height: 220px; }
  .wpc-preview-columns section { padding: 0 5px; }
  .wpc-preview-columns code, .wpc-preview-columns p { font-size: 11px; line-height: 17px; }
  .wpc-preview-columns section > b { font-size: 11px; line-height: 16px; }
  .wpc-public-features { gap: 8px; padding: 35px 0 52px; }
  .wpc-public-features article { padding: 17px; }
  .wpc-public-access { gap: 27px; margin-bottom: 52px; padding: 24px 18px; }
  .wpc-public-shell .wpc-auth-card { padding: 21px 18px; }
  .wpc-public-footer { display: grid; justify-items: center; gap: 4px; text-align: center; }
  .wpc-public-footer img { object-position: center; }
  .wpc-feedback-widget { right: 12px; bottom: 12px; }
  .wpc-feedback-trigger { width: 64px; height: 64px; }
  .wpc-feedback-trigger img { width: 75px; height: 75px; }
  .wpc-feedback-trigger > span { display: none; }
  .wpc-feedback-panel { position: fixed; right: 12px; bottom: 86px; width: calc(100vw - 24px); max-height: calc(100vh - 105px); }
  .wpc-section-fields { grid-template-columns: 1fr; }
  .wpc-section-fields label:first-child { grid-column: auto; }
}

.wpc-app.is-presenting .wpc-shell { grid-template-columns: 1fr; }
.wpc-app.is-presenting .wpc-sidebar, .wpc-app.is-presenting .wpc-mobile-menu, .wpc-app.is-presenting .wpc-move, .wpc-app.is-presenting .wpc-actions > button:not(.wpc-present) { display: none; }
.wpc-app.is-presenting .wpc-stage { padding: 0 24px; }
.wpc-app.is-presenting .wpc-song-title p, .wpc-app.is-presenting .wpc-song-title > span, .wpc-app.is-presenting .wpc-song-tags { display: none; }

@media (max-width: 1180px) {
  .wpc-shell { grid-template-columns: 238px minmax(0,1fr); }
  .wpc-sidebar { padding-left: 14px; padding-right: 14px; }
  .wpc-song-header { grid-template-columns: minmax(190px,1fr) auto; }
  .wpc-meta { display: none; }
  .wpc-actions { flex-wrap: wrap; justify-content: flex-end; }
}

@media (max-width: 820px) {
  .wpc-shell { display: block; min-height: 100vh; }
  .wpc-sidebar { position: fixed; inset: 0 auto 0 0; width: min(292px,86vw); transform: translateX(-105%); transition: transform .22s ease; box-shadow: 20px 0 70px rgba(0,0,0,.5); }
  .wpc-sidebar.is-open { transform: translateX(0); }
  .wpc-sidebar-close { position: absolute; z-index: 2; top: 12px; right: 12px; display: block; border: 0; background: transparent; color: #7890a4; font-size: 23px; }
  .wpc-mobile-menu { position: fixed; z-index: 25; top: 14px; left: 14px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--wpc-line); border-radius: 9px; background: #0a1725; color: var(--wpc-cyan); }
  .wpc-scrim { position: fixed; z-index: 29; inset: 0; display: block; border: 0; background: rgba(1,4,8,.72); }
  .wpc-stage { height: 100vh; padding: 0 14px; }
  .wpc-song-header { grid-template-columns: 1fr; gap: 9px; padding: 13px 0 9px 45px; }
  .wpc-song-title h1 { font-size: 20px; }
  .wpc-actions { justify-content: flex-start; }
  .wpc-actions > div:first-child, .wpc-actions > button:not(.wpc-present) { display: none; }
  .wpc-actions > button[data-action="open-edit"] { display: block; }
  .wpc-columns, .wpc-columns-2, .wpc-columns-4, .wpc-columns-5, .wpc-columns-6 { grid-template-columns: repeat(2,minmax(240px,1fr)); min-width: 500px; }
  .wpc-sheet-top span:last-child { display: none; }
  .wpc-delete { opacity: .8; }
  .wpc-import-layout { grid-template-columns: 1fr; }
  .wpc-setlist-options { grid-template-columns: 1fr; }
  .wpc-compact { grid-template-columns: 1fr 1fr; }
  .wpc-url-import > div { grid-template-columns: 1fr; }
  .wpc-url-import > div > button { width: 100%; }
  .wpc-preview { border-top: 1px solid var(--wpc-line); border-left: 0; }
  .wpc-edit-compact { grid-template-columns: 1fr; }
  .wpc-section-fields { grid-template-columns: 1fr 1fr; }
  .wpc-section-fields label:first-child { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .wpc-section-fields { grid-template-columns: 1fr; }
  .wpc-section-fields label:first-child { grid-column: auto; }
}

@media (max-height: 700px) {
  .wpc-brand { height: 53px; }
  .wpc-brand img { height: 53px; }
  .wpc-song-header { padding-top: 9px; padding-bottom: 7px; }
  .wpc-sheet { margin-top: 8px; margin-bottom: 7px; }
  .wpc-music-section { margin-bottom: 11px; }
}