: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 { 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; }
.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; }
.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; }
.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 { width:25px; height:25px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:#74788f; background:rgba(4,6,18,.5); font-size:.66rem; font-weight:900; transition:.25s ease; }
.flow-steps i { width:23px; height:1px; background:var(--line); }
.flow-steps span.active { 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:#07150c; border-color:var(--gold-light); background:var(--gold-light); }
.venue-invite { display:grid; grid-template-columns:auto 1fr 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; }
.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; }
.manual-code { width:min(100%,610px); margin-top:22px; color:var(--muted); }
.manual-code summary { width:max-content; cursor:pointer; font-size:.78rem; text-decoration:underline; text-underline-offset:3px; }
.manual-code form { margin-top:10px; }
.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 {
  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 { border-color: rgba(242, 212, 139, .6); box-shadow: 0 0 0 3px rgba(217, 170, 72, .12); }
.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 { margin-bottom:34px; }
  .join-card h2 { font-size:clamp(2.55rem,13vw,4.2rem); }
  .venue-invite { grid-template-columns:1fr auto; }.venue-invite span{grid-column:1/-1}.venue-invite small{display: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; }
}