:root {
  --ink: #f5f0e6;
  --muted: #a9a4b2;
  --navy: #080b20;
  --panel: rgba(18, 21, 48, 0.82);
  --panel-strong: #141831;
  --gold: #d9aa48;
  --gold-light: #f2d48b;
  --line: rgba(242, 212, 139, 0.18);
  --spotify: #1ed760;
  --danger: #ff8c8c;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--navy); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(35, 48, 106, 0.55), transparent 38rem),
    linear-gradient(145deg, #050714, #0a0f28 55%, #08091a);
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.ambient { position: fixed; border-radius: 999px; filter: blur(90px); opacity: .16; pointer-events: none; }
.ambient-one { width: 28rem; height: 28rem; background: var(--gold); top: -12rem; right: -8rem; }
.ambient-two { width: 22rem; height: 22rem; background: #344bb7; bottom: -10rem; left: -8rem; }
.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 46px 0 32px; position: relative; }
.hero { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; }
.brand-heading{margin:0;line-height:1}.brand-logo{display:block;width:clamp(280px,40vw,500px);height:auto;filter:drop-shadow(0 18px 34px rgba(0,0,0,.24))}.brand-heading+.hero-copy{margin-top:14px}
.view-switcher { display: inline-flex; gap: 6px; padding: 5px; margin: -16px 0 24px; border: 1px solid var(--line); border-radius: 999px; background: rgba(4,6,18,.48); }
.view-switcher a { padding: 8px 14px; border-radius: 999px; color: var(--muted); font-size: .8rem; font-weight: 800; text-decoration: none; }
.view-switcher a.active { color: #160f02; background: var(--gold-light); }
.eyebrow { margin: 0 0 8px; color: var(--gold-light); letter-spacing: .22em; font-size: .72rem; font-weight: 800; }
h1 { margin: 0; font-size: clamp(4rem, 10vw, 8rem); line-height: .82; letter-spacing: -.08em; }
h2, h3, p { margin-top: 0; }
.hero-copy { max-width: 540px; margin: 22px 0 0; font-size: clamp(1rem, 2vw, 1.25rem); color: var(--muted); }
.checkin-flow { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(300px, .78fr); gap: 18px; align-items: stretch; }
.checkin-flow.joined{grid-template-columns:1fr}.checkin-flow.joined .join-card{width:min(100%,820px);margin:0 auto}.checkin-flow.joined .join-copy{margin-bottom:16px}.checkin-flow.joined .listener-dashboard,.checkin-flow.joined .listener-add-ons,.checkin-flow.joined .join-success{width:100%;max-width:720px}.checkin-flow.joined .guest-live-status,.checkin-flow.joined .crowd-reaction-panel,.checkin-flow.joined .song-request-panel,.checkin-flow.joined .song-vote-panel{width:100%;max-width:none}
.join-card, .checkin-explainer { border: 1px solid var(--line); border-radius: 26px; backdrop-filter: blur(20px); box-shadow: 0 26px 70px rgba(0,0,0,.28); }
.join-card { position: relative; overflow: hidden; min-height: 560px; padding: clamp(26px,4vw,48px); background: linear-gradient(145deg,rgba(24,30,69,.94),rgba(12,15,39,.9)); }
.join-card::before { content:""; position:absolute; width:320px; height:320px; top:-180px; right:-90px; border-radius:50%; background:rgba(30,215,96,.14); filter:blur(22px); pointer-events:none; }
.join-card h2 { position:relative; max-width:680px; margin:8px 0 12px; font-size:clamp(2.5rem,5.4vw,5.2rem); line-height:.94; letter-spacing:-.055em; }
.join-copy { position:relative; max-width:610px; margin-bottom:26px; color:var(--muted); font-size:clamp(1rem,1.7vw,1.2rem); line-height:1.55; }
.venue-code-entry{position:relative;width:min(100%,610px);display:block;margin:0 0 20px;padding:19px;border:1px solid rgba(242,212,139,.52);border-radius:18px;background:linear-gradient(145deg,rgba(217,170,72,.18),rgba(4,6,18,.56));box-shadow:0 16px 36px rgba(0,0,0,.22),0 0 0 1px rgba(242,212,139,.06) inset}.venue-code-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:11px}.venue-code-heading div{display:grid;gap:3px}.venue-code-heading span{color:var(--gold-light);font-size:.63rem;font-weight:900;letter-spacing:.16em}.venue-code-heading strong{font-size:1.08rem}.venue-code-heading small{max-width:260px;color:#b9b6c5;font-size:.7rem;line-height:1.4;text-align:right}.venue-code-entry>label{display:block;margin:9px 0 6px;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.venue-code-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}.venue-code-controls input{min-height:55px;margin:0;border-color:rgba(242,212,139,.52);font-size:1.15rem;font-weight:900;letter-spacing:.22em;text-transform:uppercase}.venue-code-controls input::placeholder{color:#74758a}.venue-code-controls .primary-button{width:auto;min-width:132px;margin:0;padding-inline:22px;background:linear-gradient(135deg,#fff0bd,var(--gold))}
.flow-header { position:relative; display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:44px; }
.live-badge { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid rgba(30,215,96,.22); border-radius:999px; color:#7bf5a6; background:rgba(30,215,96,.08); font-size:.67rem; font-weight:900; letter-spacing:.15em; }
.live-badge i { width:7px; height:7px; border-radius:50%; background:var(--spotify); box-shadow:0 0 13px var(--spotify); }
.flow-steps { display:flex; align-items:center; gap:7px; }
.flow-steps span { min-width:66px; display:grid; grid-template-columns:25px auto; align-items:center; gap:6px; color:#74788f; font-size:.66rem; font-weight:900; transition:.25s ease; }
.flow-steps span b{width:25px;height:25px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:rgba(4,6,18,.5)}.flow-steps span small{font-size:.58rem;font-weight:850;white-space:nowrap}
.flow-steps i { width:23px; height:1px; background:var(--line); }
.flow-steps span.active{color:#7bf5a6}.flow-steps span.active b{color:#07150c;border-color:var(--spotify);background:var(--spotify);box-shadow:0 0 0 4px rgba(30,215,96,.1)}
.flow-steps span.done{color:var(--gold-light)}.flow-steps span.done b{color:#07150c;border-color:var(--gold-light);background:var(--gold-light)}
.venue-invite { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:12px; max-width:610px; margin:0 0 18px; padding:13px 15px; border:1px solid rgba(242,212,139,.22); border-radius:14px; background:rgba(4,6,18,.42); }
.venue-invite span, .venue-invite small { color:var(--muted); font-size:.66rem; letter-spacing:.12em; }
.venue-invite strong { color:var(--gold-light); font-size:1.05rem; letter-spacing:.15em; }
.venue-invite .text-button{margin:0;padding:6px;color:var(--gold-light);font-size:.68rem;white-space:nowrap}
.invite-schedule { position:relative; width:min(100%,610px); margin:-7px 0 18px; padding:11px 14px; border:1px solid rgba(242,212,139,.18); border-radius:12px; color:#d7d3df; background:rgba(4,6,18,.32); font-size:.78rem; line-height:1.45; }
.quick-join-form{position:relative;width:min(100%,610px);display:block;margin:0 0 18px;padding:18px;border:1px solid rgba(68,243,154,.24);border-radius:18px;background:linear-gradient(145deg,rgba(30,215,96,.1),rgba(4,6,18,.42))}.quick-join-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:12px}.quick-join-heading div{display:grid;gap:3px}.quick-join-heading span{color:#7bf5a6;font-size:.62rem;font-weight:900;letter-spacing:.14em}.quick-join-heading strong{font-size:1rem}.quick-join-heading small{max-width:190px;color:var(--muted);font-size:.68rem;line-height:1.35;text-align:right}.quick-join-form>label{display:block;margin:10px 0 6px}.quick-join-form input,.quick-join-form select{margin-bottom:10px}.quick-join-form fieldset{margin:10px 0 12px;padding:0;border:0}.quick-join-form legend{margin-bottom:8px;color:var(--gold-light);font-size:.75rem}.guest-genre-grid{display:flex;flex-wrap:wrap;gap:7px}.guest-genre-grid label{position:relative;margin:0;cursor:pointer}.guest-genre-grid input{position:absolute;opacity:0;pointer-events:none}.guest-genre-grid span{display:block;padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:rgba(4,6,18,.52);font-size:.7rem;font-weight:800}.guest-genre-grid input:focus-visible+span{outline:2px solid var(--gold-light);outline-offset:2px}.guest-genre-grid input:checked+span{color:#06140b;border-color:#44f39a;background:#44f39a}.quick-join-form .primary-button{margin-top:6px;background:#44f39a;color:#06140b}.quick-join-form:has(button:disabled){opacity:.62}.spotify-divider{width:min(100%,610px);display:flex;align-items:center;gap:10px;margin:13px 0;color:var(--muted);font-size:.66rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.spotify-divider::before,.spotify-divider::after{content:"";height:1px;flex:1;background:var(--line)}
.optional-taste-settings{margin:5px 0 13px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(4,6,18,.3);overflow:hidden}.optional-taste-settings>summary,.listener-add-ons>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px;cursor:pointer;list-style:none}.optional-taste-settings>summary::-webkit-details-marker,.listener-add-ons>summary::-webkit-details-marker{display:none}.optional-taste-settings>summary span,.listener-add-ons>summary span{display:grid;gap:2px}.optional-taste-settings>summary strong,.listener-add-ons>summary strong{font-size:.78rem}.optional-taste-settings>summary small,.listener-add-ons>summary small{color:var(--muted);font-size:.65rem}.optional-taste-settings>summary b,.listener-add-ons>summary b{color:var(--gold-light);font-size:.65rem}.optional-taste-body{padding:0 13px 13px;border-top:1px solid rgba(255,255,255,.08)}
.listener-dashboard{display:grid;gap:0}.listener-action-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:14px 0 0;padding:5px;border:1px solid var(--line);border-radius:14px;background:rgba(4,6,18,.46)}.listener-action-tabs button{padding:10px;border:0;border-radius:10px;color:var(--muted);background:transparent;font-size:.75rem;font-weight:900;cursor:pointer}.listener-action-tabs button.active{color:#06140b;background:var(--gold-light)}
.listener-add-ons{width:min(100%,610px);margin:14px 0 0;border:1px solid var(--line);border-radius:16px;background:rgba(4,6,18,.34);overflow:hidden}.listener-add-ons[open]>summary{border-bottom:1px solid var(--line)}.listener-add-ons-body{padding:14px}.listener-add-ons .celebration-choice{width:100%;margin:0}.listener-add-ons .spotify-button{width:100%;margin:0}.listener-add-ons .spotify-divider{width:100%}
.celebration-choice { position:relative; width:min(100%,610px); margin:0 0 18px; padding:15px; border:1px solid rgba(242,212,139,.2); border-radius:16px; background:linear-gradient(135deg,rgba(217,170,72,.09),rgba(4,6,18,.36)); }
.celebration-heading { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:8px; }
.celebration-heading div { display:grid; gap:3px; }.celebration-heading span { color:var(--gold-light); font-size:.62rem; font-weight:900; letter-spacing:.14em; }.celebration-heading strong { font-size:.95rem; }.celebration-heading small { max-width:180px; color:var(--muted); font-size:.7rem; line-height:1.35; text-align:right; }
.celebration-choice label { display:block; margin:10px 0 6px; color:var(--muted); font-size:.72rem; }
.celebration-choice select,.celebration-choice input { margin:0; padding:11px 12px; }
.celebration-name-fields { display:grid; gap:7px; }.celebration-name-fields>small { color:var(--muted); font-size:.68rem; line-height:1.35; }
.celebration-submit { margin-top:4px; padding:11px 14px; border:0; border-radius:999px; color:#06140b; background:var(--spotify); font-weight:900; cursor:pointer; }
.celebration-submit:disabled { opacity:.55; cursor:wait; }
.join-card>.spotify-button { position:relative; width:min(100%,610px); min-height:56px; margin:0; font-size:1rem; }
.join-progress, .join-success { position:relative; width:min(100%,610px); min-height:68px; display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px; }
.join-progress { border:1px solid rgba(242,212,139,.2); background:rgba(4,6,18,.48); }
.sync-spinner { flex:none; width:31px; height:31px; border:3px solid rgba(242,212,139,.16); border-top-color:var(--gold-light); border-radius:50%; animation:sync-spin .8s linear infinite; }
.join-progress strong, .join-success strong { display:block; margin-bottom:3px; }
.join-progress small { color:var(--muted); }
.join-success { border:1px solid rgba(30,215,96,.28); background:linear-gradient(135deg,rgba(30,215,96,.14),rgba(30,215,96,.05)); }
.success-check { flex:none; width:39px; height:39px; display:grid; place-items:center; border-radius:50%; color:#07150c; background:var(--spotify); font-size:1.25rem; font-weight:900; box-shadow:0 0 24px rgba(30,215,96,.25); }
.join-success p { margin:0; color:#b7c8bc; font-size:.86rem; }
.guest-live-status{position:relative;width:min(100%,610px);display:grid;grid-template-columns:82px minmax(0,1fr);gap:14px;align-items:center;margin:14px 0 0;padding:13px;border:1px solid rgba(68,243,154,.24);border-radius:17px;background:linear-gradient(135deg,rgba(68,243,154,.1),rgba(4,6,18,.48))}.guest-now-art{width:82px;height:82px;display:grid;place-items:center;overflow:hidden;border-radius:12px;color:var(--gold-light);background:radial-gradient(circle at 35% 30%,#394aa0,#131732 56%,#070915);font-size:1.8rem;font-weight:900}.guest-now-art img{width:100%;height:100%;object-fit:cover}.guest-now-copy{min-width:0;display:grid;gap:3px}.guest-live-label{display:flex;align-items:center;gap:6px;color:#7bf5a6;font-size:.58rem;font-weight:900;letter-spacing:.13em}.guest-live-label i{width:6px;height:6px;border-radius:50%;background:#44f39a;box-shadow:0 0 10px #44f39a}.guest-now-copy>strong,.guest-now-copy>span:not(.guest-live-label){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.guest-now-copy>strong{font-size:1rem}.guest-now-copy>span{color:var(--muted);font-size:.76rem}.guest-now-copy small{color:var(--muted);font-size:.66rem}.guest-progress{height:3px;margin:6px 0 4px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.11)}.guest-progress span{display:block;width:0;height:100%;border-radius:inherit;background:#44f39a;transition:width .4s ease}
.crowd-reaction-panel{position:relative;width:min(100%,610px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;margin:14px 0 0;padding:15px;border:1px solid rgba(143,112,255,.26);border-radius:17px;background:linear-gradient(135deg,rgba(111,73,235,.14),rgba(4,6,18,.48))}.crowd-reaction-panel>div:first-child{display:grid;gap:3px}.crowd-reaction-panel span{color:#c5b6ff;font-size:.58rem;font-weight:900;letter-spacing:.14em}.crowd-reaction-panel strong{font-size:.95rem}.crowd-reaction-panel small{color:var(--muted);font-size:.66rem;line-height:1.35}.crowd-reaction-buttons{display:flex;gap:7px}.crowd-reaction-buttons button{width:45px;height:45px;border:1px solid rgba(255,255,255,.12);border-radius:13px;color:#fff;background:rgba(255,255,255,.07);font-size:1.35rem;cursor:pointer;transition:transform .16s ease,background .16s ease}.crowd-reaction-buttons button:hover,.crowd-reaction-buttons button:focus-visible{transform:translateY(-2px) scale(1.04);background:rgba(255,255,255,.14)}.crowd-reaction-buttons button:disabled{opacity:.42;cursor:not-allowed;transform:none}
.song-request-panel{position:relative;width:min(100%,610px);margin:14px 0 0;padding:16px;border:1px solid rgba(75,201,255,.28);border-radius:17px;background:linear-gradient(145deg,rgba(37,154,214,.13),rgba(4,6,18,.48))}.song-request-heading{display:flex;align-items:end;justify-content:space-between;gap:14px}.song-request-heading div{display:grid;gap:3px}.song-request-heading span{color:#88ddff;font-size:.58rem;font-weight:900;letter-spacing:.14em}.song-request-heading strong{font-size:.95rem}.song-request-heading small,.song-request-panel>p,.song-request-status{color:var(--muted);font-size:.68rem;line-height:1.45}.song-request-panel>p{margin:8px 0 12px}.song-request-panel form{display:grid;grid-template-columns:1fr;gap:6px}.song-request-panel label{color:var(--muted);font-size:.7rem}.song-request-panel input{margin:0;padding:11px 12px}.song-request-panel .field-error{margin:2px 0}.song-request-panel .primary-button{margin-top:5px;background:#88ddff;color:#06111a}.song-request-status{margin:10px 0 0!important}.song-request-panel input:disabled{opacity:.72}.song-request-panel button:disabled{cursor:not-allowed;opacity:.72}
.song-vote-panel{position:relative;width:min(100%,610px);margin:14px 0 0;padding:15px;border:1px solid rgba(242,212,139,.2);border-radius:17px;background:linear-gradient(145deg,rgba(217,170,72,.09),rgba(4,6,18,.46))}.song-vote-heading{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:10px}.song-vote-heading div{display:grid;gap:3px}.song-vote-heading span{color:var(--gold-light);font-size:.58rem;font-weight:900;letter-spacing:.14em}.song-vote-heading strong{font-size:.95rem}.song-vote-heading small{color:var(--muted);font-size:.68rem}.song-vote-list{display:grid;gap:7px;max-height:310px;overflow:auto}.song-vote-list>p{margin:4px 0;color:var(--muted);font-size:.76rem}.song-vote-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding:8px;border:1px solid transparent;border-radius:12px;color:var(--ink);background:rgba(4,6,18,.5);text-align:left;cursor:pointer}.song-vote-row:hover{border-color:var(--line)}.song-vote-row:disabled{opacity:.48;cursor:not-allowed}.song-vote-row.selected{border-color:rgba(30,215,96,.35);background:rgba(30,215,96,.09)}.song-vote-cover{width:42px;height:42px;display:grid;place-items:center;overflow:hidden;border-radius:8px;color:var(--gold-light);background:#242842;font-weight:900}.song-vote-cover img{width:100%;height:100%;object-fit:cover}.song-vote-copy{min-width:0}.song-vote-copy strong,.song-vote-copy span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-vote-copy span{margin-top:2px;color:var(--muted);font-size:.7rem}.song-vote-count{min-width:66px;padding:7px 9px;border-radius:999px;color:var(--muted);background:rgba(255,255,255,.06);font-size:.7rem;font-weight:850;text-align:center}.song-vote-row.selected .song-vote-count{color:#06140b;background:var(--spotify)}
.inline-form { display:grid; grid-template-columns:1fr auto; gap:8px; }
.inline-form input { margin:0; text-transform:uppercase; letter-spacing:.15em; }
.inline-form .primary-button { width:auto; min-width:92px; margin:0; }
.checkin-explainer { padding:clamp(26px,3vw,38px); background:linear-gradient(155deg,rgba(18,21,48,.82),rgba(9,12,31,.75)); }
.checkin-explainer h2 { margin:7px 0 28px; font-size:clamp(1.75rem,3vw,2.7rem); line-height:1.02; letter-spacing:-.04em; }
.checkin-explainer ol { display:grid; gap:7px; margin:0; padding:0; list-style:none; }
.checkin-explainer li { display:grid; grid-template-columns:45px 1fr; gap:12px; align-items:start; padding:15px 0; border-top:1px solid var(--line); }
.checkin-explainer li>span { color:var(--gold); font-size:.7rem; font-weight:900; letter-spacing:.12em; }
.checkin-explainer li strong { display:block; margin-bottom:4px; }
.checkin-explainer li p { margin:0; color:var(--muted); font-size:.84rem; line-height:1.45; }
.privacy-note { display:grid; gap:4px; margin-top:22px; padding:15px; border:1px solid rgba(30,215,96,.17); border-radius:14px; background:rgba(30,215,96,.06); }
.privacy-note strong { color:#7bf5a6; font-size:.78rem; }.privacy-note span { color:var(--muted); font-size:.76rem; line-height:1.4; }
.listener-options { margin-top:18px; border:1px solid var(--line); border-radius:18px; background:rgba(4,6,18,.35); }
.listener-options>summary { padding:15px 18px; cursor:pointer; color:var(--muted); font-size:.78rem; font-weight:800; }
.tools-grid { padding:0 16px 16px; }.tools-grid .card { min-height:250px; box-shadow:none; }
.listener-library-tool { max-width:580px; }
@keyframes sync-spin { to { transform:rotate(360deg); } }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card, .library-panel, .session-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 50px rgba(0,0,0,.22);
}
.card { padding: 24px; min-height: 280px; display: flex; flex-direction: column; }
.card h2 { margin-bottom: 10px; }
.card p { color: var(--muted); line-height: 1.55; }
.step { align-self: flex-end; color: var(--gold); font-size: .72rem; font-weight: 800; border: 1px solid var(--line); border-radius: 99px; padding: 6px 9px; }
.spotify-button, .primary-button, .code-button {
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.spotify-button:hover, .primary-button:hover, .code-button:hover { transform: translateY(-1px); }
.spotify-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: auto;
  padding: 14px 20px;
  color: #041108;
  background: var(--spotify);
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(30, 215, 96, .18);
}
.spotify-mark { display: inline-flex; flex-direction: column; gap: 2px; width: 24px; height: 24px; justify-content: center; border-radius: 50%; background: #07150c; padding: 5px; }
.spotify-mark i { display: block; height: 2px; border-radius: 99px; background: var(--spotify); transform: rotate(7deg); }
.spotify-mark i:nth-child(2) { width: 88%; }
.spotify-mark i:nth-child(3) { width: 70%; }
.primary-button { width: 100%; margin-top: auto; padding: 13px 18px; color: #160f02; background: linear-gradient(135deg, var(--gold-light), var(--gold)); }
.primary-button:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.text-button { border: 0; background: none; color: var(--muted); margin-top: 14px; cursor: pointer; text-decoration: underline; }
form { display: flex; flex-direction: column; flex: 1; }
label { font-size: .8rem; color: var(--gold-light); margin: 10px 0 7px; }
input, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  color: var(--ink);
  background: rgba(5, 7, 20, .55);
  outline: none;
  margin-bottom: 14px;
}
input:focus, select:focus { border-color: rgba(242, 212, 139, .6); box-shadow: 0 0 0 3px rgba(217, 170, 72, .12); }
input[aria-invalid="true"] { border-color:var(--danger); box-shadow:0 0 0 3px rgba(255,140,140,.12); }
.field-error { margin:-3px 0 10px; padding:9px 11px; border:1px solid rgba(255,140,140,.3); border-radius:10px; color:#ffd0d0; background:rgba(255,140,140,.1); font-size:.72rem; font-weight:750; line-height:1.4; }
.notice { padding: 14px 16px; margin-bottom: 18px; border-radius: 12px; background: rgba(217, 170, 72, .14); border: 1px solid var(--line); }
.notice.error { color: var(--danger); border-color: rgba(255, 140, 140, .25); background: rgba(255, 140, 140, .08); }
.profile { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.profile img, .avatar-placeholder { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; background: #232744; display: grid; place-items: center; font-weight: 800; }
.profile strong { display: block; font-size: .9rem; }
.profile span { color: var(--muted); font-size: .74rem; }
.library-panel, .session-panel { margin-top: 18px; padding: 24px; }
.section-title, .session-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.section-title input { width: min(320px, 100%); margin: 0; }
.track-list { display: grid; gap: 8px; margin-top: 18px; }
.track-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(4, 6, 18, .48); border: 1px solid transparent; }
.track-row:hover { border-color: var(--line); }
.track-row img, .cover-placeholder { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; background: #242842; }
.track-row strong, .track-row span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-row span { color: var(--muted); font-size: .83rem; margin-top: 3px; }
.track-row a { color: var(--gold-light); font-size: .78rem; text-decoration: none; }
.compact { max-height: 380px; overflow: auto; }
.compact .track-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
.compact .track-row img, .compact .cover-placeholder { width: 38px; height: 38px; }
.stats { display: flex; gap: 12px; margin: 22px 0; }
.stats div { min-width: 150px; padding: 16px; border-radius: 14px; background: rgba(4, 6, 18, .52); }
.stats strong { display: block; font-size: 2rem; color: var(--gold-light); }
.stats span { color: var(--muted); font-size: .78rem; }
.session-columns { display: grid; grid-template-columns: .8fr 1.2fr; gap: 22px; }
.attendees { display: grid; gap: 8px; }
.attendee { display: flex; gap: 10px; align-items: center; padding: 10px; background: rgba(4,6,18,.45); border-radius: 12px; }
.attendee small { display: block; color: var(--muted); margin-top: 2px; }
.code-button { min-width: 154px; padding: 10px 15px; color: var(--ink); background: rgba(4,6,18,.55); border: 1px solid var(--line); }
.code-button span, .code-button small { display: block; }
.code-button span { color: var(--gold-light); letter-spacing: .13em; font-size: 1rem; }
.code-button small { color: var(--muted); margin-top: 2px; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
footer { color: #77798b; font-size: .72rem; line-height: 1.5; margin: 24px auto 0; max-width: 780px; text-align: center; }

@media (max-width: 760px) {
  .shell { width: min(100% - 22px, 1180px); padding-top: 28px; }
  .hero { align-items: flex-start; flex-direction: column; }
  .checkin-flow { grid-template-columns:1fr; }
  .join-card { min-height:0; padding:24px 20px 27px; }
  .flow-header { align-items:flex-start;margin-bottom:34px; }.flow-steps{gap:4px}.flow-steps span{min-width:25px;grid-template-columns:25px}.flow-steps span small{display:none}.flow-steps i{width:12px}
  .join-card h2 { font-size:clamp(2.55rem,13vw,4.2rem); }
  .venue-invite { grid-template-columns:minmax(0,1fr) auto; }.venue-invite span{grid-column:1/-1}.venue-invite small{display:none}.venue-invite strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.venue-invite .text-button{grid-column:2;grid-row:2}
  .venue-code-heading{align-items:start;flex-direction:column;gap:5px}.venue-code-heading small{max-width:none;text-align:left}.venue-code-controls{grid-template-columns:1fr}.venue-code-controls .primary-button{width:100%}
  .guest-live-status{grid-template-columns:64px minmax(0,1fr)}.guest-now-art{width:64px;height:64px}.crowd-reaction-panel{grid-template-columns:1fr}.crowd-reaction-buttons{justify-content:space-between}.crowd-reaction-buttons button{flex:1}.song-request-heading,.song-vote-heading{align-items:start;flex-direction:column;gap:4px}.song-request-panel form{grid-template-columns:1fr}
  .quick-join-heading,.celebration-heading { align-items:start; flex-direction:column; gap:5px; }.quick-join-heading small,.celebration-heading small{text-align:left;max-width:none}
  .checkin-explainer { padding:24px 20px; }
  .inline-form { grid-template-columns:1fr; }.inline-form .primary-button{width:100%}
  .grid { grid-template-columns: 1fr; }
  .session-columns { grid-template-columns: 1fr; }
  .section-title, .session-heading { align-items: stretch; flex-direction: column; }
  .section-title input { width: 100%; }
  .stats { display: grid; grid-template-columns: 1fr 1fr; }
  .stats div { min-width: 0; }
  .track-row { grid-template-columns: 42px minmax(0,1fr); }
  .track-row img, .cover-placeholder { width: 42px; height: 42px; }
  .track-row a { display: none; }
}

.guest-now-source{width:max-content;color:#7bf5a6;font-size:.66rem;font-weight:850;text-decoration:none}
.guest-now-source:hover{text-decoration:underline}
.song-request-panel input,.song-request-panel select{margin:0;padding:11px 12px}
.song-request-match{display:grid;grid-template-columns:58px minmax(0,1fr);gap:11px;align-items:center;margin:3px 0 7px;padding:9px;border:1px solid rgba(136,221,255,.22);border-radius:13px;background:rgba(7,13,31,.7)}.song-request-match-art{display:grid;width:58px;height:58px;place-items:center;overflow:hidden;border-radius:10px;background:linear-gradient(145deg,#26326b,#080b20);color:#f6d77d;font-weight:900}.song-request-match-art img{width:100%;height:100%;object-fit:cover}.song-request-match-copy{display:grid;min-width:0;gap:2px}.song-request-match-copy small{color:#88ddff;font-size:.54rem;font-weight:900;letter-spacing:.12em}.song-request-match-copy strong,.song-request-match-copy>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-request-match-copy>span{color:var(--muted);font-size:.7rem}.song-request-match-copy a{width:max-content;color:#1ed760;font-size:.65rem;font-weight:900;text-decoration:none}